1부 코어 브라우저 프로그래밍
1장 개발 환경 설정 구글 크롬 설치하기 아톰 설치 및 구성하기 문서와 참조 소스 명령줄 속성 과정 node.js와 browser-sync 설치 더 알아보기: 아톰의 대안

2장 첫 프로젝트 준비 Ottergram 준비 브라우저에서 웹 페이지 보기 크롬 개발자 도구 더 알아보기: CSS 버전 더 알아보기: 파비콘(favicon.ico) 도전 과제-은메달: 파비콘 추가

3장 스타일 스타일 베이스라인 생성 스타일 작성을 위한 HTML 준비 스타일 구조 첫 번째 스타일 규칙 스타일 상속 이미지를 창에 맞추기 색상 아이템 간격 조절 폰트 추가 도전 과제-동메달: 색상 변경 더 알아보기: 구체성! 선택자가 충돌할 때

4장 플렉스박스를 사용한 반응형 레이아웃 인터페이스 확장 플렉스박스 절대 위치와 상대 위치

5장 미디어 쿼리와 함께하는 적응형 레이아웃 뷰포트 재설정 미디어 쿼리 추가 도전 과제-동메달: 세로보기 더 알아보기: 플렉스박스 레이아웃의 일반적인 해결(버그) 도전 과제-금메달: 홀리 그레일 레이아웃

6장 자바스크립트를 사용한 이벤트 처리 반드시 필요한 앵커 태그 준비 첫 스크립트 Ottergram 자바스크립트 개요 스트링 변수 선언 콘솔 작업 DOM 엘리먼트 접근 SetDetails 함수 작성 함수의 반환값 이벤트 리스너 추가 모든 섬네일 접근 섬네일 배열을 통한 반복 도전 과제-은메달: 링크 탈취 도전 과제-금메달: 랜덤 수달 더 알아보기: 엄격 모드 더 알아보기: 클로저 더 알아보기: NodeLists와 HTMLCollections 더 알아보기: 자바스크립트 타입

7장 CSS를 사용한 시각 효과 상세 이미지 숨기기 및 보이기 CSS 전환을 사용한 상태 변경 사용자 정의 타이밍 함수 더 알아보기: 강제 형변환 규칙

2부 모듈, 객체, 폼
8장 모듈, 객체, 메소드 모듈 CoffeeRun 설정 DataStore 모듈 만들기 네임스페이스에 모듈 추가 생성자 트럭 모듈 생성 디버깅 페이지 로딩 시 CoffeeRun 초기화 도전 과제-동메달: TruckID 바꿔보기 더 알아보기: Private 모듈 데이터 도전 과제-은메달: Private 데이터 만들기 더 알아보기: forEach의 콜백에 적용

9장 부트스트랩 소개 부트스트랩 추가 주문 폼 만들기

10장 자바스크립트를 사용한 폼 처리 FormHandler 모듈 생성 submit 핸들러 추가 FormHandler 사용 UI 확장 도전 과제-동메달: 특대 사이즈 도전 과제-은메달: 변경되는 슬라이더 값 출력 도전 과제-금메달: 기능 추가

11장 데이터를 DOM으로 체크리스트 설정 체크리스트 모듈 생성 Row 생성자 만들기 제출 시 체크리스트의 Row 생성 줄을 클릭하여 주문 처리 완료 도전 과제-동메달: 설명에 카페인 함량 추가 도전 과제-은메달: 맛 추가에 따른 색상 코딩 도전 과제-금메달: 주문 편집

12장 폼 검증 required 어트리뷰트 정규 표현식을 사용한 검증 Constraint Validation API 유효하거나 유효하지 않은 엘리먼트 꾸미기 도전 과제-은메달: 디카페인 커피를 위한 사용자 정의 유효성 더 알아보기: Webshim 라이브러리

13장 Ajax XMLHttpRequest 객체 RESTful 웹 서비스 RemoteDataStore 모듈 서버로 데이터 전송 서버로부터 가져온 데이터 서버의 데이터 삭제 DataStore를 RemoteDataStore로 교체 도전 과제-은메달: 원격 서버에 대한 유효성 검사 더 알아보기: 포스트맨

