Học lập trình web bắt đầu từ đâu? Lộ trình cho người mới 2026

Học lập trình web nên bắt đầu từ việc hiểu trang web chạy thế nào và viết HTML cho đúng, rồi mới tới CSS, JavaScript, Git và sau cùng là React. Người mới học đều đặn 15–20 giờ mỗi tuần thường mất khoảng 9–11 tháng để có một dự án đủ sức nộp hồ sơ fresher. Bài này cho bạn thứ tự học cụ thể, thời gian từng giai đoạn, máy và công cụ cần chuẩn bị, chi phí từng hình thức học và bức tranh trung thực về thị trường việc làm năm 2026.

Học xong bài này, bạn sẽ làm được:

• Giải thích bằng lời của mình chuyện gì xảy ra từ lúc gõ địa chỉ web tới lúc trang hiện ra: trình duyệt, tên miền, HTTP, HTML/CSS/JS.
• Viết một đoạn HTML ngữ nghĩa có header, main, article, ảnh có alt và kiểm tra bằng DevTools.
• Lập kế hoạch học 9 giai đoạn với tổng số tuần và số giờ cộng khớp cho chính mình.
• So sánh tự học, bootcamp và đại học theo thời gian, chi phí tham khảo 2026 và rủi ro.
• Nhận ra 5 sai lầm khiến người mới học mãi không xin được việc.

Muốn học có thứ tự, không bị lạc? Lộ trình Lập trình web frontend trên NAMBIN chia nghề thành 9 bước, từ HTML ngữ nghĩa tới dự án portfolio deploy thật và phỏng vấn fresher. Xem lộ trình 9 bước học lập trình web frontend.

Trả lời nhanh: học lập trình web bắt đầu từ đâu?

Hãy bắt đầu từ frontend — phần giao diện người dùng nhìn thấy và bấm vào trên trình duyệt. Frontend cho kết quả nhìn thấy được ngay sau buổi học đầu tiên, nên dễ giữ động lực, và là cửa vào nghề phổ biến nhất cho người tự học. Phần backend (máy chủ, cơ sở dữ liệu) nên học sau, khi bạn đã vững JavaScript.

Thứ tự ngắn gọn cần nhớ

HTML → CSS → JavaScript → Git → React với TypeScript → gọi API → hiệu năng, SEO, kiểm thử → dự án portfolio → phỏng vấn. Mỗi bước dựa vào bước trước: không hiểu HTML thì CSS chỉ là thử và sai; không vững JavaScript thì React là một mớ cú pháp khó hiểu. Bảng thời gian chi tiết nằm ở mục "Thứ tự học và thời gian từng giai đoạn".

Web hoạt động thế nào: trình duyệt, HTTP, HTML/CSS/JS

Trước khi viết dòng code đầu tiên, bạn cần hình dung một trang web đi từ đâu tới màn hình của mình. Hiểu đường đi này giúp bạn biết lỗi nằm ở đâu khi trang không hiện, thay vì sửa mò.

Trình duyệt, tên miền và DNS

Bạn gõ một địa chỉ như nambin.com vào trình duyệt (Chrome, Firefox, Edge…). Máy tính không hiểu tên miền, nó cần địa chỉ IP — một dãy số như số nhà của máy chủ. Hệ thống DNS (giống danh bạ điện thoại của internet) đổi tên miền thành địa chỉ IP. Sau đó trình duyệt mới biết phải gửi yêu cầu tới máy nào.

HTTP: hỏi và trả lời

Trình duyệt gửi một yêu cầu HTTP (request) tới máy chủ, kiểu "cho tôi trang chủ". Máy chủ trả về một phản hồi (response) có mã trạng thái: 200 là thành công, 404 là không tìm thấy, 500 là máy chủ bị lỗi. Ngày nay hầu hết web dùng HTTPS — HTTP có mã hóa, nên mật khẩu bạn gõ không bị đọc trộm trên đường truyền. Máy chủ thật nằm trong các trung tâm dữ liệu như Hình 2.

HTML, CSS, JavaScript: ba lớp của một trang

Phản hồi đầu tiên thường là một file HTML. Trình duyệt đọc nó, thấy cần thêm file CSS, JavaScript, ảnh thì gửi tiếp các yêu cầu khác. So với một ngôi nhà: HTML là khung và các phòng (tiêu đề, đoạn văn, ảnh, nút), CSS là sơn, bố trí nội thất (màu, cỡ chữ, bố cục), còn JavaScript là điện và nước — làm cho nút bấm phản hồi, giỏ hàng cập nhật, form báo lỗi. Hình 3 là một đoạn CSS thật trên màn hình.

