CF

20 Web Projects With Vanilla JavaScript

16h 8m 55s
English
Paid

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

About the Authors

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.

Watch Online 120 lessons

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

Course content

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

Related courses

Frequently asked questions

What is 20 Web Projects With Vanilla JavaScript about?
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…
Who teaches 20 Web Projects With Vanilla JavaScript?
20 Web Projects With Vanilla JavaScript is taught by Brad Traversy, Udemy. You can find more courses by these instructors on the corresponding source pages.
How long is 20 Web Projects With Vanilla JavaScript?
20 Web Projects With Vanilla JavaScript contains 120 lessons with a total runtime of 16 hours 8 minutes. All lessons are available to watch online at your own pace.
Is 20 Web Projects With Vanilla JavaScript free to watch?
20 Web Projects With Vanilla JavaScript is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch 20 Web Projects With Vanilla JavaScript online?
20 Web Projects With Vanilla JavaScript is available to watch online on CourseFlix at https://courseflix.net/course/20-web-projects-with-vanilla-javascript. The page hosts every lesson with the integrated video player; no download is required.