Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

JavaScript Web Projects: 20 Projects to Build Your Portfolio

via Zero To Mastery

Go to class Write review

Overview

Build 20 JavaScript portfolio projects using modern HTML5, CSS3, and JavaScript alongside two industry experts. These responsive, mobile friendly JavaScript projects will take your portfolio and resume to the next level!
  • How to build 20 JavaScript projects using pure JavaScript, HTML5, and CSS3 (with all code provided)
  • Go from a total beginner to a confident JavaScript developer
  • Learn UI/UX practices to build responsive and mobile first web applications
  • Asynchronous programming with AJAX, Fetch API, Promises & Async + Await
  • Write clean, maintainable and performant JavaScript code
  • Work with Web APIs (localStorage, DOM, + more)
  • Modern HTML5 (Canvas, Video, Audio + more)
  • Modern CSS3 (Animations, Transitions, Variables + more)
  • Avoid common mistakes other JavaScript programmers and beginners make
  • 20 beautiful and customizable, real-world frontend applications to make your portfolio and resume standout

Syllabus

  •   Introduction
    • JavaScript Web Projects
    • Course Outline
    • Exercise: Meet Your Classmates and Instructor
    • The Purpose Of JavaScript
    • How To Get The Most Out Of The Course
    • How-to's: Speed up videos, Downloading videos, Subtitles
  •   Developer Setup
    • Setting Up For The Course
    • OPTIONAL: MAC/LINUX Setup
    • OPTIONAL: WINDOWS Setup
    • Our Visual Studio Code Setup + Templates
    • Developer Tools + Github Pages
    • Bonus resource: Advanced JavaScript Cheatsheet
    • Unlimited Updates
  •   Quote Generator
    • Quote Generator Project Overview
    • Setting Up Our Project
    • Styling and HTML Elements
    • Creating Beautiful Buttons
    • Update to API
    • [NEW] Fetching Data With JavaScript
    • Different API Option
    • [NEW] Manipulating DOM With JavaScript
    • [NEW] Creating A Loader With JavaScript
    • Sharing Your Projects
    • Quick Note: Upcoming Videos
    • [OPTIONAL] Fetching Data With JavaScript
    • [OPTIONAL] 429 Error
    • [OPTIONAL] Build Your Own Proxy Server
    • [OPTIONAL] Manipulating DOM With JavaScript
    • [OPTIONAL] Creating A Loader With JavaScript
    • Code Review
    • Manipulating The DOM
  •   Infinity Scroll
    • Infinity Scroll Project Overview
    • Loader SVG
    • Centering Elements On The Page
    • Responsive Layout
    • Fetching Data
    • JavaScript To Display Data
    • Infinite Scroll With JavaScript
    • Infinite Scroll With JavaScript 2
    • Code Review
    • Exercises: Cleaning Up The Code
  •   Picture in Picture
    • Picture In Picture Project Overview
    • Setting Up Our Project
    • Styling and HTML Elements
    • Adding Functionality With JavaScript
    • Code Review
    • Endorsements On LinkedIn
  •   Joke Teller
    • Joke Teller Project Overview
    • Styling and HTML Elements
    • Responsive Layout and Styling
    • JavaScript In The Project
    • JavaScript In The Project 2
    • JavaScript In The Project 3
    • Finishing Up The Project
    • Code Review
  •   Light & Dark Mode
    • Light Dark Mode Project Overview
    • HTML and CSS Setup
    • Content In Our Project
    • Toggle Theme With JavaScript
    • Toggle Theme With JavaScript 2
    • LocalStorage To Save User Data
    • Code Review
    • Exercise: Making Code More Readable
  •   Animated Template
    • Animated Template Project Overview
    • Setting Up Our Template
    • Setting Up Our Content
    • JavaScript Inside of HTML
    • Animation On Scroll
    • Code Review
  •   Navigation Nation
    • Navigation Nation Project Overview
    • Setting Up Our HTML and CSS
    • Navigation UI
    • Animating Menu With JavaScript
    • Animations CSS
    • Cleaning Up Our JavaScript
    • Code Review
  •   Music Player
    • Music Player Project Overview
    • Setting Up Our HTML and CSS
    • Coding Our Responsive UI
    • JavaScript To Play Audio
    • Music Player With JavaScript
    • Progress Bar
    • Progress Bar 2
    • Progress Bar 3
    • Code Review
  •   Custom Countdown
    • Custom Countdown Project Overview
    • Video Background
    • Building Our UI Components
    • Building Our UI Components 2
    • JavaScript Dates
    • Form Values
    • Populate Countdown UI
    • setInterval And clearInterval
    • Finishing Up The UI
    • Caching With LocalStorage
    • Code Review
  •   Book Keeper
    • Book Keeper Project Overview
    • Building Our UI
    • Building Our UI 2
    • Building Our Modal
    • Modals With JavaScript
    • Form Validation
    • localStorage And Fetch
    • Building The Bookmarks
    • Deleting The Bookmarks
    • Code Review
  •   Video Player
    • Video Player Project Overview
    • Build UI - Player, Video, Mobile Responsive
    • Build UI - Controls HTML, Show Controls on Hover
    • Build UI - Progress Bar: Width, Hover
    • Build UI - Selection, Show CSS Variables
    • JS - Video Play/Pause
    • JS - Progress Bar (Dynamic Width)
    • JS - Populate Current Time / Duration
    • JS - Progress Bar (Seek)
    • JS - Volume (Slider)
    • JS - Volume (Mute/Unmute)
    • JS - Playback Seed
    • JS - Fullscreen
    • Code Review
  •   Form Validator
    • Form Validator Project Overview
    • Build UI - HTML Forms, Input, Labels
    • Build UI - CSS (Body, Container), Google Fonts
    • Build UI - Form CSS
    • HTML Form Validation
    • JS - Validate Form
    • JS - Validate Passwords, Store Data
    • Code Review
    • How to Store User Passwords
    • Exercise: Imposter Syndrome
  •   Spok Rock Game
    • Spock Rock Project Overview
    • Build UI - Player Containers, FontAwesome
    • Build UI - CSS, Google Fonts
    • JS - Setup, Player Selection
    • JS - Computer Selection
    • JS - Check Results
    • JS - Reset All
    • JS - Confetti Functionality
    • JS - Module Refactoring
    • Code Review
  •   NASA APOD
    • NASA APOD Project Overview
    • Asset - Custom Loading Animation
    • Build UI - Navigation
    • Build UI - Card with Image
    • JS - NASA API Documentation/Fetch
    • JS - Create DOM Elements
    • JS - Save Favourites
    • JS - Favorites DOM Elements
    • JS - Delete Favorites
    • JS - Navigation, Loader
    • Code Review
    • Optional: Declarative vs Imperative
  •   Math Sprint Game
    • Math Sprint Game Project Overview
    • Build UI - Splash Page, Countdown
    • Build UI - Game Page, Score Page
    • JS - Radio Selection & Functionality
    • JS - Countdown Page
    • JS - Generate Random Equations
    • JS - Equations to DOM
    • JS - Automatic Scrolling & Player Input
    • JS - Check Score with Timing Events
    • JS - Score Page
    • JS - Best Scores in Local Storage
    • Code Review
  •   Drag n' Drop
    • Drag n' Drop Project Overview
    • Build UI - Flexbox, Custom Scrollbar
    • JS - localStorage
    • JS - Update DOM
    • JS - Drag and Drop API
    • JS - Rebuild Arrays
    • JS - Add Item
    • JS - Delete Item
    • JS - Update Item
    • Code Review
  •   Calculator
    • Calculator Project Overview
    • Build UI - Calculator, Display, Buttons
    • Build UI - Display CSS
    • Build UI - CSS Grid
    • Build UI - Button CSS
    • JS - Adding Event Listeners
    • JS - Reset Value, Add Decimal
    • JS - Operator Functionality
    • JS - Calculation
    • Code Review
  •   Splash Page
    • Splash Page Project Overview
    • Initial Setup - Figma
    • Build UI - Adding Image Assets
    • Build UI - Styling Image Assets
    • Build UI - Adding Custom Backgrounds
    • JS - Background Controls
    • Code Review
    • Exercise: Memory Leaks And Heap Snapshots
  •   Paint Clone
    • Paint Clone Project Overview
    • Build UI - Custom Slider, JSColor, Mobile Message
    • JS - Canvas Setup
    • JS - Color/Range Inputs
    • JS - Drawing on Canvas
    • JS - Store Drawing Data
    • JS - localStorage & Downloading an Image
  •   Pong
    • Pong Project Overview
    • JS - Create Canvas
    • JS - RequestAnimationFrame
    • JS - Game Over
  •   Where To Go From Here?
    • Sharing Your Projects
    • JavaScript And Beyond
    • Thank You!
    • Review This Course!
    • Learning Guideline
    • LinkedIn Endorsements
    • Become An Alumni
    • Coding Challenges
    • Become a ZTM Ambassador âž¡ Refer new students. Earn cash.
  •   Appendix: How JavaScript Works
    • Quick Note: Upcoming Videos
    • JavaScript Engine
    • Exercise: Javascript Engine
    • Inside the Engine
    • Exercise: JS Engine For All
    • Interpreters and Compilers
    • Inside the V8 Engine
    • Comparing Other Languages
    • Writing Optimized Code
    • WebAssembly
    • Call Stack and Memory Heap
    • Stack Overflow
    • Garbage Collection
    • Memory Leaks
    • Single Threaded
    • Exercise: Issue With Single Thread
    • Javascript Runtime
    • Node.js
  •   Appendix: Git, Github, Open Source and Building a Portfolio
    • Quick Note: Upcoming Videos
    • Git + Github Part 1
    • Github Update: Master --> Main
    • Git + Github Part 2
    • Setting Up Github
    • Contributing To Open Source
    • Contributing To Open Source 2
    • Exercise: Contribute To Our Open Source
    • Installing Node
    • Create A Portfolio
  •   Appendix: CORS Issues
    • Solving CORS Issues With Heroku Server

Taught by

Jacinto Wong and Andrei Neagoie

Reviews

Start your review of JavaScript Web Projects: 20 Projects to Build Your Portfolio

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.