Xây dựng Production Page trong phát triển frontend với AI

Ôn tập bài học: Trong bài học trước, bạn đã tối ưu hóa cho các chỉ số Core Web Vitals — LCP, CLS và INP. Giờ hãy kết hợp tất cả lại: xây dựng một trang web hoàn chỉnh, có ngữ nghĩa, đáp ứng tốt trên nhiều thiết bị, dễ truy cập và nhanh chóng.

Bài tập cuối khóa này sẽ đưa cả 7 bài học vào thực tiễn. Bạn sẽ xây dựng một trang web chất lượng sản xuất bằng cách tiếp cận theo từng giai đoạn — tạo ra bằng AI, xem xét dựa trên danh sách kiểm tra chất lượng của bạn và khắc phục mọi sự cố cho đến khi trang đáp ứng các tiêu chuẩn sản xuất.

Quy trình xây dựng theo từng giai đoạn

Prompt AI ở Giai đoạn 1 (cấu trúc):

Tạo cấu trúc Semantic HTML cho trang đích sản phẩm với: (1) Phần đầu trang với điều hướng chính (5 liên kết), (2) Phần chính với tiêu đề, tiêu đề phụ và nút CTA, (3) Phần tính năng với 3 thẻ tính năng, (4) Phần giá cả với 3 mức giá, (5) Phần đánh giá khách hàng với 2 trích dẫn, (6) Phần footer với điều hướng phụ và bản quyền. CHỈ sử dụng các phần tử Semantic HTML — không sử dụng thẻ <div> ở những nơi đã có phần tử ngữ nghĩa. Bao gồm hệ thống phân cấp tiêu đề phù hợp (một tiêu đề h1, các phần với h2, thẻ với h3). Thêm nhãn ARIA cho các điểm mốc điều hướng.

Danh sách kiểm tra chất lượng sản xuất

Cấu trúc & Ngữ nghĩa

[ ] Một thẻ <h1> trên mỗi trang, thứ tự phân cấp tiêu đề tuần tự (không bỏ qua cấp độ nào)
[ ] Sử dụng các phần tử ngữ nghĩa (<nav>, <main>, <article>, <section>, <footer>)
[ ] Các điểm mốc lặp lại có aria-label (nhiều phần tử <nav>)
[ ] Hình ảnh có văn bản alt có ý nghĩa (không phải "image" hoặc "photo")
[ ] Biểu mẫu có <label> cho mỗi ô nhập liệu, <fieldset> cho các nhóm

Thiết kế đáp ứng

[ ] CSS ưu tiên thiết bị di động (truy vấn media min-width)
[ ] Hiển thị chính xác ở 320px, 375px, 768px, 1024px, 1920px
[ ] Không có thanh cuộn ngang ở bất kỳ chiều rộng nào
[ ] Văn bản có thể đọc được mà không cần phóng to trên thiết bị di động
[ ] Vùng chạm mục tiêu ít nhất 44×44px trên thiết bị di động

Khả năng truy cập

[ ] Duyệt toàn bộ trang bằng phím Tab — theo thứ tự hợp lý, không bẫy
[ ] Tất cả các phần tử tương tác đều có chỉ báo tiêu điểm hiển thị
[ ] Độ tương phản màu đáp ứng WCAG AA (văn bản 4.5:1, văn bản lớn 3:1)
[ ] Trình đọc màn hình thông báo nội dung một cách mạch lạc
[ ] Thay đổi nội dung động được thông báo (aria-live)
[ ] Hoạt động ở mức phóng to 200% mà không mất nội dung
[ ] Hoạt ảnh tuân theo prefers-reduced-motion

Hiệu suất

[ ] LCP < 2.5 giây
[ ] CLS < 0.1 (không dịch chuyển bố cục)
[ ] INP < 200ms (phản hồi nhanh với tương tác)
[ ] Hình ảnh: srcset + WebP + lazy loading (dưới màn hình)
[ ] Hình ảnh chính: được tải trước, fetchpriority="high"
[ ] CSS quan trọng được nhúng, CSS không quan trọng được trì hoãn
[ ] JavaScript được trì hoãn hoặc bất đồng bộ

Dark Mode & Theme

[ ] Tất cả màu sắc sử dụng thuộc tính tùy chỉnh CSS
[ ] Dark mode hoạt động thông qua prefers-color-scheme: dark
[ ] Tỷ lệ tương phản được duy trì ở Dark mode
[ ] Không có màu được hardcode trong các thành phần

Những lỗi thường gặp trong tất cả các bài học

✅ Kiểm tra nhanh: Bạn đã kiểm tra trang của mình dựa trên toàn bộ danh sách kiểm tra. Mọi thứ đều đạt yêu cầu ngoại trừ: Trình đọc màn hình đọc các thẻ giá theo thứ tự sai (3, 1, 2 thay vì 1, 2, 3). Thứ tự hiển thị thì đúng. Nguyên nhân là gì?

