Xây website nhỏ với Codex
Tạo trang đăng ký sự kiện tĩnh, kiểm tra bàn phím và kích thước mobile, rồi rà soát thay đổi trước khi dùng.
Tổng quan
Dành cho người học muốn tự hoàn thành bài thực hành xây website nhỏ với codex, với dữ liệu mẫu có thể kiểm tra.
- Viết đặc tả ngắn, có giới hạn cho một trang web.
- Dùng Codex trong thư mục mới và kiểm tra file tạo ra.
- Thử giao diện bằng trình duyệt thay vì chỉ nhìn ảnh.
Bạn sẽ hoàn thành: Ba file HTML/CSS/JS và một trang sự kiện chạy trên localhost.
Chuẩn bị
- Có quyền dùng Codex qua tài khoản hoặc API theo hướng dẫn chính thức.
- Terminal, trình duyệt, Python 3 và Git; tùy chọn Node.js/npm nếu cài CLI qua npm.
Quyền dùng Codex và hạn mức tùy tài khoản; nếu chọn API thì chi phí tính theo API. Bài chỉ chạy cục bộ, không cần mua hosting hay deploy.
Thực hành từng bước
Bước 1. Tạo môi trường tách biệt
Tạo một thư mục rỗng, mở Codex bằng giao diện bạn đã cài hoặc dùng CLI chính thức. Với CLI, làm theo tài liệu cài đặt hiện hành rồi chạy codex trong thư mục bài tập và đăng nhập. Không chạy lệnh cài đặt từ bài đăng không rõ nguồn.
mkdir codex-site-lab
cd codex-site-lab
git init
codexBước 2. Giao đặc tả có tiêu chí kiểm tra
Tạo website sự kiện hư cấu "AI Study Session" bằng index.html, styles.css và app.js. Nội dung gồm giờ học 19:00, địa điểm Online và form tên hiển thị. Form chỉ hiện thông báo xác nhận trong trang, không gửi dữ liệu, không lưu localStorage. Dùng label, focus-visible, layout đáp ứng từ 390px. Không dùng thư viện ngoài, backend, ảnh tải từ mạng, commit hoặc deploy. Trước khi sửa, tóm tắt các file định tạo.Bước 3. Chạy trang và thử hành vi
python3 -m http.server 8080 --bind 127.0.0.1Mở http://127.0.0.1:8080. Gõ một tên mẫu, gửi form và xác nhận trang không reload hoặc mở URL lạ. Gửi form rỗng để kiểm tra validation. Trong DevTools Network, xem thao tác form có phát sinh request ngoài ba file cục bộ không.
Bước 4. Kiểm tra mobile, bàn phím và an toàn chèn text
Chuyển viewport xuống 390px; Tab qua các liên kết, input và nút. Thử tên <img src=x> và xác nhận nó hiển thị như văn bản, không trở thành phần tử HTML: mã phản hồi nên dùng textContent. Yêu cầu Codex sửa đúng lỗi bạn quan sát được, không thay toàn bộ thiết kế mỗi lượt.
Rà soát app.js: phản hồi từ tên người dùng phải dùng textContent, không dùng innerHTML. Chỉ sửa lỗi đã xác định; giữ nội dung và layout. Cho biết cách tự kiểm tra lại bằng trình duyệt.Bước 5. Rà soát file và kết thúc phiên
git status --short
git diff
git diff --no-index -- /dev/null index.htmlTrong repository mới, git diff không liệt kê nội dung file chưa theo dõi; mở từng file hoặc dùng lệnh no-index trên để đọc. Lệnh no-index trả mã 1 khi có khác biệt, đây không phải lỗi website. Dừng server bằng Ctrl+C khi xong.
Kiểm tra kết quả
- Form hoạt động bằng bàn phím; không tràn ngang ở 390px.
- Đã đọc ba file và thử dữ liệu có dấu < >.
Xử lý lỗi thường gặp
Không tìm thấy lệnh codex
Nguyên nhân: CLI chưa cài hoặc PATH chưa cập nhật.
Cách xử lý: Dùng tài liệu CLI chính thức hoặc mở bằng ứng dụng đã có; không cài một gói có tên gần giống.
Cổng 8080 đã được dùng
Nguyên nhân: Một tiến trình khác đang phục vụ.
Cách xử lý: Đổi sang cổng 8081 trong lệnh và URL; không tắt tiến trình không rõ chủ sở hữu.
Bài tập & mở rộng
- Thêm một checkbox đồng ý nhận thông tin nhưng vẫn không gửi dữ liệu.
- Viết checklist regression trước khi yêu cầu Codex thay màu hoặc nội dung.
Form là bản demo, không đăng ký người dùng thật. Có website chạy được không có nghĩa đã hoàn thành bảo mật, khả năng truy cập hay vận hành production.