강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Create and publish a portfolio site! : Practical application of web development introduction

If you have learned HTML&CSS and JavaScript, try creating and deploying your own portfolio site using them. Actually using them will greatly help improve your skills.

(5.0) 28 reviews

203 learners

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

Reviews from Early Learners

What you will gain after the course

  • How to break down and think about a web page in HTML terms

  • How to position and align HTML elements left, right, or center

  • Class naming rules, CSS initialization, and practical use of CSS variables

  • How to create a responsive web using media queries

  • How to SEO, Preview SNS Sharing, and Deploy Github Pages

Creating a portfolio site

Hello! This course is about creating a portfolio website. If you've learned HTML, CSS, and JavaScript, why not try creating and deploying your own portfolio website using them ?

  • Learn how to effectively break down your HTML structure !

  • Learn how to position and align elements left, right, or center using CSS!

  • We'll cover in detail how to use CSS variables, responsive web, libraries, and more in practice !


Screenshot 2024-04-29 9:55.32 AM

Clicking on the image will take you to the portfolio site.

After taking the lecture, you will be able to create results like this.

Animation and typing effects

You can create a variety of results using the library, including animations and typing effects.

responsive website

You can create responsive web pages optimized for various screens, including mobile, tablet, and desktop.

SEO, SNS sharing

You can use OG Tags to create previews for sharing on social media platforms such as KakaoTalk.

Github Pages deployment

Github Pages makes it really easy to deploy the website we create.

  • We will practice specifically how to divide the HTML structure .


  • We will learn specifically how to position elements using CSS Position, Flexbox, and Grid.

Learning Content

Now that you've learned the basics of HTML, CSS, and JavaScript, it's time to practice how to use them properly .

Setting up the development environment

We will cover the development environment, project creation, and font and icon settings for full-fledged classes.

HTML Markup

Even complex web pages can be easily solved by breaking down their structure into smaller pieces. You'll practice breaking down large problems into smaller pieces and solving them one by one.

CSS Style

The most common area students struggle with is positioning and aligning HTML elements. In this section, we'll practice using Position, Flexbox, and Grid.

Responsive web

Starting with the concept of breakpoints, we'll delve into how to configure screens optimized for mobile, tablet, and desktop.

JavaScript & Library Utilization

You will create a homepage with cool effects such as animation and text typing by utilizing various libraries.

SEO, SNS sharing preview, distribution

Learn how to set up previews for sharing on social media using OG tags along with search engine optimization (SEO), and leverage Github Pages to deploy your website directly.

Inflearn Course Review Event in Progress 🎉

Hello 🙂 We are holding a review event for the course “ Creating and Distributing a Portfolio Site ”.
If you take this course and write a detailed review , you will receive one course coupon .
(First 20 people, application link included in the curriculum)

Recommended for
these people

Who is this course right for?

  • Are you having trouble arranging and aligning HTML elements?

  • If you want to create your own homepage!

  • If you have learned HTML, CSS, and JS but don't know how to use them!

Need to know before starting?

  • HTML

  • CSS

Hello
This is

26,076

Learners

1,565

Reviews

658

Answers

4.9

Rating

18

Courses

안녕하세요.

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

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

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

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

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

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

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

감사합니다.

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

💻 짐코딩 클럽 | gymcoding.co

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

🧑‍💻 인스타그램 @gymcoding

📨 이메일 bruce.lean17@gmail.com

Curriculum

All

36 lectures ∙ (4hr 30min)

Published: 
Last updated: 

Reviews

All

28 reviews

5.0

28 reviews

  • sanggusseu2599님의 프로필 이미지
    sanggusseu2599

    Reviews 7

    Average Rating 5.0

    5

    100% enrolled

    コリンですが、講義で壁が感じられます。 Wan.Wall 受講前に完成したサイトを見て、これをどのように作りたいと思いました。しかし、頑強な今はどんなサイトでも作れるという自信ができました。 (もちろん時間は少しかかりますが!) なぜなら、講義で大きな問題を小さな問題に分けて一つずつ解決する方法を教えてくれるからです。このような過程で自信がますます大きくなっていき、今はどんなサイトでも作れると思います。講師の体系的な説明と実習を通じて、複雑な問題もじっくり解決していくことができることを学びました。 もともとレビュー長くうまくいかないのに受講評があまりなくて悩んでいる方がいるようで、すっかり長く残してみました。 もう夏だから蚊も多いけど、講義を聞きながら感動の拍手をして蚊を捕まえる準備をしましょう

    • gymcoding
      Instructor

      うわー! 👏👏👏👏👏 受講評を読みながら私も知らずに口が耳にかかりましたね😁 その講義では、小さくはポートフォリオというサイトを作ることだが、 大きくは、これから始める方々に大きな問題を小さく分けて一つずつ解決していく方法とこれを解決し、"自分でできる力"を乗せてあげることが目的がありました。 知っておきましょう。 ありがとうございます。言語化法も優れていてどんなポジションでも上手くいくんです。おやすみなさい👍

  • lee3088125118님의 프로필 이미지
    lee3088125118

    Reviews 9

    Average Rating 5.0

    5

    61% enrolled

    • 12345678님의 프로필 이미지
      12345678

      Reviews 43

      Average Rating 4.0

      5

      33% enrolled

      • gymcoding
        Instructor

        ありがとうございます!👍

    • mactoy1116님의 프로필 이미지
      mactoy1116

      Reviews 1

      Average Rating 5.0

      5

      31% enrolled

      • gymcoding
        Instructor

        ありがとうございます~!👍

    • tkaqkr1231706님의 프로필 이미지
      tkaqkr1231706

      Reviews 14

      Average Rating 5.0

      5

      100% enrolled

      プロジェクト進行中に画面配置で難しさを感じていた時、まさに求めていた講座で、求めていた内容を素早く学習することができました! 講座内容も充実していて、とても助かりました! 今後も良い講座をたくさんお願いいたします。 ありがとうございました。

      • gymcoding
        Instructor

        こんにちは!貴重なレビュー、本当にありがとうございます~!🎉 プロジェクト進行中に画面配置で苦労されていたとのこと、弊社の講義がまさに望んでいた内容だったとのこと、本当に良かったです! 素早く学習できるよう構成した甲斐がありました。これでポートフォリオサイトまで完成されたとのこと、実力も一段とアップグレードされたことでしょう!💻 今後も実務に役立つ良い講義を提供してまいります。最後までご受講いただき、心より感謝申し上げます!🚀 ありがとうございます!

    $68.20

    gymcoding's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!