Giới Thiệu
Web là gì, developer làm gì, công cụ cần thiết để bắt đầu học lập trình web.
The Web Basic
Khoá học Web Design and Development — từ nền tảng đến ứng dụng thực tế. Không yêu cầu kinh nghiệm lập trình trước.
Tài liệu biên soạn từ thực tế giảng dạy — đủ lý thuyết để hiểu tại sao, đủ thực hành để biết làm thế nào, đủ bối cảnh để không bỡ ngỡ khi ra đi làm. Làm xong lab và Final Project, bạn sẽ có nền tảng để tự phát triển tiếp hoặc nhận dự án thực tế.
Modules — Kiến Thức Nền Tảng
Đọc theo thứ tự, mỗi module xây trên module trước.
Module 1 — How the Web Works
HTTP, DNS, Client-Server, TCP/IP — cơ chế hoạt động của internet bên dưới bề mặt.
Module 2 — HTML & CSS
Markup, styling, layout, responsive design — nền tảng của mọi trang web.
Module 3 — JavaScript
Ngôn ngữ lập trình web, DOM manipulation, async programming, giới thiệu frameworks.
Module 4 — Server-Side Programming
Node.js, REST APIs, database, authentication — lập trình phía server.
Labs — Thực Hành
Hướng dẫn từng bước — học xong có thể áp dụng ngay vào dự án.
Lab 1 — Git & Version Control Git cơ bản, branching, GitHub workflow — kỹ năng bắt buộc trước khi làm bất kỳ dự án nào.
Lab 2 — CSS Processors SASS/SCSS, variables, nesting, mixins — viết CSS có tổ chức và tái sử dụng được.
Lab 3 — Tailwind CSS Utility-first CSS, responsive design với Tailwind — xây giao diện nhanh mà không cần viết CSS custom.
Lab 4 — Layout & Responsive Web Portfolio project với Tailwind + Vite — kết thúc bằng sản phẩm deploy được lên GitHub Pages.
Lab 5 — Build Website với Next.js Static blog (Pages Router + SSG) và dynamic dashboard (App Router + Supabase) — hai paradigm của Next.js.
Deep Dives — Chuyên Sâu
Ba chủ đề quan trọng được viết chi tiết với ví dụ thực tế và hướng dẫn áp dụng.
Topic 1 — Lập Trình Bất Đồng Bộ Event loop, Callbacks, Promises, Async/Await, Web Workers — hiểu tường tận async JavaScript.
Topic 2 — Quy Trình Xây Dựng Web 6 giai đoạn từ requirements đến bảo trì, scenario freelance thực tế, estimation, xử lý scope creep.
Topic 3 — SEO & Web Performance Crawling/indexing, Core Web Vitals, tối ưu ảnh/font/JS trong Next.js, monitoring sau launch.
Exercises — Bài Tập HTML & CSS
Ba bài tập giao sau buổi 4. Mỗi bài có 3 stages: cơ bản → cải thiện → Tailwind.
Hoàn thành cả 3 trước khi học JavaScript — đây là checkpoint bắt buộc.
Ex1 — Online Course Registration Form HTML forms, input validation, CSS layout — xây form đăng ký khoá học trực tuyến.
Ex2 — Student Score Table HTML tables, zebra striping, responsive table — hiển thị bảng điểm sinh viên.
Ex3 — Product Introduction Page Semantic HTML, Flexbox, page layout — xây trang giới thiệu sản phẩm hoàn chỉnh.