Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

JavaScript Web Projects: 20 Projects to Build Your Portfolio

JavaScript Web Projects: 20 dự án xây dựng portfolio

JavaScript Web Projects: 20 dự án xây dựng portfolio

Sử dụng HTML5, CSS3 và JavaScript hiện đại để xây dựng các dự án Responsive và thân thiện với thiết bị di động cho portfolio và CV trong mơ của bạn!

4.5
(4,192 đánh giá)
35,324 học viên
Giảng viên
Andrei Neagoie
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 2.069.000đ -96%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
33.0 giờ video
243 bài giảng
2 bài quiz
1 bài coding
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026

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

20 dự án thuần JavaScript, HTML5, CSS3 với toàn bộ code được cung cấp
Từ người mới bắt đầu hoàn toàn trở thành lập trình viên JavaScript tự tin
Học các thực hành UI/UX để xây dựng ứng dụng web ưu tiên di động và responsive
Lập trình bất đồng bộ với AJAX, Fetch API, Promises & Async + Await
Viết code Javascript sạch, dễ bảo trì và hiệu năng cao
Làm việc với Web APIs (localStorage, DOM, ...)
HTML5 hiện đại (Canvas, Video, Audio, ...)
CSS3 hiện đại (Animations, Transitions, Variables, ...)
Tránh những lỗi thường gặp mà lập trình viên Javascript và người mới khác mắc phải
Xây dựng 20 ứng dụng frontend thực tế, đẹp và có thể tùy chỉnh

Yêu cầu

Chỉ cần hiểu biết cơ bản về HTML, CSS và JavaScript
Máy tính và hệ điều hành nào cũng được — Windows, Mac hay Linux

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

Dành cho những ai cảm thấy chưa thể tự xây dựng dự án JavaScript
Dành cho những ai muốn trở thành web developer, chuyển ngành hoặc làm freelancer với vai trò lập trình viên JavaScript
Lập trình viên mới hoặc mới vào nghề muốn học JavaScript hiện đại
Lập trình viên muốn học phát triển web frontend
Bất kỳ ai cần thêm dự án vào portfolio hoặc CV của mình
Lập trình viên đã biết JavaScript cơ bản và muốn đào sâu kiến thức

Nội dung khóa học

