Learning Hub
🌐

Phát triển Web

Kiến thức nền tảng frontend, backend, các framework và thực hành tốt nhất.

Bắt đầu với Next.js

Khởi tạo một dự án Next.js từ đầu và hiểu về App Router.

6 phút đọcnext.jsreactbeginner

Lộ trình phát triển Web: Từ trình duyệt đến triển khai

Bản đồ dễ hiểu về cách website hoạt động, nên học gì trước và cách thực hành bằng một sản phẩm nhỏ.

12 phút đọcweb-foundationsfrontendbackendapisroadmap

Website hoạt động thế nào: browser, server, DNS và HTTPS

Browser resolve domain qua DNS, mở kết nối bảo vệ bằng HTTPS, gửi HTTP request, nhận resource từ server/CDN rồi render; JavaScript có thể request thêm data.

6 phút đọcweb-foundationspracticebeginner-friendly

Thuật ngữ web không khó hiểu

Thuật ngữ web dễ hiểu hơn khi nhóm theo hành trình: client resolve domain qua DNS, mở network connection, gửi HTTP request, nhận response và render resource được xác định bằng URL.

6 phút đọcweb-foundationspracticebeginner-friendly

HTML: tạo cấu trúc cho một trang hữu ích

HTML mô tả ý nghĩa và cấu trúc: heading tạo outline, landmark chia vùng, link dùng để điều hướng, button thực hiện action và label nối control với hướng dẫn. Semantic markup cung cấp thông tin hữu ích cho browser và assistive technology trước cả CSS.

6 phút đọcweb-foundationspracticebeginner-friendly

CSS: làm trang dễ đọc và responsive

CSS dễ đọc tạo type scale rõ, line length thoải mái, contrast đủ, spacing nhất quán và layout thích nghi từ màn hình hẹp tới rộng. Responsive design đi theo nhu cầu content, không theo danh sách tên thiết bị.

6 phút đọcweb-foundationspracticebeginner-friendly

JavaScript: thêm hành vi và trạng thái

JavaScript phản hồi event, biến đổi data, cập nhật state và phản chiếu state trở lại UI. Giữ một single source of truth giúp màn hình không lệch với dữ liệu bên dưới.

6 phút đọcweb-foundationspracticebeginner-friendly

Backend làm gì

Backend thực thi business rule, phối hợp data và external service, xác thực request rồi trả kết quả qua interface như API. Nó bảo vệ invariant không thể giao cho browser code.

6 phút đọcbackendpracticebeginner-friendly

Chọn ngôn ngữ server-side

Hãy chọn server-side language theo constraint: kỹ năng team, ecosystem, runtime, library, vận hành và tuyển dụng—không chỉ dựa vào headline benchmark. Nhiều lựa chọn phổ biến đều có thể giải cùng một bài toán tốt.

6 phút đọcbackendpracticebeginner-friendly

Xây dựng HTTP server nhỏ

HTTP server lắng nghe trên một port, parse request, route theo cặp method-path, chạy application logic rồi trả status, header và body. Hãy bắt đầu với một health route trước khi thêm framework hay database.

6 phút đọcbackendpracticebeginner-friendly

Authentication và session

Authentication chứng minh người dùng là ai; session ghi nhớ bằng chứng đó qua nhiều request. Session an toàn cần identifier khó đoán, expiry phía server, cookie được bảo vệ và cơ chế logout hoặc revoke rõ ràng.

6 phút đọcbackendpracticebeginner-friendly

Giải thích API bằng ví dụ nhà hàng

API là contract để yêu cầu hệ thống khác làm việc hoặc trả dữ liệu. Trong ví dụ nhà hàng, menu định nghĩa request hợp lệ, phục vụ bàn chuyển request và bếp xử lý implementation ẩn phía sau.

6 phút đọcapispracticebeginner-friendly

JSON và XML

JSON biểu diễn object và array bằng syntax nhỏ gọn cho application data phổ biến; XML biểu diễn element và attribute lồng nhau với namespace cùng tooling thiên về document. Hãy chọn theo contract bên nhận, không theo sở thích.

6 phút đọcapispracticebeginner-friendly

Xây dựng và gọi REST API

REST-style API mô hình resource bằng URL ổn định, dùng HTTP method để thể hiện ý định, trả status code có nghĩa và giữ request self-contained. Tính nhất quán quan trọng hơn việc chạy theo sự thuần khiết kiến trúc.

6 phút đọcapispracticebeginner-friendly

Xử lý lỗi, pagination và rate limit

API client bền vững cần phân loại error, giới hạn retry, paginate đến stopping signal đã document và tôn trọng rate-limit header. Retry mọi thứ mù quáng có thể làm outage nặng hơn.

6 phút đọcapispracticebeginner-friendly

Git và GitHub cho dự án web nhỏ

Git ghi snapshot và branch ở local; GitHub host repository và bổ sung collaboration, review, automation cùng access control. Dự án nhỏ cần history rõ hơn là branching model phức tạp.

6 phút đọcweb-deliverypracticebeginner-friendly

Deploy website từ repository

Git-based deployment nối một commit đã review với build có thể tái hiện và một environment. Host checkout commit, cài dependency đã lock, chạy validation, publish artifact và giữ log để rollback.

6 phút đọcweb-deliverypracticebeginner-friendly

Canvas và SVG

Canvas vẽ pixel lên một bề mặt giống bitmap; SVG giữ từng shape thành DOM element. Canvas phù hợp scene dày và redraw liên tục, còn SVG phù hợp diagram co giãn và object tương tác riêng.

6 phút đọcweb-deliverypracticebeginner-friendly