Làm web có cần cài phần mềm đắt tiền không?

Không. Tất cả công cụ cần thiết đều miễn phí: một trình soạn code (VS Code — free) và một trình duyệt (Chrome, Edge, Firefox — máy nào cũng có sẵn). Bạn không cần mua gì để học và làm web.

VS Code khác Notepad/Word thế nào?

VS Code là trình soạn code chuyên dụng: nó tô màu cú pháp, gợi ý thẻ, tự đóng ngoặc, báo lỗi — giúp viết HTML/CSS/JS dễ và ít sai hơn nhiều. Word thì thêm định dạng ẩn làm hỏng file code, nên tuyệt đối không dùng Word để viết code.

Live Server là gì và có cần không?

Live Server là tiện ích của VS Code mở trang web của bạn trong trình duyệt và tự tải lại mỗi khi bạn lưu file — không phải bấm F5 liên tục. Không bắt buộc, nhưng nên cài vì nó tiết kiệm rất nhiều thao tác khi học.

Web cơ bản Bài 2: Cài VS Code và trình duyệt (bài học 30 phút)

Bài 1 đã cho bạn bức tranh web hoạt động thế nào (ba lớp HTML–CSS–JS). Trước khi viết dòng code đầu tiên ở Bài 3, bài này lo phần đồ nghề: cài VS Code, sắp xếp thư mục dự án gọn gàng, và viết–mở file HTML đầu tiên trong trình duyệt. Cuối bài, máy bạn đã sẵn sàng và bạn đã thấy trang web “chào thế giới” của chính mình chạy thật.

⏱️ Cách học bài này (~30 phút): cài VS Code + trình duyệt (10’), tạo thư mục dự án và file đầu tiên (10’), cài Live Server và mở trang (6’), lưu file mang về (4’).

Mục tiêu bài học

Sau bài này bạn sẽ:

Cài VS Code và biết vì sao dùng nó thay Word/Notepad.
Tạo thư mục dự án gọn gàng cho trang web.
Viết và mở file index.html đầu tiên trong trình duyệt.
Cài Live Server để trang tự tải lại khi lưu — học nhanh hơn.

1. Hai công cụ cần có (đều miễn phí)

Làm web chỉ cần hai thứ, không tốn tiền:

Trình soạn code — VS Code: nơi bạn gõ HTML/CSS/JS. Tải tại code.visualstudio.com — trang tự nhận hệ điều hành và hiện nút tải to (Windows/macOS/Linux). Trên Windows thường có “User Installer”, trên Mac chọn đúng loại chip (Apple Silicon cho máy M1 trở lên, Intel cho máy cũ); nếu phân vân, cứ chọn nút mặc định to nhất.
Trình duyệt: nơi xem kết quả. Máy nào cũng có sẵn (Chrome, Edge, Safari, Firefox) — không cần cài thêm. Khi học nên dùng Chrome hoặc Edge vì công cụ dành cho lập trình viên (DevTools) tiện và phổ biến.

Cài VS Code sau khi tải (làm 1 lần):

Windows: mở thư mục Downloads, nhấp đúp file VSCodeUserSetup-...exe vừa tải → tick “I accept” → bấm Next vài lần → Install → Finish. VS Code tự mở.
macOS: mở file .zip/.dmg trong Downloads → hiện biểu tượng Visual Studio Code → kéo nó vào thư mục Applications. Vào Launchpad/Applications mở lên; lần đầu máy hỏi “mở app tải từ Internet?” → bấm Open. (Nếu macOS đời mới chặn hẳn, vào System Settings → Privacy & Security, kéo xuống cuối bấm Open Anyway.)

⚠️ Đừng dùng Word để viết code. Word chèn định dạng ẩn làm hỏng file. Nếu chưa cài VS Code kịp, tạm dùng Notepad (Windows) / TextEdit ở chế độ văn bản thuần — nhưng nên cài VS Code sớm.

2. Vì sao VS Code chứ không phải Notepad?

VS Code là trình soạn chuyên cho code, giúp người mới đỡ sai:

Tô màu cú pháp — thẻ, thuộc tính, chữ hiển thị khác màu, dễ đọc và dễ thấy chỗ gõ sai.
Gợi ý & tự đóng thẻ — gõ <p nó gợi ý, tự thêm </p>.
Báo lỗi ngay — thiếu dấu đóng ngoặc, sai cú pháp được gạch chân.
Tiện ích mở rộng — như Live Server (mục 5) giúp việc học nhẹ hẳn.

3. Tạo thư mục dự án gọn gàng

Thói quen tốt ngay từ đầu: mỗi trang web nằm trong một thư mục riêng.

Tạo một thư mục tên trang-ca-nhan (đặt ở Desktop hoặc Documents cho dễ tìm) — tên không dấu, không khoảng trắng.
Mở VS Code → File → Open Folder (trên Mac menu ghi là File → Open…, chọn được cả thư mục) → chọn thư mục vừa tạo. Từ giờ cả dự án nằm trong cửa sổ này.
Sau này ảnh, file CSS, file JS đều bỏ chung trong thư mục này để liên kết không bị lạc.