27 phần • 243 bài giảng
1 Lộ trình khóa học
2 Tham gia lớp học trực tuyến của chúng tôi!
3 Bài tập: Làm quen với bạn cùng lớp và giảng viên
4 Mục đích của JavaScript
5 Cách tận dụng tối đa khóa học
6 Tài nguyên ZTM
1 Thiết lập cho khóa học
2 KHÔNG BẮT BUỘC: Thiết lập trên MAC/LINUX
3 KHÔNG BẮT BUỘC: Thiết lập trên WINDOWS
4 Thiết lập Visual Studio Code + Templates
5 Developer Tools + Github Pages
6 Cập nhật ngành hàng tháng
7 Tài nguyên thưởng: Cheatsheet JavaScript nâng cao
8 Thử thách lập trình hàng tháng, tài nguyên miễn phí và hướng dẫn
1 Tổng quan dự án Quote Generator
2 Thiết lập dự án
3 Tạo kiểu và các phần tử HTML
4 Tạo nút đẹp
5 Cập nhật API
6 [MỚI] Lấy dữ liệu bằng JavaScript
7 Tùy chọn khác cho API
8 [MỚI] Thao tác DOM bằng JavaScript
9 [MỚI] Tạo loader bằng JavaScript
10 Chia sẻ dự án của bạn
11 Lưu ý nhanh: Các video sắp tới
12 [KHÔNG BẮT BUỘC] Lấy dữ liệu bằng JavaScript
13 [KHÔNG BẮT BUỘC] Lỗi 429
14 [KHÔNG BẮT BUỘC] Tự xây dựng Proxy Server
15 [KHÔNG BẮT BUỘC] Thao tác DOM bằng JavaScript
16 [KHÔNG BẮT BUỘC] Tạo loader bằng JavaScript
17 Đánh giá code
18 Thao tác DOM
1 Tổng quan dự án Infinity Scroll
2 Loader SVG
3 Căn giữa các phần tử trên trang
4 Bố cục Responsive
5 Lấy dữ liệu
6 JavaScript để hiển thị dữ liệu
7 Infinite Scroll với JavaScript
8 Infinite Scroll với JavaScript 2
9 Đánh giá code
10 Bài tập: Dọn dẹp code
1 Tổng quan dự án Picture In Picture
2 Thiết lập dự án
3 Tạo kiểu và các phần tử HTML
4 Thêm chức năng bằng JavaScript
5 Đánh giá code
6 Giới thiệu trên LinkedIN
1 Tổng quan dự án Joke Teller
2 Tạo kiểu và các phần tử HTML
3 Bố cục và tạo kiểu Responsive
4 Tuyên bố miễn trừ trách nhiệm RapidAPI
5 JavaScript trong dự án
6 JavaScript trong dự án 2
7 JavaScript trong dự án 3
8 Hoàn thiện dự án
9 Đánh giá code
1 Tổng quan dự án Light Dark Mode
2 Thiết lập HTML và CSS
3 Nội dung trong dự án
4 Chuyển đổi theme bằng JavaScript
5 Chuyển đổi theme bằng JavaScript 2
6 LocalStorage để lưu dữ liệu người dùng
7 Đánh giá code
8 Bài tập: Hội chứng kẻ mạo danh
9 Bài tập: Làm code dễ đọc hơn
1 Tổng quan dự án Animated Template
2 Thiết lập template
3 Thiết lập nội dung
4 JavaScript bên trong HTML
5 Hiệu ứng động khi cuộn
6 Đánh giá code
1 Tổng quan dự án Navigation Nation
2 Thiết lập HTML và CSS
3 Navigation UI
4 Tạo hiệu ứng động cho menu bằng JavaScript
5 Hiệu ứng động CSS
6 Dọn dẹp JavaScript
7 Đánh giá code
1 Tổng quan dự án Music Player
2 Thiết lập HTML và CSS
3 Viết code cho UI Responsive
4 JavaScript để phát âm thanh
5 Music Player với JavaScript
6 Thanh tiến trình
7 Thanh tiến trình 2
8 Thanh tiến trình 3
9 Đánh giá code
1 Tổng quan dự án Custom Countdown
2 Video nền
3 Xây dựng các thành phần UI
4 Xây dựng các thành phần UI 2
5 Ngày tháng trong JavaScript
6 Giá trị Form
7 Điền dữ liệu vào UI Countdown
8 setInterval và clearInterval
9 Hoàn thiện UI
10 Lưu cache với LocalStorage
11 Đánh giá code
1 Tổng quan dự án Book Keeper
2 Xây dựng UI
3 Xây dựng UI 2
4 Xây dựng Modal
5 Modals với JavaScript
6 Vấn đề khi nối URL
7 Xác thực Form
8 localStorage và Fetch
9 Xây dựng Bookmarks
10 Xóa Bookmarks
11 Đánh giá code
1 Tổng quan dự án Video Player
2 Cập nhật nguồn Video
3 Xây dựng UI - Player, Video, Mobile Responsive
4 Xây dựng UI - HTML Controls, Hiển thị Controls khi di chuột
5 Xây dựng UI - Thanh tiến trình: Chiều rộng, Hover
6 Xây dựng UI - Lựa chọn, Hiển thị CSS Variables
7 JS - Phát/Dừng Video
8 JS - Thanh tiến trình (Chiều rộng động)
9 JS - Hiển thị thời gian hiện tại/Thời lượng
10 JS - Thanh tiến trình (Tìm kiếm)
11 JS - Volume (Thanh trượt)
12 JS - Volume (Tắt tiếng/Bật tiếng)
13 JS - Tốc độ phát
14 JS - Toàn màn hình
15 Đánh giá code
1 Tổng quan dự án Form Validator
2 Xây dựng UI - HTML Forms, Input, Labels
3 Xây dựng UI - CSS (Body, Container), Google Fonts
4 Xây dựng UI - Form CSS
5 Xác thực Form HTML
6 JS - Xác thực Form
7 JS - Xác thực mật khẩu, Lưu trữ dữ liệu
8 Đánh giá code
9 Cách lưu trữ mật khẩu người dùng
1 Tổng quan dự án Spock Rock
2 Xây dựng UI - Container người chơi, FontAwesome
3 Xây dựng UI - CSS, Google Fonts
4 JS - Thiết lập, Lựa chọn người chơi
5 JS - Lựa chọn máy tính
6 JS - Kiểm tra kết quả
7 JS - Đặt lại tất cả
8 JS - Chức năng Confetti
9 JS - Tái cấu trúc Module
10 Đánh giá code
1 Tổng quan dự án NASA APOD
2 Tài sản - Hiệu ứng Loading tùy chỉnh
3 Xây dựng UI - Điều hướng
4 Xây dựng UI - Card với hình ảnh
5 JS - Tài liệu NASA API/Fetch
6 JS - Tạo các phần tử DOM
7 JS - Lưu mục yêu thích
8 JS - Các phần tử DOM mục yêu thích
9 JS - Xóa mục yêu thích
10 JS - Điều hướng, Loader
11 Đánh giá code
12 Không bắt buộc: Khai báo vs Mệnh lệnh
1 Tổng quan dự án Math Sprint Game
2 Xây dựng UI - Trang mở đầu, Đếm ngược
3 Xây dựng UI - Trang trò chơi, Trang điểm số
4 JS - Lựa chọn Radio và chức năng
5 JS - Trang đếm ngược
6 JS - Tạo phương trình ngẫu nhiên
7 JS - Đưa phương trình lên DOM
8 JS - Tự động cuộn & Tương tác với người chơi
9 JS - Kiểm tra điểm bằng sự kiện thời gian
10 JS - Trang điểm số
11 JS - Lưu điểm cao nhất trong Local Storage
12 Ôn tập code
1 Tổng quan dự án kéo và thả
2 Xây dựng UI - Flexbox, Thanh cuộn tùy chỉnh
3 JS - localStorage
4 JS - Cập nhật DOM
5 JS - API kéo và thả
6 JS - Xây dựng lại mảng
7 JS - Thêm mục
8 JS - Xóa mục
9 JS - Cập nhật mục
10 Ôn tập code
1 Tổng quan dự án máy tính
2 Xây dựng UI - Máy tính, Màn hình, Nút bấm
3 Xây dựng UI - CSS cho màn hình
4 Xây dựng UI - CSS Grid
5 Xây dựng UI - CSS cho nút bấm
6 JS - Thêm bộ lắng nghe sự kiện
7 JS - Đặt lại giá trị, Thêm số thập phân
8 JS - Chức năng toán tử
9 JS - Tính toán
10 Ôn tập code
1 Tổng quan dự án trang splash
2 Thiết lập ban đầu - Figma
3 Xây dựng UI - Thêm tài nguyên ảnh
4 Xây dựng UI - Định dạng tài nguyên ảnh
5 Xây dựng UI - Thêm nền tùy chỉnh
6 JS - Điều khiển nền
7 Ôn tập code
8 Bài tập: Rò rỉ bộ nhớ và Ảnh chụp Heap
1 Tổng quan dự án Paint Clone
2 Xây dựng UI - Thanh trượt tùy chỉnh, JSColor, Thông báo trên di động
3 JS - Thiết lập Canvas
4 JS - Nhập màu/khoảng
5 JS - Vẽ trên Canvas
6 JS - Lưu dữ liệu vẽ
7 JS - localStorage & Tải ảnh xuống
8 Ôn tập code
1 Tổng quan dự án Pong
2 JS - Tạo Canvas
3 JS - RequestAnimationFrame
4 JS - Kết thúc trò chơi
5 Ôn tập code
1 Chia sẻ dự án của bạn
2 JavaScript và hơn thế nữa
3 Cảm ơn bạn!
4 Hướng dẫn học tập
5 Giới thiệu trên LinkedIn
6 Trở thành cựu học viên
7 Thử thách lập trình
1 Công cụ JavaScript
2 Bài tập: Công cụ JavaScript
3 Bên trong công cụ
4 Bài tập: Công cụ JS cho mọi người
5 Trình thông dịch và Trình biên dịch
6 Bên trong công cụ V8
7 So sánh với các ngôn ngữ khác
8 Viết mã tối ưu
9 WebAssembly
10 Call Stack và Memory Heap
11 Stack Overflow
12 Garbage Collection
13 Rò rỉ bộ nhớ
14 Đơn luồng
15 Bài tập: Vấn đề với đơn luồng
16 Môi trường chạy JavaScript
17 Node.js
1 Git + Github Phần 1
2 Cập nhật Github: Master --> Main
3 Git + Github Phần 2
4 Đóng góp cho mã nguồn mở
5 Đóng góp cho mã nguồn mở 2
6 Bài tập: Đóng góp cho mã nguồn mở
7 Cài đặt Node
8 Tạo Portfolio
1 Giải quyết vấn đề CORS với Heroku Server
1 Bài giảng đặc biệt thưởng

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

