Xây dựng một website hoàn chỉnh với AI

🔄 Tóm tắt nhanh: Xuyên suốt khóa học này, bạn đã học cách xây dựng cấu trúc HTML, tạo kiểu bằng CSS, thêm tương tác JavaScript, gỡ lỗi, tối ưu hóa hiệu suất và triển khai với SEO. Bây giờ, hãy cùng xây dựng một dự án hoàn chỉnh sử dụng tất cả những điều đó.

Dự án cuối khóa: Xây dựng trang web portfolio

Bài tập này sẽ hướng dẫn bạn xây dựng một trang web portfolio thực tế, có thể triển khai được. Hãy điều chỉnh nó theo nhu cầu của bạn — đó có thể là portfolio cá nhân, trang đích doanh nghiệp hoặc trang giới thiệu dự án.

Giai đoạn 1: Lập kế hoạch

Trước khi viết bất kỳ code nào, hãy xác định những gì bạn đang xây dựng:

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

📋 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.

Hãy giúp tôi thiết kế một trang web portfolio với các trang sau:

1. Trang chủ — Phần giới thiệu, xem trước giới thiệu, các dự án nổi bật (3), lời chứng thực, lời kêu gọi hành động (CTA)
2. Dự án — Lưới gồm hơn 6 thẻ dự án với chức năng lọc theo danh mục
3. Giới thiệu — Tiểu sử, kỹ năng, dòng thời gian kinh nghiệm
4. Liên hệ — Biểu mẫu liên hệ có xác thực

Các ràng buộc thiết kế:
- HTML, CSS, JavaScript thuần túy (không sử dụng framework)
- Thiết kế đáp ứng ưu tiên thiết bị di động
- Hỗ trợ chế độ tối thông qua tùy chọn hệ thống
- Mục tiêu: Lighthouse 90+ trên tất cả các điểm số

Tạo cấu trúc file, danh sách thành phần và thứ tự xây dựng.

✏️ ​​Cách điền thông tin chi tiết của bạn: Thay thế mỗi [] 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 đầu vào mơ hồ sẽ tạo ra kết quả mơ hồ — hãy cụ thể.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về một phản hồi có cấu trúc dựa vào prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.

📌 Việc cần làm với kết quả: Lưu phản hồi vào file Notes. Hãy chọn gợi ý có tác động lớn nhất và thực hiện nó trong tuần này — đừng cố gắng làm mọi thứ cùng một lúc.

⚠️ Nếu gợi ý không phù hợp: Nếu gợi ý quá chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ qua những lời khuyên chung chung." Nếu gợi ý 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."

✅ Kiểm tra nhanh: Tại sao cần lập kế hoạch trước khi đưa ra gợi ý? Bởi vì AI tạo ra code tốt hơn khi bạn biết chính xác những gì mình cần. Một yêu cầu mơ hồ ("xây dựng cho tôi một portfolio") sẽ tạo ra kết quả chung chung. Một kế hoạch cụ thể ("Tôi cần một phần giới thiệu với hai lời kêu gọi hành động, một lưới dự án có thể lọc và một biểu mẫu liên hệ có xác thực") sẽ tạo ra các thành phần tập trung và có thể xem xét được.

Giai đoạn 2: Cấu trúc HTML

Xây dựng HTML cho từng trang, từng thành phần một:

Phần tiêu đề chính của trang chủ:

Tạo HTML cho phần tiêu đề chính của trang chủ:
- Tiêu đề lớn với tên và chức danh
- Tagline ngắn gọn (1-2 câu)
- Hai nút CTA: "View Projects" và "Contact Me"
- Một yếu tố nền tinh tế (sẽ được tạo kiểu bằng CSS sau)

HTML ngữ nghĩa, dễ truy cập, không sử dụng CSS hoặc JavaScript.

Thẻ dự án:

Tạo HTML cho lưới trưng bày dự án:
- 6 thẻ dự án với: hình ảnh, tiêu đề, mô tả, thẻ công nghệ và liên kết "View Project"
- Các nút lọc ở trên: All, Web, Design, App
- Mỗi thẻ là một phần tử bài viết bên trong một danh sách

Bao gồm nhãn aria cho các nút lọc và thứ tự phân cấp tiêu đề phù hợp.

Làm việc với từng thành phần, xem lại code HTML trước khi chuyển sang thành phần tiếp theo.

Giai đoạn 3: Tạo kiểu CSS

Áp dụng hệ thống thiết kế của bạn từ Bài học 3:

Bước 1: Tạo các token thiết kế (những thuộc tính tùy chỉnh cho màu sắc, khoảng cách, kiểu chữ).

Bước 2: Định kiểu bố cục bằng CSS Grid (cấu trúc trang) và Flexbox (các thành phần bên trong).

Bước 3: Thêm hành vi responsive:

Làm cho trang này responsive:

[dán CSS hiện tại của bạn]

