Lộ trình học phát triển Web

Tuân theo lộ trình chuẩn ngành. Tiến bộ từ cơ bản IT đến các dự án thực tế theo từng bước. Hoàn toàn miễn phí, chạy ngay trên trình duyệt của bạn.

Không cần kinh nghiệm lập trình. Thực hiện theo quy trình 2 bước — đọc hướng dẫn, sau đó làm bài tập — để học HTML, CSS, JavaScript và tích hợp API một cách dễ dàng.

Cách học hiệu quả

① Đọc hướng dẫn → ② Làm bài tập thực hành

Bỏ qua phần hướng dẫn sẽ khiến bài tập trở nên khó khăn. Hãy làm theo đúng trình tự này.

① Bắt đầu từ bước đầu tiên (Cơ bản IT/Web)
🌐

Cơ bản IT/Web

1〜2 giờ Nhập môn

Hiểu cách thức hoạt động của Web. Những kiến thức cần thiết trước khi học lập trình.

Tổng quan

Cái này là gì?

Cơ bản IT/Web là kiến thức để hiểu cách trang web và ứng dụng web hoạt động. Hiểu các thuật ngữ như máy chủ, máy khách, HTTP và mạng giúp việc học lập trình sau này suôn sẻ hơn.

Tại sao lại quan trọng?

Hầu hết các khóa học lập trình đều bắt đầu với những kiến thức cơ bản này. Nếu không biết, bạn có thể tạo được trang web đơn giản nhưng khi gặp lỗi phức tạp, bạn sẽ không hiểu tại sao nó không chạy.

Bạn sẽ học được gì
  • Cách trang web hiển thị (Máy khách và Máy chủ)
  • HTTP/HTTPS là gì
  • Vai trò của trình duyệt
  • Sự khác biệt giữa HTML, CSS và JavaScript

Đã hiểu cơ chế của Web.

Tiếp theo là thiết lập môi trường. Chuẩn bị trình duyệt và trình soạn thảo để viết mã HTML đầu tiên.

① Đọc hướng dẫn
🔧

Thiết lập môi trường

30 phút Nhập môn

Chỉ cần trình duyệt và trình soạn thảo. Bắt đầu ngay lập tức.

Tổng quan

Cái này là gì?

Thiết lập môi trường là chuẩn bị để bắt đầu lập trình. Trên trang web này, bạn có thể thực hành ngay trên trình duyệt mà không cần cài đặt gì.

Tại sao lại quan trọng?

Điểm tốt của phát triển Web là bạn có thể bắt đầu với các công cụ có sẵn trên máy tính. Hãy bắt đầu một cách nhẹ nhàng.

Bạn sẽ học được gì
  • Vai trò và cách sử dụng trình duyệt
  • Cách tạo tệp HTML (cho phát triển local)
  • Cách sử dụng màn hình thực hành (Mã → Chạy → Xem trước)
  • Cách cài đặt VS Code (tùy chọn)

Môi trường đã sẵn sàng!

Tiếp theo hãy học cơ bản về HTML. Chúng ta sẽ học từng thẻ một để cấu trúc văn bản.

① Đọc hướng dẫn → Đọc bài giải thích bài tập ② Làm bài tập (6 câu)
📝

Cơ bản HTML

1〜2 tuần Nhập môn

Tiêu đề, đoạn văn, danh sách, liên kết. Học từng thẻ một cách cẩn thận.

Tổng quan

Cái này là gì?

HTML là ngôn ngữ tạo khung cho trang web. Bạn dùng các thẻ (như <h1>) để nói với trình duyệt "đây là tiêu đề", "đây là đoạn văn".

Tại sao lại quan trọng?

Không có HTML, bạn không thể tạo trang web. Đây là nền tảng của mọi thứ trên Web.

Bạn sẽ học được gì
  • Cách dùng tiêu đề (h1-h6)
  • Cách viết đoạn văn (p)
  • Cấu trúc danh sách (ul, ol, li)
  • Liên kết (a) và hình ảnh (img)
  • Sử dụng strong, em, div, span

Đã nắm vững cơ bản HTML.

Tiếp theo hãy dùng CSS để trang trí. Học về màu sắc, khoảng cách và font chữ.

① Đọc hướng dẫn → Đọc bài giải thích bài tập ② Làm bài tập (12 câu)
🎨

Cơ bản CSS

1 tuần Nhập môn

Màu sắc, khoảng cách, font chữ. Chỉnh sửa giao diện.

Tổng quan

Cái này là gì?

CSS là ngôn ngữ quyết định diện mạo của trang web. Bạn có thể chỉ định màu sắc, kích thước, khoảng cách và bố cục.

