Phù hợp với
- Người mới muốn học frontend từ nền móng
- Người hay copy CSS nhưng chưa hiểu layout
- Người cần làm trang portfolio hoặc landing page đầu tiên
← Quay về khóa học
Frontend căn bản
HTML/CSS cho người mới mất gốc
Học cách dựng trang web đúng semantic, chia layout mobile-first và viết CSS gọn gàng trước khi học JavaScript.
Sau khóa học, bạn có thể tự dựng landing page responsive, đọc được cấu trúc HTML/CSS của một website và biết cách sửa giao diện không bị vỡ layout.
Cần chuẩn bị
- Chưa cần biết lập trình
- Biết tạo folder, mở file bằng VS Code và dùng trình duyệt
- Nên cài Live Server hoặc dùng Next.js sau khi đã quen HTML/CSS
Kết quả đạt được
- Biết viết HTML semantic, dễ đọc và tốt cho SEO
- Nắm box model, spacing, typography, flexbox, grid
- Dựng được trang responsive cho mobile, tablet, desktop
Study method
Cách học để không bị ngợp.
Mỗi khóa được thiết kế theo nhịp: hiểu khái niệm, làm bài tập nhỏ, áp dụng vào project và review lại bằng checklist.
Mỗi bài chỉ tập trung một khái niệm và một mini exercise
Luôn xem giao diện trên mobile trước, sau đó mở rộng lên desktop
Sau mỗi module, refactor class name và spacing để layout sạch hơn
Chụp screenshot trước/sau khi sửa để luyện mắt UI
Syllabus chi tiết
Module, mục tiêu và bài tập sau từng bài.
Lesson nào cũng có mục tiêu học và bài thực hành cụ thể để người mới biết mình cần làm gì sau khi xem tài liệu.
01HTML semantic và cấu trúc trang
4 bài học
HTML semantic và cấu trúc trang
4 bài học
Xây nền móng HTML đúng nghĩa, biết dùng thẻ theo vai trò thay vì chỉ dùng div.
- 01
HTML document structure
Mục tiêu: Hiểu html, head, body, metadata và cách trình duyệt đọc trang.
Bài tập: Tạo trang giới thiệu khóa học có title, description và heading đúng cấp.
- 02
Semantic tags
Mục tiêu: Dùng header, main, section, article, nav, footer đúng ngữ cảnh.
Bài tập: Chia lại một trang toàn div thành cấu trúc semantic.
- 03
Text, links and media
Mục tiêu: Trình bày nội dung, link, image có alt và thứ tự đọc hợp lý.
Bài tập: Tạo section bài viết có ảnh, link tài liệu và danh sách ý chính.
- 04
Forms basic
Mục tiêu: Hiểu label, input, button, required và trải nghiệm nhập liệu cơ bản.
Bài tập: Tạo form đăng ký học miễn phí có label rõ ràng.
02CSS nền tảng
4 bài học
CSS nền tảng
4 bài học
Hiểu cách CSS áp dụng style, xử lý spacing, typography và màu sắc nhất quán.
- 01
Selectors and cascade
Mục tiêu: Biết selector, specificity và tránh CSS ghi đè khó kiểm soát.
Bài tập: Sửa một file CSS bị conflict màu button và heading.
- 02
Box model
Mục tiêu: Hiểu margin, padding, border, width và box-sizing.
Bài tập: Dựng 3 card khóa học có spacing đều và không vỡ chiều rộng.
- 03
Typography
Mục tiêu: Chọn font size, line-height, weight phù hợp để dễ đọc.
Bài tập: Tối ưu một đoạn mô tả dài thành block dễ scan.
- 04
Color and state
Mục tiêu: Dùng màu, hover, focus state có chủ đích.
Bài tập: Thiết kế button primary/secondary có hover và focus visible.
03Layout responsive
4 bài học
Layout responsive
4 bài học
Dùng flexbox, grid và media query để layout chạy tốt trên nhiều kích thước màn hình.
- 01
Flexbox
Mục tiêu: Sắp xếp item theo hàng/cột, căn giữa và xử lý khoảng cách.
Bài tập: Dựng navbar responsive đơn giản.
- 02
CSS Grid
Mục tiêu: Tạo lưới card rõ ràng và tự xuống dòng.
Bài tập: Dựng grid danh sách khóa học 1/2/3 cột theo viewport.
- 03
Mobile-first responsive
Mục tiêu: Viết style từ mobile trước rồi nâng cấp lên tablet/desktop.
Bài tập: Dựng hero section không bị tràn chữ trên điện thoại.
- 04
Layout debugging
Mục tiêu: Biết tìm nguyên nhân overflow, overlap và spacing lệch.
Bài tập: Fix một layout cố tình bị tràn ngang trên mobile.
Project cuối khóa
Responsive Learning Landing Page
Dựng landing page giới thiệu một khóa học miễn phí với hero, roadmap, course cards, form đăng ký và footer.
Yêu cầu sản phẩm
- HTML semantic đầy đủ header, main, section, footer
- Mobile-first, không tràn ngang ở màn hình nhỏ
- Có card khóa học, CTA, form và trạng thái hover/focus
- CSS được chia theo section, class name dễ hiểu
Tiêu chí đạt
- Nội dung đọc dễ, heading đúng thứ tự
- Spacing đều và giao diện không bị một màu
- Responsive tốt trên 375px, 768px và desktop
- Không dùng inline style hoặc class đặt tên mơ hồ
Tài liệu học tập
Checklist, bài tập và tài liệu đi kèm.
Các tài liệu này giúp người học tự kiểm tra, luyện tập và hoàn thiện project theo chuẩn dễ theo dõi.
Checklist
Semantic HTML checklist
Danh sách thẻ semantic nên dùng cho từng phần giao diện.
Practice
Responsive layout drills
Bài tập nhỏ luyện flex, grid, spacing và media query.
Project
Landing page wireframe
Khung nội dung để học viên tự dựng trang đầu tiên.
Next steps
Học xong nên làm gì tiếp?
Đừng học rời rạc. Mỗi khóa đều dẫn sang kỹ năng hoặc project kế tiếp trong lộ trình full-stack.
1
Học JavaScript Foundation để thêm tương tác cho giao diện
2
Học React/Next.js sau khi đã nắm component layout bằng HTML/CSS
3
Làm Project Portfolio để luyện trình bày sản phẩm cá nhân
