강의

멘토링

커뮤니티

BEST
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

こんにちは
です。

26,076

受講生

1,565

受講レビュー

658

回答

4.9

講座評価

18

講座

안녕하세요.

코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,

인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여

설명하고자 할 때는 최대한 쉽게,

알려드리고자 할 때는 최대한 알차게 설명드립니다.

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

감사합니다.

📹짐코딩 유튜브 채널 운영 | 구독자 25,000+

💻 짐코딩 클럽 | gymcoding.co

🔗 GitHub: https://github.com/gymcoding

🧑‍💻 인스타그램 @gymcoding

📨 이메일 bruce.lean17@gmail.com

カリキュラム

全体

36件 ∙ (4時間 30分)

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

受講レビュー

全体

28件

5.0

28件の受講レビュー

  • sanggusseu2599님의 프로필 이미지
    sanggusseu2599

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    Đó là Corinne, và tôi cảm thấy có một bức tường trong bài giảng. bức tường hoàn chỉnh Trước khi tham gia khóa học, tôi đã xem trang web hoàn chỉnh và tự hỏi làm thế nào để tạo ra nó. Nhưng bây giờ tôi bướng bỉnh nên tôi tự tin rằng mình có thể tạo ra bất kỳ trang web nào. (Tất nhiên là sẽ mất một thời gian!) Điều này là do bài giảng dạy cách chia các vấn đề lớn thành các vấn đề nhỏ hơn và giải quyết từng vấn đề một. Thông qua quá trình này, sự tự tin của tôi ngày càng tăng và bây giờ tôi nghĩ mình có thể tạo bất kỳ trang web nào. Tôi học được rằng ngay cả những vấn đề phức tạp cũng có thể được giải quyết từng bước thông qua sự giải thích và thực hành có hệ thống của người hướng dẫn. Tôi thường không viết đánh giá dài, nhưng tôi nghĩ một số người có thể lo ngại vì không có nhiều đánh giá nên tôi đã để lại đánh giá dài hơn một chút. Bây giờ đang là mùa hè nên muỗi rất nhiều, nghe giảng thì vỗ tay hào hứng, rồi chuẩn bị đi bắt muỗi.

    • gymcoding
      知識共有者

      Ôi~! 👏👏👏👏👏 Khi đọc phần đánh giá khóa học, tôi không thể không thắc mắc 😁 Trong bài giảng này, bạn sẽ tạo một trang web nhỏ gọi là portfolio. Nói rộng ra, mục đích là dạy cho những người mới bắt đầu cách chia các vấn đề lớn thành từng phần nhỏ hơn và giải quyết từng vấn đề một, đồng thời trao cho họ “sức mạnh để tự mình giải quyết” trong khi giải quyết chúng. Tôi rất cảm động bạn biết đấy 🥹 Cảm ơn Anh ấy có kỹ năng ăn nói xuất sắc và sẽ làm tốt ở bất kỳ vị trí nào. Chúc may mắn 👍

  • lee3088125118님의 프로필 이미지
    lee3088125118

    受講レビュー 9

    平均評価 5.0

    5

    61% 受講後に作成

    • 12345678님의 프로필 이미지
      12345678

      受講レビュー 43

      平均評価 4.0

      5

      33% 受講後に作成

    • mactoy1116님의 프로필 이미지
      mactoy1116

      受講レビュー 1

      平均評価 5.0

      5

      31% 受講後に作成

      • gymcoding
        知識共有者

        Cảm ơn bạn~! 👍

    • tkaqkr1231706님의 프로필 이미지
      tkaqkr1231706

      受講レビュー 14

      平均評価 5.0

      5

      100% 受講後に作成

      Trong quá trình thực hiện dự án, khi gặp khó khăn trong việc bố trí màn hình, đây đúng là khóa học tôi đang tìm, và tôi đã học được nội dung tôi mong muốn một cách nhanh chóng! Nội dung khóa học rất đầy đủ và rất hữu ích! Mong rằng trong tương lai sẽ có thêm nhiều khóa học hay. Cảm ơn.

      • gymcoding
        知識共有者

        Xin chào! Rất cảm ơn bạn vì đánh giá quý báu về khóa học~! 🎉 Trong quá trình làm dự án, bạn gặp khó khăn trong việc bố trí màn hình, thật may mắn quá vì khóa học của chúng tôi lại đúng nội dung bạn mong muốn! Thật đáng công sức cấu trúc khóa học để bạn có thể học nhanh chóng. Giờ bạn đã hoàn thành cả trang web portfolio, trình độ của bạn chắc chắn đã được nâng cấp lên một bậc rồi! 💻 Sắp tới, chúng tôi sẽ lại gặp bạn với những khóa học hay giúp ích cho công việc thực tế. Chân thành cảm ơn bạn đã hoàn thành khóa học! 🚀 Xin cảm ơn!

    ¥10,950

    gymcodingの他の講座

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

    似ている講座

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