20 Web Projects With Vanilla JavaScript

20 Web Projects With Vanilla JavaScript

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 16 Hours | 6.61 GB

Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries)

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.

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!!

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
  • Beginner Friendly
Table of Contents

Introduction
1 Welcome To The Course
2 Getting Setup
3 The Code

Form Validator Intro Project
4 Project Intro
5 Project HTML
6 Project CSS
7 Adding Simple Validation
8 Check Required & Refactor
9 Check Length, Email & Password Match

Movie Seat Booking DOM & Local Storage
10 Project Intro
11 Project HTML
12 Project CSS
13 Selecting Movie & Seats From UI
14 Save Data To Local Storage
15 Populate UI With Saved Data

Custom Video Player HTML5 Video API
16 Project Intro
17 Project HTML
18 Project CSS
19 Play, Pause & Stop
20 Video Progress Bar & Timestamp

Exchange Rate Calculator Fetch & JSON Intro
21 Project Intro
22 Project HTML
23 Project CSS
24 A Look at JSON & Fetch
25 Fetch Rates & Update DOM

DOM Array Methods forEach, map, filter, sort, reduce
26 Project Intro
27 Project UI
28 Generate Random Users – Fetch w AsyncAwait
29 Output Users – forEach() & DOM Methods
30 Double Money – map()
31 Sort By Richest – sort()
32 Show Millionaires – filter()
33 Calculate Wealth – reduce()

Menu Slider & Modal DOM & CSS
34 Project Intro
35 Project HTML
36 Navbar Styling
37 Header & Modal Styling
38 Menu & Modal Toggle

Hangman Game DOM, SVG, Events
39 Project Intro
40 Draw Hangman With SVG
41 Main Styling
42 Popup & Notification Styling
43 Display Words Function
44 Letter Press Event Handler
45 Wrong Letters & Play Again

Meal Finder Fetch & MealDB API
46 Project Intro
47 Project HTML & Base CSS
48 Search & Display Meals From API
49 Show Single Meal Page
50 Display Random Meal & Single Meal CSS

Expense Tracker Array Methods & Local Storage
51 Project Intro
52 Project HTML
53 Project CSS
54 Show Transaction Items
55 Display Balance, Income & Expense
56 Add & Delete Transactions
57 Persist To Local Storage

Music Player HTML5 Audio API
58 Project Intro
59 Project HTML
60 Music Container & Rotate Animation
61 Music Info Styling & Animation
62 Load, Play & Pause Song
63 Next, Prev Song & Progress

Infinite Scroll Posts Fetch, AsyncAwait, CSS Loader
64 Project Intro
65 Project HTML
66 Project CSS & Loader Animation
67 Get Initial Posts From API
68 Add Infinite Scrolling
69 Filter Fetched Posts

Typing Game DOM, Intervals, Events
70 Project Intro
71 Project HTML
72 Project CSS
73 Word Match & Score
74 Adding The Timer
75 Difficulty Setting

Speech Text Reader Speech Synthesis
76 Project Intro
77 HTML & Output Speech Boxes
78 Project CSS
79 Get Speech Voices
80 Speech Buttons
81 Change Voice & Custom Text Box

Memory Cards CSS Effects, Local Storage
82 Project Intro
83 Project HTML
84 Basic Card Styling
85 Card Rotation & Slide Effect
86 Add Card Container & Form Styling
87 Create Cards & Flip Effect With JS
88 Prev & Next Button Functionality
89 Set & Get Card Data From Local Storage

Lyrics Search App Fetch, Pagination, Lyrics.ovh API
90 Project Intro
91 Project HTML & Header Stying
92 Form Styling
93 Fetching Songs & Artists
94 Update DOM & Add Pagination
95 Get & Display Song Lyrics

Relaxer App CSS Animations, setTimeout
96 Project Intro
97 Creating The Large Circle
98 Creating & Animating The Pointer
99 Breath Animation With JS Trigger

Breakout Game HTML5 Canvas API
100 Project Intro
101 Creating & Styling The Page
102 Canvas Plan Outline
103 Draw Ball, Paddle & Score
104 Creating The Bricks
105 Move Paddle
106 Move Ball & Break Bricks
107 Lose & Reset Game

New Year Countdown DOM, Date & Time
108 Project Intro
109 Landing Page HTML & Styling
110 Create The Countdown
111 Dynamic Year & Spinner

Sortable List Drag & Drop API
112 Project Intro
113 Insert List Items Into DOM
114 Scramble List Items
115 Core CSS
116 Drag & Drop Functionality
117 Check Order

Speak Number Guessing Game Speech Recognition
118 Project Intro
119 Project UI
120 Capture Mic Input
121 Check Guessed Number