Tại sao lại quan trọng?

HTML đơn thuần sẽ trông rất nhạt nhẽo. CSS giúp trang web đẹp và dễ dùng hơn.

Bạn sẽ học được gì
  • Chỉ định màu sắc (color, background-color)
  • Khoảng cách (margin, padding)
  • Font chữ (font-size, font-family)
  • Class và Selector

Đã nắm vững cơ bản CSS.

Tiếp theo hãy học JavaScript để tạo chuyển động cho trang web.

① Đọc hướng dẫn → Đọc bài giải thích bài tập ② Làm bài tập (10 câu)
⚡

Cơ bản JavaScript

2 tuần Sơ cấp

Thay đổi nội dung khi nhấn nút. Tạo ra các chuyển động.

Tổng quan

Cái này là gì?

JavaScript là ngôn ngữ tạo chuyển động cho trang web.

Tại sao lại quan trọng?

Biến trang web tĩnh thành ứng dụng tương tác.

Bạn sẽ học được gì
  • Biến và kiểu dữ liệu
  • Cách viết hàm
  • Thao tác DOM
  • Sự kiện (Event)

Đã nắm vững cơ bản JavaScript.

Học về Layout (Flexbox, Grid) để sắp xếp giao diện phức tạp hơn.

① Đọc hướng dẫn → Đọc bài giải thích bài tập ② Làm bài tập (15 câu)
🕹️

Thao tác DOM

1 tuần Sơ cấp

Thao tác các thành phần HTML từ JavaScript và thay đổi trang web một cách động.

Tổng quan

Cái này là gì?

DOM (Document Object Model) là cơ chế xử lý các thành phần HTML như các đối tượng trong JavaScript.

Tại sao lại quan trọng?

Nếu không thể thao tác DOM, bạn không thể tạo ra sự thay đổi trên trang web. Đây là kiến thức nền tảng cho các thư viện như React.

Bạn sẽ học được gì
  • Cách lấy các phần tử
  • Lắng nghe sự kiện (Event Listener)
  • Thay đổi Class và Style
  • Tạo và xóa phần tử

Đã có thể làm trang web chuyển động bằng JS.

Học về Layout để làm giao diện chuyên nghiệp hơn.

① Đọc hướng dẫn → ② Làm bài tập (10 câu)
📋

Biểu mẫu (Form)

1 tuần Sơ cấp

Nhận dữ liệu từ người dùng và kiểm tra tính hợp lệ.

Tổng quan

Cái này là gì?

Form giúp thu thập ý kiến, thông tin người dùng.

Tại sao lại quan trọng?

Là cầu nối giữa người dùng và ứng dụng.

Bạn sẽ học được gì
  • input, label
  • submit
  • validation

Đã hiểu về Form.

Học về API để kết nối với dữ liệu thực tế.

① Đọc hướng dẫn → Đọc bài giải thích bài tập ② Làm bài tập (5 câu)
🌐

Kết nối API

2 tuần Trung cấp

Lấy dữ liệu từ bên ngoài và hiển thị lên trang web.

Tổng quan

Cái này là gì?

API là cách các ứng dụng nói chuyện với nhau.

Tại sao lại quan trọng?

Hầu hết các ứng dụng hiện nay đều dùng API.

Bạn sẽ học được gì
  • fetch
  • JSON
  • async/await

Đã biết dùng API.

Thực hiện dự án thực tế đầu tiên.

① Đọc hướng dẫn → Đọc bài giải thích bài tập ② Làm bài tập (5 câu)
🚀

Dự án thực tế

2 tuần Trung cấp

Tổng hợp kiến thức để tạo ra một sản phẩm hoàn chỉnh.

Tổng quan

Cái này là gì?

Xây dựng ứng dụng từ A-Z.

Tại sao lại quan trọng?

Khẳng định năng lực bản thân.

Bạn sẽ học được gì
  • Thiết kế dự án
  • Triển khai từng bước
  • Phương pháp công khai

Hoàn thành lộ trình!

Tiếp tục học các Framework như React, Vue.

① Đọc hướng dẫn → Đọc bài giải thích bài tập ② Làm bài tập (5 câu)

Xác nhận cách thực hiện

① Đọc hướng dẫn → ② Làm bài tập thực hành. Làm theo đúng trình tự này giúp bạn xây dựng kỹ năng vững chắc.

Đọc hướng dẫn của từng bước trước khi chuyển sang phần bài tập của danh mục đó.

① Bắt đầu từ bước đầu tiên

Danh sách công cụ · Trang chủ