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!
What you'll learn
- ✓20 projects with pure JavaScript, HTML5, CSS3 with all code provided
- ✓Learn UI/UX practices to build responsive and mobile first web applications
- ✓Write clean, maintainable and performant Javascript code
- ✓Modern HTML5 (Canvas, Video, Audio + more)
- ✓Avoid common mistakes other JavaScript programmers and beginners make
- ✓Go from a total beginner to a confident JavaScript developer
- ✓Asynchronous programming with AJAX, Fetch API, Promises & Async + Await
- ✓Work with Web APIs (localStorage, DOM, + more)
- ✓Modern CSS3 (Animations, Transitions, Variables + more)
- ✓Build 20 beautiful and customizable, real-world frontend applications
Meet your instructors
Hi! I'm Andrei.
Senior Software Developer turned Instructor, Founder of ZTM
Andrei is the instructor of some of the highest rated programming courses on the web. Some of his students (500,000+ in the past few years) now work for some of the biggest tech companies around the world like Apple, Google, Amazon, Tesla, IBM, Shopify and many more.
He has worked as a Senior Software Developer in Silicon Valley and Toronto for many years and is now taking all that he has learned to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life.
Hi! I'm Jacinto.
Senior Software Developer and Instructor
Jacinto has 15 years of web design experience and is now working as a Senior Developer for the top broadcasting company in Canada.
As a self-taught developer himself, Jacinto started from zero knowledge and learned enough to land a Senior Developer job after only 4 months working through online courses. Having been in your shoes, he knows it is possible to upgrade your skills and switch careers without spending excessive time or money.
He is now dedicating his time to help make that happen for people just like you.
Don't take our word for it
Daniel Badila
Excellent and detailed explanations, good pace, and beautiful projects. Recommend this course!
Wayne Mac Mavis
I love this course so much. It is so much fun! I am no where near complete but I am extremely dedicated to this course and practice every day. I would love it if you guys could make more project courses. Thank you for this one!
Orin Fletcher
Good pace and clear explanations of everything that instructor is doing. Also noticed the instructor is answering questions in Q&A personally. Love it.
Nikolaos Panagiotis
10 stars! This course is amazing and it has helped me a lot to become more confident with my coding!!! Thank you
Abishek Kumar
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!
Akshata Baliga
Just like of all Andrei's other courses, it's a great course! It's detailed, and every project is fun to work on. 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. I can see that this course will work for a beginner as well as Andrei and Jacinto clearly explain the concepts before writing the code.
Why Zero To Mastery is right for you
With so many online resources available, it can be paralyzing not only figuring out where to start but more importantly which courses will actually teach you the skills you need to get hired.
That’s why the Zero To Mastery Academy exists, to provide industry-leading courses and content to teach you the relevant skills you need to advance your career and get you hired at some of the top companies in the world.
Join now to get complete access to this course and all others for only $23/month.
Course Curriculum
To make sure this course is a good fit for you, watch the first lecture for all 20 JavaScript Projects right now by clicking on the PREVIEW links below.
Course Curriculum
- Quote Generator Project Overview (2:01)
- Setting Up Our Project (4:59)
- Styling and HTML Elements (14:27)
- Creating Beautiful Buttons (6:55)
- [NEW] Fetching Data With JavaScript (17:29)
- [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
- 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)
- Exercises: Cleaning Up The Code
- 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)
- Video Player Project Overview (1:40)
- 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 Seed (4:56)
- JS - Fullscreen (7:12)
- Code Review (6:22)
- 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 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 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 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)
- 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)
- Quick Note: Upcoming Videos
- JavaScript Engine (5:28)
- Exercise: Javascript Engine (0:56)
- Inside the Engine (4:05)
- Exercise: JS Engine For All (2:33)
- Interpreters and Compilers (6:21)
- Inside the V8 Engine (8:56)
- Comparing Other Languages (4:15)
- Writing Optimized Code (8:53)
- WebAssembly (3:15)
- Call Stack and Memory Heap (14:37)
- Stack Overflow (3:21)
- Garbage Collection (4:30)
- Memory Leaks (6:34)
- Single Threaded (1:58)
- Exercise: Issue With Single Thread (2:40)
- Javascript Runtime (14:07)
- Node.js (6:27)
Course Details
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.
This JavaScript Projects course is focused on efficiency. Never spend time on confusing, out-of-date, incomplete tutorials anymore. Instead, we'll push you to learn by actually building professional, modern JavaScript apps 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, JP Morgan, Facebook, Shopify + other top tech companies (seriously, google this to verify). They are also working as top freelancers getting paid while working remotely around the world. This could 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.
Most importantly, you will be learning 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 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 JavaScript projects to work on online. You can copy and paste code. You can watch YouTube videos. That’s simple (and free).
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. Think of this as a full on JavaScript bootcamp to take you from a beginner to a confident programmer! And you will also learn common UI/UX practices 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 is the best time to begin? It's today! By taking that first step right now, you are that much closer to developing the skills that get you hired and closer to your dream career.
Click Start Learning Now and we'll see you inside the course!
Answers to (at least some of) your questions
Are there any prerequisites for this course?
- Only a basic understanding of HTML & CSS & JavaScript
- Any computer and OS will work — Windows, Mac or Linux.
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 freelance as a JavaScript developer.
- New or junior developers who want to learn modern JavaScript
- Programmers who want to learn frontend web development
- Anyone that needs to add more projects to their portfolio or resume
- Developers who know the basics of JavaScript and want to deepen their knowledge
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 in our slightly biased opinion! 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!
Can I download the videos?
Definitely. You can download any and all lessons for personal use. We do everything we can to make learning easy, fun, and accessible whether that’s on your commute, on a flight or you just have limited access to good wifi.
How long does it usually take for me to build something and get hired?
Ultimately you’re the only can that can control that. However, while everyone learns at a different pace, students who put in a couple hours each day to apply what they’ve learned should be able to confidently build their own projects and start interviewing in 3-6 months. We don’t see just getting hired as the end goal though. Our advanced courses will also teach you the topics and skills you need to get promoted or hired as a senior developer.
Still have more questions specific to the Academy membership? No problem, check these out.
Live the life you want, starting now
Learning to code and becoming a developer provides endless opportunities to live the life you want. Whether that’s a high paying job with a world-class tech company, working remotely or building your own apps, the ZTM Academy will equip you with the skills and knowledge to achieve your dreams.
Our courses walk you through the entire journey of starting to learn to code to having a successful career as a developer. Along the way, you’ll not only be supported by Andrei, Jacinto and course TAs but also your peers in the exclusive Zero To Mastery community.
Join now to take the first step to change your life.