강의

멘토링

로드맵

Inflearn brand logo image
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) 26 reviews

183 learners

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

Reviews from Early Learners

What you will learn!

  • 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

24,770

Learners

1,382

Reviews

631

Answers

4.9

Rating

17

Courses

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

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

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

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

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

Curriculum

All

36 lectures ∙ (4hr 30min)

Published: 
Last updated: 

Reviews

All

26 reviews

5.0

26 reviews

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

    Reviews 7

    Average Rating 5.0

    5

    100% enrolled

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

    • 짐코딩
      Instructor

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

  • JH님의 프로필 이미지
    JH

    Reviews 35

    Average Rating 3.8

    5

    33% enrolled

  • mactoy님의 프로필 이미지
    mactoy

    Reviews 1

    Average Rating 5.0

    5

    31% enrolled

  • JD님의 프로필 이미지
    JD

    Reviews 12

    Average Rating 5.0

    5

    100% enrolled

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

    • 짐코딩
      Instructor

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

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

    Reviews 1

    Average Rating 5.0

    5

    50% enrolled

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

    • 짐코딩
      Instructor

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

$68.20

gymcoding's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!