Don't want to get left behind? Learn to build with A.I. now 🤖
Back to courses

JavaScript Web Projects: 20 Projects to Build Your Portfolio

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!

30 Days

Average time students take to complete this course.

Last updated: April 2024

Course overview

This JavaScript Projects course will take you step-by-step through 20 JavaScript projects that you will be able to customize and put on your portfolio right away. You will be learning modern HTML, CSS and JavaScript best practices by building real-world projects to build your skills and confidence as a JavaScript developer.

What you'll learn

  • 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

This JavaScript Projects course is focused on efficiency. You never spend time on confusing, out-of-date, incomplete tutorials anymore.

Instead, we'll push you to go from an absolute beginner in JavaScript to someone that is able to confidently build professional, modern JavaScript apps on your own using all the features of HTML5, CSS3 and JavaScript.

We'll take you from absolute beginner to having a top-tier portfolio so that you can get hired as a developer at your dream company or by dream clients as a freelance developer.

Graduates of Zero To Mastery are now working at Google, Tesla, Amazon, Apple, IBM, Uber, Facebook, Shopify + other top tech companies (seriously, google it. Check reddit. Look on Youtube).

They are also working as top freelancers getting paid while working remotely around the world.

This can be you.

By enrolling today, you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors.

Active. Thriving. Supportive. Helpful. Friendly. Motivating. Essential.

These are just a few of the words students use to describe the ZTM Discord which is also one of the biggest and most active developer communities on Discord.

Most importantly, you will learn from industry experts that have actual real-world experience working with JavaScript and building large-scale apps for companies in Toronto And Silicon Valley.

Want to one day learn React, Angular, Vue JS, Node.js, Svelte, or any other toolchain of a modern developer?

Well then learning JavaScript fundamentals first is key. Learning JavaScript is an investment that will pay off for many years to come.

By solidifying your JavaScript knowledge and being able to build apps without crutches like libraries and frameworks, you will future-proof yourself and maximize your income.

Here's the truth: It’s easy to find free JavaScript projects to work on online. You can copy and paste code. You can watch YouTube videos. That’s simple (and free).

But this course is different.

Not only will you build modern projects using the latest features of JavaScript (and browser APIs) but we are also going do a Code Review of each project.

After we build a website, we go through the code and talk about how we can improve the code, how to improve the security, or improve the performance of your projects.

It’s like having a Senior Developer mentor you and teach you what good code means, point out the common mistakes beginners make, and how to write maintainable code.

All code is going to be provided to you so even if you don’t like to code along, you will get access to the code for the projects to put them on your portfolio right away.

So what are we building? Get ready for this:

  • Spock Rock Game - Confetti.js, Modules
  • Quote Generator - Fetch, Async/Await, Quote API, CORS
  • Picture-in-Picture - Picture-in-Picture API, Screen Capture API
  • Bookmarks App - DOM, localStorage
  • NASA APOD - Fetch, Async/Await, NASA API, DOM, localStorage
  • Animated Navigation - CSS Animations
  • Infinite Scroll - Fetch, Async/Await, Unsplash API, DOM, Scroll Event Listener
  • Countdown App - Date, localStorage
  • Music Player - HTML 5 Audio API
  • Calculator - Math Methods
  • Splash Page - DOM Basics
  • Light/Dark Mode - DOM, localStorage
  • Form Validation - DOM, Forms
  • Joke Teller - Fetch, Async/Await, Joke API, Text-to-Speech
  • Video Player - HTML 5 Video API
  • MS Paint Clone - Advanced HTML Canvas, localStorage
  • Pong Clone - Advanced HTML Canvas
  • Math Sprint Game - SetInterval, DOM, Array Methods, localStorage
  • Animated Template - Template, AOS.js
  • Drag and Drop - Drag and Drop API, localStorage

You will be using modern ES6, ES7, ES8, ES9, ES10 features to master JavaScript.

What's the bottom line?

