Bước 1
Lộ trình học
Lộ trình Frontend Developer
Các khóa học miễn phí theo đúng thứ tự một front end developer thật sự cần: HTML cho cấu trúc, CSS cho bố cục, JavaScript cho hành vi, TypeScript cho sự an toàn, React và Next.js cho ứng dụng thật, Git để phát hành, và tám dự án để chứng minh năng lực. Mọi bài học đều chạy trên trình duyệt, và mỗi khóa học trước bước dự án đều kết thúc bằng một giấy chứng nhận miễn phí.
556,181+ người học code đã đăng ký các khóa học này
804 bài học823 thử thách3,182 câu hỏi trắc nghiệm
- Phù hợp cho người mới
Trợ giúp lập trình bằng AI
Bài học tương tác thực hành
Có thuyết minh âm thanh cho mọi bài học
Bài trắc nghiệm để kiểm tra kiến thức
Một chứng nhận lộ trình ở cuối, cùng 13 chứng nhận trên đường đi
Lộ trình front end developer, từng bước một
Mỗi bước là một khóa học có sẵn trên Coddy. Học theo thứ tự, hoặc nhảy thẳng vào khóa bạn còn thiếu: tiến độ của từng khóa học đều được lưu riêng.
- 1
- 2Bước 2
CSS: bố cục và thiết kế
Bắt đầu bước nàyBắt đầuSelector, box model, màu sắc và kiểu chữ, rồi flexbox, grid, bố cục responsive, transition và animation qua hai phần. Đây là bước trang web bắt đầu trông giống những trang bạn vẫn dùng.Bắt đầu2 phần, theo thứ tự - 3Bước 3
JavaScript, trọn vẹn ngôn ngữTrang riêng
Bắt đầu bước nàyBắt đầuKiến thức nền tảng, logic và luồng điều khiển, rồi đối tượng và lớp, qua ba phần. Làm front end là làm JavaScript; mọi framework sau bước này chỉ là một cách tổ chức nó, và bạn chỉ đọc được framework khi đã hiểu ngôn ngữ.Bắt đầuTrang riêng3 phần, theo thứ tự - 4Bước 4
JavaScript trên trình duyệt
Bắt đầu bước nàyBắt đầuDOM, sự kiện, lấy dữ liệu và xây trang tương tác không cần framework, rồi các pattern front end thực tế. Đây là nơi HTML, CSS và JavaScript hòa làm một: một trang web phản hồi lại người đang dùng nó.Bắt đầu2 phần, theo thứ tự - 5Bước 5
TypeScriptTrang riêng
Bắt đầu bước nàyBắt đầuKiểu, interface, generic và lỗi của trình biên dịch như một công cụ. Gần như mọi codebase React chuyên nghiệp đều dùng TypeScript, nên nó đứng ngay trước framework thay vì bị để sau cùng.Bắt đầuTrang riêng - 6Bước 6
React và Next.jsTrang riêng
Bắt đầu bước nàyBắt đầuComponent, props, state, hook và rendering, rồi Next.js cho routing, tải dữ liệu và ứng dụng thật. Framework được nhiều tin tuyển dụng front end nhắc tới nhất, dạy sau ngôn ngữ dùng để viết nó.Bắt đầuTrang riêng2 phần, theo thứ tự - 7Bước 7
Git và quản lý phiên bảnTrang riêng
Bắt đầu bước nàyBắt đầuCommit, nhánh, merge, giải quyết xung đột và remote. Mọi công việc front end và mọi dự án portfolio đều nằm trong một repository Git; học Git ở đây giúp các dự án ở bước sau được phát hành đúng như cách làm việc thật.Bắt đầuTrang riêng - 8Bước 8
Dự án: xây những gì bạn đã thấy
Bắt đầu bước nàyBắt đầuBài luyện flexbox và selector, luyện DOM và các phương thức mảng, rồi các sản phẩm thật: thẻ hồ sơ Coddy, trang Instagram, trang đăng nhập Netflix và một image slider. Mỗi sản phẩm là một phần portfolio mà nhà tuyển dụng có thể mở ra xem.Bắt đầu8 khóa học, theo thứ tự- CSS Flexbox: khóa học đầy đủChỉ html15 bài học
- Bộ chọn CSSChỉ html15 bài học
- Các phương thức DOM trong JavaScriptChỉ html13 bài học
- Các phương thức mảng trong JavaScriptChỉ javascript18 bài học
- Dự án giao diện: tạo bản sao thẻ hồ sơ CoddyChỉ html26 bài học24 thử thách1 dự án
- Sao chép trang Instagram | Dự án front-endChỉ html16 bài học14 thử thách1 dự án
- Bản sao trang đăng nhập Netflix | Dự án front-endChỉ html19 bài học18 thử thách1 dự án
- Dự án slider giao diện người dùngChỉ html23 bài học22 thử thách1 dự án
Bạn nhận được gì
Mọi thứ bạn sẽ dùng để học lập trình
Học qua thực hành
Viết code thật, truy vấn cơ sở dữ liệu, xây dựng trang web và làm chủ prompt AI. Các bài học tương tác bao quát mọi kỹ năng mà lập trình viên hiện đại cần.
playground.js
Trình chỉnh sửa code
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test #1
Test #2
Test #3
Đầu vào
"Alex"
Đầu ra
"Hello, Coddy! Alex"
Xây dựng streak
Học đều đặn và nhìn tiến độ của bạn lớn dần! Theo dõi thói quen code mỗi ngày, bảo vệ streak bằng ngày đóng băng và nhận phần thưởng khi học mỗi ngày.
12 ngày streak
Quay lại ngày mai để giữ streak!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
Gấp đôi hoặc mất hết
Ngày 5/7
Đóng băng streak
2 left
Code ở mọi nơi
Mang hành trình lập trình theo bên mình! Không cài đặt, không tải về: chỉ cần mở ra và bắt đầu code. Có trên iOS, Android và Web với đánh giá 4,9 sao.
7
250
5
Biến
Tiếp tục
4.9
Đánh giá
Bạn không đơn độc
Thi đấu trên bảng xếp hạng toàn cầu, mời bạn bè để nhận phần thưởng và cùng nhau ăn mừng thành công. Học code cùng bạn bè vui hơn nhiều!
Giải đấu ChallengerTop 7 được thăng hạng
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Vùng thăng hạngMọi cách để học
Đọc, nghe, tự kiểm tra, hỏi AI hoặc tra cứu bất cứ điều gì bạn đã học. Mỗi bài học phù hợp với trình độ của bạn.
Giới thiệu về biến
Âm thanh
Biến là một vùng chứa có tên, lưu một giá trị mà bạn có thể dùng lại sau trong chương trình.
Trong Python, bạn tạo biến bằng cách viết tên, dấu bằng, rồi giá trị muốn lưu.
Giá trị có thể thay đổi theo thời gian. Gán lại tên đó chỉ đơn giản là trỏ nó tới một giá trị mới.
1xSarah
Nhận chứng nhận
Nhận chứng nhận cho mỗi khóa học bạn hoàn thành. Thêm vào hồ sơ LinkedIn và CV để cho nhà tuyển dụng thấy kỹ năng lập trình của bạn.
Giấy chứng nhận hoàn thànhChứng nhận rằngNguyễn Văn Anđã hoàn thành xuất sắcPython cơ bản
Python cơ bản
NgàyTh1 2026
Thêm vào LinkedInVì sao nên học lập trình front end trên Coddy
- Bạn thấy ngay trang mình đang xây. Mọi bài học HTML, CSS và JavaScript đều hiển thị trực tiếp trên trình duyệt cạnh code của bạn, nên một selector sai hay một flexbox bị vỡ lộ ra ngay giây bạn viết, chứ không phải trong ảnh chụp màn hình ở cuối bài.
- Đúng thứ tự, và không bỏ qua JavaScript. Phần lớn khóa học front end vội vàng nhảy từ HTML sang framework; lộ trình này dành cho JavaScript ba phần trọn vẹn trước React, vì chỉ khi hiểu ngôn ngữ bên dưới thì bạn mới đọc được framework.
- Gợi ý AI đọc cả markup lẫn code của bạn. Khi bố cục bị vỡ hay một component không hiển thị, Bugsy xem bạn đã viết gì và gợi hướng sửa mà không đưa sẵn đáp án.
- Dự án mà nhà tuyển dụng mở ra xem được. Bước cuối là tám sản phẩm thật, bản sao của những trang bạn đã quen, mỗi sản phẩm là một phần portfolio có thể chia sẻ, kèm giấy chứng nhận miễn phí cho mọi khóa học trong bảy bước đầu.
Câu hỏi thường gặp về việc trở thành front end developer
Làm thế nào để trở thành front end developer?
Học HTML, CSS và JavaScript đủ vững để dựng một trang từ tệp trống, thêm TypeScript và một framework (React là lựa chọn an toàn), học Git, rồi tự xây ba hoặc bốn dự án thật không theo hướng dẫn và đưa chúng lên mạng. Đó chính là lộ trình này, theo đúng thứ tự đó. Dự án quan trọng hơn chứng nhận: portfolio front end là thứ duy nhất nhà tuyển dụng có thể đánh giá trong ba mươi giây.
Nên học HTML, CSS hay JavaScript trước?
HTML trước, rồi CSS, rồi JavaScript, và dành cho JavaScript nhiều thời gian nhất. HTML mất vài tuần và CSS khoảng một tháng để thành thạo; JavaScript là một ngôn ngữ lập trình hoàn chỉnh và là chỗ phần lớn front end developer tự học hay đi tắt. Lộ trình này dành cho nó ba phần cùng một phần về DOM trước khi bất kỳ framework nào xuất hiện.
Front end developer có cần học TypeScript không?
Để đi làm thì gần như luôn cần: phần lớn codebase React và Next.js chuyên nghiệp được viết bằng TypeScript, và một tin tuyển dụng ghi 'JavaScript' thường có nghĩa là TypeScript trên thực tế. Đây là một bước ngắn khi JavaScript đã vững, nên trong lộ trình này nó nằm ngay trước React thay vì ở cuối.
React, Vue hay Angular: nên học framework nào?
React, trừ khi công việc cụ thể bạn nhắm tới yêu cầu khác. React có nhiều tin tuyển dụng nhất với khoảng cách rất xa, hệ sinh thái lớn nhất, và Next.js xây trên React là thứ phần lớn các trang web production mới dùng. Các ý tưởng như component, state, props và rendering có thể chuyển sang Vue và Angular sau này chỉ trong một hai tuần. Lộ trình này dạy React và Next.js.
Học front end mất bao lâu?
Khoảng sáu đến chín tháng nếu học một giờ mỗi ngày để đạt trình độ junior kèm portfolio. Trong lộ trình này, HTML và CSS mất tổng cộng sáu đến tám tuần, JavaScript hai đến ba tháng, TypeScript hai tuần, React và Next.js sáu tuần, còn bước dự án kéo dài bao lâu tùy bạn tiếp tục xây. Con số quan trọng là số dự án hoàn thành, không phải số bài học hoàn thành.
Lộ trình này có dạy testing, accessibility hay quản lý state không?
Không thành khóa học riêng, và chúng tôi muốn nói thẳng thay vì độn trang cho dài. Semantic markup, nền tảng của trang web dễ tiếp cận, là một phần của bước HTML, và cách React tự quản lý state cũng được dạy; một khóa học testing, phần accessibility chuyên sâu hơn và một thư viện state đã có trong kế hoạch chương trình học và sẽ được thêm vào lộ trình này thành các bước mới khi ra mắt.
Chỉ học khóa miễn phí có xin được việc front end không?
Có, nếu các khóa học giúp bạn có portfolio, và đó là lý do lộ trình này kết thúc bằng tám dự án. Nhà tuyển dụng sàng lọc dựa trên một trang bạn đã xây mà họ mở ra xem được, một lịch sử Git cho thấy chính bạn xây nó, và một buổi phỏng vấn mà bạn giải thích được một bố cục và một component. Cả ba đều đến từ lộ trình này; không cái nào cần bootcamp trả phí.
Tôi có nhận được chứng nhận cho lộ trình Frontend Developer không?
Có. Hoàn thành mọi bước và bạn nhận một chứng nhận miễn phí cho cả lộ trình Frontend Developer. Chứng nhận liệt kê từng khóa học bạn đã hoàn thành trên đường đi và liên kết đến chứng nhận riêng của từng khóa, để ai cũng có thể kiểm tra mọi kỹ năng được nêu. Bạn có thể thêm nó vào hồ sơ LinkedIn. Đây là chứng nhận hoàn thành của Coddy, không phải văn bằng được kiểm định.
