CF

20 Web Projects With Vanilla JavaScript

16h 8m 55s
English
Paid

20 Web Projects With Vanilla JavaScript is a 120-lesson 16 hours 8 minutes self-paced course by Brad Traversy, Udemy. This is a fun, practical & project-based course suitable for all skill levels.

Course facts

Lessons
120
Duration
16 hours 8 minutes
Level
All levels
Language
English
Updated
Instructor
Brad Traversy, Udemy
Price
Premium

This is a fun, practical & project-based course suitable for all skill levels. The projects in this course are crafted to help you build using HTML5, CSS, and JavaScript without relying on any frameworks or libraries. Each project is developed from scratch and includes dynamic functionalities ranging from small games to utilities like an expense tracker and a breathing relaxation app.

Course Overview

Although this is a project-focused course, I will thoroughly explain each concept as we progress. These mini-projects are designed for easy completion within a few hours. It is recommended to have some foundational knowledge of HTML/CSS/JS. Beginners might consider taking my Modern HTML/CSS From The Beginning or Modern JS From The Beginning courses on Udemy, which provide a comprehensive overview.

What You'll Learn

  • Create Layouts & UI's using HTML/CSS without frameworks
  • Implement CSS Animations using transitions, keyframes, etc., with JavaScript triggers
  • Understand JavaScript Fundamentals
  • Master DOM Selection & Manipulation
  • Handle JavaScript Events in forms, buttons, scrolling, etc.
  • Work with the Fetch API & JSON
  • Utilize HTML5 Canvas
  • Explore the Audio & Video APIs
  • Implement Drag & Drop functionality
  • Use the Web Speech API for synthesis & recognition
  • Manage data with Local Storage
  • Apply High Order Array Methods like forEach, map, filter, reduce, and sort
  • Use setTimeout, setInterval for timing events
  • Write concise code with Arrow Functions
  • And much more!

Course Requirements

  • Basic knowledge of HTML, CSS, and JavaScript

Target Audience

This course is ideal for anyone interested in creating enjoyable and straightforward to intermediate-level projects.

Key Learning Outcomes

  • Develop 20 frontend projects from scratch
  • Work without JavaScript or CSS frameworks
  • Leverage Modern JavaScript (ES6+), including Arrows, Fetch, Promises, etc.
  • Manipulate the DOM & handle events with ease
  • Create animations using CSS & JavaScript
  • Experience Fetch & JSON with third-party APIs
  • Utilize HTML5 Canvas, Speech API, and manage Audio & Video files effectively

Who teaches 20 Web Projects With Vanilla JavaScript?

Brad Traversy

Brad Traversy thumbnail

Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.

The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.

