강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Front-end

ポートフォリオ サイトを作成して公開まで!: Web 開発入門活用編

HTML&CSS、JavaScript を学んだら、それらを利用して自分でポートフォリオ サイトを作成し、公開してみましょう。実際に使ってみると、私たちのスキルを向上させるのに大いに役立ちます。

  • gymcoding
포트폴리오
포트폴리오홈페이지만들기
HTML/CSS
JavaScript
github-pages
Portfolio

学習した受講者のレビュー

こんなことが学べます

  • Web ページを HTML 構造に分割して考える方法

  • HTML 要素を左右または中央に配置して整列する方法

  • クラス名付け規則、CSS初期化、CSS変数の実用的な使用方法

  • メディア クエリを使用してレスポンシブ Web を作成する方法

  • SEO、SNS 共有プレビュー、Github Pages の公開方法

ポートフォリオサイトの作成

こんにちは!今回の講義ポートフォリオサイトを作る講義です。

  • HTML構造を効果的に分割する方法を学びます!

  • CSSを活用して、要素を左右に中央に配置して配置する方法を学びます。

  • CSS変数、レスポンシブWeb、ライブラリなどの実務における活用方法について詳しく説明します!


スクリーンショット2024-04-29午前9.55.32

画像をクリックするとポートフォリオサイトに移動できます。

講義を聞いたら、このような結果を作ることができます。

アニメーションとタイピング効果

アニメーション、タイピング効果などライブラリを活用した様々な結果物を作ることができます。

レスポンシブウェブサイト

モバイル、タブレット、デスクトップなど、さまざまな画面に最適化されたレスポンシブWebを作成できます。

SEO、SNS共有

OG Tagを活用してカカオトークなどSNS共有プレビューを作成できます。

Github Pagesのデプロイ

Github Pagesを活用して、私たちが作るホームページを本当に簡単に配布できます。

  • HTML構造をどのように分割するかを具体的に練習します。


  • CSS Position、Flexbox、Gridを活用して要素をどのように配置するかを具体的に練習します。

学習内容

HTML&CSS、JavaScriptの基礎を身につけたら、今、ちゃんと活用する方法を実習する番です。

開発環境の設定

本格的な授業のための開発環境、プロジェクト生成、フォント、アイコンの設定を一緒にします。

HTMLマークアップ

難しいWebページでも構造を細かく分けて考えると簡単に解決できます。

CSS Style

受講生が主に困難な部分は、HTML要素を配置してソートすることです。

レスポンシブウェブ

Breakpointの概念から始めて、モバイル、タブレット、デスクトップ用に最適化された画面を整理する方法まで詳しく学びます。

JavaScript&ライブラリの活用

さまざまなライブラリを活用して、アニメーション、テキストタイピングなど素晴らしい効果を適用したホームページを作ってみます。

SEO、SNS共有プレビュー、配信

検索エンジン最適化(SEO)でOGタグを使用してSNSで共有するときにプレビューを設定する方法を学び、ホームページを直接展開するためにGithub Pagesを利用します。

Inflearn受講後のイベント開催中🎉

こんにちは🙂ポートフォリオサイト作り、配布まで」講義受講後期イベントを進めています。
該当講義を受講してから丁寧に受講後期を作成していただくと、講義クーポン1個をいたします。
(先着順20名、申請リンクはカリキュラムに含まれています)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML 要素の配置と整列に困っている方!

  • 自分だけのホームページを作りたい方!

  • HTML、CSS、JSまで学んだが、活用方法がよくわからない方!

前提知識、
必要でしょうか?

  • HTML

  • CSS

こんにちは
です。

24,777

受講生

1,385

受講レビュー

631

回答

4.9

講座評価

17

講座

안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.

항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.
감사합니다.

📨 이메일 bruce.lean17@gmail.com
🏋️‍♀️ 헬스타그램 @helinlee.gram
🧑‍💻 코딩스타그램 @gymcoding

カリキュラム

全体

36件 ∙ (4時間 30分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

26件

5.0

26件の受講レビュー

  • sanggusseu2599님의 프로필 이미지
    sanggusseu2599

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    I'm Corinne, but I feel like I'm at a wall in the lecture. Perfect. Before taking the class, I saw the completed site and wondered how I could make it. But now that I'm persistent, I feel confident that I can make any site. (Of course, it'll take some time!) That's because the lecture teaches you how to break down big problems into smaller ones and solve them one by one. Through this process, my confidence has grown and I feel like I can make any site now. I learned that even complex problems can be solved step by step through the instructor's systematic explanations and practice. I don't usually write long reviews, but since there aren't many reviews, I thought there might be people who are worried, so I wrote a little longer. It's summer now, so there are a lot of mosquitoes, so please prepare to catch mosquitoes after clapping your hands while listening to the lecture.

    • gymcoding
      知識共有者

      Wow~! 👏👏👏👏👏 While reading the course reviews, I found myself smiling 😁 In this course, the goal was to create a small site called a portfolio, but on a larger scale, to teach those who are just starting out how to break down big problems into smaller ones and solve them one by one, and to give them the "power to do it themselves" by solving them. I'm so touched that you understand 🥹 Thank you. Since you're also excellent at speaking, you'll do well in any position. You're good 👍

  • 12345678님의 프로필 이미지
    12345678

    受講レビュー 35

    平均評価 3.8

    5

    33% 受講後に作成

  • mactoy1116님의 프로필 이미지
    mactoy1116

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

  • tkaqkr1231706님의 프로필 이미지
    tkaqkr1231706

    受講レビュー 12

    平均評価 5.0

    5

    100% 受講後に作成

    While working on the project and struggling with screen layout, this was exactly the lecture I wanted, and I was able to quickly learn the content I was looking for! The lecture content was substantial and very helpful! I hope you will offer many good lectures in the future as well. Thank you.

    • gymcoding
      知識共有者

      Hello! Thank you so much for your valuable course review~! 🎉 You mentioned experiencing difficulty with screen layout while working on projects, so it's a great relief that our lecture was exactly what you were looking for! It's rewarding to hear that the structure designed for fast learning was effective. Now that you've even completed your portfolio site, your skills must have been upgraded significantly! 💻 We will continue to offer helpful lectures for practical work in the future. Thank you sincerely for completing the course! 🚀 Thank you!

  • jeong46966001님의 프로필 이미지
    jeong46966001

    受講レビュー 1

    平均評価 5.0

    5

    50% 受講後に作成

    I bought this because I had to make a website urgently. It's convenient because you can just follow the steps to build it. Good!!!!!!!!

    • gymcoding
      知識共有者

      Hello! Thank you so much for your valuable course review. 😊 We are truly glad our lecture was helpful for you while you were urgently building your website! If you have any additional questions or difficulties as you proceed, please feel free to ask anytime. We will continue to provide better lectures in the future. Thank you! 👍

¥10,384

gymcodingの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!