Câu trả lời: CSS order, flex-direction: row-reverse hoặc grid-template có thể sắp xếp lại các phần tử về mặt hình ảnh mà không thay đổi thứ tự DOM. Trình đọc màn hình tuân theo thứ tự DOM, không phải thứ tự hiển thị. Cách khắc phục: Sắp xếp lại các phần tử trong HTML để khớp với bố cục hiển thị, hoặc sử dụng aria-flowto nếu việc sắp xếp lại hiển thị là cần thiết.

Kế hoạch cải tiến trong 30 ngày

Thử ngay: Xây dựng Production Page theo 6 bước

Mở Claude, ChatGPT, Gemini hoặc Copilot (thực hiện từng bước riêng biệt, xem xét trước khi chuyển sang bước tiếp theo):

📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.

Đóng vai trò là cộng tác viên xây dựng frontend của tôi. Tạo production page hoàn chỉnh CỦA TÔI theo 6 bước đã được xem xét — cấu trúc / bố cục / thành phần / media / tương tác / hiệu suất — và kiểm tra kết quả cuối cùng dựa trên danh sách kiểm tra chất lượng sản xuất.

Thông tin về trang của tôi:
- Mục đích của trang (trang đích / giá cả / sản phẩm / bài đăng blog / dashboard / biểu mẫu / khác): []
- Các phần tôi cần (liệt kê từ trên xuống dưới): []
- Framework (HTML+CSS thuần túy / React / Next / Astro / Vue / khác): []
- Phương pháp tạo kiểu (Tailwind / CSS thuần túy / CSS Modules / styled-components): []
- Các token thiết kế tôi đang truyền vào (màu sắc / khoảng cách / kiểu chữ / bán kính): []
- Cần Dark mode (có / không / bật/tắt): []
- Đối tượng mục tiêu (công chúng / B2B / công cụ nội bộ / nhạy cảm về trợ năng): []
- Tiêu chuẩn khả năng truy cập (WCAG 2.1 AA / AAA): []
- Ngân sách hiệu năng (mục tiêu LCP / CLS / INP): []
- Các trình duyệt tôi hỗ trợ: []

Chạy từng giai đoạn MỘT. Đối với mỗi giai đoạn, hãy tạo báo cáo và tự kiểm tra trước khi yêu cầu tôi tiếp tục.

GIAI ĐOẠN 1 — CẤU TRÚC SEMANTIC HTML
- Chỉ sử dụng các phần tử ngữ nghĩa (không dùng thẻ div nếu đã có)
- Một thẻ h1, phân cấp tiêu đề tuần tự
- Sử dụng thuộc tính aria-label cho các điểm mốc khi lặp lại
- Tự kiểm tra: có thẻ div nào cần được dùng cho điều hướng / chính / mục / bài viết / bên lề / footer không?

GIAI ĐOẠN 2 — BỐ CỤC CSS
- Sử dụng truy vấn media min-width ưu tiên thiết bị di động
- Sử dụng CSS Grid cho 2D, Flexbox cho 1D
- Sử dụng các token thiết kế cho mỗi giá trị (không dùng px ​​hardcode cho khoảng cách / màu sắc)
- Sử dụng Container Queries khi cần thiết để tái sử dụng thành phần
- Tự kiểm tra: có giá trị nào được hardcode không? Có truy vấn media max-width nào không?

GIAI ĐOẠN 3 — CÁC THÀNH PHẦN
- Có thể tái sử dụng, 2-3 cấp độ lồng nhau, mỗi thành phần có 3-5 lớp
- Sử dụng HTML gốc nếu có thể (<dialog>, <details>, <button>)
- Trạng thái được chọn hiển thị
- Tự kiểm tra: các mẫu bàn phím cho từng loại thành phần đã hoàn chỉnh chưa?

GIAI ĐOẠN 4 — HÌNH ẢNH & MEDIA
- srcset + kích thước cho responsive
- WebP với dự phòng JPEG/PNG
- Hero: fetchpriority="high", KHÔNG loading="lazy"
- Below-fold: loading="lazy"
- Chiều rộng + chiều cao rõ ràng để tránh CLS
- Tự kiểm tra: có rủi ro CLS nào không? Có hình ảnh nào ở dưới màn hình không được lazy load không?

GIAI ĐOẠN 5 — TƯƠNG TÁC
- Hoạt ảnh tuân thủ prefers-reduced-motion
- Thay đổi động sử dụng aria-live
- Trình xử lý sự kiện an toàn INP (không có công việc đồng bộ kéo dài)
- Tự kiểm tra: mọi tương tác có hoạt động chỉ bằng bàn phím không?

GIAI ĐOẠN 6 — HIỆU SUẤT
- CSS quan trọng được nhúng trực tiếp (hoặc tương đương trong framework)
- JS không quan trọng được trì hoãn
- Load trước hình ảnh LCP + phông chữ quan trọng
- Tự kiểm tra: LCP / CLS / INP dự đoán là gì?