The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.

Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in 20 Web Projects With Vanilla JavaScript?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 120 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome To The Course
All Course Lessons (120)
#Lesson TitleDurationAccess
1
Welcome To The Course Demo
02:26
2
Getting Setup
06:35
3
Project Intro
01:58
4
Project HTML
06:21
5
Project CSS
13:48
6
Adding Simple Validation
14:44
7
Check Required & Refactor
09:16
8
Check Length, Email & Password Match
09:14
9
Project Intro
01:24
10
Project HTML
05:47
11
Project CSS
16:07
12
Selecting Movie & Seats From UI
15:14
13
Save Data To Local Storage
12:44
14
Populate UI With Saved Data
08:14
15
Project Intro
02:07
16
Project HTML
08:22
17
Project CSS
09:53
18
Play, Pause & Stop
09:25
19
Video Progress Bar & Timestamp
06:42
20
Project Intro
01:49
21
Project HTML
04:30
22
Project CSS
10:13
23
A Look at JSON & Fetch
09:20
24
Fetch Rates & Update DOM
12:58
25
Project Intro
02:08
26
Project UI
09:20
27
Generate Random Users - Fetch w/ Async/Await
07:46
28
Output Users - forEach() & DOM Methods
10:28
29
Double Money - map()
06:01
30
Sort By Richest - sort()
05:01
31
Show Millionaires - filter()
04:27
32
Calculate Wealth - reduce()
06:17
33
Project Intro
01:06
34
Project HTML
10:12
35
Navbar Styling
07:33
36
Header & Modal Styling
12:09
37
Menu & Modal Toggle
10:01
38
Project Intro
01:50
39
Draw Hangman With SVG
11:36
40
Main Styling
10:56
41
Popup & Notification Styling
08:36
42
Display Words Function
11:23
43
Letter Press Event Handler
08:39
44
Wrong Letters & Play Again
09:55
45
Project Intro
01:25
46
Project HTML & Base CSS
10:19
47
Search & Display Meals From API
20:10
48
Show Single Meal Page
15:29
49
Display Random Meal & Single Meal CSS
10:21
50
Project Intro
01:34
51
Project HTML
05:11
52
Project CSS
14:01
53
Show Transaction Items
08:51
54
Display Balance, Income & Expense
08:20
55
Add & Delete Transactions
08:54
56
Persist To Local Storage
05:41
57
Project Intro
01:57
58
Project HTML
05:41
59
Music Container & Rotate Animation
10:10
60
Music Info Styling & Animation
09:22
61
Load, Play & Pause Song
08:47
62
Next, Prev Song & Progress
12:21
63
Project Intro
02:31
64
Project HTML
03:06
65
Project CSS & Loader Animation
09:53
66
Get Initial Posts From API
07:27
67
Add Infinite Scrolling
06:10
68
Filter Fetched Posts
05:16
69
Project Intro
01:46
70
Project HTML
04:40
71
Project CSS
12:23
72
Word Match & Score
08:16
73
Adding The Timer
09:21
74
Difficulty Setting
08:09
75
Project Intro
01:58
76
HTML & Output Speech Boxes
12:18
77
Project CSS
17:19
78
Get Speech Voices
07:29
79
Speech Buttons
04:59
80
Change Voice & Custom Text Box
05:05
81
Project Intro
02:12
82
Project HTML
07:17
83
Basic Card Styling
10:36
84
Card Rotation & Slide Effect
11:04
85
Add Card Container & Form Styling
06:28
86
Create Cards & Flip Effect With JS
10:24
87
Prev & Next Button Functionality
06:24
88
Set & Get Card Data From Local Storage
13:18
89
Project Intro
01:30
90
Project HTML & Header Stying
09:47
91
Form Styling
07:16
92
Fetching Songs & Artists
09:50
93
Update DOM & Add Pagination
15:08
94
Get & Display Song Lyrics
10:09
95
Project Intro
00:52
96
Creating The Large Circle
10:02
97
Creating & Animating The Pointer
04:38
98
Breath Animation With JS Trigger
09:41
99
Project Intro
01:02
100
Creating & Styling The Page
11:16
101
Canvas Plan Outline
06:04
102
Draw Ball, Paddle & Score
11:02
103
Creating The Bricks
09:28
104
Move Paddle
12:52
105
Move Ball & Break Bricks
10:30
106
Lose & Reset Game
05:00
107
Project Intro
01:09
108
Landing Page HTML & Styling
11:08
109
Create The Countdown
12:00
110
Dynamic Year & Spinner
07:12
111
Project Intro
01:40
112
Insert List Items Into DOM
09:35
113
Scramble List Items
06:43
114
Core CSS
12:23
115
Drag & Drop Functionality
14:58
116
Check Order
05:38
117
Project Intro
01:31
118
Project UI
08:52
119
Capture Mic Input
08:10
120
Check Guessed Number
12:51
Unlock unlimited learning

Get instant access to all 119 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to 20 Web Projects With Vanilla JavaScript?

More courses by Brad Traversy

Frequently asked questions

What prerequisites are needed for this course?
While the course is suitable for all skill levels, it is recommended to have some foundational knowledge of HTML, CSS, and JavaScript. If you're a beginner, you might consider taking the Modern HTML/CSS From The Beginning or Modern JS From The Beginning courses on Udemy, which provide a comprehensive overview of these technologies.
What types of projects will I build in this course?
The course includes a variety of projects such as small games and utilities. Examples include an expense tracker and a breathing relaxation app. Each project is developed from scratch, focusing on HTML5, CSS, and JavaScript without using any frameworks or libraries.
What specific tools and APIs will be covered in this course?
You will work with several tools and APIs including the Fetch API for handling JSON data, the HTML5 Canvas, the Audio and Video APIs, and the Web Speech API for synthesis and recognition. Additionally, you will implement features like drag and drop, and manage data with Local Storage.
How does this course compare in depth to other JavaScript courses?
This course is project-focused, designed to help you understand JavaScript fundamentals through practical application. Unlike some comprehensive courses, it does not cover JavaScript frameworks or libraries, focusing instead on building projects with vanilla JavaScript, HTML5, and CSS.
What is not covered in this course?
The course does not cover JavaScript frameworks or libraries such as React, Angular, or Vue.js. It focuses solely on vanilla JavaScript, HTML5, and CSS to build projects from scratch, emphasizing the core functionalities and APIs available in the browser environment.
How much time should I expect to commit to complete this course?
The course has a total runtime of approximately 16 hours and 9 minutes, spread across 120 lessons. Each mini-project is designed to be completed within a few hours, allowing you to progress at your own pace and fit the course into your schedule.
How can the skills learned in this course benefit my career?
The skills acquired in this course, such as mastering DOM manipulation, handling events, and working with APIs, are fundamental for any web development role. Understanding how to build projects from scratch using core web technologies can strengthen your problem-solving abilities and enhance your portfolio.