HTML/CSS tiếp theo là JavaScript và React: Nhập môn frontend cùng AI

🤖 Trong thời đại AI viết code, vậy tại sao tôi lại không biết sửa code của mình?

AI đề xuất mã nhanh chóng. Nhưng việc đánh giá mã đó có phù hợp với yêu cầu hay không, sửa lỗi và áp dụng vào dịch vụ thực tế vẫn là trách nhiệm của nhà phát triển.

Nếu thiếu nền tảng, bạn sẽ chỉ sao chép nguyên câu trả lời của AI, và ngay cả khi xảy ra vấn đề nhỏ cũng không biết nên bắt đầu sửa từ đâu.

Khóa học này không phải là quá trình học “cách yêu cầu AI tạo mã”. Trước tiên, bạn sẽ nắm vững cú pháp cốt lõi của JavaScript, DOM và các sự kiện, sau đó mở rộng một cách tự nhiên sang cấu trúc component và state của React. AI được sử dụng như một người bạn đồng hành trong học tập, nhưng trọng tâm là rèn luyện khả năng tự đọc, chỉnh sửa và kiểm chứng mã được tạo ra.

Xem trước sản phẩm hoàn thiện

▶ Xem sản phẩm hoàn thiện bằng React

https://ai-js-react.vercel.app/

Khóa học này phù hợp với những bạn như sau 🙋

• Những người đã học đến HTML/CSS nhưng cảm thấy bối rối không biết tiếp theo nên học gì

• Những người đã học qua cú pháp JavaScript nhưng gặp khó khăn ngay khi chuyển sang React

• Những người đã thử dùng công cụ lập trình AI nhưng gặp khó khăn trong việc đánh giá xem mã nhận được có đúng hay không và chỉnh sửa nó.

• Dành cho những ai muốn trải nghiệm quy trình dự án từ việc tổng hợp yêu cầu → triển khai → kiểm thử → build, vượt ra ngoài những ví dụ nhỏ lẻ.

Kiến thức tiên quyết

• Có thể tạo một trang web đơn giản bằng HTML/CSS (cấu trúc thẻ, tạo kiểu cơ bản)

• Cách sử dụng cơ bản VS Code và trình duyệt web (công cụ dành cho nhà phát triển)

• Bạn không cần có kinh nghiệm về JavaScript hay React.

Điểm khác biệt của khóa học này 💡

Lộ trình được thiết kế vừa vặn cho bước tiếp theo sau HTML/CSS

Bạn sẽ tiến từng bước một theo thứ tự JavaScript cơ bản → DOM·sự kiện → React.

Xây dựng cùng một tính năng hai lần (JavaScript → React)

Trước tiên, bạn sẽ xây dựng chức năng tìm kiếm và lọc bằng JavaScript, sau đó triển khai lại cùng chức năng bằng React. Đây là phần giúp bạn tự mình hiểu rõ sự khác biệt giữa hai cách tiếp cận.

Ngay cả khi gặp khó khăn, bạn vẫn có thể bắt đầu lại

Mỗi bài học đều cung cấp mã start và mã complete. Nếu gặp khó khăn, hãy bắt đầu lại từ mã start của bài học đó.

Tự triển khai là trọng tâm, AI chỉ được sử dụng một phần

Giao toàn bộ cho AI thì nhanh, nhưng khi có vấn đề phát sinh, bạn sẽ không biết cần sửa ở đâu. Bạn sẽ chủ yếu tự nhập mã để nắm vững nguyên lý, chỉ sử dụng AI khi cần sắp xếp yêu cầu hoặc nhận đề xuất về hướng triển khai. Người học sẽ tự mình lựa chọn nội dung cần áp dụng.

🛤️ Hai phương pháp học phù hợp với phong cách của bạn

• Cả hai phương pháp đều được thực hiện với cùng một video. {{Vui lòng ghi vị trí cung cấp ghi chú học tập (ví dụ: tab tài liệu học tập)}}

