Một trang web = ba việc

Mọi trang bạn từng dùng — web bán hàng, dashboard, app ngân hàng — đều chia công việc ra ba file này.

Trang đến màn hình bạn như thế nào

Frontend là phía client. Việc của server kết thúc ngay khi bàn giao ba loại file — mọi thứ sau đó xảy ra trong trình duyệt của bạn.

server ──(html · css · js)──▶ browser ──(pixels)──▶ your eyes

Điều gì xảy ra khi bạn mở một URL

Bốn nhịp. Sau nhịp 3 trang đã 'sống' trong trình duyệt của bạn — và nhịp 4 lặp lại ở mỗi lần click.

1. 1

   Bạn mở một URL

   Trình duyệt của bạn hỏi một server: 'đưa cho tôi trang này'.

2. 2

   Server trả lời bằng các file

   Nó gửi HTML + CSS + JS. Toàn bộ câu trả lời chỉ là các file text.

3. 3

   Trình duyệt dựng trang

   HTML thành một cây phần tử, CSS tô và xếp chúng vào chỗ, JS bắt đầu chạy.

4. 4

   Bạn click — vòng lặp lặp lại

   JS phản hồi ngay tại chỗ; cần dữ liệu mới, nó hỏi server lần nữa (một API call) — không cần tải lại.

AI viết. Bạn chỉ đường.

Bộ slide này là tấm bản đồ đó — nhận ra, đánh giá, sửa.

Cả một trang, 11 dòng

Hai nửa: <head> là metadata và link (không thấy), <body> là mọi thứ bạn nhìn thấy.

<!doctype html>
<html>
  <head>                      ← invisible: title, CSS links
    <title>My page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>                      ← everything the user sees
    <h1>Hello, world</h1>
    <p>This is the first paragraph.</p>
    <p id="status"></p>
  </body>
</html>

Bên phải là bản render trực tiếp của chính trang này — click vào dòng status, bạn có thể sửa nó. Thẻ đi theo cặp: <h1>…</h1>.

Ba quy tắc — đó là toàn bộ cú pháp

HTML gần như không có cú pháp. Giữ ba điều này là bạn đọc được mọi trang.

Những thẻ bạn sẽ nhận ra ở khắp nơi

Bạn không cần học thuộc HTML — cần nhận ra nó khi bạn (hoặc AI của bạn) đọc.

Một thanh menu, bằng HTML thuần

Một logo, một danh sách link, một nút. Chưa có CSS — chỉ có cấu trúc.

<nav>
  <a class="logo">MyShop</a>
  <ul>
    <li><a href="/shop">Shop</a></li>
    <li><a href="/about">About</a></li>
  </ul>
  <button>Log in</button>
</nav>

Bên phải chạy thật — click Shop, About hay Log in để thấy phản hồi. Mọi thanh menu bạn từng thấy đều là phiên bản của <nav> này.

Một trang điển hình, dưới dạng cây

Gần như mọi web app bạn từng dùng đều có đúng hình dạng này: thanh trên cùng, cột bên trái, nội dung ở giữa.

<body>
├── <nav>          menu bar — logo, links, 'login'
├── <div class="layout">
│   ├── <aside>    sidebar — filters, sub-menu
│   └── <main>     content — what the page is about
└── <footer>       links, copyright

# every element above is just a <div> or its friends —
# the layout you see is CSS placed on this tree

Đọc cái cây này từ trên xuống và bạn mô tả được cấu trúc của gần như mọi dashboard.

UI quen thuộc — thực ra được làm từ gì

Nhận ra mẫu hình, đừng học thuộc cú pháp. Phần lớn UI 'sang' chỉ là HTML thường khoác thêm CSS.

Một form đăng nhập, 7 phần tử

UI phổ biến nhất trên web: một ô để gõ, và một nút để gửi.

<form>
  <label>Email</label>
  <input type="email" placeholder="you@example.com">

  <label>Password</label>
  <input type="password">

  <button type="submit">Log in</button>
