Để việc học CSS trở nên có hệ thống, rõ ràng và dễ theo dõi, chúng ta sẽ chia toàn bộ chương trình CSS thành 4 phần, với số lượng bài và tiêu đề từng bài học cụ thể như sau:
PHẦN 1: CSS CƠ BẢN (10 bài)
Làm quen với cú pháp CSS, cách áp dụng style, màu sắc, font chữ, khoảng cách…
| STT | Tên bài học |
|---|---|
| 1 | Giới thiệu CSS và 3 cách kết nối với HTML |
| 2 | Selector cơ bản: theo thẻ, class, id |
| 3 | Cách dùng màu sắc: tên màu, mã HEX, RGB, HSL |
| 4 | Font chữ, font-size, font-weight, line-height |
| 5 | Thuộc tính text: căn giữa, gạch chân, viết hoa |
| 6 | Box model: margin, padding, border, content |
| 7 | Width, height và thuộc tính kích thước |
| 8 | Background: màu nền, ảnh nền, repeat, position |
| 9 | Border và border-radius – bo góc, khung đẹp |
| 10 | Tổ chức CSS: comment, reset, đặt tên class |
PHẦN 2: BỐ CỤC TRANG WEB (8 bài)
Tìm hiểu các kỹ thuật bố cục: từ cơ bản đến hiện đại với Flexbox và Grid.
| STT | Tên bài học |
|---|---|
| 11 | Display: block, inline, inline-block, none |
| 12 | Position: static, relative, absolute, fixed |
| 13 | Float và clear – bố cục kiểu cũ |
| 14 | Flexbox cơ bản – trục chính và trục phụ |
| 15 | Flexbox nâng cao – căn giữa, khoảng cách, wrap |
| 16 | Grid layout cơ bản – tạo lưới, dòng và cột |
| 17 | Grid nâng cao – đặt vị trí, lưới lồng |
| 18 | So sánh Flexbox và Grid – nên dùng khi nào? |
PHẦN 3: HIỆU ỨNG, RESPONSIVE, THỰC TIỄN (8 bài)
Giúp website sinh động hơn, hiển thị tốt trên mọi thiết bị và chuẩn hóa giao diện.
| STT | Tên bài học |
|---|---|
| 19 | Hover, active, focus – hiệu ứng khi tương tác |
| 20 | Transition – hiệu ứng mượt mà |
| 21 | Animation – chuyển động nâng cao |
| 22 | Media queries – viết CSS cho từng kích thước |
| 23 | Thiết kế responsive – bố cục co giãn |
| 24 | Đơn vị CSS: px, %, em, rem, vw, vh |
| 25 | Biến CSS (CSS variables) và tổ chức chuyên nghiệp |
| 26 | Reset CSS & Normalize CSS – giúp trình duyệt đồng nhất |
PHẦN 4: DỰ ÁN THỰC HÀNH (4 bài)
Áp dụng toàn bộ kiến thức đã học để xây dựng giao diện hoàn chỉnh.
| STT | Tên bài học |
|---|---|
| 27 | Dự án 1: Trang giới thiệu cá nhân (CV) |
| 28 | Dự án 2: Landing page sản phẩm đơn giản |
| 29 | Dự án 3: Trang blog tin tức responsive |
| 30 | Tổng kết CSS – chuẩn bị học JavaScript |
Thảo luận