Tổng quan chương trình học CSS

🔗 Bài học khác trong chuyên mục:

Để 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

Bài học tiếp theo Bài 1: Giới thiệu CSS và cách kết nối CSS với HTML →