</form>

Bên phải chạy thật — bấm Log in để form phản hồi (JS sẽ chặn ở đây). Mỗi <label> mô tả cho <input> bên cạnh.

id vs class — hai cách đặt tên phần tử

Thẻ ngữ nghĩa mang nghĩa, không chỉ hình dạng

<div> chẳng nói lên điều gì. <nav>, <main>, <article> nói vùng đó LÀ gì.

Một card sản phẩm, bằng HTML thuần

Mọi card trên web — sản phẩm, hồ sơ, bài viết — đều có hình dạng này: ảnh trên cùng, tiêu đề, chữ, hành động.

card.html

<div>
  <img src="product.jpg" alt="Espresso machine">
  <h3>Espresso Machine</h3>
  <p>Pulls a proper shot at home.</p>
  <button>Add to cart</button>
</div>

Trực tiếp — thử ngay

Espresso Machine

Pulls a proper shot at home.

Add to cart

Bên phải là card chạy thật — bấm Add to cart. Chính markup này sẽ thành Bootstrap card ở phần kế tiếp, chỉ bằng cách thêm class.

Những lỗi HTML đáng để bắt

Những lỗi mà AI (và người) vẫn thường để lọt. Bạn không cần tìm ra tất cả — chỉ cần nhận ra bốn cái này.

Mọi thứ trên trang đều là một cái hộp

Mỗi phần tử là một hình chữ nhật có bốn lớp đồng tâm. Chỉ một mô hình này giải thích phần lớn CSS.

CSS tìm cái cần tô kiểu bằng cách nào

Mỗi luật CSS = một địa chỉ + một danh sách thuộc tính. Ba kiểu địa chỉ bao quát 95% CSS.

'Kiểu dáng' thực ra có nghĩa là gì

Một luật CSS = chọn một phần tử, rồi gán cho nó các thuộc tính. Đó là toàn bộ cú pháp.

button {
  padding: 10px 18px;     /* room inside */
  background: #34d399;    /* colour */
  border: none;
  border-radius: 8px;     /* rounded corners */
  color: white;
  font-size: 15px;
}

Bên phải chạy thật — đó là chính CSS trong hộp áp lên nút. Đưa chuột lên nó. AI viết cái này; biết padding / border / radius là cách bạn đọc lại.

Ba công cụ bố cục, một công việc

Bố cục = quyết định các phần tử nằm ở đâu. CSS có đúng ba công cụ lớn cho việc đó.

Flexbox, vẽ ra

display: flex xếp các phần tử thành một hàng. Hai trục làm toàn bộ việc — mọi thuộc tính flex khác chỉ là nút vặn trên một trong hai trục này.

justify-content dịch phần tử dọc trục CHÍNH · align-items dịch dọc trục NGANG

justify-content — phân bố khoảng trống dọc trục chính

Các ô là thật: mỗi hàng là một flex container thực sự mang đúng thuộc tính đó. Đây là thứ trình duyệt tính ra.

space-between: phần tử dính vào hai đầu, chỉ có khoảng trống ở giữa · space-around: mọi phần tử có khoảng trống đều nhau, hai đầu nhận nửa

Wrap, grow, direction

Ba thuộc tính nữa bao quát phần lớn flex layout thực tế. Cả ba ô dưới đây đều là flex container chạy thật.

wrap: phần tử dư bắt đầu hàng mới · grow: một phần tử lấp đầy phần còn lại · column: hàng trở thành cột

Grid — hàng VÀ cột cùng lúc

Trái: chín ô trong lưới 3×3. Phải: các ô trải rộng. Cùng một ý tưởng, ít code hơn hẳn việc chất chồng flexbox.

col-3 của Bootstrap chính là lưới này với 12 cột: col-3 = 3/12 = một phần tư hàng

Một codebase, hai bố cục

Media query là một công tắc: cùng phần tử, cách xếp khác nhau theo kích thước màn hình.