• Tài liệu học tập là hướng dẫn thực hành mà bạn mở bên cạnh video và làm theo. Trong đó tổng hợp các prompt cần nhập, mã cần viết và cách kiểm tra khi gặp khó khăn.

Bạn sẽ học những nội dung như thế này 📚

🌱 Phần 1 · AI và JavaScript, những bước đầu tiên

Học cách sử dụng AI như một người đồng hành lập trình thay vì một công cụ tạo đáp án, chuẩn bị môi trường thực thi JavaScript và chạy đoạn mã đầu tiên.

• Buổi 1 - Sau HTML/CSS thì học gì? Vì sao cần JavaScript

• Buổi 2 - Cách sử dụng AI như một đối tác lập trình thay vì một đáp án có sẵn

• Buổi 3 - Bắt đầu với JavaScript - Biến và kiểu dữ liệu

  
  

🧩 Phần 2 · Năng lực đọc hiểu mã, cú pháp cốt lõi của JavaScript

Học về biến, câu lệnh điều kiện, hàm, mảng, đối tượng và map. Xây dựng nền tảng để bạn có thể tự đọc và giải thích cả những đoạn mã do AI cung cấp.

• Buổi 4 - Mã lệnh tự đưa ra quyết định: Toán tử và câu lệnh điều kiện if

• Bài 5 - Không còn phải viết mã lặp lại: Hiểu về hàm chỉ trong một lần học

• Bài 6 - Chiếc hộp chứa danh sách sản phẩm: Mảng

• Bài 7 - Cách biểu diễn một sản phẩm: Đối tượng và cấu trúc dữ liệu

• Bài 8 - Từ for đến map: Cách dễ nhất để xử lý danh sách

• Bài 9 - Vé vào cửa React: Những cú pháp JS hiện đại nhất định phải biết

🖱️ Phần 3 · Sức mạnh điều khiển giao diện: DOM và sự kiện

Tự tay chọn phần tử và xử lý các sự kiện nhấp chuột, nhập liệu, trực tiếp tạo thẻ sản phẩm từ dữ liệu, đồng thời triển khai cả chức năng tìm kiếm và bộ lọc danh mục.

• Bài 10 - Tự tay chọn các phần tử trên màn hình (chọn DOM)

• Bài 11 - Website phản hồi khi nhấp chuột: Xử lý sự kiện (tách biệt cấu trúc)

• Buổi 12 - Thay đổi giao diện bằng mã: văn bản·kiểu dáng·lớp CSS

• Bài 13 - Chỉ cần thêm dữ liệu, các thẻ sẽ được hiển thị hàng loạt: render danh sách

• Bài 14 - Tạo chức năng tìm kiếm sản phẩm hiển thị kết quả ngay khi gõ

• Bài 15 - Hoàn thiện bộ lọc danh mục chỉ bằng một lần nhấp vào nút

⚛️ Phần 4 · Mở rộng tư duy từ JavaScript sang React

Xây dựng lại chức năng vừa tạo theo cấu trúc component, props và state. Đây là phần giúp bạn trực tiếp cảm nhận sự khác biệt giữa hai cách tiếp cận.

• Bài 16 - Tại sao lại là React? Trải nghiệm trực tiếp những hạn chế của việc điều khiển DOM thủ công

• Buổi 17 - Dự án React đầu tiên (Vite)

• Buổi 18 - Tìm hiểu JSX: JavaScript trông giống HTML, JSX

• Buổi 19 - Xây dựng giao diện như những mảnh ghép Lego: Tách component thẻ sản phẩm

• Buổi 20 - Từ component cha đến component con: Truyền dữ liệu bằng Props

• Bài 21 - Khi giá trị thay đổi, giao diện cũng thay đổi: useState

• Bài 22 - Xử lý thao tác nhấp chuột và nhập liệu bằng React: Sự kiện và Form

• Bài 23 - Hoàn thiện danh sách chỉ với một mảng: map và key

• Buổi 24 - Trước khi xây dựng, hãy thiết kế trước: Yêu cầu tìm kiếm và thiết kế State

