1장 웹 프론트엔드 개발, 작업 환경을 위한 준비
1-1 프론트엔드 개발 온보딩
1-2 작업 환경 구성 – 브라우저, Node.js
1-3 작업 환경 구성 – IDE
1-4 작업 환경 구성 – VS Code 확장 프로그램 설치 및 설정

2장 HTML 문법을 익히다
2-1 HTML(Hyper Text Markup Language)
2-2 태그와 브라우저 작동 원리
2-3 HTML 요소의 종류와 HTML 디버깅
2-4 많이 사용되는 HTML 기본 요소 배우기

3장 CSS 문법을 익히다
3-1 CSS 파일과 기본 환경 설정
3-2 CSS 선택자 사용
3-3 CSS 레이아웃
3-4 웹 페이지 리소스 사용

4장 웹에 UI, UX를 첨가하다
4-1 인터랙티브 웹이란?
4-2 레이아웃이 서서히 노출되도록 하기
4-3 카드 목록에서의 애니메이션
4-4 SVG 활용하기
4-5 반응형 웹

5장 JavaScript 문법을 익히다
5-1 JavaScript 파일 생성하기
5-2 JavaScript를 위한 환경 설정
5-3 JavaScript DOM 사용하기
5-4 JavaScript 이벤트
5-5 JavaScript 함수
5-6 비동기 처리

6장 반응형 카드 레이아웃 로딩 UI 만들기
6-1 반응형 카드 레이아웃과 Spinner UI
6-2 SVG 로딩 UI
6-3 스켈레톤 UI

7장 눈길을 사로잡는 인터랙티브 로그인
7-1 로그인 폼 레이아웃
7-2 입력 필드를 따라다니는 눈을 구현하기

8장 그리드 레이아웃과 동적 UI를 활용한 반응형 대시보드
8-1 Grid를 사용하여 대시보드 만들기
8-2 하나의 HTML로 카드 UI와 리스트 UI 만들기
8-3 모바일 메뉴 만들기(position fixed)
8-4 다크 모드와 라이트 모드
8-5 좋아요 기능 구현하기
8-6 웹 페이지를 떠날 때 상태 저장하기
8-7 검색 기능 만들기

9장 페이지가 전환되는 랜딩 페이지 만들기
9-1 SEO를 고려한 마크업
9-2 scroll-snap-type, animation-timeline을 활용한 fullPage 애니메이션
9-3 반응형 환경을 위한 미디어 쿼리 작업을 최소화하기
9-4 지원하지 않는 브라우저를 위해 @supports 키워드 활용
9-5 JavaScript에서 setProperty를 활용한 테마 관리
9-6 proxy와 observer를 사용한 상태 관리
9-7 뒤로 가기 기능, 렌더링 최적화 및 콘텐츠 부드럽게 노출하기

10장 외부 API를 활용한 날씨 애플리케이션
10-1 REST API란?
10-2 API KEY 발급하기
10-3 날씨 애플리케이션 마크업
10-4 날씨 애플리케이션 스타일링
10-5 JavaScript 클래스 문법 알아보기
10-6 날씨 정보 가져와서 표시하기
10-7 날씨 단위 변경하기
10-8 날씨에 따른 비디오 전환 효과 만들기
10-9 날씨 검색 기능 만들기

11장 스크롤을 따라 회전하는 도넛(R3F)
11-1 React와 Three.js
11-2 Vite를 사용해 리액트 개발 환경 구성
11-3 R3F를 사용해 Three.js 개발 환경 구성
11-4 스크롤에 따라 회전하는 박스 만들기
11-5 GSAP 라이브러리 적용
11-6 스크롤에 따라 회전하는 도넛 만들기
11-7 스크롤 도넛 랜딩 페이지 만들기

12장 WebGL을 활용한 웹 게임 만들기
12-1 Game 프로젝트 생성 및 기본 설정
12-2 useGLTF 활용한 3D 캐릭터 로드
12-3 환경 조명 및 방향 조명 생성
12-4 카메라 위치 및 움직임 구성
12-5 TextureLoader를 사용한 바닥 생성
12-6 캐릭터 크기 조절 및 애니메이션 적용
12-7 마우스 인터랙션으로 캐릭터 이동 구현
12-8 키보드 인터랙션으로 캐릭터 점프 구현
12-9 이벤트를 통한 축구공 노출 구현