💡 Vì sao tên không dấu, không khoảng trắng? Vì đường dẫn web (URL) xử lý dấu và khoảng trắng rắc rối; tập nếp đặt tên anh-dai-dien.jpg thay vì ảnh đại diện.jpg ngay từ đầu sẽ tránh lỗi về sau.

4. Viết file HTML đầu tiên

Trong VS Code, với thư mục đã mở:

Bấm New File (biểu tượng trang giấy ở thanh bên, hoặc File → New File), đặt tên chính xác index.html.
Nhập đoạn sau (lần đầu cứ copy cho nhanh để thấy trang chạy đã; từ Bài 3 hãy tập gõ tay để quen thẻ):

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <title>Trang của tôi</title>
  </head>
  <body>
    <h1>Xin chào, đây là trang web đầu tiên của tôi!</h1>
    <p>Tôi đang học làm web.</p>
  </body>
</html>

Lưu lại (Ctrl + S / Cmd + S).

Vì sao đặt tên index.html? Vì index là trang chủ mặc định — khi đưa web lên mạng ở cuối series, máy chủ tự mở index.html đầu tiên. Tập nếp này ngay từ bây giờ.

5. Mở trang — hai cách

Cách nhanh (không cài gì): vào thư mục, nhấp đúp index.html (hoặc kéo file thả vào cửa sổ trình duyệt). Bạn sẽ thấy dòng chữ lớn “Xin chào…”. Nhược điểm: sửa file xong phải bấm F5 để tải lại.

Cách nên dùng — Live Server (tự tải lại):

Trong VS Code, mở Extensions (biểu tượng ô vuông ở thanh bên trái, hoặc Ctrl/Cmd + Shift + X).
Gõ “Live Server” (tác giả Ritwick Dey) → Install.
Chuột phải vào index.html → Open with Live Server. Trang mở trong trình duyệt và tự tải lại mỗi khi bạn lưu — không phải bấm F5 nữa.

Từ giờ, quy trình học của bạn là: gõ code → Ctrl+S → nhìn trình duyệt tự đổi.

Lỗi thường gặp & cách sửa

Nhấp đúp mà mở ra chữ code thay vì trang web → file lưu sai đuôi (vd index.html.txt). Bật hiển thị đuôi tệp rồi đổi lại đúng .html: Windows — mở File Explorer → thẻ View → tick File name extensions; Mac — Finder → Settings (Cmd+,) → Advanced → tick Show all filename extensions.
Tiếng Việt hiển thị lỗi (ô vuông, dấu sai) → thiếu dòng <meta charset="UTF-8"> trong <head>. Thêm vào là hết.
Open with Live Server không hiện → chưa cài xong tiện ích hoặc chưa mở bằng “Open Folder” (mở lẻ 1 file đôi khi Live Server không nhận) — mở cả thư mục rồi thử lại.
Sửa file mà trình duyệt không đổi → nếu mở bằng cách nhấp đúp thì phải bấm F5; hoặc chuyển sang Live Server.

💾 Mang về — bộ khung file đầu tiên

Giữ lại index.html này làm điểm xuất phát cho cả series (Bài 3 sẽ đắp nội dung lên chính nó):

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <title>Trang của tôi</title>
  </head>
  <body>
    <h1>Xin chào!</h1>
    <p>Đây là trang cá nhân tôi đang xây trong series Web cơ bản.</p>
  </body>
</html>

Thuật ngữ chốt

Thuật ngữ	Giải thích ngắn
VS Code	Trình soạn code miễn phí, tô màu cú pháp và báo lỗi
extension (tiện ích)	Phần cài thêm cho VS Code, vd Live Server
Live Server	Tiện ích mở web và tự tải lại mỗi khi lưu file
index.html	Tên file trang chủ mặc định của một trang web
DevTools	Bộ công cụ lập trình viên trong trình duyệt (F12)

Tự kiểm tra

Vì sao không nên viết code bằng Word? (Đáp án: Word chèn định dạng ẩn làm hỏng file code.)
File trang chủ nên đặt tên gì? (Đáp án: index.html.)
Live Server giúp gì? (Đáp án: tự tải lại trang mỗi khi bạn lưu, khỏi bấm F5.)

Ghi nhớ nhanh

Đồ nghề đủ dùng: VS Code (free) + trình duyệt có sẵn.
Mỗi web một thư mục riêng, tên không dấu, không khoảng trắng; trang chủ là index.html.
Cài Live Server để trang tự tải lại — học nhanh hơn hẳn.

👉 Việc làm ngay hôm nay: cài VS Code, tạo thư mục trang-ca-nhan, gõ file index.html ở trên và mở trong trình duyệt. Thấy dòng “Xin chào” là bạn đã sẵn sàng. Bài tiếp theo: Bài 3 — HTML: cấu trúc một trang web, ta bắt đầu viết nội dung thật.

Bài 2: Cài công cụ làm web — VS Code và trình duyệt