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

Watch Online 20 Web Projects With Vanilla JavaScript

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

Make a Spotify Clone from Scratch: JavaScript PHP and MySQL

Make a Spotify Clone from Scratch: JavaScript PHP and MySQL

Sources: udemy
Do you want to become an expert in JavaScript, PHP and MySQL? Do you want to build a real music streaming site just like Spotify? If so, you’re in the right place! This course w...
14 hours 59 minutes 31 seconds
The Ultimate Web Scraping Course

The Ultimate Web Scraping Course

Sources: Adrian Horning (The Web Scraping Guy)
I have been earning a living through web scraping for over 3 years, have made over $125,000, have more than 25,000 followers on social media, and in this...
10 hours 33 minutes 19 seconds
Build Incredible Chatbots

Build Incredible Chatbots

Sources: udemy
Welcome to the most comprehensive and complete chatbot developer course. Learn concepts, tools and techniques that you will need
7 hours 51 minutes
Modern JavaScript

Modern JavaScript

Sources: ui.dev (ex. Tyler McGinnis)
This is a 'living' course which updates as JavaScript does. If you haven't taken a look at the latest versions of JavaScript the last few years you've been missing out. From obj...
3 hours 4 minutes 3 seconds