잔재미코딩 · 교육과정 소개서
탄탄한 프런트엔드 기본 부트캠프
HTML5·CSS·바닐라 JavaScript와 ES6 기본기를 체계적으로 정리합니다. 반응형·호환성·DOM과 이벤트를 익히고, 빈 파일부터 실제 웹페이지와 인터랙션을 구현합니다.
- 과정 구성
- 영상 79개
- 총 영상 시간
- 17시간 34분
- 강사
- Dave Lee · 잔재미코딩
배우는 내용
- HTML5 시맨틱 태그·웹 접근성·호환성
- CSS 선택자·박스모델·배치·애니메이션
- 미디어 쿼리·Flexbox 기반 반응형 레이아웃
- 바닐라 JavaScript·ES6·DOM·이벤트·Promise
- 빈 파일부터 웹페이지 구현·백엔드와의 통신
선수 지식
프런트엔드 입문자도 시작할 수 있습니다. 프로그래밍 자체가 처음이라면 파이썬 입문 과정과 함께 기초부터 익히는 것을 권합니다.
자료와 소스 코드를 제공하나요?
기능별 샘플 코드와 실전 웹페이지 코드 파일을 제공합니다. 문서 자료는 온라인에서 확인할 수 있으며, 저작권 보호를 위해 문서의 복사 및 다운로드를 제한합니다.
수업별 전체 목차
01. 강의 준비
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 프런트엔드 부트캠프 강의 소개 | 영상 |
| 02 | 강의전 꼭 들어주세요! | 영상 |
| 03 | 수업 진행 과정과 수업 준비 | 영상 |
| 04 | 개발 에디터 이해와 개발 환경 준비 | 영상 |
02. 모던 웹 기본 기술 이해
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 수업 자료와 활용 팁 (꼭 들어주세요~) | 영상 |
| 02 | 강의 자료/코드 다운로드 | 자료 |
| 03 | 학습 효과를 높일 수 있는 꿀팁과 공유사항 (업데이트) | 영상 |
| 04 | 웹 기본 기술 이해와 정리 | 영상 |
| 05 | 모던 HTML 기능과 배경지식 이해 (업데이트) | 영상 |
| 06 | HTML5 기본 템플릿 코드 이해 | 영상 |
| 07 | HTML5 주요 태그 이해와 정리1 | 영상 |
| 08 | HTML5 주요 태그 이해와 정리2 | 영상 |
| 09 | 모던 웹을 위한 웹접근성, 크로스 브라우징, 이미지 포맷 이해 | 영상 |
03. 모던 웹의 핵심 상세한 CSS 기본
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 웹을 위한 모던 CSS 단위 이해 및 정리 | 영상 |
| 02 | 모던 웹을 위한 모던 CSS 배경 지식 이해 | 영상 |
| 03 | 모던 웹을 위한 상세한 모던 CSS Selector 정리1 | 영상 |
| 04 | 모던 웹을 위한 상세한 모던 CSS Selector 정리2 | 영상 |
| 05 | 모던 웹을 위한 상세한 모던 CSS Selector 정리3 | 영상 |
04. 모던 웹의 핵심 상세한 CSS 기본 프로퍼티
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 웹을 위한 CSS 박스모델 이해1 | 영상 |
| 02 | 모던 웹을 위한 CSS 박스모델 이해2 | 영상 |
| 03 | 모던 웹을 위한 상세한 CSS background 이해1 | 영상 |
| 04 | 모던 웹을 위한 상세한 CSS background 이해2 | 영상 |
| 05 | 모던 웹을 위한 상세한 CSS block과 inline 이해 | 영상 |
| 06 | 모던 웹을 위한 상세한 CSS font 이해1 | 영상 |
| 07 | 모던 웹을 위한 상세한 CSS font 이해2 | 영상 |
05. 모던 웹의 핵심 상세한 CSS 배치와 애니메이션
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 웹을 위한 상세한 CSS position 이해 | 영상 |
| 02 | 모던 웹을 위한 상세한 CSS transition 이해 | 영상 |
| 03 | 모던 웹을 위한 상세한 CSS animation 이해 | 영상 |
| 04 | 모던 웹을 위한 상세한 CSS transform 이해 | 영상 |
| 05 | 모던 웹을 위한 상세한 CSS float 이해 | 영상 |
06. 모던 웹의 핵심 중급 CSS와 반응형 기능
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 웹을 위한 상세한 CSS 상속 이해 | 영상 |
| 02 | 모던 웹을 위한 상세한 반응형 배경지식 이해 | 영상 |
| 03 | 모던 웹을 위한 상세한 CSS 미디어 쿼리 이해 | 영상 |
07. 모던 웹과 레이아웃 핵심 CSS flexbox
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 웹을 위한 상세한 CSS flexbox 이해1 | 영상 |
| 02 | 모던 웹을 위한 상세한 CSS flexbox 이해2 | 영상 |
| 03 | 모던 웹을 위한 상세한 CSS flexbox 이해3 | 영상 |
08. 모던 HTML/CSS 로 상용화도 가능한 모던 웹페이지 만들어보기
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기1 | 영상 |
| 02 | 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기2 | 영상 |
| 03 | 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기3 | 영상 |
| 04 | 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기4 | 영상 |
| 05 | 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기5 | 영상 |
| 06 | 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기6 | 영상 |
| 07 | 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기7 | 영상 |
| 08 | 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기8 | 영상 |
| 09 | 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기9 | 영상 |
| 10 | 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기10 | 영상 |
| 11 | 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기11 | 영상 |
09. 모던 웹을 위한 최신 Javascript (VanillaJS) 기본 지식과 변수/조건문
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 웹을 위한 최신 Javascript / VanillaJS / ES6 이해 | 영상 |
| 02 | Javascript 기본 지식과 테스트 방법 (업데이트) | 영상 |
| 03 | 모던 웹을 위한 최신 Javascript 변수와 데이터 타입 이해 | 영상 |
| 04 | 모던 웹을 위한 최신 Javascript 데이터 타입 변환과 조건문 이해 | 영상 |
10. 모던 웹을 위한 최신 Javascript (VanillaJS) 함수와 객체
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 웹을 위한 다양한 Javascript+ES6 함수 선언 기법 이해 | 영상 |
| 02 | 모던 웹을 위한 다양한 Javascript+ES6 객체 선언 기법 이해1 | 영상 |
| 03 | 모던 웹을 위한 다양한 Javascript+ES6 객체 선언 기법 이해2 | 영상 |
| 04 | 모던 웹을 위한 다양한 Javascript+ES6 객체 선언 기법 이해3 | 영상 |
11. 모던 웹을 위한 최신 Javascript (VanillaJS) 반복문/배열
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 웹을 위한 다양한 Javascript+ES6 반복문 이해1 | 영상 |
| 02 | 모던 웹을 위한 다양한 Javascript+ES6 반복문 이해2 | 영상 |
| 03 | 모던 웹을 위한 다양한 Javascript+ES6 배열 문법 이해1 | 영상 |
| 04 | 모던 웹을 위한 다양한 Javascript+ES6 배열 문법 이해2 | 영상 |
12. 모던 웹을 위한 최신 Javascript (VanillaJS) 중급
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 웹을 위한 다양한 Javascript+ES6 추가 문법 이해1 | 영상 |
| 02 | 모던 웹을 위한 다양한 Javascript+ES6 추가 문법 이해2 | 영상 |
| 03 | 모던 웹을 위한 Javascript+ES6 호이스팅 이슈와 해결방법 이해 | 영상 |
| 04 | 모던 웹을 위한 Javascript+ES6 스코프 이해 | 영상 |
| 05 | 모던 웹을 위한 Javascript 동기 / 비동기 처리 이해 | 영상 |
| 06 | 모던 웹을 위한 Javascript+ES6 비동기 처리를 위한 Promise 이해1 | 영상 |
| 07 | 모던 웹을 위한 Javascript+ES6 비동기 처리를 위한 Promise 이해2 | 영상 |
13. 모던 웹 제어를 위한 최신 Javascript (VanillaJS)
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 웹을 위한 Javascript(VanillaJS) 와 DOM / BOM 이해 | 영상 |
| 02 | 모던 웹을 제어하기 위한 Javascript(VanillaJS) DOM CRUD 이해1 | 영상 |
| 03 | 모던 웹을 제어하기 위한 Javascript(VanillaJS) DOM CRUD 이해2 | 영상 |
| 04 | 모던 웹을 제어하기 위한 Javascript(VanillaJS) 이벤트 처리 이해 | 영상 |
14. 모던 프런트엔드 기술로 상용화도 가능한 모던 웹페이지 만들기
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기1 | 영상 |
| 02 | 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기2 | 영상 |
| 03 | 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기3 | 영상 |
| 04 | 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기4 | 영상 |
| 05 | 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기5 | 영상 |
| 06 | 모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기6 | 영상 |
15. 강의 마무리와 추가로 참고하면 좋을 기능 구현
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 추가로 참고할만한 반응형 모던 웹페이지 기능1 | 영상 |
| 02 | 추가로 참고할만한 반응형 모던 웹페이지 기능2 | 영상 |
| 03 | 추가로 참고할만한 반응형 모던 웹페이지 기능3 | 영상 |
| 04 | 백엔드와 프런트엔드 통신 기능 구현과 마무리 | 영상 |
16. 강의 완강 인증서 발급
| # | 상세 교육내용 | 구분 |
|---|---|---|
| 01 | 강의 수강평 및 제안사항 | 링크 |
| 02 | 강의 완강 인증서 발급 | 수료증 |