Think of this as a full on JavaScript bootcamp to take you from a beginner to a confident programmer!

And you'll also learn common UI/UX best practices along the way to make sure your projects look great and are mobile friendly.

This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial... No!

This course will push you and challenge you to go from an absolute beginner in JavaScript to someone that is able to build projects on their own 💪.

When's the best time to get started? Today!

There's never a bad time to learn in-demand skills. But the sooner, the better. So start building JavaScript projects today by joining the ZTM Academy. You'll have a clear roadmap to developing the skills to build your own projects, get hired, and advance your career.

Join Zero To Mastery Now

What you'll build

The best way you learn is by doing. Not just watching endless tutorials. You know that or you wouldn't be interested in this course. The real-world projects that you'll get to build in this course won't just boost your skills and confidence. They'll also look great on your portfolio.

Joke Teller

Joke Teller

A JavaScript project where we create something like Siri or Alexa. Click the button and the robot will tell you a random joke!

Kanban Board

Kanban Board

Your own drag and drop productivity tool on the web. Just like Trello or Jira, we will create this productivity tool using the Drag n’ Drop API and session storage so it maintains your cards even when you refresh!

Spock Rock

Spock Rock

Everyone knows Rock Paper Scissors, but do you know Spock Rock? We will create a game in JavaScript that's a harder version of Rock Paper Scissors that you will be able to play against the computer!

JS Pong

JS Pong

This is our favourite project from the course! Learn to build the classic game of Pong from scratch all by yourself using JavaScript!

Music Player

Music Player

You will build a music player on the web just like you would see on Spotify! You will be able to play your favourite playlists with all the usual music player functionality.

+ 15 more exciting projects to practice your new skills

Join Zero To Mastery Now

Don't just take our word for it

Our courses and community have helped 1,000s of Zero To Mastery students go from zero to getting hired to levelling up their skills and advancing their careers to new heights.

Orin Fletcher

Good pace and clear explanations of everything that the instructor is doing. Also noticed the instructor is answering questions personally. Love it!

Orin Fletcher

Akshata Baliga

I'm not new to JS, HTML or CSS but I definitely learnt a lot of new concepts and tricks with each of the projects in the course. This course will also work for a beginner as Andrei and Jacinto clearly explain the concepts before writing the code.

Akshata Baliga

Wayne Mac Mavis

I love this course so much. It is so much fun! I am not finished yet but I am extremely dedicated to this course and practice every day. I would love it if you guys could make more project courses like this one. Thank you for this one!

Wayne Mac Mavis

100% recommend it to anyone who wants to learn Javascript. Jacinto's explanations are just awesome and Andrei's code reviews are also very useful! Projects are fun to build and cover a lot of functionality. Thanks a lot, Jacinto and Andrei for the course!

Abishek Kumar

Excellent and detailed explanations, good pace, and beautiful projects. Definitely recommend this course!

Daniel Badila

10 stars! This course is amazing. It has helped me a lot to become more confident with my coding. Thank you!!!

Nikolaos Panagiotis

Course curriculum

To make sure this course is a good fit for you, you can start learning to build JavaScript projects for free right now by clicking any of the PREVIEW links below.

Introduction

6 lectures

JavaScript Web Projects2:54

PREVIEW

Course Outline9:10

PREVIEW

Exercise: Meet Your Classmates and Instructor

BEGIN

The Purpose Of JavaScript4:29

PREVIEW

How To Get The Most Out Of The Course

BEGIN

How-to's: Speed up videos, Downloading videos, Subtitles

BEGIN

Developer Setup

7 lectures

Setting Up For The Course

BEGIN

OPTIONAL: MAC/LINUX Setup4:40

BEGIN

OPTIONAL: WINDOWS Setup6:58

BEGIN

Our Visual Studio Code Setup + Templates12:34

BEGIN

Developer Tools + Github Pages7:52

BEGIN

Bonus resource: Advanced JavaScript Cheatsheet

BEGIN

Unlimited Updates

BEGIN

Quote Generator

