Xem trang web trên trình duyệt
Lấy code từ ChatGPT
Ở bài trước, ChatGPT đã tạo cho bạn một khối code HTML dài. Giờ chúng ta sẽ biến nó thành trang web thật.
Bước 1: Copy code
Trong phần trả lời của ChatGPT, bạn sẽ thấy khối code có nút “Copy code” ở góc trên bên phải. Bấm nút đó để copy toàn bộ code.
Quan trọng: Copy toàn bộ code, bắt đầu từ
<!DOCTYPE html>đến</html>. Nếu code bị cắt giữa chừng, gõ: “Viết lại toàn bộ code hoàn chỉnh trong 1 khối, không giải thích.”
Bước 2: Tạo file HTML
Trên Windows:
- Mở Notepad (gõ “Notepad” trong thanh tìm kiếm Windows)
- Paste code vào (Ctrl + V)
- Bấm File → Save As
- Ở mục “Save as type”, chọn All Files
- Đặt tên file:
index.html - Chọn nơi lưu (Desktop cho dễ tìm)
- Bấm Save
Trên Mac:
- Mở TextEdit
- Vào Format → Make Plain Text (bước này quan trọng!)
- Paste code vào (Cmd + V)
- Bấm File → Save
- Đặt tên:
index.html - Khi được hỏi, chọn Use .html (không phải .txt)
- Lưu vào Desktop
Mẹo pro: Nếu bạn muốn text editor tốt hơn, tải VS Code miễn phí tại code.visualstudio.com. VS Code hiển thị code có màu, dễ đọc hơn nhiều.
Bước 3: Mở trên trình duyệt
- Tìm file
index.htmltrên Desktop - Click đúp vào file — trình duyệt sẽ tự mở
- Hoặc: kéo thả file vào cửa sổ trình duyệt
Và đây là trang web của bạn!
Cách khác: Xem trực tiếp trên ChatGPT
Nếu bạn dùng ChatGPT Plus hoặc GPT-4o, có thể xem preview ngay trong ChatGPT:
- Khi ChatGPT trả code, bấm nút “Preview” hoặc “Show work” (nếu có)
- Hoặc copy code vào codepen.io — paste vào ô HTML, kết quả hiện ngay
Kiểm tra trên điện thoại
Hơn 70% người dùng VN truy cập web bằng điện thoại, nên bạn phải kiểm tra mobile:
Cách 1: Chrome DevTools (trên máy tính)
- Bấm F12 (hoặc Ctrl + Shift + I trên Windows, Cmd + Option + I trên Mac)
- Bấm nút Toggle device toolbar (hình điện thoại) ở góc trên trái
- Chọn thiết bị: iPhone 14, Galaxy S21…
Cách 2: Xem trên điện thoại thật
Sau khi deploy (bài 7), bạn sẽ có link thật để mở trên điện thoại. Nhưng bây giờ, DevTools là đủ.
Kết quả không đẹp? Đừng lo!
Nếu trang web trông chưa ưng ý — hoàn toàn bình thường. Bạn sẽ chỉnh sửa ở 2 bài tiếp theo. Những vấn đề phổ biến:
| Vấn đề | Nguyên nhân | Cách sửa (bài tiếp) |
|---|---|---|
| Màu sắc xấu | Prompt chưa nêu rõ mã màu | Đưa color palette cụ thể |
| Font không đẹp | ChatGPT dùng font mặc định | Chỉ định Google Fonts |
| Layout lệch | Prompt thiếu chi tiết layout | Mô tả rõ grid, spacing |
| Không responsive | Prompt chưa yêu cầu | Thêm yêu cầu responsive |
| Hình placeholder | Chưa có ảnh thật | Dùng Unsplash hoặc ảnh riêng |
Trong bài tiếp theo, bạn sẽ học cách chỉnh sửa trang web qua ChatGPT — đổi màu, font, nội dung, thêm hình ảnh — tất cả bằng chat.
Kiểm tra kiến thức
1. Sau khi copy code HTML từ ChatGPT, bạn lưu file với tên gì?
2. Trên Mac, khi dùng TextEdit để lưu file HTML, bước quan trọng nhất là gì?
3. Cách kiểm tra trang web trên điện thoại mà không cần deploy là gì?