Just updated with all modern features of HTML5, CSS3 and JavaScript! Join a live online community of over 900,000+ developers and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto with JavaScript!

This course is focused on efficiency and getting you hired by building your dream portfolio so you can get a job or work as a freelancer. Never spend time on confusing, out of date, incomplete tutorials anymore! Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies (seriously, google this to verify some testimonials).

Whether you want to become a freelancer, get hired, or to just advance your career, this brand new course will take you step by step through 20 JavaScript projects that you will be able to customize and put on your portfolio right away. Along the way, you will learn to build projects using HTML, CSS and JavaScript and truly build your skills as a JavaScript developer.


Whether you want to one day learn React, Angular, Vue JS, Node.js, Svelte, or any other toolchain of a modern developer, at the end of the day, JavaScript fundamentals are key, and learning JavaScript is an investment that will pay off many years into the future. By solidifying your JavaScript knowledge and being able to build thing without crutches like libraries and frameworks, you will future proof yourself.


Here is the truth: It’s easy to find JavaScript projects to work on online. You can copy and paste code. You can watch YouTube videos. That’s simple (and free). This course is different in that not only de we have modern projects using the latest features of JavaScript, and browser APIs, but we also do a Code Review of each project. After we build a website, we go through the code and talk about how we can improve the code, how to improve the security, or improve the performance of your projects.


