학습 경로

프론트엔드 개발자 로드맵

프론트엔드 개발자에게 실제로 필요한 순서대로 배치한 무료 강의입니다. 구조를 위한 HTML, 레이아웃을 위한 CSS, 동작을 위한 JavaScript, 안정성을 위한 TypeScript, 실제 애플리케이션을 위한 React와 Next.js, 배포를 위한 Git, 그리고 그것을 증명할 8개의 프로젝트. 모든 레슨은 브라우저에서 실행되고, 프로젝트 단계 앞의 모든 강의는 무료 수료증으로 마무리됩니다.

학습 시작(무료)

663,032+ 명의 codders가 이 코스들에 등록함

804 개 강의681 챌린지3,184 퀴즈 문제

초보자 환영
AI 코딩 도우미
실습 중심의 대화형 강의
모든 레슨에 음성 나레이션 제공
지식을 확인하는 퀴즈
경로 전체에서 무료 수료증 13개

프론트엔드 개발자 경로, 단계별로

13 개 강의12 섹션804 개 강의681 챌린지3,184 퀴즈 문제

각 단계는 이미 열려 있는 Coddy 강의입니다. 순서대로 따라가도 되고, 부족한 강의로 바로 건너뛰어도 됩니다. 진도는 어느 쪽이든 강의별로 저장됩니다.

1
1단계
HTML: 모든 페이지의 구조전용 페이지
이 단계 시작시작요소, 속성, 제목, 링크, 이미지, 목록, 표, 폼, 그리고 시맨틱 마크업. 브라우저가 그려 내는 모든 것은 HTML에서 시작하고, 이것을 잘 쓰는 능력이 CSS와 JavaScript 단계를 수월하게 만듭니다.시작 전용 페이지60 개 강의75 챌린지251 문제
2
2단계
CSS: 레이아웃과 디자인전용 페이지
이 단계 시작시작선택자, 박스 모델, 색과 타이포그래피, 이어서 두 개 섹션에 걸친 flexbox, grid, 반응형 레이아웃, 트랜지션과 애니메이션. 페이지가 평소에 쓰는 사이트처럼 보이기 시작하는 단계입니다.시작 전용 페이지
2개 섹션, 순서대로
1. CSS로 스타일링하기76 개 강의100 챌린지418 문제
2. CSS 마스터43 개 강의40 챌린지164 문제
119 개 강의140 챌린지582 문제
3
3단계
JavaScript, 언어 전체전용 페이지
이 단계 시작시작기초, 로직과 제어 흐름, 그리고 객체와 클래스까지 세 개 섹션. 프론트엔드 일은 곧 JavaScript 일입니다. 이 단계 이후의 프레임워크는 모두 그것을 정리하는 방식일 뿐이고, 언어가 읽혀야 프레임워크도 읽힙니다.시작 전용 페이지
3개 섹션, 순서대로
198 개 강의224 챌린지1,019 문제
4
4단계
브라우저 속 JavaScript전용 페이지
이 단계 시작시작DOM, 이벤트, 데이터 가져오기, 그리고 프레임워크 없이 인터랙티브한 페이지 만들기. 이어서 실무에서 쓰는 프론트엔드 패턴까지. HTML, CSS, JavaScript가 하나가 되는 지점, 즉 쓰는 사람에게 반응하는 페이지가 여기서 나옵니다.시작 전용 페이지
2개 섹션, 순서대로
1. JavaScript 실전27 개 강의27 챌린지163 문제
2. 실전 프론트엔드35 개 강의34 챌린지197 문제
62 개 강의61 챌린지360 문제
5
5단계
TypeScript전용 페이지
이 단계 시작시작타입, 인터페이스, 제네릭, 그리고 컴파일러의 오류를 도구로 쓰는 법. 실무의 React 코드베이스는 거의 전부 TypeScript이기 때문에, 맨 뒤에 덧붙이지 않고 프레임워크 바로 앞에 두었습니다.시작 전용 페이지73 개 강의64 챌린지438 문제
6
6단계
React와 Next.js전용 페이지
이 단계 시작시작컴포넌트, props, 상태, 훅, 렌더링, 그리고 라우팅과 데이터 로딩, 실제 애플리케이션을 위한 Next.js. 프론트엔드 공고가 가장 많이 요구하는 프레임워크를, 그것이 쓰인 언어를 익힌 뒤에 배웁니다.시작 전용 페이지
2개 섹션, 순서대로
1. 기초 (Fundamentals)42 개 강의37 챌린지65 문제
2. Next.js 핵심 (Next.js Essentials)47 개 강의32 챌린지99 문제
89 개 강의69 챌린지164 문제
7
7단계
Git과 버전 관리전용 페이지
이 단계 시작시작커밋, 브랜치, 병합, 충돌 해결, 원격 저장소. 모든 프론트엔드 업무와 모든 포트폴리오 프로젝트는 Git 저장소 안에 있습니다. 여기서 익혀 두면 다음 단계의 프로젝트를 실무와 같은 방식으로 내보낼 수 있습니다.시작 전용 페이지58 개 강의46 챌린지370 문제
8
8단계
프로젝트: 이미 본 것을 직접 만들기
이 단계 시작시작flexbox와 선택자 연습, DOM과 배열 메서드 연습, 그리고 실제 제작으로. Coddy 프로필 카드, Instagram 페이지, Netflix 로그인 페이지, 이미지 슬라이더. 하나하나가 채용 담당자가 바로 열어 볼 수 있는 포트폴리오 조각입니다.시작
8개 코스, 순서대로
145 개 강의2 챌린지

