HTML và CSS là nền tảng của mọi trang web. Loạt bài dạy cách làm trang đúng chuẩn, đẹp, đáp ứng mọi màn hình với kỹ thuật hiện đại: Flexbox, Grid, biến CSS, container query.
Bạn sẽ học được
- Dựng trang bằng HTML ngữ nghĩa
- Dùng ảnh, biểu mẫu đúng cách
- Bố cục với Flexbox và Grid
- Thiết kế đáp ứng, chế độ tối, CSS hiện đại
Dành cho ai?
- Người mới học thiết kế web.
- Giáo viên Tin học, sinh viên ngành CNTT.
- Người làm nội dung muốn tự chỉnh giao diện website.
Cần chuẩn bị gì?
- Máy tính, trình duyệt, trình soạn thảo VS Code.
- Không cần biết lập trình.
Nội dung loạt bài
Bài 1. HTML ngữ nghĩaKhung trang, thẻ cấu trúcBài 2. Hình ảnh và đa phương tiệnalt, srcset, picture, videoBài 3. Biểu mẫu và kiểm traform, input, validationBài 4. CSS cơ bản và bộ chọnHộp mô hình, màu, chữBài 5. FlexboxBố cục một chiềuBài 6. CSS GridBố cục hai chiềuBài 7. Biến CSS và responsiveMedia query, chế độ tốiBài 8. CSS mới:has, container, nesting, dialog
Cách học hiệu quả
- Mở DevTools (F12) để xem và sửa CSS trực tiếp.
- Làm một trang cá nhân xuyên suốt loạt bài, bài nào thêm bài đó.
- Tham khảo MDN Web Docs khi cần tra cứu.
Mẹo hay
Sau bài 8, thử sao chép giao diện một trang web bạn thích để luyện kỹ năng.
Tóm tắt bài học
- HTML cho cấu trúc, CSS cho hình thức.
- Flexbox và Grid giải quyết mọi bố cục.
- Biến CSS, container query là CSS hiện đại.