Thầy Hoàng IT Doanh Nghiệp · Khóa học

Học HTML/CSS chuyên sâu cho người mới

Học HTML và CSS bài bản từ cấu trúc trang, bố cục Flexbox/Grid, hiệu ứng đến responsive để dựng giao diện web chuẩn doanh nghiệp.

Cơ bản 11 chương · 59 bài học

Bạn sẽ học được

  • Dựng được trang web nhiều màn hình bằng HTML semantic và CSS nền tảng.
  • Giải thích được box model, kế thừa, specificity và cascade để debug xung đột CSS.
  • Xây dựng được bố cục hai chiều bằng Flexbox và CSS Grid.
  • Tạo được hiệu ứng bằng transform, transition và animation.
  • Làm responsive theo mobile-first với media query và breakpoint.
  • Dùng được Bootstrap và Tailwind CSS để dựng giao diện nhanh.
  • Quản lý mã nguồn bằng Git, triển khai sản phẩm lên GitHub và Vercel.

Khóa học này giải quyết vấn đề gì

HTML và CSS dễ khởi đầu nhưng khó dùng chuẩn: nhiều người viết được trang "nhìn giống thiết kế" mà không giải thích được vì sao CSS không ăn, bố cục vỡ khi đổi màn hình, hay HTML sai ngữ nghĩa. Khóa học tập trung vào cơ chế (box model, cascade, flow, lưới) thay vì liệt kê thuộc tính, để bạn tự debug và làm giao diện đúng chuẩn.

Cách học

  • Mỗi bài theo cùng cấu trúc: Mục tiêu, Cần nhớ, nội dung có ví dụ và hình minh họa kết quả thật, Bẫy thường gặp, câu hỏi ôn tập kèm đáp án.
  • Cuối mỗi chương có bài Bài tập (hoặc dự án cuối khóa) để áp dụng ngay.
  • Hầu hết ví dụ đều chạy được: hãy chép vào VS Code, thay đổi giá trị và quan sát bằng DevTools.
  • Khóa học được thiết kế theo quy trình CDIO (Conceive, Design, Implement, Operate), chú trọng thực hành và sản phẩm hoàn chỉnh.
  • Học theo thứ tự các chương; các bài sau dựa trên bài trước.

Lộ trình

Chương Nội dung Bạn làm được
1. Nhập môn và môi trường làm việc Tổng quan web, VS Code, đường dẫn, DevTools, Git/GitHub Tạo, chạy, chia sẻ trang HTML đầu tiên
2. HTML Thẻ, semantic, văn bản, danh sách, bảng, liên kết, media, form Dựng cấu trúc trang đúng chuẩn
3. CSS cơ bản Cách nhúng, selector, kế thừa, biến, font, đơn vị, màu Tạo kiểu cho trang
4. Box model Box model, margin/padding, border, background, shadow Kiểm soát kích thước và khoảng cách
5. Selectors nâng cao và cascade Combinator, pseudo, specificity, reset Debug xung đột CSS
6. Position static, relative, absolute, fixed, sticky, z-index Định vị chính xác phần tử
7. Flexbox và Grid Layout một chiều và hai chiều Dựng bố cục trang phức tạp
8. Hiệu ứng transform, filter, transition, animation, AOS Thêm chuyển động mượt
9. Responsive viewport, media query, mobile-first Làm giao diện chạy mọi thiết bị
10. Bootstrap và Tailwind Framework giao diện Dựng giao diện nhanh bằng framework
11. Dự án cuối khóa Đề dự án, tiêu chí Hoàn thiện, triển khai và trình bày sản phẩm

Sơ đồ tư duy

Các sơ đồ tư duy tổng hợp kiến thức của tác giả:

Về đơn vị biên soạn

Khóa học được biên soạn bởi Nguyễn Minh Hoàng, CodeFarm — Học lập trình từ doanh nghiệp (codefarm.edu.vn).

Dành cho ai

  • Người mới bắt đầu học lập trình web, không cần biết lập trình trước đó.
  • Sinh viên, người chuyển ngành muốn làm front-end.
  • Lập trình viên back-end muốn nắm vững giao diện web.

Yêu cầu đầu vào

  • Biết sử dụng máy tính và Internet ở mức cơ bản.
  • Một máy tính cá nhân (Windows, macOS hoặc Linux) và tài khoản GitHub.

Nội dung khóa học

  1. Chương 1. Nhập môn và môi trường làm việc7 bài
    1. Tổng quan về lập trình web
    2. Môi trường làm việc với VS Code
    3. Đặt tên file, thư mục và đường dẫn
    4. DevTools trong trình duyệt
    5. Git và GitHub cơ bản
    6. Trang web HTML đầu tiên
    7. Bài tập chương 1
  2. Chương 2. HTML9 bài
    1. Thẻ, thuộc tính và cấu trúc tài liệu HTML
    2. Thẻ inline, block và tính hợp lệ
    3. HTML Semantics
    4. Tiêu đề và văn bản
    5. Danh sách và bảng
    6. Liên kết, link và iframe
    7. Ảnh, video và audio
    8. Biểu mẫu (form)
    9. Bài tập chương 2
  3. Chương 3. CSS cơ bản9 bài
    1. CSS là gì và cách nhúng CSS vào HTML
    2. Selectors cơ bản và quy ước đặt tên
    3. Kế thừa và biến CSS
    4. Font và định dạng văn bản
    5. Xử lý ngắt dòng và cắt chữ
    6. Icon trong trang web
    7. Đơn vị đo trong CSS
    8. Màu sắc trong CSS
    9. Bài tập chương 3
  4. Chương 4. Box model6 bài
    1. Box model và box-sizing
    2. Padding và margin
    3. Border, border-radius và outline
    4. Background
    5. Box-shadow
    6. Bài tập chương 4
  5. Chương 5. Selectors nâng cao và cascade5 bài
    1. Combinators và attribute selectors
    2. Pseudo-classes và pseudo-elements
    3. Độ ưu tiên (specificity) và tính xếp tầng (cascade)
    4. Reset CSS
    5. Bài tập chương 5
  6. Chương 6. Position3 bài
    1. Position: static, relative và absolute
    2. Position: fixed, sticky và z-index
    3. Bài tập chương 6
  7. Chương 7. Bố cục với Flexbox và Grid8 bài
    1. Tư duy bố cục (layout)
    2. Flexbox: thuộc tính của container
    3. Flexbox: thuộc tính của item
    4. CSS Grid: nền tảng
    5. CSS Grid: đặt vị trí item và vùng lưới
    6. CSS Grid: căn chỉnh và lưới tự động
    7. Chọn Flexbox hay Grid và kết hợp cả hai
    8. Bài tập chương 7
  8. Chương 8. Hiệu ứng: transform, transition, animation5 bài
    1. Transform
    2. Filter
    3. Transition
    4. Animation và keyframes
    5. Thư viện AOS (Animate On Scroll)
  9. Chương 9. Responsive web design4 bài
    1. Responsive web design và viewport
    2. Media queries, breakpoints và mobile-first
    3. Các vấn đề thực tế khi làm responsive
    4. Bài tập chương 9
  10. Chương 10. Bootstrap và Tailwind CSS2 bài
    1. Bootstrap
    2. Tailwind CSS
  11. Chương 11. Dự án cuối khóa1 bài
    1. Hướng dẫn dự án cuối khóa

Nội dung chi tiết từng bài dành cho học viên đã đăng ký học.

Khóa học khác của Thầy Hoàng IT Doanh Nghiệp