강의

멘토링

로드맵

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,781

受講生

1,387

受講レビュー

631

回答

4.9

講座評価

17

講座

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

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

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

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

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

カリキュラム

全体

36件 ∙ (4時間 30分)

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

受講レビュー

全体

26件

5.0

26件の受講レビュー

  • 상은쓰님의 프로필 이미지
    상은쓰

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    코린인데 강의에서 벽이 느껴지네요 완.벽 수강 전에 완성된 사이트를 보고 이걸 어떻게 만드나 싶었습니다. 하지만 완강한 지금은 어떤 사이트든 만들 수 있겠다는 자신감이 생겼습니다. (물론 시간은 조금 걸리겠지만요!) 왜냐하면 강의에서 큰 문제를 작은 문제들로 나누어 하나씩 해결하는 방식을 가르쳐 주시기 때문입니다. 이런 과정을 통해 자신감이 점점 커져갔고, 이제는 어떤 사이트든 만들 수 있겠다는 생각이 듭니다. 강사님의 체계적인 설명과 실습을 통해 복잡한 문제도 차근차근 해결해 나갈 수 있음을 배웠습니다. 원래 리뷰 길게 잘 안 쓰는데 수강평이 별로 없어서 고민하시는 분들이 있을 것 같아서 쪼끔 길게 남겨봤습니다. 이제 여름이라 모기도 많은데 강의 들으면서 감동의 박수 치다가 모기 잡을 준비하십쇼

    • 짐코딩
      知識共有者

      와우~! 👏👏👏👏👏 수강평을 읽으면서 저도 모르게 입이 귀에 걸렸네요 😁 해당 강의에서 작게는 포트폴리오라는 사이트를 만드는 것이지만 크게는 이제 시작하시는 분들에게 큰 문제를 작게 쪼개어 하나씩 해결해 나가는 방법과 이를 해결하며 "스스로 할 수 있는 힘"을 실어 드리는 것이 목적이 있었는데요. 알아주시니 감개무량합니당 🥹 감사합니다. 언어 화법도 뛰어나셔서 어떤 포지션이든 잘하실 거예요. 굿입니당 👍

  • JH님의 프로필 이미지
    JH

    受講レビュー 35

    平均評価 3.8

    5

    33% 受講後に作成

    • 짐코딩
      知識共有者

      감사합니다~! 👍

  • mactoy님의 프로필 이미지
    mactoy

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

    • 짐코딩
      知識共有者

      감사합니다~! 👍

  • JD님의 프로필 이미지
    JD

    受講レビュー 12

    平均評価 5.0

    5

    100% 受講後に作成

    프로젝트 진행 중 화면배치에 어려움을 느끼던 중에 딱 원하던 강의였는데, 원하던 내용을 빠르게 학습할 수 있었습니다! 강의 내용도 알차고, 도움이 많이 됬습니다! 앞으로도 좋은 강의 많이 부탁드리겠습니다. 감사합니다.

    • 짐코딩
      知識共有者

      안녕하세요! 소중한 수강평 정말 감사드립니다~! 🎉 프로젝트 진행 중 화면배치에 어려움을 느끼고 계셨는데, 저희 강의가 딱 원하시던 내용이었다니 정말 다행이에요! 빠르게 학습하실 수 있도록 구성한 보람이 있네요. 이제 포트폴리오 사이트까지 완성하셨으니 실력도 한층 업그레이드되셨을 거예요! 💻 앞으로도 실무에 도움되는 좋은 강의로 찾아뵙겠습니다. 완강해주셔서 진심으로 감사드립니다! 🚀 감사합니다!

  • 강유정님의 프로필 이미지
    강유정

    受講レビュー 1

    平均評価 5.0

    5

    50% 受講後に作成

    급하게 홈페이지를 만들일이 있어서 구매했습니다. 순서대로 따라 만들면 되서 편리 합니다 굿!!!!!!!

    • 짐코딩
      知識共有者

      안녕하세요! 소중한 수강평 정말 감사드립니다. 😊 급하게 홈페이지를 만드시는 상황에서 저희 강의가 도움이 되었다니 정말 다행이이요! 혹시 진행하시면서 추가 질문이나 어려운 부분이 있으시면 언제든지 질문 남겨주세요. 앞으로도 더 좋은 강의로 보답하겠습니다. 감사합니다! 👍

¥10,354

gymcodingの他の講座

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

似ている講座

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