Lập trình web frontend
Lộ trình 9 bước học frontend: HTML ngữ nghĩa, CSS và responsive, JavaScript hiện đại, Git, React với TypeScript, gọi API và quản lý trạng thái, hiệu năng – SEO – accessibility, dự án portfolio deploy thật. Học xong làm fresher/junior frontend ở công ty phần mềm, agency hoặc nhận làm website freelance. Hợp với người thích làm giao diện, tự học tốt.
Bắt đầu ở đây
Bước 1: Cách web hoạt động & HTML ngữ nghĩa
Mỗi bước 1 bài ngắn, đọc 10–15 phút trên điện thoại. Không cần đăng ký.
Cây lộ trình thực hành
Lộ trình Lập trình web frontend
- Bước 1Bài học
Cách web hoạt động & HTML ngữ nghĩa
Trình duyệt, HTTP, DNS, tên miền; cài VS Code và Chrome DevTools; thẻ HTML ngữ nghĩa, form, ảnh có alt; lỗi hay gặp là dùng div cho mọi thứ khiến SEO và trình đọc màn hình kém.
- Bước 2Kỹ năng
CSS, Flexbox, Grid & responsive
Box model, selector, Flexbox, Grid, media query mobile-first; Tailwind CSS; chuyển thiết kế Figma thành giao diện đúng pixel trên điện thoại và máy tính.
Cần trước: Cách web hoạt động & HTML ngữ nghĩa
Nội dung cho bước này đang được biên soạn.
- Bước 3Kỹ năng
JavaScript hiện đại & thao tác DOM
Biến, hàm, mảng, object, ES6+, xử lý sự kiện, fetch API, async/await, Promise; debug bằng DevTools; lỗi bất đồng bộ và so sánh == với === thường gặp.
Cần trước: CSS, Flexbox, Grid & responsive
Nội dung cho bước này đang được biên soạn.
- Bước 4Kỹ năng
Git, GitHub & làm việc nhóm
commit, branch, merge, pull request, xử lý conflict; viết commit message rõ ràng; review code; dùng GitHub Issues hoặc Jira theo quy trình Scrum ở công ty Việt Nam.
Cần trước: JavaScript hiện đại & thao tác DOM
Nội dung cho bước này đang được biên soạn.
- Bước 5Kỹ năng
React, TypeScript & Next.js
Component, props, state, hooks, routing; TypeScript cho props và dữ liệu API; Next.js App Router, render phía server; tổ chức thư mục dự án và tái sử dụng component.
Cần trước: Git, GitHub & làm việc nhóm
Nội dung cho bước này đang được biên soạn.
- Bước 6Kỹ năng
Gọi API, form & quản lý trạng thái
REST, JSON, xử lý loading – lỗi; TanStack Query, Zustand hoặc Redux Toolkit; form với React Hook Form và validate; đăng nhập bằng token, không lưu bí mật ở frontend.
Cần trước: React, TypeScript & Next.js
Nội dung cho bước này đang được biên soạn.
- Bước 7Kỹ năng
Hiệu năng, SEO, accessibility & kiểm thử
Lighthouse, Core Web Vitals, tối ưu ảnh, lazy load; thẻ meta và dữ liệu có cấu trúc; điều hướng bằng bàn phím, độ tương phản; viết test với Vitest và Testing Library.
Cần trước: Gọi API, form & quản lý trạng thái
Nội dung cho bước này đang được biên soạn.
- Bước 8Dự án
Dự án portfolio: web bán hàng deploy thật
Xây web bán hàng nhỏ có danh sách sản phẩm, tìm kiếm, giỏ hàng, đăng nhập, gọi API thật; deploy lên Vercel kèm tên miền; README rõ ràng và link GitHub sạch.
Cần trước: Hiệu năng, SEO, accessibility & kiểm thử
Nội dung cho bước này đang được biên soạn.
- Bước 9Kiểm tra
Phỏng vấn kỹ thuật & ứng tuyển fresher
Ôn câu hỏi JavaScript, React, CSS thường gặp; làm bài test về nhà trong 3–5 ngày; viết CV một trang kèm portfolio; ứng tuyển qua TopCV, ITviec, LinkedIn.
Cần trước: Dự án portfolio: web bán hàng deploy thật
Nội dung cho bước này đang được biên soạn.