18 lectures

Quote Generator Project Overview2:01

PREVIEW

Setting Up Our Project4:59

BEGIN

Styling and HTML Elements14:27

BEGIN

Creating Beautiful Buttons6:55

BEGIN

Update to API

BEGIN

[NEW] Fetching Data With JavaScript17:29

BEGIN

Different API Option

BEGIN

[NEW] Manipulating DOM With JavaScript15:12

BEGIN

[NEW] Creating A Loader With JavaScript8:32

BEGIN

Sharing Your Projects

BEGIN

Quick Note: Upcoming Videos

BEGIN

[OPTIONAL] Fetching Data With JavaScript8:09

BEGIN

[OPTIONAL] 429 Error

BEGIN

[OPTIONAL] Build Your Own Proxy Server

BEGIN

[OPTIONAL] Manipulating DOM With JavaScript12:28

BEGIN

[OPTIONAL] Creating A Loader With JavaScript5:08

BEGIN

Code Review7:38

BEGIN

Manipulating The DOM

BEGIN

Infinity Scroll

10 lectures

Infinity Scroll Project Overview2:02

PREVIEW

Loader SVG4:48

BEGIN

Centering Elements On The Page11:19

BEGIN

Responsive Layout6:14

BEGIN

Fetching Data11:55

BEGIN

JavaScript To Display Data14:06

BEGIN

Infinite Scroll With JavaScript8:32

BEGIN

Infinite Scroll With JavaScript 211:37

BEGIN

Code Review6:24

BEGIN

Exercises: Cleaning Up The Code

BEGIN

Picture in Picture

6 lectures

Picture In Picture Project Overview8:30

PREVIEW

Setting Up Our Project6:53

BEGIN

Styling and HTML Elements10:47

BEGIN

Adding Functionality With JavaScript11:41

BEGIN

Code Review7:32

BEGIN

Endorsements On LinkedIn

BEGIN

Joke Teller

8 lectures

Joke Teller Project Overview1:15

PREVIEW

Styling and HTML Elements8:06

BEGIN

Responsive Layout and Styling9:10

BEGIN

JavaScript In The Project13:04

BEGIN

JavaScript In The Project 215:03

BEGIN

JavaScript In The Project 37:19

BEGIN

Finishing Up The Project9:17

BEGIN

Code Review8:19

BEGIN

Light & Dark Mode

8 lectures

Light Dark Mode Project Overview1:41

PREVIEW

HTML and CSS Setup13:02

BEGIN

Content In Our Project13:31

BEGIN

Toggle Theme With JavaScript11:38

BEGIN

Toggle Theme With JavaScript 212:12

BEGIN

LocalStorage To Save User Data7:04

BEGIN

Code Review7:40

BEGIN

Exercise: Making Code More Readable

BEGIN

Animated Template

6 lectures

Animated Template Project Overview1:01

PREVIEW

Setting Up Our Template6:12

BEGIN

Setting Up Our Content9:07

BEGIN

JavaScript Inside of HTML8:56

BEGIN

Animation On Scroll14:57

BEGIN

Code Review19:47

BEGIN

Navigation Nation

7 lectures

Navigation Nation Project Overview1:22

PREVIEW

Setting Up Our HTML and CSS7:10

BEGIN

Navigation UI13:03

BEGIN

Animating Menu With JavaScript13:25

BEGIN

Animations CSS10:41

BEGIN

Cleaning Up Our JavaScript11:48

BEGIN

Code Review4:40

BEGIN

Music Player

9 lectures

Music Player Project Overview1:59

PREVIEW

Setting Up Our HTML and CSS15:50

BEGIN

Coding Our Responsive UI8:17

BEGIN

JavaScript To Play Audio8:57

BEGIN

Music Player With JavaScript14:18

BEGIN

Progress Bar8:32

BEGIN

Progress Bar 210:15

BEGIN

Progress Bar 311:25

BEGIN

Code Review7:24

BEGIN

Custom Countdown

