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) 32 reviews

232 learners

Level Beginner

Course period Unlimited

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

Reviews from Early Learners

5.0

5.0

์ƒ์€์“ฐ

100% enrolled

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% enrolled

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% enrolled

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

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 gymcoding

Inflearn Verified

Career Verified

39,061

Learners

3,291

Reviews

1,833

Answers

4.9

Rating

18

Courses

Hello! ๐Ÿ‘‹
I'm Gym Coding, a coding education creator ๐Ÿ˜Š

I teach non-developers so they can follow along as easily as possible, while providing enough depth to satisfy working professionals.
With 15 years of experience as a full-stack developer, I am currently sharing programming and AI knowledge on YouTube and Inflearn.Vแป›i 15 nฤƒm kinh nghiแป‡m phรกt triแปƒn Full-stack, hiแป‡n tแบกi tรดi ฤ‘ang chia sแบป kiแบฟn thแปฉc vแป lแบญp trรฌnh vร  AI trรชn YouTube vร  Inflearn.

From developing services for major corporations like KT and Kia to building the Cafe24 e-commerce platform, Smart City IoT data platforms, and even my own services while running an education company, I have personally designed and built everything across frontend, backend, and AWS infrastructure.

I am now dedicating the development experience I've built up over the years to sharing knowledge.
I will deliver the essential knowledge needed for the AI era in an easy yet profound way.


๐Ÿ† Proven Results

๐Ÿฅ‡ Inflearn 2026 Claude Code Lecture BEST 1

๐Ÿ† Selected as Inflearn Awards 2025 Bestseller

๐Ÿ”ฅ Inflearn 2025 'Hottest Course Right Now' - Claude Code

๐ŸŽฌ YouTube 50k+ subscribers ยท 3.6M+ cumulative views


๐Ÿ‘จโ€๐Ÿ’ป Experience

  • 15-year Full-stack Developer ยท Current IT Company CEO

  • Frontend: React ยท Vue ยท TypeScript

  • Backend: Node.js ยท Java ยท Spring ยท Python

  • Infrastructure: AWS ยท Serverless ยท Lambda Architecture Design

  • Inflearn Knowledge Sharer

     

Startups (Entrepreneurs)

  • Experience in patent and trademark application and registration

  • Selected for multiple government startup support programs (including 'Outstanding' at Smart Venture Campus, etc.)

Corporate Training (B2B)

  • Multicampus - 'Claude Code' offline training for corporate professionals

  • Shinhan Card Developer Training - Hosted by Multicampus, Online Live

  • Special Lecture at Korea Software HR Development Institute ยท IT Mentor for Government Agencies


๐Ÿ™‹โ€โ™‚๏ธ See more

More

Curriculum

All

36 lectures โˆ™ (4hr 30min)

Published: 
Last updated: 

Reviews

All

32 reviews

5.0

32 reviews

  • sanggusseu2599๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    sanggusseu2599

    Reviews 7

    โˆ™

    Average Rating 5.0

    5

    100% enrolled

    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
      Instructor

      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 ๐Ÿ‘

  • neo05310009๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    neo05310009

    Reviews 3

    โˆ™

    Average Rating 5.0

    5

    31% enrolled

    Ah... these are all such great lectures. If I had known there was a discount package, I would have taken that. I started with React and am now going through the entire course in reverse. You are truly optimized for lectures. Everyone, don't take them one by one like me, get the package!

    • gymcoding
      Instructor

      Hello, thank you so much for leaving a second review! I gain a lot of strength from the expression "invaluable lectures." I'm truly touched by your passion for starting with React and going backward through the entire course~! ๐Ÿฅน Even if the learning order is different, all lectures are ultimately connected, so no matter which order you listen to them in, your programming skills will improve. ๐Ÿ™‚ I will continue to do my best to respond with even better content. I will continue to cheer on your passionate learning journey! (I will be releasing a "Complete Latest Next.js Master: Creating a Notion-Based Developer Blog (with Cursor AI)" lecture soon ๐Ÿ˜€)

  • ourgony8435๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    ourgony8435

    Reviews 3

    โˆ™

    Average Rating 5.0

    5

    31% enrolled

    Easy, concise, and easy to understand. Thank you.

    • gymcoding
      Instructor

      I'm glad I could help :) Thank you~!

  • jeong46966001๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    jeong46966001

    Reviews 2

    โˆ™

    Average Rating 5.0

    5

    50% enrolled

    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
      Instructor

      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! ๐Ÿ‘

  • tkaqkr1231706๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    tkaqkr1231706

    Reviews 14

    โˆ™

    Average Rating 5.0

    5

    100% enrolled

    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
      Instructor

      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's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!

Limited time deal

$66,000.00

25%

$68.20