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

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 토론창 지원

    • 완강시 수료증 발급

    • 한국어 강의

    • 슬랙 커뮤니티 지원

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

    ₩90,000

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

    강사 소개

    • 엘리 | 드림 코더

      엘리 | 드림 코더

      Full-Stack(+mobile) Engineer | Engineering Manager

      뛰어난 강의력! 강의 맛집!으로 인정받은 16만+ 구독자 '드림코딩' 유튜브 채널 운영자 엘리! 삼성전자 임베디드/안드로이드 연구원으로 4년 근무 후, 해외에서 10년+ 현업에서 일한 경험까지 겸비! 안드로이드, 아이폰, 백엔드, 프론트엔드 개발자로 일했으며, 테크리더부터 팀장, 그룹장(엔지니어링 매니저)까지 리더쉽 포지션에서도 활동했습니다.탄탄하게 쌓아온 실무 경험과 성장했던 비법까지 여러분께 모두 전수해 드리고 싶습니다! 진정한 개발자란 현재 가지고 있는 지식과 경험, 노하우에 만족하고 멈춰 있는 것이 아니라 끊임없이 배움을 추구하며 열정적으로 살아 가야 한다고 믿고 있습니다. 그 열정, 강의를 통해 나눠드리고 싶어요! 함께 달려봅시다! 🎖

      자주 묻는 질문들