Donate ủng hộ · tiếp sức ZERO 🤍
Không phải tiền mua sách — đây là khoản donate ủng hộ để team viết tiếp phần mới & xuất bản "MẬT DANH: ZERO". 🎁 Nếu sách được xuất bản, người donate được tặng miễn phí 1 cuốn. Đọc online luôn miễn phí nhé!
Sổ tay // giữa hai trận đánh
Những điều tiền bối ghi lại cho ZERO, để cô không lạc lối.
신입 생존 노트
Chạm nửa phải màn hình để lật trang ›
Thiếu một dấu </div> hay một dấu } là cả trang vỡ. Cách thoát: dùng trình soạn code (VS Code) — nó tự tô màu và báo chỗ thiếu. Mỗi khi mở một dấu, gõ luôn dấu đóng rồi mới viết vào giữa.
getElementById mà gõ thành getElementByID là hỏng. Máy tính không "đoán ý" — nó cần đúng từng ký tự. Cách thoát: copy tên thay vì gõ tay; đọc kỹ thông báo lỗi, nó thường chỉ thẳng dòng sai.
Người mới thấy chữ đỏ là hoảng. Nhưng lỗi là bạn, không phải kẻ thù — nó cho bạn biết chính xác chỗ cần sửa. Cách thoát: đọc dòng đầu của lỗi, copy nó lên Google. 99% trường hợp đã có người gặp và giải đáp.
Copy code trên mạng về dán, nó chạy, nhưng bạn không hiểu. Nguy hiểm — vì khi hỏng bạn không biết sửa. Cách thoát: nhớ lời tiền bối — "đừng học thuộc, hãy hiểu." Đọc từng dòng, tự hỏi "dòng này làm gì?"
Thấy người ta code "vèo vèo" mà mình lọ mọ, dễ tự ti. Nhưng họ cũng từng là bạn. Cách thoát: chỉ so sánh mình hôm nay với mình hôm qua. Tiến một chút mỗi ngày là đủ.
Đọc lỗi → tìm trên Google (kèm chữ tiếng Anh trong lỗi) → thử lại → vẫn bí thì hỏi người khác, kèm theo: "mình đã thử gì, lỗi ra sao." Đừng ngồi im chịu trận quá 30 phút.
| Thói quen | Vì sao hiệu quả |
|---|---|
| Học bằng cách LÀM | Đọc 10 trang không bằng tự gõ 1 ví dụ. Kiến thức chỉ thật khi qua tay bạn. |
| Làm dự án nhỏ thật | Làm trang giới thiệu bản thân, trang đếm số… có mục tiêu thật mới nhớ lâu. |
| Dạy lại người khác | Giải thích cho người khác là cách kiểm tra mình đã hiểu thật chưa. |
| Ghi chú bằng lời của mình | Đừng chép nguyên — viết lại theo cách bạn hiểu, như ZERO viết nhật ký. |
| Nghỉ đúng lúc | Bí quá thì đứng dậy. Não giải bài trong lúc bạn nghỉ — đó là sự thật khoa học. |
| Công cụ | Để làm gì | Ghi chú |
|---|---|---|
| VS Code | Trình soạn code (viết HTML/CSS/JS) | Miễn phí, phổ biến nhất |
| Trình duyệt (Chrome) | Xem kết quả + công cụ kiểm tra (F12) | Bấm F12 để "soi" trang bất kỳ |
| Tra lỗi, tìm cách làm | Kỹ năng quan trọng bậc nhất | |
| Git / GitHub | Lưu & chia sẻ code | Học sau khi vững cơ bản |
Lập trình viên giỏi không phải người nhớ hết mọi thứ — mà là người biết tìm câu trả lời nhanh. Họ Google liên tục, mỗi ngày. Không biết không phải là dốt; không chịu tìm mới là vấn đề.
"Hôm nay mình gặp lỗi đầu tiên khiến mình muốn khóc. Màn hình đỏ lòm. Mình ngồi nhìn nó 20 phút, tức tới mức định bỏ. Rồi mình nhớ cuốn sổ của tiền bối: 'Lỗi là bạn.' Mình hít thở, đọc kỹ dòng lỗi, copy lên Google… và năm phút sau mình sửa được. Cái cảm giác đó — không lời nào tả nổi. Như vừa thắng một trận nhỏ với chính mình."
Sổ tay // công cụ sống còn
깃 실전
Công cụ mà mọi lập trình viên dùng mỗi ngày, nhưng người mới hay sợ.
Git là cỗ máy thời gian cho code. Mỗi mốc ZERO lưu lại gọi là một commit. Lỡ làm hỏng ở bước 4? Cô quay về bất kỳ bản cũ nào trong nháy mắt. Đây là lý do lập trình viên không bao giờ sợ "mất bài".
Một số máy cho phép bạn quay ngược thời gian của chính mình. Mỗi điểm sáng là một khoảnh khắc được lưu lại — bất cứ lúc nào, bạn cũng có thể trở về.
S4 Tax → Cty → Cá nhân → Thời gianMột tiếng thét vang lên từ góc phòng. Một lập trình viên vừa phát hiện nửa ngày công sức của mình biến mất — đồng nghiệp lưu đè lên file mà không biết. ZERO chứng kiến, lạnh sống lưng: nếu là mình thì sao?
"Đó là cơn ác mộng lớn nhất của lập trình viên — mất hết công sức vì lỡ tay, hoặc nhiều người giẫm chân nhau. Nhưng có một thứ khiến điều đó không bao giờ xảy ra nữa. Tên nó là Git — một cỗ máy thời gian cho code."
| Lệnh | Làm gì |
|---|---|
git add | Chọn những file muốn lưu vào "ảnh chụp" tiếp theo |
git commit | Chụp một "ảnh" của code, kèm lời ghi chú |
git push | Đẩy các ảnh chụp lên GitHub (lưu trên mạng) |
git pull | Tải về thay đổi mới nhất từ GitHub |
Viết rõ ràng "đã làm gì" — như "Sửa lỗi nút đăng nhập" thay vì "abc" hay "sửa tí". Ba tháng sau nhìn lại, chính bạn sẽ cảm ơn mình. Đồng đội cũng vậy.
Bạn nhớ sơ đồ branch ở Chương 7 chứ? Đây là lý do thực tế: khi muốn thử một tính năng mới mà không làm hỏng bản đang chạy tốt, bạn tạo một nhánh riêng. Thử thoải mái. Hỏng cũng không sao — bản chính vẫn nguyên vẹn. Khi ưng ý, mới gộp (merge) vào.
ZERO muốn thử đổi toàn bộ màu trang sang tông tối. Nếu sửa thẳng vào bản chính mà khách không thích, cô phải sửa ngược lại mệt mỏi. Thay vào đó cô tạo nhánh "thu-mau-toi", thử trên đó. Khách thích → merge vào. Khách không thích → bỏ nhánh, bản chính chẳng hề hấn gì. Đó là sự an toàn mà Git mang lại.
1. git commit dùng để làm gì?
Chụp một "ảnh" của code tại thời điểm đó, kèm lời ghi chú, để sau này quay lại được.
2. Vì sao nên tạo nhánh (branch) khi thử tính năng mới?
Để thử nghiệm an toàn mà không ảnh hưởng bản chính đang chạy tốt.
3. git push và git pull khác nhau ra sao?
push = đẩy code của mình LÊN GitHub; pull = tải thay đổi mới VỀ máy mình.
☐ Tạo tài khoản GitHub miễn phí (nếu chưa có)
☐ Cài Git, tạo một repository cho trang "Về tôi"
☐ Thực hành: add → commit (ghi chú rõ) → push
☐ Xem code của mình hiện lên trên github.com — sản phẩm đầu tiên được lưu trữ công khai!
⚿ Không có trên Google · ghi chép từ người đi trước
✕ merge conflict (xung đột khi gộp code) không phải lỗi — nó là chuyện thường ngày. Bình tĩnh đọc, chọn giữ phần nào.
✕ Đừng bao giờ git push --force lên nhánh chung nếu chưa hiểu rõ — có thể xóa code của cả team.
✕ Commit message kiểu "fix", "update", "abc" sẽ bị nhắc nhở. Hãy viết rõ: "Sửa lỗi nút đăng nhập không bấm được".
✕ Luôn pull code mới nhất trước khi bắt đầu làm — tránh xung đột không đáng có.
Vì sao quan trọng: Git là kỹ năng mà mọi công ty yêu cầu nhưng không trường nào dạy kỹ. Thành thạo Git, bạn đã hơn rất nhiều người mới.
Anh ơi em bị merge conflict rồi, hoảng quá 😨
Bình tĩnh, chuyện thường thôi. Mở file ra, Git đánh dấu phần xung đột. Em chọn giữ phần đúng rồi commit lại.
À em hiểu rồi! Hóa ra không đáng sợ như em tưởng. Cảm ơn anh.
💬 "Tôi đang bị merge conflict ở file này. Giải thích từng bước cách giải quyết an toàn cho người mới."
💬 "Liệt kê 10 lệnh Git quan trọng nhất cho người đi làm, kèm ví dụ khi nào dùng."
Sổ tay // đối mặt với lỗi
디버깅의 기술
02:00 sáng. Màn hình đỏ rực một dòng lỗi. Code vừa nãy còn chạy mà!
ZERO vừa thêm một đoạn code nhỏ, và bỗng nhiên toàn bộ trang trắng xóa. Một dòng chữ đỏ hiện lên như lời kết tội: Uncaught TypeError… line 47. Tim cô đập thình thịch. Code lúc nãy còn chạy tốt. Cô đã làm gì sai? Càng nhìn dòng đỏ, cô càng hoảng — và càng hoảng, càng không nghĩ ra.
"Thở đi đã. Lỗi đỏ không phải kẻ thù — nó là người chỉ đường. Em sẽ dành nửa sự nghiệp để sửa lỗi đấy, nên đây có lẽ là kỹ năng quan trọng nhất anh dạy em. Người ngoài tưởng lập trình là viết ra cái mới. Thực ra phần lớn là tìm ra vì sao cái cũ không chạy."
| Người mới nghĩ | Dân chuyên nghĩ |
|---|---|
| "Lỗi = mình dốt" | "Lỗi = manh mối chỉ chỗ sai" |
| "Đỏ là thảm họa" | "Đỏ là tấm bản đồ tới giải pháp" |
| Hoảng loạn, đoán mò | Đọc kỹ, lần theo dấu vết |
Nó thường chỉ rõ: lỗi ở file nào, dòng số mấy, và loại lỗi gì. Đừng lướt qua nó trong hoảng loạn — hãy đọc chậm. 90% câu trả lời nằm ngay trong dòng lỗi đầu tiên.
| Bước | Làm gì |
|---|---|
| 1. Đọc lỗi | Đọc kỹ dòng lỗi: file nào, dòng nào, lỗi gì |
| 2. Khoanh vùng | Lỗi nằm ở đâu? Thu hẹp dần khu vực nghi ngờ |
| 3. Kiểm tra giả thuyết | "Mình nghĩ do X" — thử thay đổi để xác nhận |
| 4. Tra cứu | Copy lỗi lên Google nếu chưa rõ — luôn có người gặp trước |
| 5. Sửa & kiểm lại | Sửa, chạy lại, đảm bảo không sinh lỗi mới |
Lệnh in giá trị ra "console" (bảng điều khiển, mở bằng F12 trong trình duyệt). Khi không hiểu vì sao code sai, bạn rải console.log ở nhiều chỗ để xem giá trị thật là gì — như soi đèn pin vào bóng tối.
Khi không biết lỗi ở đâu trong một đoạn dài, đặt console.log ở giữa. Nếu nó in đúng → lỗi ở nửa sau. Nếu sai → lỗi ở nửa trước. Lặp lại, bạn thu hẹp vùng lỗi rất nhanh — như trò chơi đoán số.
| Loại lỗi | Là gì | Ví dụ |
|---|---|---|
| Syntax (cú pháp) | Viết sai quy tắc ngôn ngữ | Thiếu dấu ; hoặc } |
| Runtime (khi chạy) | Code đúng cú pháp nhưng lỗi lúc chạy | Gọi hàm chưa tồn tại |
| Logic | Chạy được nhưng kết quả sai | Tính sai công thức |
Vì máy không báo gì — code vẫn chạy, chỉ là kết quả sai. Đây là lúc console.log phát huy sức mạnh: in ra từng bước để xem chỗ nào giá trị bắt đầu sai.
1. Khi thấy thông báo lỗi, việc đầu tiên nên làm là gì?
Đọc kỹ — nó chỉ rõ file nào, dòng nào, lỗi gì. Đừng hoảng, đừng đoán mò.
2. console.log() dùng để làm gì?
In giá trị ra console để kiểm tra code đang chạy đúng không, giá trị thật là gì.
3. Lỗi logic khác lỗi cú pháp ra sao?
Lỗi cú pháp khiến code không chạy; lỗi logic vẫn chạy nhưng cho kết quả sai — khó phát hiện hơn.
"Hôm nay mình ngồi ba tiếng với một con bug. Ba tiếng! Mình đã định bỏ cuộc ít nhất năm lần. Nhưng mình nhớ tiền bối nói: 'chia đôi để tìm'. Mình rải console.log khắp nơi, và cuối cùng… thủ phạm chỉ là một dấu bằng. Mình viết = thay vì ==. Một ký tự. Ba tiếng đồng hồ vì một ký tự. Vậy mà khi sửa được, mình muốn hét lên vì sung sướng. Có lẽ đây là lý do người ta nghiện nghề này."
Sổ tay // bắt tay làm thật
Lý thuyết là bản đồ. Dự án là con đường thật bạn đi.
Đây là dự án tự tay code từ đầu đến cuối. Nếu bạn theo hướng cầu nối, phiên dịch hay sales IT, có thể đọc lướt để biết một dự án thật trông thế nào, rồi đi tiếp. Người muốn trở thành lập trình viên thì nên làm kỹ chương này.
"Đủ lý thuyết rồi," anh nói, đẩy bàn phím về phía ZERO. "Giờ làm một thứ của riêng em. Một trang giới thiệu bản thân — bằng cả ba vũ khí em đã học. Đừng sợ xấu. Trang đầu tiên ai cũng xấu. Quan trọng là nó của em."
Mục tiêu: ghép HTML (khung) + CSS (đẹp) + JavaScript (tương tác) thành một trang thật. Làm theo từng bước, bạn sẽ có sản phẩm đầu tiên để khoe.
Thêm vào trong <head>, ngay dưới thẻ <title>:
Thêm vào trước thẻ </body>:
Lưu file, mở bằng trình duyệt, bấm nút — tiêu đề đổi chữ. Đây là lúc cả ba vũ khí hợp lực: HTML dựng khung, CSS làm đẹp, JS tạo phản ứng. Hãy thử đổi màu, đổi chữ, thêm ảnh của bạn vào.
| Nâng cấp | Gợi ý |
|---|---|
| Thêm ảnh đại diện | Dùng thẻ <img src="anh.jpg"> |
| Thêm danh sách sở thích | Dùng <ul> và <li> |
| Thêm liên kết Facebook | Dùng <a href="…"> |
| Nút đổi màu nền | JS: document.body.style.background = "…" |
| Bộ đếm số lần bấm | Dùng một biến, mỗi lần bấm thì +1 |
1. Phần nào dựng khung trang?
HTML — các thẻ tạo ra cấu trúc, nội dung.
2. Phần nào làm trang đẹp lên?
CSS — màu, cỡ chữ, khoảng cách, bo góc…
3. Phần nào khiến nút bấm có phản ứng?
JavaScript — hàm chao() chạy khi onclick được kích hoạt.
☐ Gõ lại cả 3 bước ở trên thành một file vetoi.html hoàn chỉnh
☐ Thay tên, màu, lời giới thiệu thành của chính bạn
☐ Chọn ít nhất 1 thử thách nâng cấp để làm thêm
☐ Gửi cho một người bạn xem — đó là sản phẩm đầu tiên của bạn!
Khép lại sổ tay
ZERO lưu file, mở trình duyệt, và bấm nút. Tiêu đề đổi chữ: "Rất vui được gặp bạn! 🎉". Cô bật cười — tiếng cười của một người vừa nhận ra mình thật sự làm được. Tiền bối đứng sau, khẽ gật đầu.
"Đó. Giờ em là một lập trình viên rồi. Không phải vì em giỏi — mà vì em vừa tạo ra một thứ từ con số không."
Nhưng nụ cười chưa kịp tắt thì đèn báo đỏ lại bừng lên. Lần này dồn dập hơn bao giờ hết. Trận đánh cuối cùng đã tới.
Người học trò đã rời đi
"Bạn đã có vũ khí, có sổ tay, có sản phẩm đầu tay. Nhưng trước trận cuối, có một câu chuyện bạn cần biết — về kẻ đứng trong bóng tối." Ba năm trước, đã xảy ra chuyện gì giữa tiền bối và Minh?
Bạn vừa gấp lại Sổ tay sống còn. "Người học trò đã rời đi" — câu chuyện về Minh — đang chờ ở kỳ tới.
🤍 Cùng xuất bản ZERO — đặt trước giá sáng lập
Đọc online MIỄN PHÍ tất cả các chương (bản giản lược). Bản online FULL — đủ mọi chương & mọi phần chuyên sâu, không lược — chỉ 89k. Khi đủ 500 đơn, sách được in màu & xuất bản; chưa đủ → hoàn 100%.
89k / 229k · bản online FULL / bản in (giá sáng lập)
Không phải tiền mua sách — đây là khoản donate ủng hộ để team viết tiếp phần mới & xuất bản "MẬT DANH: ZERO". 🎁 Nếu sách được xuất bản, người donate được tặng miễn phí 1 cuốn. Đọc online luôn miễn phí nhé!
