개발 · 프로그래밍

/

프론트엔드

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

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

(5.0) 수강평 11개

수강생 80명

HTML/CSSJavaScriptgithub-pages포트폴리오
Thumbnail

입문자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

이런 걸
배워요!

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

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

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

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

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

포트폴리오 사이트 만들기

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

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

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

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


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

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

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

애니메이션 및 타이핑 효과

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

반응형 웹 사이트

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

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

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

안녕하세요
짐코딩입니다.

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

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

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

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

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

커리큘럼

전체

36개 ∙ (4시간 30분)

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!