HTML, CSS, JSX cho Non-Coder: Hiểu Web trong 30 Phút | DIY Digital
Hôm qua tôi cần tạo một hình thumbnail cho blog. Thay vì dùng Canva như thường lệ, tôi được hướng dẫn thử làm bằng code. Và bất ngờ thay, tôi - một người chưa từng viết một dòng code nào - đã hiểu được cách website hoạt động.
Đây là những gì tôi học được.
Mở đầu: File HTML "nhìn loạn cả lên"
Tôi được gửi một file blog-thumbnail.html. Mở bằng Chrome thì thấy một hình thumbnail đẹp. Nhưng khi mở bằng TextEdit để xem bên trong, tôi thấy một đống chữ trông như thế này:
<div class="thumbnail">
<h1>Cách tôi tiết kiệm <span class="highlight">350,000đ</span></h1>
<p class="subtitle">5 phút setup DNS = 1 năm tiết kiệm</p>
</div>
Phản ứng đầu tiên của tôi: "Cái gì đây? Sao loạn thế?"
<!-- 📸 HÌNH 1: Screenshot 2 cửa sổ cạnh nhau - Bên trái: TextEdit hiển thị source code HTML - Bên phải: Chrome hiển thị kết quả visual → Mục đích: Cho thấy cùng 1 file nhưng 2 cách nhìn khác nhau -->
Nhưng rồi tôi nhận ra: đây không phải "loạn". Đây là công thức, và Chrome là người đầu bếp đọc công thức đó rồi "nấu" ra hình ảnh.
HTML, CSS, JS - Bộ ba quyền lực của mọi website
Mọi website bạn từng truy cập đều được xây dựng từ 3 thứ này:
| Vai trò | Ví dụ thực tế | |
|---|---|---|
| HTML | Nội dung - CÁI GÌ hiển thị | "Đây là tiêu đề", "Đây là đoạn văn", "Đây là nút bấm" |
| CSS | Giao diện - TRÔNG NHƯ THẾ NÀO | "Tiêu đề màu xanh, cỡ chữ 32px, căn giữa" |
| JS | Hành vi - LÀM GÌ KHI TƯƠNG TÁC | "Khi click nút → hiện popup" |
Nếu ví von với việc xây nhà:
- HTML = Bản vẽ kết cấu (phòng nào ở đâu)
- CSS = Thiết kế nội thất (màu tường, loại sàn)
- JS = Hệ thống điện/nước (bật công tắc thì đèn sáng)
<!-- 📸 HÌNH 2: Infographic đơn giản - 3 icon đại diện cho HTML (khung xương), CSS (cọ sơn), JS (bánh răng) - Mũi tên kết hợp lại thành icon website → Mục đích: Visual hóa khái niệm trừu tượng -->
Tại sao file .html lại chứa cả CSS?
Câu hỏi này làm tôi thắc mắc: "File đuôi .html mà sao bên trong có cả CSS?"
Hóa ra, một file HTML có thể chứa cả 3 thứ:
file.html
├── <body>...</body> → HTML (nội dung)
├── <style>...</style> → CSS (giao diện)
└── <script>...</script> → JS (hành vi)
Đuôi file là .html vì đó là file "chính" mà trình duyệt mở. CSS và JS có thể nằm trong đó, hoặc tách ra file riêng (.css, .js) rồi link vào.
Giống như một cuốn sách có thể chứa cả chữ, hình, và bảng biểu - nhưng vẫn gọi là "sách".
JSX - "HTML có siêu năng lực"
Sau khi hiểu HTML, tôi được giới thiệu thêm JSX. Ban đầu tôi tưởng nó là JSON (định dạng lưu dữ liệu), nhưng không phải.
JSX là cách viết giao diện trong React - một công cụ phổ biến để xây dựng web app. Nó trông giống HTML nhưng có thêm khả năng lập trình:
// HTML thuần - cứng nhắc
<h1>Xin chào Thanh</h1>
// JSX - linh hoạt
<h1>Xin chào {userName}</h1> // {userName} có thể thay đổi
Chỗ {userName} là "biến" - có thể thay đổi giá trị tùy ngữ cảnh. Đó là sức mạnh của JSX so với HTML thuần.
Nhưng có một vấn đề: Trình duyệt không hiểu JSX trực tiếp. Cần một bước "biên dịch" để chuyển JSX thành HTML/CSS/JS thuần. Giống như dịch tiếng Việt sang tiếng Anh vậy.
CodeSandbox - "VS Code trên trình duyệt"
Để chạy code JSX, tôi được hướng dẫn dùng CodeSandbox (codesandbox.io). Đây là một editor code chạy online, không cần cài đặt gì.
<!-- 📸 HÌNH 3: Screenshot giao diện CodeSandbox với chú thích - Khoanh vùng bên trái: "Danh sách file" - Khoanh vùng giữa: "Code editor" - Khoanh vùng bên phải: "Preview kết quả" → Mục đích: Giúp người đọc biết nhìn vào đâu khi mở CodeSandbox -->
Quy trình đơn giản bất ngờ:
- Mở codesandbox.io/s/react-new
- Paste code JSX vào file
App.js - Kết quả hiện ra bên phải ngay lập tức
Tôi paste đoạn code tạo thumbnail và... nó hoạt động! Một hình thumbnail xuất hiện bên phải màn hình.
<!-- 📸 HÌNH 4: Screenshot kết quả thumbnail trong CodeSandbox - Hiển thị cả code bên trái và preview bên phải → Mục đích: Chứng minh "người không biết code cũng làm được" -->
Một chi tiết nhỏ khiến tôi học thêm điều mới
Trong thumbnail có một vòng tròn loading xoay xoay. Nhưng khi chạy trên CodeSandbox, nó không xoay.
Lý do: Animation cần được "định nghĩa" bằng @keyframes trong CSS. Code JSX có gọi đến animation tên "spin", nhưng chưa ai nói "spin" nghĩa là gì.
@keyframes spin {
to { transform: rotate(360deg); }
}
Đoạn code này nói: "Animation tên 'spin' nghĩa là xoay 360 độ."
Sau khi thêm vào file styles.css, vòng tròn xoay.
<!-- 📸 HÌNH 5 (tùy chọn): GIF ngắn hoặc 2 screenshot before/after - Before: Vòng tròn đứng yên - After: Vòng tròn đang xoay → Mục đích: Minh họa kết quả của việc thêm @keyframes -->
Vậy khi nào dùng gì?
Sau trải nghiệm này, tôi đúc kết:
| Công cụ | Khi nào dùng |
|---|---|
| HTML/CSS thuần | Trang tĩnh đơn giản, mở trực tiếp bằng trình duyệt |
| React/JSX | Web app phức tạp, cần tương tác, dữ liệu thay đổi |
| CodeSandbox | Muốn thử code React nhanh, không cài đặt gì |
| Canva/Figma | Thiết kế hình ảnh, không cần code |
Với thumbnail cho blog, thực ra HTML thuần hoặc thậm chí Canva là đủ. Nhưng việc thử React/CodeSandbox cho tôi hiểu thêm về cách công nghệ web hoạt động.
Kết luận: Code không đáng sợ như tôi nghĩ
Trước đây tôi nghĩ code là thứ gì đó phức tạp, đầy những con số và ký tự vô nghĩa. Nhưng thực ra:
- HTML chỉ là những từ tiếng Anh có cấu trúc (
<div>,<h1>,<p>) - CSS là những mô tả dễ hiểu (
color: red,font-size: 20px) - Trình duyệt là "người phiên dịch" biến code thành hình ảnh
Bạn không cần biết code để làm việc hàng ngày. Nhưng hiểu cơ bản về nó giúp bạn:
- Giao tiếp tốt hơn với developer
- Tự xử lý những việc nhỏ mà không cần nhờ
- Biết giới hạn và khả năng của công nghệ
30 phút tìm hiểu, cả một góc nhìn mới mở ra.
Bài trước: Tiết kiệm 350k mua domain - Setup Ghost blog
Series: DIY Digital (2 bài)