/* desktop: sidebar next to content */
.layout { display: flex; }

/* phone: sidebar stacks on top */
@media (max-width: 768px) {
  .layout { flex-direction: column; }
}

Bên phải là một cửa sổ chạy thật — kéo slider qua 768px và sidebar xếp chồng. Dưới 768px, cùng trang tự xếp lại; đó là 'responsive'.

Cùng một nút, hai cách làm

Đó chính là điểm mấu chốt: sự nhất quán miễn phí, để bạn dành thời gian cho trang — chứ không phải pixel.

Cùng markup — class chính là phép màu

HTML giống hệt, cùng một tấm ảnh. Bên phải chỉ thêm tên class — và bỗng trông như được thiết kế.

plain html — no classes

Espresso Machine

Pulls a proper shot at home.

Add to cart

same markup + bootstrap classes

Espresso Machine

Pulls a proper shot at home.

Add to cart

card · card-img-top · card-body · card-title · card-text · btn btn-primary

Những component bạn sẽ thấy ở khắp nơi

Mọi thứ bên dưới là Bootstrap 5 thật, được render ngay trong slide này. Mỗi mảnh chỉ là một hoặc hai tên class.

Aero Chair

Ergonomic. Breathable. Actually comfortable.

View product

Order #4821 confirmed paid

3 items under $10 deal

Primary Outline Success Link

New Beta Live Down

navbar · card · alert · badge · btn — bộ từ vựng của hàng nghìn dashboard

Form hết trông 'mặc định' nữa

Cùng những input bạn đã thấy ở phần HTML — giờ có thêm class form-*. Trạng thái focus và khoảng cách đã được lo sẵn.

form-label · form-control · form-select · form-check form-switch · btn

Một trang với 11 dòng class

Không có khối <style> nào — diện mạo cả trang hoàn toàn đến từ các tên class.

<link href="bootstrap.min.css" rel="stylesheet">

<nav class="navbar">…logo + links…</nav>

<div class="container">
  <div class="row">
    <div class="col-3">sidebar</div>
    <div class="col-9">main content</div>
  </div>
  <button class="btn btn-primary">Click me</button>
</div>

col-3 / col-9 là lưới: 12 cột, 3+9 lấp đầy một hàng. Đổi số — bố cục đổi theo.

Những class đáng nhận ra

Bạn sẽ không học thuộc Bootstrap — nhưng sáu cái này xuất hiện trong gần như mọi trang làm bằng nó.

Lưới 12 cột, trong một slide

Mọi bố cục Bootstrap là những hàng gồm 12 ô bằng nhau. Bạn chọn mỗi khối chiếm mấy ô.

Một listener, một lần cập nhật

Mẫu hình đằng sau mọi tương tác trên web: chờ một sự kiện, rồi thay đổi trang.

const btn = document.querySelector("#save");

btn.addEventListener("click", () => {
  document.querySelector("#status")
          .textContent = "Saved ✓";
});

Bên phải chạy thật — click Save và virtual console ghi lại toàn bộ sự kiện. Giờ nút đã LÀM được việc thật: click xảy ra, JS sửa trang.

Bốn việc mọi app đều làm

JS đọc và sửa DOM — cái cây phần tử đang sống của trang — nên mọi việc dưới đây đều là 'chỉnh' cái cây đó.

Những method bạn sẽ thấy trong mọi câu trả lời của AI

Bạn không cần học thuộc — nhưng khi AI viết chúng, bạn phải nhận ra từng dòng đang làm gì.

Ba sự kiện bao quát phần lớn UI

Mẫu hình lúc nào cũng vậy: listener → handler → sửa trang. Chỉ tên sự kiện đổi.

Một bộ đếm — state sống trong biến

Hai nút, một con số. Biến JS là sự thật; trang chỉ là tấm gương của nó.

let count = 0;
const out = document.querySelector("#count");

document.querySelector("#plus")
  .addEventListener("click", () => {
    count += 1;
    out.textContent = count;
  });

