Bài đọc

Dự án giao diện hoàn chỉnh: tình huống lỗi và cách chẩn đoán

3 phút đọc

Đây là bài 4 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.

Tình huống lỗi

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.

Chẩn đoán có bằng chứng

Trong bài dự án giao diện hoàn chỉnh, hãy cố ý tái hiện tình huống trên ở môi trường thử nghiệm. Mục tiêu là thấy vì sao kết quả sai và thu thập đủ bằng chứng để phân biệt lỗi dữ liệu, lỗi quy tắc và lỗi cấu hình. Không sửa đồng thời nhiều yếu tố vì bạn sẽ khó xác định nguyên nhân.

Ghi rõ bước thao tác và kết quả mong đợi.
Thu nhỏ ví dụ đến mức vẫn tái hiện được lỗi.
Đối chiếu dữ liệu thực với giả định ban đầu.
Đặt giả thuyết và thay đổi một yếu tố.
Xác nhận bằng cách tái chạy ví dụ tối thiểu.

Mẫu đối chiế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>

Kiểm tra sau sửa

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

Khi lỗi biến mất, thực hiện lại yêu cầu gốc: 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. Sau đó thử trường hợp đầu vào rỗng hoặc trạng thái chưa được khởi tạo nếu phù hợp. Một bản sửa phải khôi phục hành vi đã định nghĩa, không chỉ làm mất thông báo lỗi.

Ghi chú bàn giao