11 lectures

Custom Countdown Project Overview2:03

PREVIEW

Video Background9:58

BEGIN

Building Our UI Components11:19

BEGIN

Building Our UI Components 210:33

BEGIN

JavaScript Dates9:10

BEGIN

Form Values6:59

BEGIN

Populate Countdown UI15:31

BEGIN

setInterval And clearInterval9:11

BEGIN

Finishing Up The UI6:09

BEGIN

Caching With LocalStorage10:17

BEGIN

Code Review6:18

BEGIN

Book Keeper

10 lectures

Book Keeper Project Overview1:44

PREVIEW

Building Our UI8:42

BEGIN

Building Our UI 213:54

BEGIN

Building Our Modal16:36

BEGIN

Modals With JavaScript10:20

BEGIN

Form Validation15:02

BEGIN

localStorage And Fetch11:40

BEGIN

Building The Bookmarks11:37

BEGIN

Deleting The Bookmarks7:19

BEGIN

Code Review5:33

BEGIN

Video Player

14 lectures

Video Player Project Overview1:40

PREVIEW

Build UI - Player, Video, Mobile Responsive8:14

BEGIN

Build UI - Controls HTML, Show Controls on Hover14:41

BEGIN

Build UI - Progress Bar: Width, Hover4:45

BEGIN

Build UI - Selection, Show CSS Variables4:23

BEGIN

JS - Video Play/Pause13:03

BEGIN

JS - Progress Bar (Dynamic Width)6:45

BEGIN

JS - Populate Current Time / Duration7:59

BEGIN

JS - Progress Bar (Seek)7:36

BEGIN

JS - Volume (Slider)11:00

BEGIN

JS - Volume (Mute/Unmute)8:55

BEGIN

JS - Playback Seed4:56

BEGIN

JS - Fullscreen7:12

BEGIN

Code Review6:22

BEGIN

Form Validator

10 lectures

Form Validator Project Overview3:11

PREVIEW

Build UI - HTML Forms, Input, Labels12:55

BEGIN

Build UI - CSS (Body, Container), Google Fonts7:42

BEGIN

Build UI - Form CSS10:41

BEGIN

HTML Form Validation13:44

BEGIN

JS - Validate Form11:29

BEGIN

JS - Validate Passwords, Store Data14:12

BEGIN

Code Review6:53

BEGIN

How to Store User Passwords

BEGIN

Exercise: Imposter Syndrome2:55

BEGIN

Spok Rock Game

10 lectures

Spock Rock Project Overview2:29

PREVIEW

Build UI - Player Containers, FontAwesome9:33

BEGIN

Build UI - CSS, Google Fonts15:21

BEGIN

JS - Setup, Player Selection13:35

BEGIN

JS - Computer Selection9:48

BEGIN

JS - Check Results12:37

BEGIN

JS - Reset All5:18

BEGIN

JS - Confetti Functionality9:42

BEGIN

JS - Module Refactoring12:05

BEGIN

Code Review13:16

BEGIN

NASA APOD

12 lectures

NASA APOD Project Overview2:11

PREVIEW

Asset - Custom Loading Animation7:52

BEGIN

Build UI - Navigation11:48

BEGIN

Build UI - Card with Image13:46

BEGIN

JS - NASA API Documentation/Fetch10:02

BEGIN

JS - Create DOM Elements21:11

BEGIN

JS - Save Favourites15:44

BEGIN

JS - Favorites DOM Elements10:07

BEGIN

JS - Delete Favorites7:07

BEGIN

JS - Navigation, Loader12:22

BEGIN

Code Review7:43

BEGIN

Optional: Declarative vs Imperative6:18

BEGIN

Math Sprint Game

12 lectures

Math Sprint Game Project Overview2:19

PREVIEW

Build UI - Splash Page, Countdown12:50

BEGIN

Build UI - Game Page, Score Page8:33

BEGIN

JS - Radio Selection & Functionality15:41

BEGIN

