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)
Paint Clone Project Overview
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures