20 Web Projects With Vanilla JavaScript

16h 8m 55s
English
Paid

Course description

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.

Read more about the course

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:

  • Create Layouts & UI's With HTML/CSS ( No CSS Frameworks )

  • CSS Animations (Transitions, Keyframes, etc With JS Triggers)

  • JavaScript Fundamentals

  • DOM Selection & Manipulation

  • JavaScript Events (Forms, buttons, scrolling, etc)

  • Fetch API & JSON

  • HTML5 Canvas

  • The Audio & Video API

  • Drag & Drop

  • Web Speech API (Syth & Recognition)

  • Working with Local Storage

  • High Order Array Methods - forEach, map, filter, reduce, sort

  • setTimout, setInterval

  • Arrow Functions

  • and More!!                                                                                                                                                                                                        Requirements:

  • Basic knowledge in HTML, CSS & JavaScript
Who this course is for:
  • Anyone that wants to build some fun and easy to intermediate projects

What you'll learn:

  • Build 20 Frontend Projects From Scratch
  • No JS or CSS Frameworks
  • Modern JavaScript (ES6+) - Arrows, Fetch, Promises, etc
  • DOM Manipulation & Events
  • Animations With CSS & JavaScript
  • Fetch & JSON With 3rd Party API's
  • HTML5 Canvas, Speech API, Audio & Video

Watch Online

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Testing JavaScript with Kent C. Dodds

Testing JavaScript with Kent C. Dodds

Sources: Kent C. Dodds
This course will apply the four-layer testing method to a React application, but this foundational strategy can be applied across any JavaScript framework: Angular, Vue, legacy ...
14 hours 11 minutes 26 seconds
50 Projects In 50 Days - HTML, CSS & JavaScript

50 Projects In 50 Days - HTML, CSS & JavaScript

Sources: udemy, Brad Traversy
This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50 mini projects in HT...
18 hours 13 minutes 45 seconds