JS - Countdown Page6:35

BEGIN

JS - Generate Random Equations13:28

BEGIN

JS - Equations to DOM7:49

BEGIN

JS - Automatic Scrolling & Player Input8:05

BEGIN

JS - Check Score with Timing Events16:40

BEGIN

JS - Score Page13:27

BEGIN

JS - Best Scores in Local Storage18:25

BEGIN

Code Review12:19

BEGIN

Drag n' Drop

10 lectures

Drag n' Drop Project Overview2:13

PREVIEW

Build UI - Flexbox, Custom Scrollbar12:53

BEGIN

JS - localStorage9:40

BEGIN

JS - Update DOM9:01

BEGIN

JS - Drag and Drop API16:37

BEGIN

JS - Rebuild Arrays10:00

BEGIN

JS - Add Item13:07

BEGIN

JS - Delete Item16:54

BEGIN

JS - Update Item7:29

BEGIN

Code Review9:09

BEGIN

Calculator

10 lectures

Calculator Project Overview1:28

PREVIEW

Build UI - Calculator, Display, Buttons8:12

BEGIN

Build UI - Display CSS11:44

BEGIN

Build UI - CSS Grid5:54

BEGIN

Build UI - Button CSS9:28

BEGIN

JS - Adding Event Listeners12:47

BEGIN

JS - Reset Value, Add Decimal5:52

BEGIN

JS - Operator Functionality12:06

BEGIN

JS - Calculation12:18

BEGIN

Code Review4:49

BEGIN

Splash Page

8 lectures

Splash Page Project Overview1:21

PREVIEW

Initial Setup - Figma12:57

BEGIN

Build UI - Adding Image Assets9:24

BEGIN

Build UI - Styling Image Assets9:17

BEGIN

Build UI - Adding Custom Backgrounds9:33

BEGIN

JS - Background Controls11:38

BEGIN

Code Review8:27

BEGIN

Exercise: Memory Leaks And Heap Snapshots

BEGIN

Paint Clone

7 lectures

Paint Clone Project Overview2:42

PREVIEW

Build UI - Custom Slider, JSColor, Mobile Message9:49

BEGIN

JS - Canvas Setup12:21

BEGIN

JS - Color/Range Inputs14:08

BEGIN

JS - Drawing on Canvas11:29

BEGIN

JS - Store Drawing Data6:38

BEGIN

JS - localStorage & Downloading an Image12:02

BEGIN

Pong

4 lectures

Pong Project Overview2:03

PREVIEW

JS - Create Canvas15:50

BEGIN

JS - RequestAnimationFrame17:44

BEGIN

JS - Game Over13:14

BEGIN

Where To Go From Here?

9 lectures

Sharing Your Projects

BEGIN

JavaScript And Beyond10:50

BEGIN

Thank You!1:17

BEGIN

Review This Course!

BEGIN

Learning Guideline

BEGIN

LinkedIn Endorsements

BEGIN

Become An Alumni

BEGIN

Coding Challenges

BEGIN

Become a ZTM Ambassador ➡ Refer new students. Earn cash.

BEGIN

Appendix: How JavaScript Works

18 lectures

Quick Note: Upcoming Videos

BEGIN

JavaScript Engine5:28

BEGIN

Exercise: Javascript Engine0:56

BEGIN

Inside the Engine4:05

BEGIN

Exercise: JS Engine For All2:33

BEGIN

Interpreters and Compilers6:21

BEGIN

Inside the V8 Engine8:56

BEGIN

Comparing Other Languages4:15

BEGIN

Writing Optimized Code8:53

BEGIN

WebAssembly3:15

BEGIN

Call Stack and Memory Heap14:37

BEGIN

Stack Overflow3:21

BEGIN

Garbage Collection4:30

BEGIN

Memory Leaks6:34

BEGIN

Single Threaded1:58

BEGIN

Exercise: Issue With Single Thread2:40

BEGIN

Javascript Runtime14:07

BEGIN