Xem tận mắt bằng DevTools

Mở một trang web bất kỳ trên Chrome, bấm F12 để mở DevTools (công cụ cho lập trình viên có sẵn trong trình duyệt). Tab Elements cho thấy HTML và CSS của trang; tab Network liệt kê từng yêu cầu HTTP, mã trạng thái và thời gian tải.

HTML ngữ nghĩa: viết đúng ngay từ trang đầu tiên

HTML ngữ nghĩa nghĩa là dùng đúng thẻ cho đúng loại nội dung: tiêu đề dùng thẻ tiêu đề, menu dùng nav, nội dung chính dùng main. Trình duyệt vẫn hiển thị được nếu bạn dùng div cho mọi thứ, nhưng Google và trình đọc màn hình (phần mềm đọc trang cho người khiếm thị) sẽ không hiểu cấu trúc trang.

Một đoạn HTML mẫu nhỏ

Đây là phần thân trang của một tiệm bánh nhỏ. Hãy gõ lại (đừng sao chép) vào file index.html rồi mở bằng trình duyệt:

<header>
  <h1>Tiệm bánh Mai</h1>
  <nav>
    <a href="#thuc-don">Thực đơn</a>
    <a href="#lien-he">Liên hệ</a>
  </nav>
</header>
<main>
  <article id="thuc-don">
    <h2>Bánh mì que</h2>
    <img src="banh-mi-que.jpg" alt="Năm ổ bánh mì que nướng giòn trên khay">
    <p>Giá 5.000 đồng/ổ, nướng mới mỗi sáng.</p>
  </article>
</main>
<footer id="lien-he">
  <p>Điện thoại: <a href="tel:0900000000">0900 000 000</a></p>
</footer>

Đọc hiểu từng thẻ

• header: phần đầu trang, chứa tên tiệm và menu; nav báo cho trình đọc màn hình biết đây là thanh điều hướng.
• main: nội dung chính, mỗi trang chỉ có một; article là một khối nội dung đứng riêng được (một món, một bài viết).
• h1, h2: tiêu đề theo cấp, mỗi trang thường chỉ một h1, không nhảy cấp tùy tiện.
• alt của ảnh: mô tả nội dung ảnh, hiện ra khi ảnh lỗi và được đọc cho người khiếm thị. Ghi "ảnh 1" là vô nghĩa.
• footer: phần cuối trang; liên kết tel: giúp khách trên điện thoại bấm là gọi.

Cách kiểm tra mình viết đúng chưa

Mở DevTools, tab Lighthouse, chạy kiểm tra mục Accessibility (khả năng tiếp cận): điểm dưới 90 thường do thiếu alt, thiếu nhãn cho ô nhập hoặc tiêu đề nhảy cấp. Thêm một cách đơn giản: tắt CSS đi, nếu trang vẫn đọc được theo thứ tự hợp lý thì HTML của bạn đã có cấu trúc tốt.

Máy tính và công cụ cần chuẩn bị

Bạn không cần máy mạnh để học frontend. Phần lớn thời gian máy chỉ chạy trình soạn thảo code, trình duyệt và một máy chủ thử nghiệm nhỏ. Máy quá yếu thì sẽ chậm khi tới giai đoạn React, nên hãy tính trước.

Cấu hình máy tối thiểu và nên có

Thành phần	Tối thiểu	Nên có	Ghi chú
RAM	8 GB	16 GB	Trình duyệt nhiều tab + công cụ build ăn RAM nhiều nhất
Ổ cứng	SSD 256 GB	SSD 512 GB	Ổ HDD làm mọi thao tác chậm rõ rệt
CPU	Core i5/Ryzen 5 đời cũ	Đời 3–4 năm gần đây	Laptop cũ đủ chuẩn vẫn học tốt
Màn hình	14 inch Full HD	Thêm màn hình rời	Một bên code, một bên trình duyệt

Giá tham khảo 2026: laptop cũ đạt mức tối thiểu khoảng 7–12 triệu đồng, máy mới mức nên có khoảng 15–25 triệu đồng, tùy nơi bán. Góc học đơn giản như Hình 4 là đủ.

Ba công cụ miễn phí dùng từ ngày đầu

• VS Code: trình soạn thảo code miễn phí, phổ biến nhất. Cài thêm tiện ích định dạng code tự động và xem trang trực tiếp khi lưu file.
• Trình duyệt có DevTools: Chrome hoặc Firefox. Bạn sẽ dùng DevTools nhiều không kém trình soạn thảo.
• Git và tài khoản GitHub: Git lưu lịch sử từng thay đổi của code; GitHub là nơi đặt code lên mạng — sau này cũng là "hồ sơ năng lực" nhà tuyển dụng sẽ xem.