SAU GIAI ĐOẠN 6 — KIỂM TRA TOÀN BỘ QUY TRÌNH SẢN XUẤT:
- Cấu trúc & Ngữ nghĩa ✓
- Thiết kế đáp ứng ✓ (kiểm tra 320 / 375 / 768 / 1024 / 1920)
- Khả năng truy cập ✓ (bàn phím + trình đọc màn hình + độ tương phản + phóng to 200% + giảm chuyển động)
- Hiệu suất ✓ (LCP / CLS / INP / kích thước gói)
- Dark mode ✓
- Trạng thái lỗi / Đang load / Trống
- Kiểu in

QUY TẮC BẮT BUỘC:
- Chỉ một giai đoạn tại một thời điểm. Tôi xem xét trước khi giai đoạn tiếp theo bắt đầu.
- Semantic HTML là không thể thương lượng. Sử dụng quá nhiều thẻ div sẽ bị từ chối.
- Ưu tiên thiết bị di động, luôn luôn. Truy vấn media max-width đã lỗi thời.
- Chỉ báo tiêu điểm hiển thị, luôn luôn. Đường viền: không có mà không có thay thế = bị từ chối.
- Code thiết kế cho mọi màu sắc / khoảng cách / phông chữ. Không có số ma thuật.
- Khả năng truy cập không chỉ là vấn đề của Giai đoạn 6 — mà là ở mọi giai đoạn.
- Không phát hành cho đến khi mọi mục trong danh sách kiểm tra đều đạt.
- Kiểm tra trên trình duyệt thực trước khi triển khai. DevTools Lighthouse không đồng nghĩa với trải nghiệm người dùng thực tế.
- Theo dõi những gì tôi thường xuyên bỏ sót trong các cuộc kiểm tra — đó là những lĩnh vực cần cải thiện.

✏️ Cách điền thông tin chi tiết: Thay thế mỗi dấu ngoặc vuông [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin mơ hồ sẽ tạo ra kết quả mơ hồ — hãy cụ thể.

Những gì bạn sẽ thấy: Bản build sản phẩm 6 giai đoạn + tự kiểm tra từng giai đoạn + danh sách kiểm tra sản phẩm đầy đủ + dự đoán Core Web Vitals.

📌 Nên làm gì với kết quả: Lưu phản hồi vào file Notes. Chọn đề xuất có tác động cao nhất và thực hiện ngay trong tuần này — đừng cố gắng làm tất cả cùng một lúc.

⚠️ Nếu kết quả không ổn: Nếu các đề xuất có vẻ chung chung, hãy dán nội dung này: "Hãy cụ thể hơn với bối cảnh thực tế của tôi. Bỏ qua những lời khuyên chung chung." Nếu nó bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy hỏi: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với điều đó làm ràng buộc chính."

Những điểm chính cần ghi nhớ

• Tạo và xem xét theo từng giai đoạn (cấu trúc → bố cục → các thành phần → tương tác → hiệu suất), không phải tất cả cùng một lúc — mỗi giai đoạn đủ nhỏ để xem xét kỹ lưỡng, các vấn đề được phát hiện sớm sẽ không lan rộng và bạn hiểu từng dòng mã mình đưa ra.

• Danh sách kiểm tra chất lượng sản phẩm bao gồm nhiều hơn "trường hợp lý tưởng": tính nhất quán của trình đọc màn hình, trạng thái lỗi, trạng thái load, Dark mode, zoom 200% và giảm chuyển động là các chế độ hiển thị mà người dùng thực sự phụ thuộc vào — hãy kiểm tra tất cả chúng trước khi triển khai.

• Xây dựng và kiểm tra các trang thực tế dựa trên danh sách kiểm tra là con đường nhanh nhất để trở thành chuyên gia về frontend: Mỗi mục kiểm tra thất bại mà bạn sửa sẽ dạy bạn điều gì đó mà AI đã bỏ sót, và việc theo dõi những mục nào bạn liên tục phát hiện ra so với những mục bị bỏ sót sẽ cho thấy các lĩnh vực cần cải thiện cụ thể của bạn.

Chúc mừng!

Bạn đã hoàn thành khóa học AI cho phát triển Frontend. Giờ đây, bạn đã hiểu các nguyên tắc cơ bản giúp code do AI tạo ra sẵn sàng cho môi trường sản xuất: HTML ngữ nghĩa cho khả năng truy cập, CSS hiện đại cho bố cục dễ bảo trì, các mẫu thành phần cho giao diện người dùng có thể tái sử dụng, thiết kế đáp ứng cho mọi thiết bị, khả năng truy cập cho mọi người dùng và tối ưu hóa hiệu suất cho mọi kết nối. Bước tiếp theo của bạn: Xây dựng một trang, chạy danh sách kiểm tra và sửa những gì bạn tìm thấy.