You are NOT signed in as a student! Your progress will not be saved and you won't see milestones on your ZTM Passport.
Make sure you are logged into
Academy
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
JavaScript Web Projects: 20 Projects to Build Your Portfolio
Introduction
JavaScript Web Projects (2:54)
Course Outline (9:10)
Exercise: Meet Your Classmates and Instructor
The Purpose Of JavaScript (4:29)
How To Get The Most Out Of The Course
ZTM Plugin + Understanding Your Video Player
Set Your Learning Streak Goal
Developer Setup
Setting Up For The Course
OPTIONAL: MAC/LINUX Setup (4:40)
OPTIONAL: WINDOWS Setup (6:58)
Our Visual Studio Code Setup + Templates (12:34)
Developer Tools + Github Pages (7:52)
Bonus Resource: Advanced JavaScript Cheatsheet
Quote Generator
Quote Generator Project Overview (2:01)
Setting Up Our Project (4:59)
Styling and HTML Elements (14:27)
Creating Beautiful Buttons (6:55)
Update to API
[NEW] Fetching Data With JavaScript (17:29)
Different API Option
[NEW] Manipulating DOM With JavaScript (15:12)
[NEW] Creating A Loader With JavaScript (8:32)
Sharing Your Projects
Quick Note: Upcoming Videos
[OPTIONAL] Fetching Data With JavaScript (8:09)
[OPTIONAL] 429 Error
[OPTIONAL] Build Your Own Proxy Server
[OPTIONAL] Manipulating DOM With JavaScript (12:28)
[OPTIONAL] Creating A Loader With JavaScript (5:08)
Code Review (7:38)
Manipulating The DOM
Let's Have Some Fun (+ Free Resources)
Infinity Scroll
Infinity Scroll Project Overview (2:02)
Loader SVG (4:48)
Centering Elements On The Page (11:19)
Responsive Layout (6:14)
Fetching Data (11:55)
JavaScript To Display Data (14:06)
Infinite Scroll With JavaScript (8:32)
Infinite Scroll With JavaScript 2 (11:37)
Code Review (6:24)
Unlimited Updates
Exercises: Cleaning Up The Code
Picture in Picture
Picture In Picture Project Overview (8:30)
Setting Up Our Project (6:53)
Styling and HTML Elements (10:47)
Adding Functionality With JavaScript (11:41)
Code Review (7:32)
Course Check-In
Joke Teller
Joke Teller Project Overview (1:15)
Styling and HTML Elements (8:06)
Responsive Layout and Styling (9:10)
JavaScript In The Project (13:04)
JavaScript In The Project 2 (15:03)
JavaScript In The Project 3 (7:19)
Finishing Up The Project (9:17)
Code Review (8:19)
Implement a New Life System
Light & Dark Mode
Light Dark Mode Project Overview (1:41)
HTML and CSS Setup (13:02)
Content In Our Project (13:31)
Toggle Theme With JavaScript (11:38)
Toggle Theme With JavaScript 2 (12:12)
LocalStorage To Save User Data (7:04)
Code Review (7:40)
Exercise: Making Code More Readable
Endorsements On LinkedIn
Animated Template
Animated Template Project Overview (1:01)
Setting Up Our Template (6:12)
Setting Up Our Content (9:07)
JavaScript Inside of HTML (8:56)
Animation On Scroll (14:57)
Code Review (19:47)
Navigation Nation
Navigation Nation Project Overview (1:22)
Setting Up Our HTML and CSS (7:10)
Navigation UI (13:03)
Animating Menu With JavaScript (13:25)
Animations CSS (10:41)
Cleaning Up Our JavaScript (11:48)
Code Review (4:40)
Music Player
Music Player Project Overview (1:59)
Setting Up Our HTML and CSS (15:50)
Coding Our Responsive UI (8:17)
JavaScript To Play Audio (8:57)
Music Player With JavaScript (14:18)
Progress Bar (8:32)
Progress Bar 2 (10:15)
Progress Bar 3 (11:25)
Code Review (7:24)
Custom Countdown
Custom Countdown Project Overview (2:03)
Video Background (9:58)
Building Our UI Components (11:19)
Building Our UI Components 2 (10:33)
JavaScript Dates (9:10)
Form Values (6:59)
Populate Countdown UI (15:31)
setInterval And clearInterval (9:11)
Finishing Up The UI (6:09)
Caching With LocalStorage (10:17)
Code Review (6:18)
Book Keeper
Book Keeper Project Overview (1:44)
Building Our UI (8:42)
Building Our UI 2 (13:54)
Building Our Modal (16:36)
Modals With JavaScript (10:20)
Form Validation (15:02)
localStorage And Fetch (11:40)
Building The Bookmarks (11:37)
Deleting The Bookmarks (7:19)
Code Review (5:33)
Video Player
Video Player Project Overview (1:40)
Video Source Updated
Build UI - Player, Video, Mobile Responsive (8:14)
Build UI - Controls HTML, Show Controls on Hover (14:41)
Build UI - Progress Bar: Width, Hover (4:45)
Build UI - Selection, Show CSS Variables (4:23)
JS - Video Play/Pause (13:03)
JS - Progress Bar (Dynamic Width) (6:45)
JS - Populate Current Time / Duration (7:59)
JS - Progress Bar (Seek) (7:36)
JS - Volume (Slider) (11:00)
JS - Volume (Mute/Unmute) (8:55)
JS - Playback Speed (4:56)
JS - Fullscreen (7:12)
Code Review (6:22)
Form Validator
Form Validator Project Overview (3:11)
Build UI - HTML Forms, Input, Labels (12:55)
Build UI - CSS (Body, Container), Google Fonts (7:42)
Build UI - Form CSS (10:41)
HTML Form Validation (13:44)
JS - Validate Form (11:29)
JS - Validate Passwords, Store Data (14:12)
Code Review (6:53)
How to Store User Passwords
Exercise: Imposter Syndrome (2:55)
Spock Rock Game
Spock Rock Project Overview (2:29)
Build UI - Player Containers, FontAwesome (9:33)
Build UI - CSS, Google Fonts (15:21)
JS - Setup, Player Selection (13:35)
JS - Computer Selection (9:48)
JS - Check Results (12:37)
JS - Reset All (5:18)
JS - Confetti Functionality (9:42)
JS - Module Refactoring (12:05)
Code Review (13:16)
NASA APOD
NASA APOD Project Overview (2:11)
Asset - Custom Loading Animation (7:52)
Build UI - Navigation (11:48)
Build UI - Card with Image (13:46)
JS - NASA API Documentation/Fetch (10:02)
JS - Create DOM Elements (21:11)
JS - Save Favourites (15:44)
JS - Favorites DOM Elements (10:07)
JS - Delete Favorites (7:07)
JS - Navigation, Loader (12:22)
Code Review (7:43)
Optional: Declarative vs Imperative (6:18)
Math Sprint Game
Math Sprint Game Project Overview (2:19)
Build UI - Splash Page, Countdown (12:50)
Build UI - Game Page, Score Page (8:33)
JS - Radio Selection & Functionality (15:41)
JS - Countdown Page (6:35)
JS - Generate Random Equations (13:28)
JS - Equations to DOM (7:49)
JS - Automatic Scrolling & Player Input (8:05)
JS - Check Score with Timing Events (16:40)
JS - Score Page (13:27)
JS - Best Scores in Local Storage (18:25)
Code Review (12:19)
Drag n' Drop
Drag n' Drop Project Overview (2:13)
Build UI - Flexbox, Custom Scrollbar (12:53)
JS - localStorage (9:40)
JS - Update DOM (9:01)
JS - Drag and Drop API (16:37)
JS - Rebuild Arrays (10:00)
JS - Add Item (13:07)
JS - Delete Item (16:54)
JS - Update Item (7:29)
Code Review (9:09)
Calculator
Calculator Project Overview (1:28)
Build UI - Calculator, Display, Buttons (8:12)
Build UI - Display CSS (11:44)
Build UI - CSS Grid (5:54)
Build UI - Button CSS (9:28)
JS - Adding Event Listeners (12:47)
JS - Reset Value, Add Decimal (5:52)
JS - Operator Functionality (12:06)
JS - Calculation (12:18)
Code Review (4:49)
Splash Page
Splash Page Project Overview (1:21)
Initial Setup - Figma (12:57)
Build UI - Adding Image Assets (9:24)
Build UI - Styling Image Assets (9:17)
Build UI - Adding Custom Backgrounds (9:33)
JS - Background Controls (11:38)
Code Review (8:27)
Exercise: Memory Leaks And Heap Snapshots
Paint Clone
Paint Clone Project Overview (2:42)
Build UI - Custom Slider, JSColor, Mobile Message (9:49)
JS - Canvas Setup (12:21)
JS - Color/Range Inputs (14:08)
JS - Drawing on Canvas (11:29)
JS - Store Drawing Data (6:38)
JS - localStorage & Downloading an Image (12:02)
Code Review (8:01)
Pong
Pong Project Overview (2:03)
JS - Create Canvas (15:50)
JS - RequestAnimationFrame (17:44)
JS - Game Over (13:14)
Code Review (5:17)
Where To Go From Here?
Sharing Your Projects
JavaScript And Beyond (10:50)
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Appendix: How JavaScript Works
Watch JavaScript Foundation Section
Appendix: Git, Github, Open Source
Watch Git, Github + Open Source Projects Section
Appendix: Building a Portfolio
Quick Note: Upcoming Videos
Installing Node
Create A Portfolio (15:10)
Appendix: CORS Issues
Solving CORS Issues With Heroku Server (10:46)
The Purpose Of JavaScript
Download