웹 페이지 핸즈온

상품 정렬부터 장바구니까지 쇼핑몰 만들기

강의

41강

코드 실습

20개

프로젝트

5개

한눈에 보는 코스 특장점

학습 드라마로 웹 페이지 제작 과정을 배우는 코스

학습 드라마로 웹 페이지 제작 과정을 배우는 코스

스페셜 포인트

스토리로 이해하는 학습 개념
이제 일상 속 재밌는 이야기로 만나보세요

학습만화로 공부에 흥미를 붙였던 경험처럼
이제 일상 속 재밌는 이야기를 통해 이해하고 학습하세요

코스 요약툰 썸네일

학습 드라마 요약툰 자세히 보기

코스 요약툰 이미지

Point 1

알고리즘 설명을 통해
웹 페이지를 개발하는 방법을 알아봐요

Point 2

코드 프로젝트를 통해
쇼핑몰 웹 페이지를 완성해요

Point 3

학습 드라마를 통해
웹 페이지를 개발하는 즐거움을 느껴요

필요한 개념을 모두 담은 탄탄한 커리큘럼

드라마로 재밌게 개념을 익히고, 알짜배기 강의로
하나씩 클리어 해나가다보면 어느새 완강!

A1. 인트로
학습 드라마
A2. 어떻게 풀까?
학습 드라마
A3. 시맨틱 태그
강의코드 실습
A4. flex 레이아웃
강의코드 실습
A5. grid 레이아웃
강의코드 실습
A6. DOM 요소 선택과 조작
강의코드 실습
A7. forEach(), map(), join()
강의코드 실습
[프로젝트 1] 쇼핑몰 상품 배치 구현하기
프로젝트
A8. 프로젝트 해설(1) - HTML CSS 편
강의
A9. 프로젝트 해설(2) - JS 편
강의
A10. 엔딩
학습 드라마
A11. 쿠키
학습 드라마

B1. 인트로
학습 드라마
B2. 어떻게 풀까?
학습 드라마
B3. 폼 요소
강의코드 실습
B4. transition 속성
강의코드 실습
B5. 이벤트 핸들러 등록
강의코드 실습
B6. 스프레드 연산자와 배열 메서드
강의코드 실습
B7. 모듈
강의코드 실습
[프로젝트 2] 정렬과 카테고리 기능 구현하기
프로젝트
B8. 프로젝트 해설(1) - HTML CSS 편
강의
B9. 프로젝트 해설(2) - JS 편
강의
B10. 엔딩
학습 드라마

C1. 인트로
학습 드라마
C2. 어떻게 풀까?
학습 드라마
C3. 이미지 태그와 overflow 속성
강의코드 실습
C4. position 속성
강의코드 실습
C5. 유사 배열 객체
강의코드 실습
C6. 요소 스크롤 제어
강의코드 실습
C7. 타이머 함수
강의코드 실습
[프로젝트 3] 이미지 캐러셀 구현하기
프로젝트
C8. 프로젝트 해설(1) - HTML CSS 편
강의
C9. 프로젝트 해설(2) - JS 편
강의
C10. 엔딩
학습 드라마

D1. 인트로
학습 드라마
D2. 어떻게 풀까?
학습 드라마
D3. data-* 속성
강의코드 실습
D4. 웹 스토리지
강의코드 실습
D5. DOM 요소 생성과 추가
강의코드 실습
D6. some(), find(), findIndex()
강의코드 실습
D7. splice(), reduce()
강의코드 실습
[프로젝트 4-1] 장바구니 버튼 구현하기 - index.html
프로젝트
[프로젝트 4-2] 장바구니 페이지 구현하기 - cart.html
프로젝트
D8. 프로젝트 해설(1) - 메인 페이지 편
강의
D9. 프로젝트 해설(2) - 장바구니 페이지 편
강의
D10. 엔딩
학습 드라마