강의

멘토링

커뮤니티

BEST
개발 · 프로그래밍

/

프론트엔드

포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편

HTML&CSS, 자바스크립트를 배웠다면 이를 활용하여 직접 포트폴리오 사이트를 만들고 배포해 보세요. 실제로 써 보는 것은 우리의 실력을 향상시키는 데 큰 도움이 될 것입니다.

(5.0) 수강평 28개

수강생 203명

  • 짐코딩
포트폴리오
포트폴리오홈페이지만들기
HTML/CSSJavaScriptgithub-pages

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

수강 후 이런걸 얻을 수 있어요

  • 웹 페이지를 HTML 구조로 나누고 사고 하는 법

  • HTML 요소를 좌우나 중앙으로 배치하고 정렬하는 법

  • Class 명명 규칙, CSS 초기화, CSS 변수 실무 사용법

  • 미디어 쿼리를 활용한 반응형 웹 만드는 법

  • SEO, SNS 공유 미리보기, Github Pages 배포 하는 법

포트폴리오 사이트 만들기

안녕하세요! 이번 강의는 포트폴리오 사이트를 만들기강의입니다. HTML&CSS, 자바스크립트를 배우셨다면 이를 활용하여 직접 포트폴리오 사이트를 만들고 배포해보는 것은 어떨까요?

  • HTML 구조를 효과적으로 나누는 방법을 배웁니다!

  • CSS를 활용하여 요소를 좌우나 중앙으로 배치하고 정렬하는 방법을 알아봅니다!

  • CSS 변수, 반응형 웹, 라이브러리 등의 실무에서의 활용 방법을 자세히 다룹니다!


스크린샷 2024-04-29 오전 9.55.32

이미지 클릭 시 포트폴리오 사이트로 이동할 수 있어요.

강의를 듣고 나면 이런 결과물을 만들 수 있어요

애니메이션 및 타이핑 효과

애니메이션, 타이핑 효과 등 라이브러리를 활용한 다양한 결과물을 만들 수 있어요.

반응형 웹 사이트

모바일, 태블릿, 데스크탑 등 다양한 화면에 최적화된 반응형 웹을 만들 수 있어요.

SEO, SNS 공유

OG Tag를 활용하여 카카오톡 등 SNS 공유 미리보기를 만들 수 있어요.

Github Pages 배포

Github Pages를 활용하여 우리가 만들 홈페이지를 정말 쉽게 배포할 수 있어요.

  • HTML 구조를 어떻게 나누는지 구체적으로 실습합니다.


  • CSS Position, Flexbox, Grid를 활용하여 요소를 어떻게 배치하는지 구체적으로 실습합니다.

학습 내용

HTML&CSS, 자바스크립트 기초를 익혔다면, 이제 제대로 활용하는 방법을 실습 할 차례입니다.

개발환경 설정

본격적인 수업을 위한 개발환경, 프로젝트 생성, 폰트 및 아이콘 설정을 함께 합니다.

HTML Markup

어려운 웹 페이지라도 구조를 세부적으로 분리하여 사고하면 쉽게 해결할 수 있습니다. 커다란 문제를 작은 조각으로 나누어 하나씩 해결하는 연습을 진행하게 됩니다.

CSS Style

수강생들이 주로 어려워하는 부분은 HTML 요소를 배치하고 정렬하는 것입니다. 이번 섹션에서는 Position, Flexbox, Grid를 활용하여 함께 실습하게 됩니다.

반응형 웹

Breakpoint의 개념부터 시작하여, 모바일, 태블릿, 데스크탑에 최적화된 화면을 구성하는 방법까지 자세히 학습합니다.

자바스크립트 & 라이브러리 활용

다양한 라이브러리를 활용하여 애니메이션, 텍스트 타이핑 등 멋진 효과를 적용한 홈페이지를 만들어보게 됩니다.

SEO, SNS 공유 미리보기, 배포

검색 엔진 최적화(SEO)와 함께 OG 태그를 활용하여 SNS에서 공유할 때 미리보기를 설정하는 방법을 배우고, 홈페이지를 직접 배포하기 위해 Github Pages를 활용합니다.

인프런 수강후기 이벤트 진행중 🎉

안녕하세요 🙂 "포트폴리오 사이트 만들고 배포까지" 강의 수강후기 이벤트를 진행하고 있어요.
해당 강의를 수강하신 후 정성스럽게 수강후기를 작성해주시면 강의 쿠폰 1개를 드립니다.
(선착순 20명, 신청 링크는 커리큘럼에 포함되어 있음)

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • HTML 요소 배치와 정렬이 어려우신 분!

  • 나만의 홈페이지를 만들고 싶으신 분!

  • HTML, CSS, JS까지 배웠지만 활용하는 법을 잘 모르시는 분!

선수 지식,
필요할까요?

  • HTML

  • CSS

안녕하세요
입니다.

26,058

수강생

1,563

수강평

655

답변

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% 수강 후 작성

    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 👍

  • lee3088125118님의 프로필 이미지
    lee3088125118

    수강평 9

    평균 평점 5.0

    5

    61% 수강 후 작성

    • 12345678님의 프로필 이미지
      12345678

      수강평 43

      평균 평점 4.0

      5

      33% 수강 후 작성

    • mactoy1116님의 프로필 이미지
      mactoy1116

      수강평 1

      평균 평점 5.0

      5

      31% 수강 후 작성

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

    ₩88,000

    짐코딩님의 다른 강의

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

    비슷한 강의

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