Breakpoint:
- Di động: kiểu cơ bản (< 768px)
- Máy tính bảng: 768px (lưới dự án 2 cột, bố cục giới thiệu song song)
- Desktop: 1024px (lưới dự án 3 cột, vùng chứa chiều rộng tối đa)

Thêm dark mode bằng cách sử dụng ghi đè thuộc tính tùy chỉnh.

Giai đoạn 4: Tương tác JavaScript

Thêm hành vi cho các thành phần của bạn:

Lọc dự án:

Viết code JavaScript thuần túy để lọc các thẻ dự án:
- Các nút lọc: All, Web, Design, App
- Nhấp vào bộ lọc để chỉ hiển thị các thẻ phù hợp
- "All" hiển thị mọi thứ
- Hiệu ứng chuyển tiếp mượt mà khi thẻ hiển thị/ẩn
- Cập nhật URL với bộ lọc đang hoạt động (?category=web)
- Nút bộ lọc đang hoạt động được làm nổi bật

Không có dependency.

Xác thực biểu mẫu liên hệ:

Viết code xác thực biểu mẫu cho: Tên (bắt buộc), Email (bắt buộc, định dạng hợp lệ),
Chủ đề (bắt buộc), Tin nhắn (bắt buộc, tối thiểu 20 ký tự).
Hiển thị lỗi bên dưới mỗi trường bằng cách sử dụng textContent. Ngăn chặn việc gửi biểu mẫu cho đến khi hợp lệ.
Bao gồm các thông báo lỗi dễ tiếp cận.

Điều hướng trên thiết bị di động:

Viết JavaScript thuần túy cho menu hamburger trên thiết bị di động:
- Nút chuyển đổi hiển thị/ẩn điều hướng
- Menu trượt vào từ bên phải
- Lớp phủ che phủ nền
- Phím Escape đóng menu
- Tiêu điểm bị giữ lại bên trong menu đang mở
- aria-expanded cập nhật khi chuyển đổi

Không có dependency.

Giai đoạn 5: Tối ưu hóa và SEO

Trước khi triển khai, hãy tối ưu hóa mọi thứ:

Xem lại toàn bộ trang web của tôi để đảm bảo sẵn sàng triển khai:

[mô tả các trang và tính năng của bạn]

Kiểm tra:
1. Hiệu suất — Hình ảnh có bị load chậm không? CSS/JS có được thu nhỏ không? Các tài nguyên quan trọng có được load trước không?
2. SEO — Mỗi trang có tiêu đề, mô tả, thẻ OG duy nhất không?
3. Khả năng truy cập — Điều hướng bằng bàn phím, khả năng tương thích với trình đọc màn hình, tỷ lệ tương phản?
4. Đa trình duyệt — Có CSS/JS nào có thể bị lỗi trong Safari hoặc Firefox không?
5. Bảo mật — Có bất kỳ dữ liệu đầu vào nào của người dùng được xử lý không an toàn không?

Cung cấp danh sách sửa lỗi được ưu tiên.

Giai đoạn 6: Triển khai

1. Đẩy code của bạn lên kho lưu trữ GitHub
2. Kết nối với Netlify hoặc Vercel
3. Cấu hình domain tùy chỉnh của bạn (hoặc sử dụng subdomain miễn phí)
4. Gửi sơ đồ trang web của bạn lên Google Search Console
5. Chạy Lighthouse lần cuối trên trang web đang hoạt động

Danh sách kiểm tra thử nghiệm

Trước khi bạn hoàn tất:

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

• Xây dựng theo từng lớp: Cấu trúc HTML trước, kiểu dáng CSS thứ hai, hành vi JavaScript thứ ba, tối ưu hóa cuối cùng — mỗi lớp được xây dựng dựa trên lớp trước đó
• Chia các dự án lớn thành những thành phần nhỏ và yêu cầu AI xử lý từng phần một — các yêu cầu tập trung sẽ tạo ra code tốt hơn
• Kiểm tra trên nhiều thiết bị, trình duyệt và phương thức nhập liệu (bàn phím, trình đọc màn hình) trước khi triển khai — môi trường phát triển của bạn không đại diện cho người dùng
• Mọi trang web đều cần: thiết kế đáp ứng, khả năng truy cập bằng bàn phím, tốc độ load nhanh, thẻ meta phù hợp và dữ liệu có cấu trúc
• Quy trình làm việc ưu tiên AI (lập kế hoạch → yêu cầu → xem xét → kiểm tra → lặp lại) hoạt động cho bất kỳ dự án web nào, từ các trang đích đơn giản đến những ứng dụng phức tạp
• Tiếp tục học hỏi: các framework như React, Vue và Svelte được xây dựng dựa trên những nguyên tắc cơ bản mà bạn đã nắm vững ở đây

Chúc mừng! Bạn đã học cách xây dựng trang web với AI là đối tác phát triển của mình. Các nguyên tắc cơ bản mà bạn đã thực hành — HTML ngữ nghĩa, CSS đáp ứng, JavaScript dễ truy cập và tối ưu hóa hiệu suất — là nền tảng cho mọi dự án web, có hoặc không có framework.