inflearn logo
inflearn logo

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개

강의소개.상단개요.수강생.short

난이도 입문

수강기한 무제한

HTML/CSS
HTML/CSS
JavaScript
JavaScript
github-pages
github-pages
Portfolio
Portfolio
HTML/CSS
HTML/CSS
JavaScript
JavaScript
github-pages
github-pages
Portfolio
Portfolio

먼저 경험한 수강생들의 후기

먼저 경험한 수강생들의 후기

5.0

5.0

상은쓰

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.

5.0

JD

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.

5.0

강유정

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!!!!!!!!

강의상세_배울수있는것_타이틀

  • 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)

강의소개.콘텐츠.추천문구

학습 대상은 누구일까요?

  • 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!

선수 지식, 필요할까요?

  • HTML

  • CSS

강의소개.지공자소개

28,804

수강생

1,831

수강평

849

답변

4.9

강의 평점

18

강의_other

Hello.
I am Gym Coding, a coding education creator 😊

I explain everything as simply and thoroughly as possible
so that even non-developers can follow along.

I will become a coding education creator
who always thinks from the student's perspective.


🏆 Inflearn Awards 2025 Bestseller Award (React Complete Master)

🔥 Selected as the hottest course on Inflearn 2025 (Claude Code Complete Master)

📺YouTube | 30k+ Subscribers Free Lectures

💻GymCoding Club | All Courses & Free Study Guides

🐙GitHub | Example Source Code

📷Instagram | Daily Life & Tips

🧵Threads | Development Insights

더보기

커리큘럼

전체

36개 ∙ (강의상세_런타임_시간 강의상세_런타임_분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

28개

5.0

28개의 수강평

  • mactoy1116님의 프로필 이미지
    mactoy1116

    수강평 1

    평균 평점 5.0

    5

    31% 수강 후 작성

    • gymcoding
      지식공유자

      Thank you~! 👍

  • lee3088125118님의 프로필 이미지
    lee3088125118

    수강평 9

    평균 평점 5.0

    5

    61% 수강 후 작성

    • 12345678님의 프로필 이미지
      12345678

      수강평 44

      평균 평점 4.1

      5

      33% 수강 후 작성

      • gymcoding
        지식공유자

        Thank you~! 👍

    • 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 👍

    • tkaqkr1231706님의 프로필 이미지
      tkaqkr1231706

      수강평 14

      평균 평점 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!

    gymcoding님의 다른 강의

    지식공유자님의 다른 강의를 만나보세요!

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!

    강의상세.할인문구

    $48.40

    29%

    $68.20