Node.js6:27

BEGIN

Appendix: Git, Github, Open Source and Building a Portfolio

10 lectures

Quick Note: Upcoming Videos

BEGIN

Git + Github Part 117:40

BEGIN

Github Update: Master --> Main

BEGIN

Git + Github Part 216:52

BEGIN

Setting Up Github9:39

BEGIN

Contributing To Open Source14:44

BEGIN

Contributing To Open Source 29:42

BEGIN

Exercise: Contribute To Our Open Source

BEGIN

Installing Node

BEGIN

Create A Portfolio15:10

BEGIN

Appendix: CORS Issues

1 lectures

Solving CORS Issues With Heroku Server10:46

BEGIN

Meet your instructors

Your JavaScript instructors aren’t just experts with years of real-world professional experience. They have been in your shoes. They make learning fun. They make complex topics feel simple. They will motivate you. They will push you. And they go above and beyond to help you succeed.

Jacinto Wong

Hi, I'm Jacinto Wong!

Jacinto, a Zero To Mastery Academy instructor, is a self-taught developer working as a Senior Developer. Having been in your shoes, he knows it is possible to upgrade your skills and switch careers without spending excessive time or money.

SEE MY BIO & COURSES

Jacinto Wong

Senior Developer & Designer

Andrei Neagoie

Hi, I'm Andrei Neagoie!

Andrei, lead instructor of Zero To Mastery Academy, has taught 1,000,000+ students worldwide how to code and get hired. ZTM grads work for world-class companies like Apple, Google, Amazon, Tesla, IBM, Facebook, Shopify and many more.

SEE MY BIO & COURSES

Andrei Neagoie

Senior Software Engineer

Frequently asked questions

Are there any prerequisites for this course?

  • Only a basic understanding of HTML & CSS & JavaScript. Don't have that? No problem, you'll also get access to our Coding Bootcamp which will teach you everything you need to know
  • A computer (Linux/Windows/Mac) with an internet connection

Who is this course for?

  • Anyone who feels like they can't build JavaScript projects on their own
  • Anyone who wants to become a Web Developer, switch careers, or become a freelance JavaScript Developer
  • Developers who know the basics of JavaScript but want to deepen their knowledge and improve their skills
  • Programmers who want to learn frontend web development
  • Anyone that needs to add more projects to their portfolio or resume

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Can I use the course projects in my portfolio?

Yes, you’d be crazy not to! That's exactly what this course is all about. Building modern, real-world projects that you can customize to build a portfolio that will actually get you interviews and clients!

All projects are downloadable and ready to use the minute you join.

Many of our students tell us the projects they built while following along with our courses were what got them interviews and because they built the projects themselves, they could confidently explain and walk through their work during the interview.

You know what that means? Job offer!

Are there subtitles?

Yes! We have high quality subtitles in 11 different languages: English, Spanish, French, German, Dutch, Romanian, Arabic, Hindi, Portuguese, Indonesian, and Japanese.

You can even adjust the text size, color, background and more so that the subtitles are perfect just for you!

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

Invest in a better you. For less than a coffee a day.

Choose your currency:
$ USD US Dollar
Lifetime
100% OFF$999
$999
Only pay once, ever
You're serious about advancing your career and never getting left behind
Start Learning Now

MOST POPULAR

Save 40% vs. monthly (that's $189 a year)
Annual
100% OFF$279 / year
$23 / month
$279 / year
You're committed to getting hired and starting a career in tech
Start Learning Now
Monthly
100% OFF$39 / month
$39 / month
You're ready to upskill and advance your career
Start Learning Now

Every ZTM membership includes:

Unlimited access to all courses, projects + workshops, and career paths
Access to our private Discord with 400,000+ members
Access to our private LinkedIn networking group
Custom ZTM course completion certificates
Live career advice sessions with mentors, every month
Full access to all future courses, content, and features
100% RISK FREE

We know you'll love ZTM. That's why we provide a no hassle, 30-day money back guarantee.