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
I started coding in 2007 at the age of 26. I became a full-time educator & content creator in 2016. I show people that they don't have to be a straight A student or a genius to learn to code. I break down complex concepts by showing you how to implement them in project-based courses and tutorials.

udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

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