It’s like having a senior developer finally teach you what good code means, what are the common mistakes beginners make, and how to  write maintainable code.


All code is going to be provided to you, and even if you don’t like to code along, you will get access to the code for the projects to put them on your portfolio right away.


So what are we building? Get ready for this:

  • Spock Rock Game - Confetti.js, Modules

  • Quote Generator - Fetch, Async/Await, Quote API, CORS

  • Picture-in-Picture - Picture-in-Picture API, Screen Capture API

  • Bookmarks App - DOM, localStorage

  • NASA APOD - Fetch, Async/Await, NASA API, DOM, localStorage

  • Animated Navigation - CSS Animations

  • Infinite Scroll - Fetch, Async/Await, Unsplash API, DOM, Scroll Event Listener

  • Countdown App - Date, localStorage

  • Music Player - HTML 5 Audio API

  • Calculator - Math Methods

  • Splash Page - DOM Basics

  • Light/Dark Mode - DOM, localStorage

  • Form Validation - DOM, Forms

  • Joke Teller - Fetch, Async/Await, Joke API, Text-to-Speech

  • Video Player - HTML 5 Video API

  • MS Paint Clone - Advanced HTML Canvas, localStorage

  • Pong Clone - Advanced HTML Canvas

  • Math Sprint Game - SetInterval, DOM, Array Methods, localStorage

  • Animated Template - Template, AOS.js

  • Drag and Drop - Drag and Drop API, localStorage

We will be using modern ES6,ES7,ES8,ES9,ES10 features to master JavaScript! Think of this as a full on JavaScript bootcamp to get you from a beginner to a confident programmer! on top of that, we also cover common UI/UX practices to make sure we have good designs and our projects are mobile friendly.


The course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner in JavaScript to someone that is able to build projects on their own.

So the best time to begin? It's Today! By taking that first step right now, you are that much closer to developing the skills that get you hired and closer to your dream career.

See you inside the course :)


Taught By:

Andrei Neagoie is the instructor of the highest rated Development courses on Udemy as well as one of the fastest growing. His graduates have moved on to work for some of the biggest tech companies around the world like Apple, Google, Amazon, JP Morgan, IBM, UNIQLO etc... He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.   Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

--------

Jacinto is a Senior Developer with the Canadian Broadcasting Corporation with a diverse background, including 5 years experience as a teacher in Canada and South Korea. He has had a passion for technology from a very young age, which led him to build his first computer at age 12 and start using design software at 16. As an instructor for the Zero To Mastery Academy, Jacinto combines these artistic and critical thinking skills to create high quality projects that will add real value to student’s portfolios and jump start their careers in web development.

Starting out learning something new can be challenging and there are so many resources available that it can be overwhelming. Jacinto understands that for some, bootcamps and post-secondary education are too time-consuming or expensive for many to consider. With that in mind, he does his best to create the highest quality courses that are inexpensive and beginner-friendly.

As a self-taught developer, Jacinto started from scratch and learned enough to land a Senior Developer job after only 4 months working through online courses. He knows it is possible to upgrade your skills and switch careers without spending excessive time or money. He couldn’t be happier to be in this exciting and growing industry and aims to provide students with the same opportunity.


See you inside the courses!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Html Css
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