Trang web đầu tiên trong 20 phút

Một file duy nhất, chạy thật, bạn tự sửa được. Không framework, không build, không thư mục node_modules.

Mục tiêu bài này rất hẹp và rất quan trọng: một file index.html chạy được, bạn hiểu nó, và bạn sửa được. Chưa đưa lên mạng (bài sau), chưa Git (Cấp 2). Một việc một lúc.

Vì sao bắt đầu bằng một file

Hướng dẫn trên mạng thường bắt bạn npm create một project React, ra 300 MB thư mục, 2 phút cài đặt, và bạn chưa viết chữ nào đã có 40 file không hiểu. Với Vibe Code, điều đó phản tác dụng: AI sửa được, nhưng bạn mất hẳn khả năng đọc.

Một file HTML duy nhất thì:

• Bấm đúp là mở — không cần máy chủ, không cần build.
• Đưa lên Cloudflare Pages là xong — không cấu hình gì.
• Bạn đọc hết trong 5 phút.
• AI sửa rất chính xác, vì toàn bộ ngữ cảnh nằm trong một chỗ.

Giới hạn: khi file quá ~1.500 dòng thì tách ra. Nhưng lúc đó bạn đã ở Cấp 3 và tự biết tách.

Ra đề cho Claude

Mở PowerShell, vào thư mục làm việc, chạy claude:

mkdir C:\NVAI\Claude\web-dau-tien
cd C:\NVAI\Claude\web-dau-tien
claude

Dán nguyên văn đề này (đổi phần in nghiêng thành việc của bạn):

Tạo một file duy nhất index.html: trang giới thiệu cho *quán bánh cuốn
Chang An ở Sầm Sơn*.

Yêu cầu:
- Một file, không thư viện ngoài, không CDN, CSS và JS nhúng trong file.
- Tiếng Việt, có dấu, thẻ lang="vi", charset UTF-8.
- Các phần: tên quán + một câu giới thiệu, 4 món kèm giá, giờ mở cửa,
  địa chỉ, nút gọi điện và nút chỉ đường Google Maps.
- Nền sáng, chữ đậm rõ, tối giản. Không dùng gradient, không bóng đổ nặng.
- Chạy tốt trên điện thoại: chữ tối thiểu 16px, nút cao tối thiểu 44px,
  không cuộn ngang.
- Dùng font hệ thống, không tải font ngoài.

Giá và nội dung cứ điền mẫu hợp lý, tôi sẽ sửa sau.

Vì sao đề này tốt — bốn điểm, học thuộc công thức:

1. Ràng buộc kỹ thuật rõ ("một file, không thư viện ngoài") → chặn trước việc AI lôi về React, Tailwind CDN, Bootstrap.
2. Danh sách phần cụ thể → nó không tự nghĩ thêm 8 mục bạn không cần.
3. Số đo thay cho tính từ — "nút cao tối thiểu 44px" kiểm được; "giao diện đẹp" thì không.
4. Cho phép điền mẫu → không bị hỏi lại 10 câu trước khi làm.

start index.html

Đọc hiểu file của mình trong 5 phút

Dù AI viết, bạn phải nhận ra bốn khối. Mở file trong VS Code và tìm:

<!doctype html>
<html lang="vi">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Chang An — Bánh cuốn Quảng Đông</title>
  <style> /* (1) TRANG TRÍ: màu, cỡ chữ, khoảng cách */ </style>
</head>
<body>
  <!-- (2) NỘI DUNG: chữ người ta đọc -->
  <h1>Chang An</h1>
  <script> /* (3) HÀNH VI: bấm thì xảy ra gì */ </script>
</body>
</html>

Hai dòng trong <head> không bao giờ được thiếu, và là nguyên nhân của hai lỗi kinh điển:

• <meta charset="utf-8"> thiếu → chữ tiếng Việt thành ký tự lạ.
• <meta name="viewport" ...> thiếu → trên điện thoại chữ bé như con kiến, phải phóng to mới đọc.

Tự sửa ba thứ, không nhờ AI

Đây là bài tập bắt buộc. Mục đích: bạn phải cảm được rằng mình điều khiển được file, chứ không phải chỉ xin được.

1. Đổi tên quán. Tìm chữ hiện trên trang trong <body>, sửa, lưu (Ctrl+S), bấm F5 trên trình duyệt.
2. Đổi một màu. Trong <style>, tìm dòng có color: hoặc background:, đổi thành #1f5f4b. Lưu, F5.
3. Thêm một món. Sao chép khối HTML của một món, dán xuống dưới, sửa chữ.

Nếu vỡ giao diện: Ctrl+Z về. Đây là lúc tốt nhất để làm vỡ — chưa ai dùng, chưa có dữ liệu.

Khi nào quay lại nhờ AI

Nhờ khi việc cần biết cú pháp, tự làm khi việc chỉ cần đổi chữ. Ví dụ đề nhờ đúng kiểu:

Trong index.html, thêm một phần "Đánh giá khách hàng" gồm 3 ô nằm ngang
trên máy tính và xếp dọc trên điện thoại. Mỗi ô: tên, số sao, một câu.
Dùng đúng màu và cỡ chữ đang có trong file, đừng thêm màu mới.
Chỉ sửa phần cần sửa, không viết lại cả file.

Hai câu cuối là hai câu quan trọng nhất của cả bài này:

• "Dùng đúng màu và cỡ chữ đang có" → chống việc giao diện mỗi lúc một phong cách.
• "Chỉ sửa phần cần sửa, không viết lại cả file" → chống việc nó trả về 400 dòng mới và lặng lẽ làm mất một mục bạn đã sửa tay.