Công cụ AI: dùng sao cho có lợi

Trợ lý AI viết code có thể giải thích lỗi, gợi ý đoạn code mẫu. Trong 3 tháng đầu, hãy dùng nó như thầy giải thích chứ không như người làm hộ: tự gõ code, khi bí mới hỏi "vì sao dòng này lỗi". Người chép code AI mà không hiểu sẽ trượt ngay vòng phỏng vấn kỹ thuật, nơi phải giải thích từng dòng mình viết.

Thứ tự học và thời gian từng giai đoạn

Bảng dưới đây đi theo đúng 9 bước của lộ trình, giả định bạn học 15–20 giờ mỗi tuần (ví dụ 2 giờ mỗi tối trong tuần cộng 5–10 giờ cuối tuần). Số tuần là mức trung bình; có nền tảng thì đi nhanh hơn, bận thì chậm hơn.

Giai đoạn	Học gì	Số tuần	Xong khi làm được
1. Cách web hoạt động & HTML	Trình duyệt, HTTP, DNS, thẻ ngữ nghĩa, form	3	Trang giới thiệu bản thân đạt Lighthouse Accessibility ≥ 90
2. CSS, Flexbox, Grid, responsive	Box model, bố cục, mobile-first	5	Dựng lại một trang mẫu đẹp trên cả điện thoại và máy tính
3. JavaScript & DOM	Biến, hàm, mảng, sự kiện, fetch, async/await	8	Ứng dụng danh sách việc cần làm, lưu dữ liệu trong trình duyệt
4. Git & GitHub	commit, branch, pull request	2	Mọi bài tập đã nằm trên GitHub với commit rõ ràng
5. React, TypeScript, Next.js	Component, state, hooks, routing	8	Làm lại ứng dụng ở giai đoạn 3 bằng React
6. Gọi API, form, trạng thái	REST, JSON, loading – lỗi	4	Trang tìm kiếm lấy dữ liệu thật từ một API công khai
7. Hiệu năng, SEO, accessibility, test	Lighthouse, thẻ meta, viết test	3	Điểm Lighthouse ≥ 90 ở cả 4 mục cho dự án
8. Dự án portfolio	Web bán hàng nhỏ deploy thật	6	Có link chạy thật, README rõ ràng
9. Phỏng vấn & ứng tuyển	CV, câu hỏi kỹ thuật, bài test	3	Đã nộp ít nhất 20 hồ sơ, luyện 30 câu hỏi
Tổng		42 tuần	Khoảng 630–840 giờ

Cộng lại: 3 + 5 + 8 + 2 + 8 + 4 + 3 + 6 + 3 = 42 tuần, tức khoảng 9,5–10 tháng. Với 15 giờ/tuần là 42 × 15 = 630 giờ; với 20 giờ/tuần là 42 × 20 = 840 giờ.

Vì sao JavaScript và React chiếm nhiều thời gian nhất?

Hai giai đoạn này chiếm 16/42 tuần vì đây là phần "lập trình" thật sự: tư duy logic, xử lý dữ liệu, tìm lỗi. HTML và CSS nhìn thấy kết quả ngay; JavaScript thì một dấu phẩy sai có thể làm cả trang trắng. Đừng rút ngắn giai đoạn 3 để nhảy sang React sớm — đó là lý do phổ biến nhất khiến người mới bị "đuối" ở React.

Ví dụ làm mẫu: Minh, 24 tuổi, học buổi tối 42 tuần

Minh làm nhân viên kho ở Bình Dương, ca hành chính, muốn chuyển sang frontend. Minh có 15 giờ/tuần: 2 giờ mỗi tối thứ Hai đến thứ Sáu (10 giờ) và 5 giờ sáng Chủ nhật. Các con số dưới đây là ví dụ minh họa, giá tham khảo 2026.

Kế hoạch thời gian

1. Tổng thời gian: 42 tuần × 15 giờ = 630 giờ.
2. Tuần 1–39 (từ đầu tháng 1 tới cuối tháng 9): giai đoạn 1–8, từ HTML tới dự án portfolio, 3 + 5 + 8 + 2 + 8 + 4 + 3 + 6 = 39 tuần.
3. Tuần 40–42 (đầu tháng 10): giai đoạn 9 — viết CV, luyện câu hỏi phỏng vấn, nộp hồ sơ. 39 + 3 = 42 tuần.

Kế hoạch chi phí

