Mình bắt đầu từ con số không và lần đầu tự dựng được trang giới thiệu cá nhân có menu, form và hiệu ứng cuộn. Thầy Đức Anh giải thích rất kỹ phần DOM nên khi làm bài tập cuối mình không còn sợ lỗi.
HTML, CSS & JavaScript nền tảng
Từ trang HTML đầu tiên đến ứng dụng web chạy thật trên mạng, học qua 6 dự án nhỏ liên tiếp.
Giảng viên: Nguyễn Đức Anh · Frontend Tech Lead
Bạn sẽ làm được gì
- Viết HTML ngữ nghĩa và dựng trang đúng cấu trúc, thân thiện với SEO cơ bản
- Trình bày giao diện bằng CSS với Flexbox, Grid và biến CSS
- Làm website responsive mobile first từ một bản thiết kế Figma
- Viết JavaScript xử lý logic: biến, hàm, mảng, object và async/await
- Thao tác DOM, xử lý sự kiện, kiểm tra form và lưu dữ liệu bằng LocalStorage
- Gọi API bằng fetch, quản lý code bằng Git và đưa dự án lên mạng
Đây là khóa nền tảng cho người chưa từng viết một dòng code nào. Nếu bạn muốn làm freelance web, chuyển nghề sang lập trình frontend, hoặc đơn giản muốn hiểu website được tạo ra thế nào, khóa học dẫn bạn đi từng bước, không bỏ qua phần căn bản nào.
Sau 30 giờ, bạn dựng được trang web responsive từ bản thiết kế, viết JavaScript xử lý form, gọi dữ liệu từ API, lưu dữ liệu trên trình duyệt và đưa sản phẩm lên GitHub Pages hoặc Netlify. Bạn cũng biết dùng DevTools và Git, hai kỹ năng làm việc nhóm không thể thiếu.
Giảng viên Nguyễn Đức Anh dạy theo kiểu “gõ cùng nhau”: mỗi bài là một đoạn code nhỏ chạy được ngay, cuối mỗi chương là một bài tập tự làm có đáp án tham khảo. Đây cũng là bước đệm tốt trước khi học React.
Khóa học dành cho
- Người chưa biết lập trình muốn bắt đầu với web
- Designer muốn tự code giao diện mình thiết kế
- Sinh viên, người đi làm muốn đổi sang nghề lập trình frontend
- Freelancer muốn nhận các dự án landing page, website giới thiệu
Yêu cầu đầu vào
- Chỉ cần máy tính (Windows, macOS hoặc Linux) và kết nối internet
- Không cần biết lập trình, biết gõ máy tính cơ bản là đủ
- Dành khoảng 6 đến 8 giờ mỗi tuần để học và làm bài tập
Công cụ sử dụng
Visual Studio CodeGoogle Chrome DevToolsGit và GitHubFigma (xem bản thiết kế)Netlify
Giáo trình
6 chương · 48 bài học · 30 giờ 0 phút · 3 bài học thử miễn phí
Chương 1: Bắt đầu với web và HTML8 bài · 300 phút
- Web hoạt động thế nào: trình duyệt, server, domainHọc thử25′
- Cài VS Code và chạy trang HTML đầu tiênHọc thử30′
- Thẻ, thuộc tính và cấu trúc tài liệu HTMLHọc thử35′
- Văn bản, liên kết, hình ảnh và danh sách35′
- Bảng, form và thẻ ngữ nghĩa40′
- Dùng DevTools để soi và sửa trang35′
- Dùng Git và GitHub để lưu code40′
- Bài tập: trang CV cá nhân60′
Chương 2: CSS nền tảng8 bài · 300 phút
- Selector và độ ưu tiên30′
- Box model, margin và padding35′
- Màu sắc, font chữ và đơn vị35′
- Flexbox: căn chỉnh và chia cột45′
- Grid: dựng lưới bố cục45′
- Position, z-index và overflow35′
- Biến CSS và thiết kế nhất quán30′
- Bài tập: dựng landing page từ bản thiết kế45′
Chương 3: Responsive và giao diện đẹp8 bài · 300 phút
- Mobile first và media query40′
- Ảnh và video co giãn30′
- Navbar responsive và menu mobile40′
- Transition và animation bằng CSS40′
- Hover, focus và trạng thái tương tác30′
- Đọc bản thiết kế Figma và đo khoảng cách35′
- Tối ưu hiệu năng ảnh và font30′
- Bài tập: website quán cà phê responsive55′
Chương 4: JavaScript cơ bản8 bài · 300 phút
- Biến, kiểu dữ liệu và toán tử35′
- Điều kiện và vòng lặp40′
- Hàm và phạm vi biến40′
- Mảng và các hàm map, filter45′
- Object và JSON35′
- Bắt lỗi và debug bằng console30′
- ES6: arrow function, destructuring, template string35′
- Bài tập: máy tính chia tiền và tiền tip40′
Chương 5: JavaScript trong trình duyệt8 bài · 300 phút
- DOM: chọn và thay đổi phần tử35′
- Sự kiện và event delegation40′
- Xử lý form và kiểm tra dữ liệu40′
- LocalStorage lưu dữ liệu người dùng35′
- Fetch API và gọi dữ liệu từ server45′
- Async/await và xử lý lỗi mạng40′
- Chia code thành module với ES modules30′
- Bài tập: ứng dụng todo list có lưu trữ35′
Chương 6: Dự án cuối khóa và triển khai8 bài · 300 phút
- Lên kế hoạch dự án và cấu trúc thư mục30′
- Dựng giao diện ứng dụng thời tiết40′
- Gọi API thời tiết và hiển thị dữ liệu45′
- Tìm kiếm, lịch sử và chế độ sáng tối40′
- Kiểm thử thủ công và sửa lỗi30′
- Deploy lên GitHub Pages hoặc Netlify35′
- Viết README và đưa dự án vào portfolio30′
- Lộ trình học tiếp: React, backend, WordPress50′
Dự án thực hành
Trang CV và portfolio cá nhân
Một trang HTML/CSS responsive giới thiệu bản thân, dùng làm điểm đầu cho portfolio và đưa lên GitHub Pages.
Website quán cà phê responsive
Dựng từ bản thiết kế Figma với navbar mobile, lưới sản phẩm và hiệu ứng CSS, hiển thị tốt từ điện thoại đến máy tính.
Ứng dụng thời tiết và todo list
Hai ứng dụng JavaScript gọi API, lưu dữ liệu trong LocalStorage, có chế độ sáng tối và được triển khai trên mạng.
Giảng viên
Nguyễn Đức Anh
Frontend Tech Lead · 9 năm kinh nghiệm
Frontend Tech Lead dạy lập trình web chắc nền tảng, rồi mới lên framework.
Xem hồ sơĐánh giá của học viên
- 5 sao1
- 4 sao1
- 3 sao0
- 2 sao0
- 1 sao0
Khóa chắc phần nền tảng hơn nhiều giáo trình trên lớp, nhất là Flexbox, Grid và fetch dữ liệu. Phần bất đồng bộ khá khó, mình phải xem lại vài lần, nhưng bài ứng dụng thời tiết cuối khóa làm xong thấy rất đã.
Chỉ học viên đã hoàn thành khóa mới có thể đánh giá (mô phỏng).
Câu hỏi thường gặp
Tôi chưa biết gì về lập trình, có học nổi không?
Có, khóa này được thiết kế cho người bắt đầu từ con số 0. Mỗi khái niệm đều có ví dụ nhỏ chạy được ngay, và bạn có thể xem lại bài bất cứ lúc nào vì quyền truy cập không giới hạn thời gian.
Khi code lỗi mà không biết sửa, tôi làm gì?
Bạn đăng đoạn code và thông báo lỗi dưới bài học, giảng viên hoặc trợ giảng sẽ chỉ cách đọc lỗi và sửa trong ngày làm việc. Chương 1 cũng dạy bạn dùng DevTools để tự tìm lỗi.
Có chứng chỉ không?
Có, bạn nhận chứng nhận hoàn thành của SKILLUP khi học hết giáo trình và nộp các dự án chương. Đây là chứng nhận khóa học, bạn nên kèm link dự án trên GitHub khi ứng tuyển.
Nếu học thử thấy không hợp thì sao?
Bạn có thể xem miễn phí 3 bài đầu, và nếu đã mua vẫn được hoàn tiền trong 7 ngày với điều kiện chưa học quá 30% nội dung. Chỉ cần liên hệ SKILLUP kèm mã đơn hàng.
Máy tính cấu hình thấp có học được không?
Được. Chỉ cần VS Code và trình duyệt nên máy văn phòng cũ cũng chạy tốt. Bạn không cần card đồ họa hay RAM lớn cho khóa này.
Bài viết liên quan
Học lập trình web từ đầu: lộ trình thực tế cho người mới
Học lập trình web từ đầu cần học gì trước? Lộ trình thực tế từ HTML, CSS, JavaScript đến React, kèm dự án mẫu cho từng…
WordPress hay code tay: nên chọn gì cho website của bạn
WordPress hay code tay? So sánh chi phí, tốc độ làm, khả năng mở rộng và SEO để chọn đúng cách làm website, kèm bảng…

