20 Web Projects With Vanilla JavaScript

20 Dự Án Web Với JavaScript Thuần

Xây dựng 20 dự án frontend mini từ đầu với HTML5, CSS & JavaScript (Không dùng framework hay thư viện)

4.7

(7,339 đánh giá)

42,907 học viên

Giảng viên

Brad Traversy

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

50.000đ 349.000đ -86%

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

16.0 giờ video

121 bài giảng

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 18/03/2026

#Frontend Projects #Javascript #Vanilla Javascript #Web Development

Bạn sẽ học được gì

Xây dựng 20 Dự Án Frontend Từ Đầu

Không dùng Framework JS hay CSS

JavaScript Hiện Đại (ES6+) - Arrow functions, Fetch, Promises, v.v.

Thao tác DOM & Sự kiện

Hiệu ứng chuyển động với CSS & JavaScript

Fetch & JSON với API của bên thứ ba

HTML5 Canvas, Speech API, Âm thanh & Video

Thân thiện với người mới bắt đầu

Yêu cầu

Kiến thức cơ bản về HTML, CSS & JavaScript

Đối tượng phù hợp

Dành cho bất kỳ ai muốn xây dựng các dự án thú vị, từ dễ đến trung cấp

Nội dung khóa học

21 phần • 121 bài giảng

1 Chào mừng đến với khóa học

2 Chuẩn bị môi trường

3 Mã nguồn

1 Giới thiệu dự án

2 HTML của dự án

3 CSS của dự án

4 Thêm tính năng xác thực đơn giản

5 Kiểm tra trường bắt buộc & Tái cấu trúc mã

6 Kiểm tra độ dài, Email & Mật khẩu khớp

1 Giới thiệu dự án

2 HTML của dự án

3 CSS của dự án

4 Chọn phim & Ghế từ giao diện

5 Lưu dữ liệu vào Local Storage

6 Hiển thị dữ liệu đã lưu lên giao diện

1 Giới thiệu dự án

2 HTML của dự án

3 CSS của dự án

4 Phát, Tạm dừng & Dừng

5 Thanh tiến trình video & Thời gian

1 Giới thiệu dự án

2 HTML của dự án

3 CSS của dự án

4 Tìm hiểu JSON & Fetch

5 Lấy tỷ giá & Cập nhật DOM

1 Giới thiệu dự án

2 Giao diện dự án

3 Tạo người dùng ngẫu nhiên - Fetch với Async/Await

4 Hiển thị người dùng - forEach() & các phương thức DOM

5 Nhân đôi tiền - map()

6 Sắp xếp theo giàu nhất - sort()

7 Hiển thị triệu phú - filter()

8 Tính tổng tài sản - reduce()

1 Giới thiệu dự án

2 HTML của dự án

3 Tạo kiểu cho Navbar

4 Tạo kiểu cho Header & Modal

5 Bật/Tắt Menu & Modal

1 Giới thiệu dự án

2 Vẽ Hangman với SVG

3 Tạo kiểu chính

4 Tạo kiểu cho Popup & Thông báo

5 Hàm hiển thị từ

6 Xử lý sự kiện nhấn chữ

7 Chữ sai & Chơi lại

1 Giới thiệu dự án

2 HTML & CSS cơ bản của dự án

3 Tìm kiếm & Hiển thị món ăn từ API

4 Hiển thị trang chi tiết món ăn

5 Hiển thị món ăn ngẫu nhiên & CSS cho trang chi tiết

1 Giới thiệu dự án

2 HTML của dự án

3 CSS của dự án

4 Hiển thị các khoản giao dịch

5 Hiển thị Số dư, Thu nhập & Chi tiêu

6 Thêm & Xóa giao dịch

7 Lưu trữ vào Local Storage

1 Giới thiệu dự án

2 HTML của dự án

3 Bộ chứa nhạc & Hiệu ứng xoay

4 Tạo kiểu & Hiệu ứng cho Thông tin bài hát

5 Tải, Phát & Tạm dừng bài hát

6 Bài tiếp theo, Bài trước & Tiến trình

1 Giới thiệu dự án

2 HTML của dự án

3 CSS của dự án & Hiệu ứng Loader

4 Lấy bài viết ban đầu từ API

5 Thêm tính năng cuộn vô hạn

6 Lọc bài viết đã tải về

1 Giới thiệu dự án

2 HTML của dự án

3 CSS của dự án

4 Khớp từ & Điểm số

5 Thêm bộ đếm thời gian

6 Cài đặt độ khó

1 Giới thiệu dự án

2 HTML & Tạo hộp thoại đầu ra

3 CSS của dự án

4 Lấy các giọng nói có sẵn

5 Các nút phát giọng nói

6 Thay đổi giọng nói & Hộp văn bản tùy chỉnh

1 Giới thiệu dự án

2 HTML của dự án

3 Tạo kiểu cơ bản cho thẻ

4 Hiệu ứng xoay & trượt thẻ

5 Thêm bộ chứa thẻ & Tạo kiểu cho Form

6 Tạo thẻ & Hiệu ứng lật với JS

7 Chức năng nút Trước & Sau

8 Đặt & Lấy dữ liệu thẻ từ Local Storage

1 Giới thiệu dự án

2 HTML của dự án & Tạo kiểu Header

3 Tạo kiểu cho Form

4 Lấy bài hát & nghệ sĩ

5 Cập nhật DOM & Thêm phân trang

6 Lấy & Hiển thị lời bài hát

1 Giới thiệu dự án

2 Tạo vòng tròn lớn

3 Tạo & Tạo hiệu ứng cho kim chỉ

4 Hiệu ứng hít thở với kích hoạt bằng JS

1 Giới thiệu dự án

2 Tạo & Tạo kiểu cho trang

3 Phác thảo kế hoạch Canvas

4 Vẽ bóng, vợt & điểm số

5 Tạo các viên gạch

6 Di chuyển vợt

7 Di chuyển bóng & Phá gạch

8 Thua & Khởi động lại trò chơi

1 Giới thiệu dự án

2 HTML & Tạo kiểu cho trang chủ

3 Tạo bộ đếm ngược

4 Năm động & Hiệu ứng xoay

1 Giới thiệu dự án

2 Giao diện dự án

3 Bắt đầu đầu vào từ micro

4 Kiểm tra số đã đoán

1 Giới thiệu dự án

2 HTML Navbar & Tailwind

3 HTML Sản phẩm & Tailwind

4 Hiển thị sản phẩm từ JS

5 Thêm & Xóa sản phẩm khỏi giỏ hàng

6 Lọc sản phẩm

Giới thiệu khóa học

This is a fun, practical & project based course for all skill levels. The projects in this course are designed to get you building things using HTML5, CSS & JavaScript with no frameworks or libraries. Every project is built from scratch and has some kind of dynamic functionality from small games to an expense tracker to a breathing relax app.

Although this is a project based course, I will still be explaining everything as I go. These are mini-projects designed for you to complete in a few hours.

You should have some basic knowledge of HTML/CSS/JS. If you are brand new, I would suggest my Modern HTML/CSS From The Beginning and/or my Modern JS From The Beginning courses on Udemy. This course is a mix of both.

Some Things You Will Learn In These Projects: