Chuyển đến nội dung chính (Skip to content)
Mục lục bài viết
Web Development Essentials

Lộ trình Web Development Essentials: học hiểu và thực hành

Lộ trình Web Development Essentials: học hiểu và thực hành

Học web qua 18 mục tiêu: phần mềm, HTTP, HTML, CSS, JavaScript, Node.js và database; xây sản phẩm nhỏ, kiểm tra dữ liệu và ghi rõ giới hạn thực hành.

Từ trang thông tin đến ứng dụng có dữ liệu

Một nhóm Help Desk muốn làm cổng hướng dẫn nội bộ. Ban đầu họ chỉ cần bài viết và liên kết, sau đó muốn bộ lọc, biểu mẫu gửi yêu cầu và nơi lưu trạng thái xử lý. Mỗi yêu cầu mới kéo theo một lớp kiến thức: nội dung, cách trình bày, hành vi trong trình duyệt, giao tiếp HTTP và xử lý phía server. Web Development Essentials giúp bạn nhận diện những lớp đó rồi ghép thành sản phẩm nhỏ có thể giải thích được.

Lộ trình dành cho người mới học CNTT, IT Help Desk muốn hiểu ứng dụng đang hỗ trợ và người bắt đầu lập trình web. Kết quả mong đợi là đọc được luồng yêu cầu, viết trang có cấu trúc, thêm tương tác đơn giản và xử lý dữ liệu giả ở phía server. Bạn chưa cần chọn một framework giao diện lớn để bắt đầu.

Sau nhánh này, bạn nên giải thích được vì sao trang có thể hiển thị đúng nhưng biểu mẫu vẫn lỗi, vì sao kiểm tra dữ liệu trong trình duyệt chưa đủ và vì sao truy vấn database phải tách dữ liệu khỏi câu lệnh. Khả năng giải thích và bằng chứng thực hành quan trọng hơn việc nhớ nhiều tên thư viện.

Ba lớp tham chiếu cần phân biệt

PDF LPI-Learning-Material-030-100-vi là khung tham chiếu cho 18 mục tiêu, từ 031.1 đến 035.3. Bài viết được biên soạn độc lập với tình huống, lab và hình mới; không đăng lại bản sửa đổi của PDF. Những ví dụ cũ được đối chiếu lại theo hành vi và phiên bản công cụ ở từng bài.

Tại mốc 23/10/2026, trang mục tiêu LPI 030-100 ghi phiên bản mục tiêu là 1, đồng thời phần thông tin phiên bản vẫn có nhãn “A DRAFT FOR version 1.0.0”. Chuỗi giữ nguyên sự phân biệt này, không tự sửa trạng thái nguồn hoặc cam kết đây là bộ luyện thi mới nhất đã được LPI xác nhận.

Lớp thứ ba là thực hành hiện hành. Các bài bổ sung HTML ngữ nghĩa, khả năng tiếp cận, JavaScript modules, bất đồng bộ và truy vấn tham số hóa khi chúng giúp làm đúng một mục tiêu. Phần mở rộng không biến chương trình nhập môn thành khóa kiến trúc hệ thống hay triển khai ứng dụng sản xuất.

Chuẩn bị một nơi học có thể làm lại

Bạn cần biết tạo thư mục, lưu tệp văn bản và mở công cụ phát triển của trình duyệt. Kinh nghiệm Linux có ích khi chạy lệnh nhưng không phải điều kiện cho mọi bài. Một editor, trình duyệt còn được hỗ trợ và thư mục riêng chứa dữ liệu giả là điểm bắt đầu phù hợp.

Chưa chạy ngay script cài đặt từ một trang bất kỳ. Trước khi cài công cụ, kiểm tra nguồn chính thức, hệ điều hành, kiến trúc và quyền được cấp. Với máy do tổ chức quản lý, dùng môi trường được cho phép; không tự vô hiệu hóa chính sách để hoàn thành bài học.

Theo lịch phát hành Node.js, tại ngày đối chiếu Node.js 24 và 22 thuộc LTS, còn 26 vẫn là Current. Nhánh này dự kiến ưu tiên Node.js 24 cho lab phía server, rồi ghi phiên bản thực chạy trong từng bài. Thông tin đó là lựa chọn môi trường, không phải tuyên bố mọi đoạn mã đã được kiểm thử trên tất cả các bản LTS.

Giữ một tệp ghi chú gồm phiên bản, lệnh đã chạy, dữ liệu đầu vào và kết quả. Không đưa token, mật khẩu, cookie tài khoản thật hoặc database công việc vào repository học tập. Một dự án có thể xóa và dựng lại giúp bạn phân biệt kiến thức đã hiểu với cấu hình tình cờ còn trên máy.

Năm chặng nối kiến thức với sản phẩm học tập và bằng chứng kiểm tra.
Hình 1. Năm chặng nối kiến thức với sản phẩm học tập và bằng chứng kiểm tra. Mở hình để xem chi tiết.

Chặng 1: phần mềm, kiến trúc web và HTTP

