채널톡 아이콘

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

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

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

이런 걸 배울 수 있어요

  • 웹 페이지를 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

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

22,969

수강생

1,148

수강평

577

답변

4.9

강의 평점

17

강의

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

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

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

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

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

더보기

커리큘럼

전체

36개 ∙ (4시간 30분)

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

수강평

전체

18개

5.0

18개의 수강평

  • 김서현님의 프로필 이미지
    김서현

    수강평 2

    평균 평점 5.0

    5

    31% 수강 후 작성

    • 짐코딩
      지식공유자

      감사합니다~! :)

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

    수강평 1

    평균 평점 5.0

    5

    50% 수강 후 작성

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

    • 짐코딩
      지식공유자

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

  • 리버Riber TV님의 프로필 이미지
    리버Riber TV

    수강평 3

    평균 평점 5.0

    5

    31% 수강 후 작성

    아.. 전부다 주옥같은 강의 들이네요.. 할인 패키지가 있다는걸 진작 알았다면 그걸로 들었을건데 리액트로 시작해서 전과정 역주행중입니다. 정말 강의에 최적화 되어있으세요 여러분 저처럼 하나씩 듣지말고 패키지로 들으세요!

    • 짐코딩
      지식공유자

      안녕하세요, 두 번째 수강평까지 남겨주시니 정말 감사합니다! "주옥같은 강의들"이라는 표현에 큰 힘을 얻습니다. 리액트로 시작해서 전 과정을 역주행 중이신 열정에 정말 감동이에요~! 🥹 학습 순서가 달라도 결국 모든 강의가 연결되어 있어, 어떤 순서로 들으셔도 프로그래밍 역량이 쌓이실 거예요 🙂 앞으로도 더 좋은 콘텐츠로 부응하도록 최선을 다하겠습니다. 열정적인 학습 여정을 계속 응원합니다! (조만간 "최신 Next.js 완벽 마스터: Notion 기반 개발자 블로그 만들기 (with Cursor AI)" 강의를 출시할 예정이에요 😀)

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

    수강평 7

    평균 평점 5.0

    5

    100% 수강 후 작성

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

    • 짐코딩
      지식공유자

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

  • JD님의 프로필 이미지
    JD

    수강평 12

    평균 평점 5.0

    5

    100% 수강 후 작성

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

    • 짐코딩
      지식공유자

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

짐코딩님의 다른 강의

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

비슷한 강의

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

월 ₩17,600

5개월 할부 시

₩88,000