Đây là bài 1 trong phần 8 của chuỗi demo “Sổ tay giao diện web: Từ cấu trúc đến trải nghiệm”. HTML, CSS, responsive và khả năng truy cập qua các tình huống thiết kế giao diện. Bài viết dùng ví dụ và dữ liệu giả để minh họa; hãy thử trên môi trường riêng trước khi áp dụng vào dự án.
Mục tiêu cụ thể
Một trang hoàn chỉnh cần thống nhất màu, khoảng cách, typography và trạng thái. Đánh giá dựa trên tác vụ người dùng: hiểu khóa học, xem chương trình và biết bước tiếp theo.
Hiểu vấn đề trước khi dùng công cụ
Chương này tập trung vào một quyết định cụ thể: Ghép các chương thành một landing page và một danh mục sáu khóa học, sau đó tự review bằng checklist. Đừng bắt đầu bằng cách chép nguyên ví dụ. Hãy chỉ ra thành phần nào là dữ liệu, thành phần nào là quy tắc và đâu là kết quả quan sát được. Một giải pháp đúng với dữ liệu mẫu vẫn có thể sai khi đầu vào rỗng, kích thước lớn hơn hoặc có hai thao tác xảy ra gần nhau.
Ví dụ tối thiểu
<style>
:root { --space: 8px; --brand: #0369a1; --text: #0f172a; }
.button { display: inline-block; padding: 12px 20px; border-radius: 8px; background: var(--brand); color: white; }
</style>
<a class="button" href="#curriculum">Xem chương trình học</a>Giới hạn cần hiểu
Trang chỉ đẹp khi dữ liệu ngắn chưa phải giao diện bền vững. Cần thử tiêu đề dài, ảnh lỗi, nội dung trống và chữ phóng to.
Câu hỏi để tự giải thích
- Bạn sẽ giải thích dự án giao diện hoàn chỉnh cho người mới bằng ví dụ nào?
- Phần nào của ví dụ là giả định, phần nào cần kiểm tra bằng thực nghiệm?
- Nếu bỏ một điều kiện quan trọng, kết quả sẽ sai ở đâu?
Kết quả cần đạt
- Có hero, danh mục và chương trình học
- Hoạt động trên mobile và bàn phím
- Có phương án cho ảnh không tải được
Trước khi chuyển bài, hãy viết một đoạn giải thích bằng lời của bạn và chỉ ra ít nhất một trường hợp không nên áp dụng máy móc ví dụ này.