Ba mục tiêu đầu đặt nền cho các chặng còn lại. Bạn học mã nguồn, trình biên dịch, trình thông dịch, thư viện, kiểm thử và quản lý phiên bản. Sau đó nối trình duyệt với web server, ứng dụng và database bằng một sơ đồ yêu cầu đơn giản.

Khi xem trang lỗi, trước hết hãy xác định yêu cầu nào thất bại và thành phần nào trả lời. Mã trạng thái HTTP, kiểu nội dung và thời điểm lỗi cung cấp dữ kiện khác nhau. Trang không đổi sau khi sửa có thể liên quan cache, nhưng cần kiểm tra trước khi kết luận hay xóa mọi dữ liệu trình duyệt.

Đầu ra của chặng là sơ đồ có client, server, nơi lưu dữ liệu và một ví dụ request/response tự ghi. Bạn cần phân biệt nội dung tĩnh với nội dung được tạo theo yêu cầu, đồng thời hiểu HTTPS bảo vệ kết nối theo phạm vi TLS chứ không xác nhận mọi lời nói trên trang.

Chặng 2: HTML diễn đạt ý nghĩa nội dung

Bốn bài HTML đi qua cấu trúc tài liệu, ngữ nghĩa, liên kết và tài nguyên nhúng, rồi biểu mẫu. Hãy bắt đầu từ câu hỏi người đọc cần làm gì. Tiêu đề, danh sách, bảng dữ liệu và nút hành động có vai trò riêng; không chọn phần tử chỉ vì kiểu hiển thị mặc định của nó.

HTML Living Standard là nguồn đối chiếu cho ngôn ngữ và các API liên quan. Trong chuỗi, mỗi phần tử mới được gắn với mục đích và cách kiểm tra bằng trình duyệt. Màu đẹp chưa chứng minh cấu trúc đúng, còn một biểu mẫu gửi được chưa chứng minh dữ liệu đã hợp lệ phía server.

Sản phẩm chặng này là trang hướng dẫn có hệ thống heading rõ, liên kết có nghĩa, ảnh có mô tả phù hợp và biểu mẫu có label. Dùng bàn phím để thử luồng thao tác. Khi người dùng không nhìn hình hoặc không dùng chuột, thông tin và chức năng chính vẫn phải có đường tiếp cận phù hợp.

Chặng 3: CSS và bố cục đáp ứng

Bốn mục tiêu CSS giúp hiểu cách chọn phần tử, phân giải quy tắc và bố trí nội dung. Trước khi thêm một khai báo để chữa lỗi, xem quy tắc nào đang thắng và kích thước hộp được tính ra sao. Cách làm này tránh tích lũy nhiều giá trị tùy ý mà không biết chúng tác động lên phần nào.

Bắt đầu từ màn hình hẹp, kiểm tra nội dung dài, rồi mở rộng bố cục khi đủ chỗ. Flexbox và Grid được dùng theo bài toán; không có yêu cầu mọi trang phải dùng cả hai. Một kích thước màn hình thử nghiệm không đại diện cho mọi thiết bị, mức zoom hay cách nhập liệu.

WCAG 2.2 cung cấp các tiêu chí khả năng tiếp cận có thể kiểm tra. Nhánh học dùng nguồn này để giải thích những việc như tương phản, focus và reflow ở mức cần thiết. Kiểm tra vài tiêu chí trong lab không đủ để công bố website tuân thủ toàn bộ WCAG.

Chặng 4: JavaScript và trạng thái trong trình duyệt

Bốn bài JavaScript xây từ thực thi, biến và giá trị đến điều kiện, vòng lặp, cấu trúc dữ liệu, hàm và tương tác với trang. Đừng bắt đầu bằng sao chép một file dài. Dự đoán đầu vào, chạy một đoạn nhỏ rồi so kết quả sẽ cho bạn cơ hội thấy lỗi suy luận sớm.

Khi thêm tương tác, phân biệt dữ liệu trong chương trình với nội dung đang hiển thị. Một sự kiện có thể làm thay đổi trạng thái, nhưng trang phải phản ánh thay đổi đó và báo lỗi có ích. Modules và bất đồng bộ được bổ sung khi cần chia mã hoặc chờ kết quả, kèm giới hạn và cách quan sát.

Sản phẩm là bộ lọc danh sách yêu cầu giả lập, có trường hợp dữ liệu rỗng và thao tác bàn phím. Không đưa dữ liệu người dùng trực tiếp vào HTML bằng cách ghép chuỗi tùy tiện. Bài học sẽ chỉ rõ nơi cần coi đầu vào là dữ liệu và nơi có ranh giới tin cậy.

Chặng 5: Node.js, Express và lưu trữ dữ liệu

Ba bài cuối đưa chương trình sang phía server, bổ sung route, biểu mẫu, template và database. Bạn cần biết đoạn mã chạy ở đâu: JavaScript trong trình duyệt và JavaScript trên server có thể cùng ngôn ngữ nhưng không có cùng quyền hay API.

Hướng dẫn chuyển sang Express 5 cho thấy API và hành vi có thể thay đổi giữa phiên bản. Vì vậy, ví dụ cũ phải được đọc cùng phiên bản phụ thuộc. Không giải quyết lỗi bằng cách cài ngẫu nhiên một bản khác rồi bỏ qua việc ghi nhận thay đổi.

