포트폴리오 웹사이트 클론코딩

HTML, CSS, JavaScript 반응형 사이트 만들기

나만의 포트폴리오 사이트 만들기

반응형 동적 웹사이트 기획부터 배포까지

  • Web Basics

    HTML, CSS, JavaScript로 자신감 있게 동적인 반응형 웹사이트를 만들 수 있어요. 여러분 만의 웹사이트를 기획, 디자인하는 방법도 연습하게 됩니다. JavaScript로 문제를 정의하고 해결하는 연습을 통해 코딩 실력을 향상하세요.

  • CSS Essentials

    현업에서 자주 쓰이는 헷갈리는 개념, 유용한 팁들을 모아서 정리 해요. 노트를 함께 정리 해서 CSS 더이상 어렵지 않아요. 애니메이션도 멋지게 활용해 보세요.

  • Git & Dev Tools

    Git을 사용하는 법, 웹사이트 배포까지 함께 만들면서 개발 툴을 효율적으로 사용하는 방법과 유용한 사이트들을 알려 드려요. 하나씩 완성해 나가세요.

나만의 멋진 포트폴리오사이트 완성

나만의 멋진 포트폴리오사이트 완성

나만의 포트폴리오 사이트 하나는 있어야죠? 😊

사이트 기획부터 디자인, 개발, 배포까지 전체적인 사이클을 진행하고, 전체적인 반응형 웹사이트를 함께 만들면서 자신감을 향상할 뿐만 아니라, 강의가 끝나면 나만의 멋진 포트폴리오 웹사이트가 완성됩니다. 🚀

수강생 완성작

나만의 포트폴리오 사이트 완성해 보세요

수강생 완성작

강의 소개 영상

완강하면 어떤 것이 완성 되나요?

강의 리뷰

강의를 완성하신 드림코더님들 수강평

무엇을 배우나요?

반응형 동적 웹사이트 기획부터 배포까지

  • Planning & Designing

    웹사이트, 어플리케이션 컨텐츠 기획 및 엘리의 디자인 노하우 포트폴리오 사이트 내용 작성 방법 및 팁

  • Git & Github

    Git과 Github에 대한 핵심 포인트 정리 Github을 이용한 프로젝트 관리 방법

  • HTML Head

    웹사이트 HEAD 작성하기 나만의 브랜드 로고 추가하기

  • HTML Markup

    웹사이트 구조 분석과 효율적인 마크업 박스로 나누는 연습과 전체적인 웹사이트 구조 정리

  • CSS Essentials

    현업에서 유용하게 쓰이는 CSS 팁들과 헷갈리는 개념 노트 정리 애니메이션을 멋지게 활용

  • CSS Styling

    CSS 완성편. 스타일링의 자신감 완벽 완성 Flexbox부터 다양한 CSS를 연습

  • JavaScript

    문제 정의 부터 솔루선을 찾고 적용하는 연습 개발툴 활용 부터 구글링 팁까지

  • Publish

    웹사이트를 배포해서 멋진 웹사이트 주소 소장 도메인 구입 부터 사용하는 방법 까지

  • 12개

    챕터

  • 316분+

    동영상

  • 6시간+

    분량 강의

강의 커리큘럼

아래 커리큘럼과 미리보기를 보시고 신중하게 결정해 주세요

  1. Introduction (Hello, everyone)
    05:46
  2. Watch List
  3. 슬랙 가입하기 (중요!)
  4. 이용약관 (중요!)
  5. 🚨 토론창 이용 공지사항 (꼭 읽어보고 토론창 이용하세요)
  1. Transparent navbar❓
    00:35
  2. Transparent navbar💡
    11:14
  3. Scroll to section❓
    00:16
  4. Scroll to section💡
    07:59
  5. Handle contact me button❓
    00:20
  6. Handle contact me button 💡
    02:40
  7. Transparent home ❓
    00:42
  8. Transparent home💡
    07:26
  9. Arrow up button❓
    00:31
  10. Arrow up button💡
    09:37
  11. Project filtering & animation❓
    00:36
  12. Project filtering💡
    13:06
  13. Project animation💡
    06:23
  14. Final touch on button state❓
    00:33
  15. Final touch on button state💡
    07:31
  16. Navbar toggle button❓
    00:12
  17. Navbar toggle button💡
    05:16
  18. JS 까지 최종코드 ⬇
  19. 작은 부탁 💕
  1. 스크롤시 해당 섹션의 메뉴를 활성화 시키기 ❓
    01:49
  2. 나쁜 구현 사항 예제 & 사용할 기술 소개 ❗️
    11:00
  3. IntersectionObserver 알아 보기 ❗️
    09:51
  4. IntersectionObserver 깊숙이 파헤치기❗️
    06:59
  5. 구현하기1 - 큰 골격 완성 하기 💡
    09:04
  6. 구현하기2 - 주요 로직 완성 하기 💡
    13:11
  7. 구현하기3 - 엣지 케이스 완성하기 💡
    06:53
  8. 🐛수정 - 버튼 클릭스 활성화 처리 💡
    02:47
  1. Let's publish now
    00:50
  2. Free version
    03:15
  3. Use unique domain
    03:50
  4. Congratulation 🙌
    01:36
  5. 수강 후기 남기기 😎

공식 수강 기간: 3주 + 추가 무료 복습 기간 제공!

포트폴리오 웹사이트 따라 만들기

지금 엘리와 함께 시작하세요!

  • 엘리의 시그니처 강의

  • 평생 수강가능

  • Q&A 토론창 지원

  • 완강시 수료증 발급

  • 한국어 강의

  • 슬랙 커뮤니티 지원

여러분 미래에 투자하세요🎖

₩1,000

취소 및 환불정책 대해 알아보세요

강사 소개

  • 엘리 | 드림 코더

    엘리 | 드림 코더

    Full-Stack, Mobile Engineer | Engineering Manager

    국내 삼성전자에서 연구원으로 4년 임베디드, 안드로이드 개발자로 일했고, 해외에서 8년 넘게 안드로이드, 아이폰 개발자, 백엔드를 거쳐 프론트엔드 개발자로 일했으며, 테크리더부터 시작해서 팀장, 그룹장 (엔지니어링 매니저) 역할을 맡으며 리더쉽 포지션에서 활동하고 있습니다. 회사 내/외부에서 컨퍼런스, 봉사활동을 통해 세미나를 즐겨 하다가, 2020년 부터 드림코딩 유튜브 채널을 통해 코딩을 가르쳐 드리는 엘리로 활동하고 있어요. 드림코딩 아카데미에서 만명이 넘는 수강생들을 이끌어 오면서 저의 지식과 컨텐츠를 나누는것에 큰 열정을 가지고 있습니다 🙆‍♀️ 진정한 개발자란 현재 가지고 있는 지식과 경험, 노하우에 만족하고 멈춰 있는 것이 아니라 끊임없이 배움을 추구하며 열정적으로 살아 가야 한다고 믿고 있어요. 그 열정, 강의를 통해 나눠드리고 싶어요 ✨

    자주 묻는 질문들