1. Laptop cũ RAM 16 GB, SSD 512 GB: 11 triệu đồng.
2. Một khóa học online có bài tập chấm: 2 triệu đồng.
3. Tên miền cho portfolio năm đầu: 0,3 triệu đồng; hosting dùng gói miễn phí.
4. Tổng: 11 + 2 + 0,3 = 13,3 triệu đồng, trong đó 11 triệu là máy dùng tiếp khi đi làm.

Kết quả và bài học

Minh mất thêm 2 tháng ứng tuyển, nộp khoảng 40 hồ sơ, được gọi 5 vòng phỏng vấn và nhận 1 vị trí thực tập có lương. Điều giúp Minh không phải là chứng chỉ mà là dự án web bán hàng chạy thật cùng lịch sử commit đều đặn 10 tháng trên GitHub. Nếu Minh chỉ học được 10 giờ/tuần, cùng 630 giờ sẽ kéo dài 63 tuần — khoảng 14,5 tháng; vẫn ổn, miễn là không bỏ giữa chừng.

Tự học, bootcamp hay đại học: chọn thế nào?

Ba con đường đều dẫn tới nghề, khác nhau ở tiền, thời gian và mức kỷ luật bạn tự có. Bảng dưới đây là khoảng tham khảo năm 2026, khác nhau theo trường, trung tâm và khu vực.

Hình thức	Thời gian	Chi phí tham khảo 2026	Hợp với ai	Rủi ro chính
Tự học online	9–15 tháng	0–5 triệu đồng (chưa tính máy)	Người tự giác, đang đi làm	Dễ bỏ dở, thiếu người sửa code
Bootcamp, trung tâm	4–9 tháng	15–60 triệu đồng	Người cần lớp, cần mentor và hạn chót	Chất lượng chênh lệch, lời hứa "cam kết việc làm"
Đại học, cao đẳng CNTT	2,5–4 năm	Khoảng 15–80 triệu đồng/năm tùy trường công/tư	Người trẻ, muốn nền tảng rộng và bằng cấp	Lâu; vẫn phải tự làm dự án thực tế

Bootcamp: kiểm tra kỹ trước khi đóng tiền

Hỏi rõ: bao nhiêu giờ thực hành có mentor chữa bài, học viên khóa trước làm dự án gì (xin link GitHub thật), "cam kết việc làm" ghi trong hợp đồng ra sao và hoàn tiền thế nào. Cẩn thận với nơi hứa lương cao sau 3 tháng hoặc yêu cầu vay tiêu dùng để đóng học phí.

Đại học: nền rộng, nhưng không tự động có việc

Đại học dạy cấu trúc dữ liệu, mạng, cơ sở dữ liệu — rất có ích lâu dài. Nhiều nhà tuyển dụng vẫn ưu tiên bằng CNTT, nhưng sinh viên không có dự án cá nhân cũng khó xin việc. Nếu đang học đại học, hãy theo lộ trình này song song từ năm hai.

Thị trường fresher 2026 và lương tham khảo

Nói thẳng: năm 2026 cạnh tranh ở mức fresher frontend cao. Nhiều người học, trong khi công cụ AI hỗ trợ viết code giúp lập trình viên có kinh nghiệm làm nhanh hơn, nên các việc đơn giản như cắt giao diện tĩnh không còn cần nhiều người như trước. Cơ hội vẫn có ở công ty phần mềm, outsource, startup, ngân hàng và thương mại điện tử tại Hà Nội, TP.HCM, Đà Nẵng, nhưng nhà tuyển dụng chọn người làm được việc thật.

Lương tham khảo theo cấp bậc

Cấp bậc	Kinh nghiệm thường gặp	Lương tham khảo 2026 (triệu đồng/tháng)
Thực tập sinh	Đang học hoặc mới học xong	3–6 (có nơi không lương)
Fresher	0–1 năm	8–12
Junior	1–2 năm	15–25
Middle	2–4 năm	25–35

Đây là khoảng tham khảo năm 2026, tùy khu vực, quy mô công ty và trình độ tiếng Anh; không phải mức cam kết. Freelance làm website cho cửa hàng nhỏ thu nhập rất thất thường, chỉ nên làm thêm khi đã vững kỹ năng.

Làm gì để nổi bật khi có AI?

Nhà tuyển dụng muốn người hiểu code (kể cả code do AI gợi ý), tìm được lỗi, viết HTML đúng chuẩn, làm giao diện chạy tốt trên điện thoại và giải thích được lựa chọn của mình. Một dự án thật có người dùng, dù nhỏ, nặng ký hơn mười dự án sao chép theo video.