Đầu ra là ứng dụng nhỏ nhận dữ liệu giả, kiểm tra phía server, lưu bằng truy vấn tham số hóa và trả kết quả rõ ràng. Lab dùng kết nối cục bộ và không nhận là đã triển khai hệ thống thật. Authentication, vận hành và hardening đầy đủ cần phạm vi riêng trước khi đưa ứng dụng ra Internet.

Trình duyệt, ứng dụng server và database có vai trò và ranh giới dữ liệu riêng.
Hình 2. Trình duyệt, ứng dụng server và database có vai trò và ranh giới dữ liệu riêng. Mở hình để xem chi tiết.

Danh sách 18 bài và cách quay lại mục tiêu

Danh sách dưới đây giữ thứ tự giáo trình. Bài đang biên soạn được ghi rõ, chỉ có liên kết đọc khi đã được đóng gói. Bạn có thể quay lại một chủ đề khi dự án gặp vấn đề, rồi kiểm tra những phần kiến thức còn thiếu.

  • 031.1: Khái niệm cơ bản về Phát triển Phần mềm (đang biên soạn)
  • 031.2: Kiến trúc của Ứng dụng Web (đang biên soạn)
  • 031.3: Khái niệm cơ bản về HTTP (đang biên soạn)
  • 032.1: Cấu trúc Tài liệu HTML (đang biên soạn)
  • 032.2: Ngữ nghĩa trong HTML và Phân cấp Tài liệu (đang biên soạn)
  • 032.3: Tham chiếu HTML và Tài nguyên Nhúng (đang biên soạn)
  • 032.4: Biểu mẫu HTML (đang biên soạn)
  • 033.1: Khái niệm cơ bản về CSS (đang biên soạn)
  • 033.2: Bộ chọn CSS và Ứng dụng kiểu (đang biên soạn)
  • 033.3: Tạo kiểu CSS (đang biên soạn)
  • 033.4: Mô hình và Bố cục Hộp trong CSS (đang biên soạn)
  • 034.1: Cú pháp và Việc Thực thi trong JavaScript (đang biên soạn)
  • 034.2: Cấu trúc Dữ liệu JavaScript (đang biên soạn)
  • 034.3: Cấu trúc và Chức năng Điều khiển trong JavaScript (đang biên soạn)
  • 034.4: Thao tác JavaScript đối với Nội dung và Kiểu trang Web (đang biên soạn)
  • 035.1: Khái niệm cơ bản về NodeJS (đang biên soạn)
  • 035.2: Khái niệm cơ bản về NodeJS Express (đang biên soạn)
  • 035.3: Khái niệm cơ bản về SQL (đang biên soạn)

Bài tập mở đầu: cổng hỗ trợ có phạm vi nhỏ

Trên giấy hoặc tệp ghi chú, thiết kế một cổng hướng dẫn chỉ dùng dữ liệu giả. Chưa cần cài framework hay công bố website. Hoàn thành năm việc:

  1. Chọn một tác vụ cụ thể, chẳng hạn tìm hướng dẫn kết nối máy in.
  2. Liệt kê nội dung cần hiển thị và hành động người đọc có thể thực hiện.
  3. Vẽ nơi chạy từng phần: trình duyệt, server và nơi lưu dữ liệu.
  4. Chọn ba trường hợp kiểm tra: thành công, dữ liệu rỗng và đầu vào không hợp lệ.
  5. Ghi điều chưa làm, người chịu trách nhiệm và dữ liệu nào tuyệt đối không thu trong lab.

Một đầu ra hợp lý là trang danh sách hướng dẫn, bộ lọc theo chủ đề và biểu mẫu chứa mã yêu cầu DEMO. Chưa cần tài khoản thật hay chức năng gửi email. Với mỗi chức năng, viết kết quả mong đợi trước khi nghĩ đến thư viện: nhập từ khóa không khớp phải có thông báo, không để người học đoán trang bị hỏng.

Đây là bài tập thiết kế, không phải bằng chứng đã chạy ứng dụng. Mỗi bài tiếp theo sẽ công bố môi trường và phần thực hành thực sự được kiểm chứng. Roadmap được đối chiếu nguồn ngày 23/10/2026; không nhận rằng các lab tương lai đã hoàn tất.

Tự kiểm tra trước khi vào bài đầu

Bạn sẵn sàng khi giải thích được một yêu cầu đi từ đâu tới đâu, nêu một dữ liệu giả dùng để thử và phân biệt kiểm tra giao diện với kiểm tra phía server. Nếu chưa rõ, giữ lại câu hỏi trong ghi chú thay vì đoán một công cụ sẽ giải quyết mọi lớp.

Sau mỗi chặng, cập nhật sơ đồ và chạy lại các trường hợp đã chọn. Một kết quả đạt cần kèm phạm vi: phiên bản, đầu vào, kết quả quan sát và phần chưa thử. Bắt đầu từ 031.1 để hiểu quy trình phần mềm trước khi ghép các lớp thành ứng dụng.

Bài liên quan trong bộ LPI

Tìm hiểu thêm