🛒 Phần 5 · Dự án khám phá sản phẩm bằng React hoàn thiện cùng AI

Từ việc tổng hợp yêu cầu đến triển khai tìm kiếm, bộ lọc kết hợp danh mục·giá, yêu thích và chi tiết sản phẩm. Hoàn thiện bằng các bài kiểm thử Vitest và build, đồng thời so sánh các điểm cần review và refactor code bằng Copilot và Claude Code.

• Buổi 25 - Bắt đầu dự án: Tổng hợp yêu cầu và thiết kế cấu trúc

• Buổi 26 - Triển khai tìm kiếm sản phẩm bằng React

• Bài 27 - Bộ lọc kết hợp các điều kiện: tìm kiếm + danh mục + giá cả

• Buổi 28 - Yêu thích sản phẩm ưng ý và xem chi tiết

• Bài 29 - Liệu có thực sự hoạt động tốt không? Kiểm thử bằng Vitest

• Bài 30 - Đánh giá mã nguồn bằng AI, tái cấu trúc và hoàn thiện dự án

Người tạo khóa học này

Tôi là giảng viên frontend đã giảng dạy từ HTML/CSS đến JavaScript·React cho những người không chuyên và người mới bắt đầu.

Tại ESTSOFT KDT, Học viện Máy tính Green cùng nhiều nơi khác, tôi đã gặp rất nhiều người cảm thấy bối rối vì “không biết nên học gì sau HTML/CSS”. Vì vậy, tôi đã xây dựng các khóa học lấy dự án làm trọng tâm, chia nhỏ những khái niệm phức tạp thành các bài thực hành nhỏ và hoàn thiện sản phẩm trực tiếp.

Tôi đã biên soạn các sách về xuất bản web và thiết kế web như 『코딩을 처음이라 with 웹 퍼블리싱』, đồng thời đang vận hành kênh YouTube về xuất bản web 'ezweb'.

Toàn bộ khóa học ezweb trên Inflearn →

Bạn có điều gì thắc mắc không?

Q. 🔰 Tôi mới bắt đầu học lập trình, liệu có theo kịp không?

Chỉ cần có kiến thức cơ bản là đủ. Bạn sẽ bắt đầu từng bước từ JavaScript, và mã start được cung cấp cho mỗi bài học, nên bất kỳ ai cũng có thể bắt đầu thực hành trong cùng một môi trường.

Q. 🤖 Công cụ AI nào được sử dụng và có mất phí không?

Công cụ chính là GitHub Copilot và bạn có thể học bằng gói miễn phí. {{Thêm một dòng sau khi kiểm tra xem việc thực hành có thể bị gián đoạn do giới hạn sử dụng hàng tháng của gói miễn phí hay không}} Ở phần cuối, trong các nội dung review và tái cấu trúc mã, chúng ta sẽ sử dụng thêm Claude Code để so sánh kết quả của hai công cụ. Claude Code là công cụ trả phí và khóa học sẽ thông báo trước điều này. Cách cài đặt sẽ được công khai qua liên kết video YouTube của giảng viên.

Q. 💳 Nếu không trả phí cho Claude Code thì có khó học không?

Claude Code chỉ được sử dụng trong phần so sánh hai công cụ, còn quá trình thực hiện cuối cùng sẽ dùng Copilot. Ngay cả khi không thanh toán, bạn vẫn có thể xem quá trình so sánh qua video và tiếp tục học.

Q. 📓 Chỉ cần xem video thôi hay cũng cần ghi chú học tập?

Bạn vẫn có thể học chỉ bằng cách làm theo video. Nếu chọn phương pháp học thứ hai (thực hiện cùng AI bằng prompt), bạn bắt buộc phải có sổ ghi chép học tập.

Lưu ý trước khi tham gia khóa học

Đề xuất bước tiếp theo

Sau khi hoàn thành khóa học này, hãy tiếp tục học với khóa học tiếp theo.

Thực hành React + TypeScript - Học TypeScript qua dự án TodoList

Website được xây dựng cùng AI - Dự án thực tế với Stitch · Figma Make · React