14장 디퍼드와 프로미스 프로미스와 디퍼드 디퍼드 반환 then을 사용하여 콜백 등록 then을 사용한 실패 처리 콜백 전용 API를 사용하여 디퍼드 사용 DataStore에 프로미스 사용 도전 과제-은메달: DataStore 대체 시스템

3부 리얼타임 데이터
15장 Node.js 소개 Node와 npm Hello, World npm 스크립트 추가 파일에서 검색 오류 처리 더 알아보기: npm 모듈 레지스트리 도전 과제-동메달: 사용자 정의 오류 페이지 만들기 더 알아보기: MIME 타입 도전 과제-은메달: MIME 타입 자동 제공 도전 과제-금메달: 오류 처리 코드를 자체 모듈로 이동

16장 웹소켓을 사용하는 실시간 커뮤니케이션 웹소켓 설정 웹소켓 서버 테스트 채팅 서버 기능 만들기 첫 채팅! 더 알아보기: socket.io 웹소켓 라이브러리 더 알아보기: 웹소켓 서비스 도전 과제-동메달: 혼자 반복할까? 도전 과제-은메달: 주류 밀매점 도전 과제-금메달: 채팅 봇

17장 바벨과 함께 ES6 사용하기 자바스크립트 컴파일 도구 Chattrbox 클라이언트 애플리케이션 바벨 사용 첫 단계 모듈 패키징을 위한 Browserify 사용 ChatMessage 클래스 추가 ws-client 모듈 생성 더 알아보기: 다른 언어에서 자바스크립트 컴파일 도전 과제-동메달: 디폴트 Import 이름 도전 과제-은메달: 연결 닫힘 알림 더 알아보기: 호이스팅 더 알아보기: 화살표 함수

18장 계속해서 ES6 살펴보기 Node 모듈로 jQuery 설치 ChatForm 클래스 만들기 ChatList 클래스 만들기 그라바타 사용 사용자 이름 입력 대기 사용자 세션 저장 메시지 타임스탬프 서식화 및 업데이트 도전 과제-동메달: 메시지에 시각적 효과 추가 도전 과제-은메달: 캐시 메시지 도전 과제-금메달: 채팅방 구분

4부 애플리케이션 아키텍처
19장 MVC와 Ember 소개 Tracker Ember: MVC 프레임워크 외부 라이브러리와 애드온 환경 설정 더 알아보기 : npm과 Bower 설치 도전 과제-동메달: 불러오기 제한 도전 과제-은메달: Font Awesome 추가 도전 과제-금메달: NavBar 최적화

20장 라우팅, 라우트, 모델 ember generate 중첩 라우트 Ember 인스펙터 모델 할당 beforeModel 더 알아보기: setupController와 afterModel

21장 모델과 데이터 바인딩 모델 정의 createRecord get과 set 계산된 속성 더 알아보기: 데이터 가져오기 더 알아보기: 데이터 저장 및 삭제 도전 과제-동메달: 계산된 속성 변경 도전 과제-은메달: 새로운 목격 표시 도전 과제-금메달: 제목 추가

22장 데이터-어댑터, 시리얼라이저, 트랜스폼 어댑터 콘텐츠 보안 정책 시리얼라이저 트랜스폼 더 알아보기: Ember CLI Mirage 도전 과제-은메달: 콘텐츠 보안 도전 과제-금메달: Mirage

23장 뷰와 템플릿 핸들바 모델 헬퍼 사용자 정의 헬퍼 도전 과제-동메달: Link Rollover 추가 도전 과제-은메달: 날짜 형식 변경 도전 과제-금메달: 사용자 정의 섬네일 헬퍼 생성

24장 컨트롤러 새로운 목격 목격 편집 목격 삭제 라우트 동작 도전 과제-동메달: 목격 상세 페이지 도전 과제-은메달: 목격 날짜 도전 과제-금메달: 목격자 추가 및 제거

25장 컴포넌트 컴포넌트로서의 반복자 항목 DRY 코드를 위한 컴포넌트 데이터는 아래로, 액션은 위로 클래스 이름 바인딩 데이터는 아래로 액션은 위로 도전 과제-동메달: 알림 메시지 사용자 정의 도전 과제-은메달: NavBar를 컴포넌트로 만들기 도전 과제-금메달: 알림 배열