Lưu ý trước khi bỏ việc để học: đừng nghỉ việc chính khi chưa có ít nhất 6 tháng chi phí sinh hoạt dự phòng — thời gian từ lúc học xong tới lúc có việc có thể kéo dài 2–6 tháng. Ngồi máy nhiều giờ dễ đau lưng, mỏi mắt: cứ 45–60 phút đứng dậy vận động, chỉnh màn hình ngang tầm mắt. Không đóng tiền cho bất kỳ "khóa học cam kết việc lương cao" nào yêu cầu ký vay hoặc chuyển khoản gấp.

Sai lầm người mới hay mắc

Nhảy thẳng vào React

Dấu hiệu: làm được theo video nhưng tự làm thì không biết bắt đầu từ đâu. Nguyên nhân: bỏ qua JavaScript nền. Cách sửa: quay lại giai đoạn 3, làm 3 ứng dụng nhỏ bằng JavaScript thuần trước.

Dùng div cho mọi thứ

Dấu hiệu: trang hiển thị đẹp nhưng điểm Accessibility thấp, Google hiểu sai nội dung. Nguyên nhân: không học HTML ngữ nghĩa. Cách sửa: viết lại trang với header, nav, main, article, footer như ví dụ ở trên.

Xem video mà không gõ code

Dấu hiệu: xem hết 50 giờ khóa học nhưng mở VS Code thì trống trơn. Nguyên nhân: tưởng hiểu là biết làm. Cách sửa: khoảng 30% thời gian xem, đọc và 70% tự làm; xem xong mỗi bài thì tự làm lại không nhìn.

Không đưa code lên GitHub

Dấu hiệu: đi phỏng vấn không có gì để cho xem. Nguyên nhân: nghĩ code chưa đẹp thì không nên công khai. Cách sửa: commit mỗi ngày học; nhà tuyển dụng đánh giá cao sự đều đặn hơn code hoàn hảo.

Câu hỏi thường gặp

Học lập trình web mất bao lâu thì xin được việc?

Với 15–20 giờ mỗi tuần, khoảng 9–11 tháng để có dự án portfolio, cộng thêm 2–6 tháng ứng tuyển. Học toàn thời gian 40 giờ/tuần có thể rút còn khoảng 5–6 tháng.

Không học CNTT ở đại học có làm frontend được không?

Được. Nhiều người chuyển ngành thành công nhờ dự án thật và GitHub đều đặn. Tuy vậy, một số công ty lớn vẫn lọc hồ sơ theo bằng cấp, nên bạn cần portfolio mạnh hơn để bù.

AI viết code giỏi rồi, còn nên học lập trình web không?

Nên, nếu bạn chấp nhận học sâu. AI làm nhanh phần lặp lại, nhưng vẫn cần người hiểu yêu cầu, kiểm tra code, sửa lỗi và chịu trách nhiệm sản phẩm. Người chỉ biết chép code sẽ khó cạnh tranh.

Học frontend hay backend trước?

Người mới nên bắt đầu từ frontend vì thấy kết quả ngay và dễ giữ động lực. Khi vững JavaScript, bạn có thể học thêm backend bằng chính JavaScript (Node.js) để thành fullstack.

Bài tập: trang web đầu tiên và kế hoạch của bạn

• Mở DevTools trên 3 trang web bạn hay dùng, ghi lại mã trạng thái HTTP và số yêu cầu ở tab Network.
• Gõ lại đoạn HTML tiệm bánh ở trên, thêm 2 món nữa, mở bằng trình duyệt và chạy Lighthouse Accessibility.
• Cài VS Code, Git, tạo tài khoản GitHub và đẩy file index.html lên một kho code mới.
• Lập bảng kế hoạch 9 giai đoạn theo số giờ thật bạn có mỗi tuần, tính tổng tuần và tổng giờ như ví dụ của Minh.

Tiêu chí tự đánh giá

• Đạt: trang tiệm bánh dùng đúng header, nav, main, article, footer; mọi ảnh có alt mô tả; Lighthouse Accessibility ≥ 90.
• Đạt: giải thích được bằng lời đường đi tên miền → DNS → yêu cầu HTTP → HTML/CSS/JS.
• Đạt: kế hoạch có số tuần từng giai đoạn, tổng tuần và tổng giờ cộng khớp.
• Chưa đạt: trang toàn div, ảnh thiếu alt, code chỉ nằm trên máy, hoặc kế hoạch bắt đầu bằng React.

Khi trang HTML đầu tiên đã đúng cấu trúc, bước tiếp theo trong lộ trình là CSS, Flexbox, Grid & responsive — biến bộ khung đó thành giao diện đẹp trên cả điện thoại lẫn máy tính. Xem lộ trình 9 bước học lập trình web frontend để theo dõi từng bước.