Ngày 02 trên 12

Bên phía client

Xây một trang thật — rồi dùng trình soạn thảo AI để ship một trang hoàn chỉnh ra internet

Bạn có thể… vào cuối ngày

  • Viết HTML có ngữ nghĩa, định dạng bằng CSS (box model, flexbox/grid) và thêm tương tác bằng JS.
  • Yêu cầu AI tạo một landing page responsive đúng nghĩa — và đọc được output đủ để biến nó thành của bạn.
  • Xây một frontend hoàn chỉnh (cấu trúc + style + một chút JS) ngay trong trình soạn thảo AI.
  • Serve file của bạn trên port 80 và xác nhận nó tới được toàn thế giới (dùng 4G).
Sản phẩm

Một site responsive, đang live ở URL công cộng của bạn, xây bằng trình soạn thảo AI.

Móc nối toàn cảnh

Góc dưới-trái của sơ đồ đang chạy — file tĩnh được serve. Nhưng trang này chưa nhớ được gì. Điều đó cần một ngôn ngữ và một database.

Khái niệm bạn sẽ hiểu gì

  • “Deploy” nghĩa là gì với site tĩnh: file nằm ở một đường dẫn trên một máy, và một tiến trình giao nó qua một port. Chỉ có vậy.
  • HTML: cấu trúc tài liệu, ngữ nghĩa (header, nav, main, section, footer), form và input.
  • CSS: box model, selector, layout bằng flexbox/grid, responsive/mobile-first, thang chữ và hệ màu thật.
  • JS: DOM, event listener, đọc và ghi element — ba động tác đứng sau mọi trang tương tác.
  • Yêu cầu frontend tốt cho AI: chỉ rõ cấu trúc, diện và responsive; đối xử với AI như một dev junior được giao spec rõ. Rồi nhận ra được CSS và JS nó trả về.
  • Serve trên port 80 (cách nhanh python -m http.server 80) và kiểm tra tới được cả thế giới bằng điện thoại 4G.

Thực hành thực chiến, kết bằng thứ đang chạy

  1. Tự xây trang: một khung landing có ngữ nghĩa với nav dính, hero và footer — HTML + CSS hợp lệ.
  2. Nối một chút JS: một bộ đếm, nút mở menu di động, hoặc cuộn mượt. Để trang làm được một việc.
  3. Xây bằng AI: mở trình soạn thảo AI, yêu cầu một landing page hoàn chỉnh, responsive, chỉnh 2–3 vòng và đọc các file nó viết.
  4. Ship: serve thư mục trên port 80 và mở URL công cộng bằng điện thoại 4G. Đã live. Chụp màn hình.

Muốn định dạng khác? Mọi định dạng

SlidePDFTrang cuộn