Bài đọc

Dự án giao diện hoàn chỉnh: tự kiểm tra và mở rộng

3 phút đọc

Đây là bài 5 của chương 8: Dự án giao diện hoàn chỉnh, thuộc khóa demo HTML & CSS. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng website giới thiệu khóa học có trang chủ, danh sách bài học và biểu mẫu đăng ký.

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.

Bộ câu hỏi tự kiểm tra

Vì sao dự án giao diện hoàn chỉnh cần được xem xét riêng trong dự án HTML & CSS?
Giải thích bằng lời của bạn: 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.
Phát hiện vấn đề trong tình huống: 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.
Bạn sẽ giữ bằng chứng gì để chứng minh giải pháp hoạt động?

Tiêu chí chấm

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

Bài mở rộng

Bắt đầu từ yêu cầu 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. Thay đổi quy mô, độ dài dữ liệu hoặc thứ tự thao tác. Chọn đúng một biến thể phù hợp với chương rồi dự đoán tác động trước khi thử. Ví dụ là công cụ để hiểu nguyên lý, không phải đáp án duy nhất.

Gợi ý tự đánh giá

Mức 1: nhắc lại được khái niệm nhưng chưa tự thực hiện.
Mức 2: tự hoàn thành ví dụ và giải thích các bước.
Mức 3: xử lý được trường hợp biên và giải thích lựa chọn khác.

Nếu chưa đạt mức 2, quay lại bài thực hành thay vì chỉ đọc đáp án. Khi đã đạt mức 3, ghi lại một cách giải khác và so sánh độ đơn giản, khả năng kiểm chứng và giới hạn của hai phương án.

Lưu bằng chứng