20 Web Projects With Vanilla JavaScript

Course Curriculum

Chapter 1: Introduction

Lecture 1: Welcome To The Course

Lecture 2: Getting Setup

Lecture 3: The Code

Chapter 2: 1: Form Validator | Intro Project

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: Adding Simple Validation

Lecture 5: Check Required & Refactor

Lecture 6: Check Length, Email & Password Match

Chapter 3: 2: Movie Seat Booking | DOM & Local Storage

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: Selecting Movie & Seats From UI

Lecture 5: Save Data To Local Storage

Lecture 6: Populate UI With Saved Data

Chapter 4: 3: Custom Video Player | HTML5 Video API

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: Play, Pause & Stop

Lecture 5: Video Progress Bar & Timestamp

Chapter 5: 4: Exchange Rate Calculator | Fetch & JSON Intro

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: A Look at JSON & Fetch

Lecture 5: Fetch Rates & Update DOM

Chapter 6: 5: DOM Array Methods | forEach, map, filter, sort, reduce

Lecture 1: Project Intro

Lecture 2: Project UI

Lecture 3: Generate Random Users – Fetch w/ Async/Await

Lecture 4: Output Users – forEach() & DOM Methods

Lecture 5: Double Money – map()

Lecture 6: Sort By Richest – sort()

Lecture 7: Show Millionaires – filter()

Lecture 8: Calculate Wealth – reduce()

Chapter 7: 6: Menu Slider & Modal | DOM & CSS

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Navbar Styling

Lecture 4: Header & Modal Styling

Lecture 5: Menu & Modal Toggle

Chapter 8: 7: Hangman Game | DOM, SVG, Events

Lecture 1: Project Intro

Lecture 2: Draw Hangman With SVG

Lecture 3: Main Styling

Lecture 4: Popup & Notification Styling

Lecture 5: Display Words Function

Lecture 6: Letter Press Event Handler

Lecture 7: Wrong Letters & Play Again

Chapter 9: 8: Meal Finder | Fetch & MealDB API

Lecture 1: Project Intro

Lecture 2: Project HTML & Base CSS

Lecture 3: Search & Display Meals From API

Lecture 4: Show Single Meal Page

Lecture 5: Display Random Meal & Single Meal CSS

Chapter 10: 9: Expense Tracker | Array Methods & Local Storage

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: Show Transaction Items

Lecture 5: Display Balance, Income & Expense

Lecture 6: Add & Delete Transactions

Lecture 7: Persist To Local Storage

Chapter 11: 10: Music Player | HTML5 Audio API

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Music Container & Rotate Animation

Lecture 4: Music Info Styling & Animation

Lecture 5: Load, Play & Pause Song

Lecture 6: Next, Prev Song & Progress

Chapter 12: 11: Infinite Scroll Posts | Fetch, Async/Await, CSS Loader

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS & Loader Animation

Lecture 4: Get Initial Posts From API

Lecture 5: Add Infinite Scrolling

Lecture 6: Filter Fetched Posts

Chapter 13: 12: Typing Game | DOM, Intervals, Events

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Project CSS

Lecture 4: Word Match & Score

Lecture 5: Adding The Timer

Lecture 6: Difficulty Setting

Chapter 14: 13: Speech Text Reader | Speech Synthesis

Lecture 1: Project Intro

Lecture 2: HTML & Output Speech Boxes

Lecture 3: Project CSS

Lecture 4: Get Speech Voices

Lecture 5: Speech Buttons

Lecture 6: Change Voice & Custom Text Box

Chapter 15: 14: Memory Cards | CSS Effects, Local Storage

Lecture 1: Project Intro

Lecture 2: Project HTML

Lecture 3: Basic Card Styling

Lecture 4: Card Rotation & Slide Effect