Bạn sẽ rà lại cả ba trang Góc học web, dùng DevTools xác định lỗi thay vì chép thêm quy tắc, và chuyển các thí nghiệm thành một stylesheet gọn. Đây là bước hoàn thiện ví dụ xuyên suốt, không phải một dự án cuối khóa riêng.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Kết quả cần đạt là gì?

Trang chủ có header, vùng giới thiệu và lưới bài học. Trang bài viết có độ dài dòng dễ đọc, ảnh không tràn. Trang liên hệ có nhãn, hướng dẫn và focus rõ. Các phần dùng chung giữ cùng class và stylesheet thay vì mỗi trang một bộ quy tắc hơi khác nhau.

Website hoàn chỉnh vẫn dùng HTML có ngữ nghĩa từ môn trước. Nó không cần framework để chứng minh bạn hiểu Flexbox, Grid hoặc responsive. Form tiếp tục là bản minh họa tĩnh dùng dữ liệu giả, chưa có backend nhận liên hệ.

Quy trình tìm lỗi có thứ tự

• Xác nhận tệp CSS tải đúng và phiên bản đúng.
• Chọn đúng phần tử trong Inspect; xem selector nào khớp và khai báo nào bị gạch.
• Đọc Computed để biết giá trị thực tế và Box Model để đo kích thước.
• Dùng overlay Flex/Grid khi vấn đề thuộc layout.
• Thử một thay đổi, kiểm tra hệ quả rồi cập nhật tệp thật.

Nếu một card tràn, đừng đồng thời sửa width, margin, font và overflow mà không ghi lại. Hãy xác định hiện tượng, giả thuyết và phép quan sát nào sẽ xác nhận nguyên nhân. Cùng quy trình này dùng được với nhiều loại giao diện.

Checklist nội dung và thiết bị

Kiểm tra ở màn hình hẹp, trung gian và rộng. Thêm một tiêu đề dài, thay ảnh khác tỷ lệ, tăng chữ và dùng bàn phím. Xem cả trang bài và form, không chỉ trang chủ. Một ảnh chụp desktop đẹp chưa chứng minh website responsive.

Không có thứ tự hiển thị CSS làm người dùng bàn phím lạc nhịp; menu luôn truy cập được; bảng rộng cuộn trong vùng riêng; lỗi form có mô tả bằng chữ. Các công cụ tự động hỗ trợ một phần, không thay việc đọc và thao tác thật.

Từ CSS tích lũy sang bản hoàn chỉnh

Các thư mục examples/01 đến 20 giữ phiên bản học tập và bản trước/sau để đối chiếu. Thư mục website-hoan-chinh có stylesheet đã được hợp nhất cho ba trang, không yêu cầu sao chép toàn bộ ví dụ đặc thù như vùng sticky hoặc hộp thử specificity vào website thật.

Trước khi xóa quy tắc tưởng thừa, kiểm tra nơi dùng trong cả ba trang và ở các breakpoint. Giữ một bản sao hoặc lịch sử Git để quay lại khi cần. Đừng tăng specificity chỉ để tránh hiểu một quy tắc cũ đang làm gì.

Bước học tiếp có mục tiêu rõ

Nếu muốn nội dung đổi theo hành động người dùng, hãy học JavaScript: DOM, sự kiện và trạng thái. Nếu muốn form thật sự nhận, lưu và gửi thông báo, cần backend hoặc dịch vụ phù hợp. CSS có thể tạo kiểu cho trạng thái, không tự làm những nghiệp vụ đó.

Bạn không cần nhớ mọi thuộc tính CSS trước khi xây một trang. Điều cần giữ là cách hiểu hộp, flow, cascade và công cụ layout, cùng thói quen tra cứu và kiểm tra. Những tính năng nâng cao như container queries hoặc layers sẽ có ý nghĩa hơn khi bạn có một nhu cầu cụ thể.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<section class="review-panel"><h3>Kiểm tra trước khi hoàn tất</h3><ul><li>Ba trang điều hướng đúng.</li><li>Không tràn toàn trang ở màn hình nhỏ.</li><li>Focus nhìn thấy và nội dung vẫn đọc được.</li></ul><p><a href="../../website-hoan-chinh/index.html">Mở website hoàn chỉnh</a></p></section>

Thêm hoặc sửa trong styles.css

.site-footer { margin-top: 2rem; padding-block: 1rem; border-top: 1px solid var(--color-border, #cbd8e5); color: #425a73; }
.skip-link { display: inline-block; margin-block: .4rem; }
.review-panel { border: 1px solid #8bb7a6; background: #edf8f2; padding: 1rem; border-radius: .6rem; }
.review-panel ul { padding-inline-start: 1.3rem; }

So sánh trước và sau

Bản sau thêm phần rà soát và hoàn thiện chân trang. Dùng liên kết website hoàn chỉnh để xem bản CSS đã hợp nhất; các thư mục bài vẫn giữ ví dụ riêng để học lại.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Chỉ kiểm tra trang chủ: mở cả bài viết và liên hệ.
• Copy toàn bộ CSS thử nghiệm vào sản phẩm: hợp nhất theo vai trò và kiểm tra trước khi bỏ quy tắc.
• Nhìn một ảnh chụp rồi kết luận đã responsive: thử nội dung và nhiều kích thước.

Tự kiểm tra

• Tắt CSS để xác nhận HTML vẫn giữ thứ tự và điều hướng.
• Chọn một lỗi có thể tái hiện, ghi nguyên nhân cùng cách xác nhận đã sửa.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML