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

Who this course is for:
Anyone that wants to build some fun and easy to intermediate projects


Introduction
Welcome To The Course
Getting Setup
The Code
Form Validator | Intro Project
Project Intro
Project HTML
Project CSS
Adding Simple Validation
Check Required & Refactor
Check Length, Email & Password Match
Movie Seat Booking | DOM & Local Storage
Project Intro
Preview
Project HTML
Project CSS
Selecting Movie & Seats From UI
Save Data To Local Storage
Populate UI With Saved Data
Custom Video Player | HTML5 Video API
Project Intro
Preview
Project HTML
Project CSS
Play, Pause & Stop
Video Progress Bar & Timestamp
Exchange Rate Calculator | Fetch & JSON Intro
Project Intro
Preview
Project HTML
Project CSS
A Look at JSON & Fetch
Fetch Rates & Update DOM
DOM Array Methods | forEach, map, filter, sort, reduce
Project Intro
Preview
Project UI
Generate Random Users - Fetch w/ Async/Await
Output Users - forEach() & DOM Methods
Double Money - map()
Sort By Richest - sort()
Show Millionaires - filter()
Calculate Wealth - reduce()
Menu Slider & Modal | DOM & CSS
Project Intro
Preview
Project HTML
Navbar Styling
Header & Modal Styling
Menu & Modal Toggle
Hangman Game | DOM, SVG, Events
:48
Project Intro
Preview
Draw Hangman With SVG
Main Styling
Popup & Notification Styling
Display Words Function
Letter Press Event Handler
Wrong Letters & Play Again
Meal Finder | Fetch & MealDB API
Project Intro
Preview
Project HTML & Base CSS
Search & Display Meals From API
Show Single Meal Page
Display Random Meal & Single Meal CSS
Expense Tracker | Array Methods & Local Storage
Project Intro
Preview
Project HTML
Project CSS
Show Transaction Items
Display Balance, Income & Expense
Add & Delete Transactions
Persist To Local Storage
Music Player | HTML5 Audio API
Project Intro
Preview
Project HTML
Music Container & Rotate Animation
Music Info Styling & Animation
Load, Play & Pause Song
Next, Prev Song & Progress
Infinite Scroll Posts | Fetch, Async/Await, CSS Loader
Project Intro
Preview
Project HTML
Project CSS & Loader Animation
Get Initial Posts From API
Add Infinite Scrolling
Filter Fetched Posts
Typing Game | DOM, Intervals, Events
Project Intro
Preview
Project HTML
Project CSS
Word Match & Score
Adding The Timer
Difficulty Setting
Speech Text Reader | Speech Synthesis
Project Intro
Preview
HTML & Output Speech Boxes
Project CSS
Get Speech Voices
Speech Buttons
Change Voice & Custom Text Box
Memory Cards | CSS Effects, Local Storage
:35
Project Intro
Preview
Project HTML
Basic Card Styling
Card Rotation & Slide Effect
Add Card Container & Form Styling
Create Cards & Flip Effect With JS
Prev & Next Button Functionality
Set & Get Card Data From Local Storage
Lyrics Search App | Fetch, Pagination, Lyrics.ovh API
Project Intro
Preview
Project HTML & Header Stying
Form Styling
Fetching Songs & Artists
Update DOM & Add Pagination
Get & Display Song Lyrics
Relaxer App | CSS Animations, setTimeout
Project Intro
Preview
Creating The Large Circle
Creating & Animating The Pointer
Breath Animation With JS Trigger
Breakout Game | HTML5 Canvas API
:06
Project Intro
Preview
Creating & Styling The Page
Canvas Plan Outline
Draw Ball, Paddle & Score
Creating The Bricks
Move Paddle
Move Ball & Break Bricks
Lose & Reset Game
New Year Countdown | DOM, Date & Time
Project Intro
Preview
Landing Page HTML & Styling
Create The Countdown
Dynamic Year & Spinner
Sortable List | Drag & Drop API
Project Intro
Preview
Insert List Items Into DOM
Scramble List Items
Core CSS
Drag & Drop Functionality
Check Order
Speak Number Guessing Game | Speech Recognition
Project Intro
Preview
Project UI
Capture Mic Input
Check Guessed Number


https://www.udemy.com/course/web-projects-with-vanilla-javascript/