제공되는 것

코딩을 배우기 위해 사용할 모든 것

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js

Code Editor

1const greeting = "Hello, Coddy!"

2function sayHi(name) {

3 return greeting + " " + name

Test #1

Test #2

Test #3

Input

"Alex"

Output

"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

January 2026

Double or Nothing

Day 5 of 7

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

250

Variables

CONTINUE

4.9

Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger LeagueTop 7 advance

Alex7+ Days

2840

Jordan7+ Days

2650

Sam7+ Days

2420

Casey

2180

Morgan7+ Days

1950

Promotion zone

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables

Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

Certificate of Completion

This certifies thatJohn Doehas successfully completed

Python Fundamentals

DateJan 2026

Add to LinkedIn

프론트엔드 개발을 Coddy에서 배워야 하는 이유

만들고 있는 페이지가 바로 보입니다. 모든 HTML, CSS, JavaScript 레슨은 코드 바로 옆 브라우저에서 실시간으로 렌더링되므로, 잘못 쓴 선택자나 무너진 flexbox가 마지막에 스크린샷으로 드러나는 게 아니라 작성하는 그 순간 눈에 들어옵니다.
순서가 맞고, JavaScript를 건너뛰지 않습니다. 대부분의 프론트엔드 강의는 HTML에서 프레임워크로 곧장 달려가지만, 이 경로는 React 앞에 JavaScript를 온전히 세 개 섹션으로 둡니다. 밑에 깔린 언어가 읽혀야 프레임워크도 읽히기 때문입니다.
여러분의 마크업과 코드를 읽는 AI 힌트. 레이아웃이 깨지거나 컴포넌트가 렌더링되지 않을 때, Bugsy는 실제로 작성한 내용을 들여다보고 정답을 대신 건네지 않으면서 해결 쪽으로 밀어 줍니다.
채용 담당자가 바로 열어 볼 수 있는 프로젝트. 마지막 단계는 이미 익숙한 페이지를 다시 만들어 보는 8개의 실제 결과물이고, 하나하나가 공유 가능한 포트폴리오 조각이 됩니다. 여기에 앞의 일곱 단계에 속한 모든 강의의 무료 수료증이 더해집니다.

프론트엔드 개발자가 되는 것에 대한 자주 묻는 질문

프론트엔드 개발자가 되려면 어떻게 해야 하나요?

빈 파일에서 페이지 하나를 만들 수 있을 만큼 HTML, CSS, JavaScript를 익히고, 여기에 TypeScript와 프레임워크 하나를 더하세요(React가 안전한 선택입니다). 그다음 Git을 배우고, 튜토리얼 없이 실제 프로젝트를 서너 개 만들어 인터넷에 올리면 됩니다. 이 경로가 정확히 그 순서입니다. 수료증보다 프로젝트가 중요합니다. 채용 담당자가 30초 만에 판단할 수 있는 건 프론트엔드에서는 포트폴리오뿐이기 때문입니다.

HTML, CSS, JavaScript 중 무엇을 먼저 배워야 하나요?

HTML이 먼저, 그다음 CSS, 그다음 JavaScript입니다. 시간은 JavaScript에 가장 많이 쓰세요. HTML은 두어 주, CSS는 한 달쯤이면 익숙해지지만 JavaScript는 온전한 프로그래밍 언어이고, 독학하는 프론트엔드 개발자 대부분이 대충 넘어가는 지점이기도 합니다. 이 경로는 프레임워크가 등장하기 전에 JavaScript에 세 개 섹션과 DOM 섹션 하나를 배정합니다.

프론트엔드 개발자에게 TypeScript가 꼭 필요한가요?

취업을 목표로 한다면 사실상 필요합니다. 실무의 React, Next.js 코드베이스는 절대다수가 TypeScript로 작성되어 있고, 채용 공고에 'JavaScript'라고 적혀 있어도 실제로는 TypeScript인 경우가 많습니다. JavaScript가 탄탄하다면 짧은 단계이기 때문에, 이 경로에서는 맨 끝이 아니라 React 바로 앞에 놓았습니다.

React, Vue, Angular 중 어떤 프레임워크를 배워야 하나요?

원하는 특정 회사가 다른 걸 요구하지 않는 한 React입니다. 채용 공고 수가 압도적으로 많고 생태계도 가장 크며, 그 위에 얹히는 Next.js는 새로 만들어지는 프로덕션 사이트 대부분이 쓰는 선택지입니다. 컴포넌트, 상태, props, 렌더링 같은 개념은 나중에 Vue나 Angular로 한두 주면 옮겨 갑니다. 이 경로는 React와 Next.js를 가르칩니다.

프론트엔드 개발을 배우는 데 얼마나 걸리나요?

하루 한 시간이면 포트폴리오를 갖춘 주니어 수준까지 대략 6~9개월입니다. 이 경로에서 HTML과 CSS는 합쳐서 6~8주, JavaScript는 2~3개월, TypeScript는 2주, React와 Next.js는 6주가 걸리고, 프로젝트 단계는 계속 만드는 동안 이어집니다. 의미 있는 숫자는 끝낸 레슨 수가 아니라 완성한 프로젝트 수입니다.

이 경로에 테스트, 접근성, 상태 관리가 포함되나요?

별도의 강의로는 아직 없고, 페이지를 부풀리기보다 그 사실을 밝히는 쪽을 택합니다. 접근성 있는 페이지의 토대인 시맨틱 마크업은 HTML 단계에 들어 있고, React 자체의 상태 관리도 다룹니다. 테스트 강의, 더 깊은 접근성 작업, 상태 관리 라이브러리는 커리큘럼 로드맵에 올라 있으며 공개되는 대로 새로운 단계로 이 경로에 합류합니다.

무료 강의만으로 프론트엔드 취업이 가능한가요?

네, 그 강의들이 포트폴리오로 이어진다면요. 이 경로가 8개의 프로젝트로 끝나는 이유가 바로 그것입니다. 기업이 보는 것은 여러분이 만들었고 바로 열어 볼 수 있는 페이지, 그걸 여러분이 만들었음을 보여 주는 Git 기록, 그리고 레이아웃과 컴포넌트를 설명할 수 있는 면접입니다. 셋 다 이 경로에서 나오고, 어느 것도 유료 부트캠프를 필요로 하지 않습니다.

다른 학습 경로

같은 코스를 다른 직무에 맞게 배열한 경로입니다. 진행 상황은 이어집니다. 한 경로에서 마친 코스는 그 코스를 포함한 모든 경로에서 인정됩니다.

모든 학습 경로

Coddy programming languages illustration

프론트엔드 개발자 경로를 무료로 시작하세요

학습 시작