웹 개발 배우기

초보자부터 시니어까지, Frontend 웹 개발을 배워 보세요. 첫 수업부터 HTML, CSS, JavaScript를 함께 익힐 수 있습니다.

포함 내용

• 41개 코스, 163개 짧은 레슨: A1–C2

• 실시간 코드 편집기: HTML, CSS, JavaScript 창을 나란히 편집하고 휴대폰 아래에서 즉시 미리 보기

• HTML, React, Vue, Angular, Node 또는 TypeScript 프로젝트 템플릿

• 단계별 프로젝트 20개: 레시피 페이지, 문의 양식, 카드 그리드, 내비게이션 바, 데이터 테이블 등

• 실제 버그 디버깅 미션 15개: 깨진 375px 레이아웃, LCP를 저해하는 이미지, 탭 탐색을 막는 양식, 컴포넌트 메모리 누수, 로컬에서는 통과하지만 CI에서는 실패하는 테스트

• 최종 시험 및 수료증

• 22개 언어

하나의 경로, 초보자부터 시니어까지

• 웹 기초, HTML, 양식, 시맨틱 마크업

• CSS 기초, 변수, 트랜지션, 애니메이션, flexbox, grid

• 모든 화면을 위한 반응형 디자인

• JavaScript, 배열, 객체, ES6+, DOM, 브라우저 API, 비동기 처리

• 개발자 도구, Git, 팀 워크플로, 모듈, 빌드 도구

• TypeScript 기초부터 고급 패턴까지

• React 기초, useEffect, 데이터 가져오기, 고급 훅과 패턴

• Vue 3, Composition API, 고급 패턴

• 상태 관리, REST API, WebSockets, 실시간 UI

• 서버 사이드 렌더링: Next.js, Nuxt 3; 프로그레시브 웹 앱(PWA)

• 접근성, 테스트, 성능, 보안

• CSS 아키텍처, 디자인 시스템, CI/CD, 최신 도구

오래 남는 실습

• 퀴즈 및 복습

• 치트 시트: 문법과 패턴 항목 83개

• 프론트엔드 개발자(Frontend developer) 및 웹 개발자 면접 질문 50개와 답변

• 편집 가능한 코드 예제 라이브러리

• 코드와 노트 저장, 레슨 즐겨찾기

• 코딩 챌린지: 코드로 친구를 초대하거나 무작위 상대와 대결

• World Coding Challenge: JavaScript, Python 및 기타 언어로 매일 진행되는 글로벌 3라운드

• 연속 학습 기록, XP, 리더보드, 매일 알림

AI 멘토

• 버그, 개념, 오류, 레슨 또는 내 코드에 대해 AI에게 질문

• AI 플레이그라운드: 페이지를 설명하면 코드 생성

• Free: 매일 AI 질문 3개; Pro: 무제한

대상

• 웹 개발자가 되려는 초보자

• 웹 개발 강좌와 함께 연습하는 학생

• 디자인을 구현하는 디자이너

• JavaScript, TypeScript 및 프레임워크를 배우는 HTML/CSS 개발자

• 첫 프론트엔드 개발자 직무를 준비하는 커리어 전환자

사용 방법

1. 무료로 시작: Frontend Development에 오신 것을 환영합니다

2. 창을 편집하고 미리 보기가 업데이트되는 모습 확인

3. JavaScript, 반응형 레이아웃, TypeScript, React, Vue 학습

4. 안내에 따라 프로젝트를 만들고 실제 버그 디버깅

5. 최종 시험에 합격하고 수료증 받기

Free 및 Pro

Free: 첫 번째 코스, 첫 번째 안내 프로젝트, 디버깅 미션 2개, 코드 편집기, 매일 AI 멘토 질문 3개 제공; 광고 포함. Pro: 모든 코스, 프로젝트와 미션, 수료 시험, 무제한 AI 제공; 광고 제거.