document.querySelector("#reset")
  .addEventListener("click", () => {
    count = 0;
    out.textContent = count;
  });

Bên phải chạy thật — click +1 / Reset; console phản ánh thứ tự 'dữ liệu rồi vẽ'. Thứ tự đó là ý tưởng nền của mọi framework.

Tabs — mẫu hiện/ẩn thật sự

Hiện/ẩn gần như luôn chỉ là lật một class CSS. JS không đụng trực tiếp 'display'.

const tabs = document.querySelectorAll(".tab");

tabs.forEach(tab => tab.addEventListener("click", () => {
  tabs.forEach(t => t.classList.remove("active"));
  tab.classList.add("active");
  // CSS: .tab.active shows its panel, the rest hide
}));

Bên phải chạy thật — click một tab; console cho thấy class .active chuyển. Mánh y hệt này đứng sau dropdown, toast, accordion.

Kiểm tra form, cách thực sự

Chặn submit, kiểm tra giá trị, hiện hoặc xóa lỗi — không tải lại trang.

const form = document.querySelector("#signup");

form.addEventListener("submit", (e) => {
  e.preventDefault();                   // don't reload

  const email = document.querySelector("#email").value;
  const err = document.querySelector("#err");

  if (!email.includes("@")) {
    err.textContent = "That email looks wrong.";
  } else {
    err.textContent = "";              // clear it
    form.reset();
  }
});

Bên phải chạy thật — gửi email sai rồi email đúng; console ghi mỗi nhánh. Đây là bộ khung của mọi thông báo 'email hợp lệ'.

Tìm trong danh sách mỗi lần gõ phím

input → lọc dữ liệu → vẽ lại danh sách. Chính mẫu này đứng sau mọi giao diện lọc bạn từng dùng.

const foods = ["Pizza", "Pho", "Sushi", "Banh mi", "Tacos"];
const input = document.querySelector("#search");
const list = document.querySelector("#list");

input.addEventListener("input", () => {
  const hits = foods.filter(f =>
    f.toLowerCase().includes(input.value.toLowerCase()));

  list.innerHTML = hits
    .map(f => "<li>" + f + "</li>")
    .join("");
});

Bên phải chạy thật — gõ vào ô và console ghi mỗi lần lọc. filter() chọn phần khớp, map() tạo dòng, join() gắn lại.

fetch — và luôn lường trước thất bại

Mạng hay hỏng: server sập, wifi rớt, route không tồn tại. Khối catch là một phần của tính năng.

async function loadOrders() {
  const list = document.querySelector("#orders");
  try {
    const res = await fetch("/api/orders");
    const orders = await res.json();
    list.innerHTML = orders
      .map(o => "<li>" + o.name + "</li>")
      .join("");
  } catch (err) {
    list.textContent = "Couldn't load orders — retry?";
  }
}

Bên phải mô phỏng mạng (không có endpoint thật) — Load orders, hoặc tick Simulate failure để chạm catch. Đánh giá mọi fetch của AI qua khối catch.

fetch không chặn trang

Đây là lý do web app vẫn 'sống' khi đang tải — và cũng là lý do lỗi async trông kỳ quái.

State + render() — hạt mầm của React & Vue

Hai mảnh: một nguồn sự thật duy nhất, và một hàm vẽ lại trang từ nguồn đó.

// one source of truth
let state = { open: 3, cart: [] };

// the page is a picture of the state
function render() {
  document.querySelector("#open").textContent = state.open;
  document.querySelector("#cart").textContent =
    "Cart: " + state.cart.length;
}

state.open += 1;   // 1. change the data
render();          // 2. repaint the page

Bên phải chạy thật — hai nút đổi state, render() vẽ lại, console ghi lại. Đây chính là thứ React & Vue tự động hóa.

Một phần tử, ba file

HTML, CSS và JS cùng nói về một phần tử — mỗi file làm việc của mình.