Javascript Web Projects: 20 Projects To Build Your Portfolio (updated 10/2022)

Modern HTML5, CSS3, and JavaScript to build Responsive and Mobile Friendly projects for your dream portfolio and resume!

What you'll learn

20 projects with pure JavaScript, HTML5, 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

Build 20 beautiful and customizable, real world frontend applications

Requirements

Only a basic understanding of HTML & CSS & JavaScript

Any computer and OS will work — Windows, Mac or Linux.

Description

Just updated with all modern features of HTML5, CSS3 and JavaScript! Join a live online community of over 900,000+ developers and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto with JavaScript! This course is focused on efficiency and getting you hired by building your dream portfolio so you can get a job or work as a freelancer. Never spend time on confusing, out of date, incomplete tutorials anymore! Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies (seriously, google this to verify some testimonials).Whether you want to become a freelancer, get hired, or to just advance your career, this brand new 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. Along the way, you will learn to build projects using HTML, CSS and JavaScript and truly build your skills as a JavaScript developer.Whether you want to one day learn React, Angular, Vue JS, Node.js, Svelte, or any other toolchain of a modern developer, at the end of the day, JavaScript fundamentals are key, and learning JavaScript is an investment that will pay off many years into the future. By solidifying your JavaScript knowledge and being able to build thing without crutches like libraries and frameworks, you will future proof yourself. Here is 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 in that not only de we have modern projects using the latest features of JavaScript, and browser APIs, but we also 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 finally teach you what good code means, what are the common mistakes beginners make, and how to  write maintainable code.All code is going to be provided to you, and 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, ModulesQuote Generator - Fetch, Async/Await, Quote API, CORSPicture-in-Picture - Picture-in-Picture API, Screen Capture APIBookmarks App - DOM, localStorageNASA APOD - Fetch, Async/Await, NASA API, DOM, localStorageAnimated Navigation - CSS AnimationsInfinite Scroll - Fetch, Async/Await, Unsplash API, DOM, Scroll Event ListenerCountdown App - Date, localStorageMusic Player - HTML 5 Audio APICalculator - Math MethodsSplash Page - DOM BasicsLight/Dark Mode - DOM, localStorageForm Validation - DOM, FormsJoke Teller - Fetch, Async/Await, Joke API, Text-to-SpeechVideo Player - HTML 5 Video APIMS Paint Clone - Advanced HTML Canvas, localStoragePong Clone - Advanced HTML CanvasMath Sprint Game - SetInterval, DOM, Array Methods, localStorageAnimated Template - Template, AOS.jsDrag and Drop - Drag and Drop API, localStorageWe will be using modern ES6,ES7,ES8,ES9,ES10 features to master JavaScript! Think of this as a full on JavaScript bootcamp to get you from a beginner to a confident programmer! on top of that, we also cover common UI/UX practices to make sure we have good designs and our projects are mobile friendly.The 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.So 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. See you inside the course :)Taught By:Andrei Neagoie is the instructor of the highest rated Development courses on Udemy as well as one of the fastest growing. His graduates have moved on to work for some of the biggest tech companies around the world like Apple, Google, Amazon, JP Morgan, IBM, UNIQLO etc… He has been working 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. Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.   Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.   ––––Jacinto is a Senior Developer with the Canadian Broadcasting Corporation with a diverse background, including 5 years experience as a teacher in Canada and South Korea. He has had a passion for technology from a very young age, which led him to build his first computer at age 12 and start using design software at 16. As an instructor for the Zero To Mastery Academy, Jacinto combines these artistic and critical thinking skills to create high quality projects that will add real value to student’s portfolios and jump start their careers in web development.Starting out learning something new can be challenging and there are so many resources available that it can be overwhelming. Jacinto understands that for some, bootcamps and post-secondary education are too time-consuming or expensive for many to consider. With that in mind, he does his best to create the highest quality courses that are inexpensive and beginner-friendly.As a self-taught developer, Jacinto started from scratch and learned enough to land a Senior Developer job after only 4 months working through online courses. He knows it is possible to upgrade your skills and switch careers without spending excessive time or money. He couldn’t be happier to be in this exciting and growing industry and aims to provide students with the same opportunity.See you inside the courses!

Overview

Section 1: Introduction

Lecture 1 Course Outline

Lecture 2 Join Our Online Classroom!

Lecture 3 Exercise: Meet Your Classmates and Instructor

Lecture 4 The Purpose Of JavaScript

Lecture 5 How To Get The Most Out Of The Course

Section 2: Developer Setup

Lecture 6 Setting Up For The Course

Lecture 7 OPTIONAL: MAC/LINUX Setup

Lecture 8 OPTIONAL: WINDOWS Setup

Lecture 9 Our Visual Studio Code Setup + Templates

Lecture 10 Developer Tools + Github Pages

Lecture 11 Web Developer Monthly

Lecture 12 Bonus resource: Advanced JavaScript Cheatsheet

Lecture 13 Monthly Coding Challenges, Free Resources and Guides

Section 3: Quote Generator

Lecture 14 Quote Generator Project Overview

Lecture 15 Setting Up Our Project

Lecture 16 Styling and HTML Elements

Lecture 17 Creating Beautiful Buttons

Lecture 18 Update to API

Lecture 19 [NEW] Fetching Data With JavaScript

Lecture 20 Different Option for API

Lecture 21 [NEW] Manipulating DOM With JavaScript

Lecture 22 [NEW] Creating A Loader With JavaScript

Lecture 23 Sharing Your Projects

Lecture 24 Quick Note: Upcoming Videos

Lecture 25 [OPTIONAL] Fetching Data With JavaScript

Lecture 26 [OPTIONAL] 429 Error

Lecture 27 [OPTIONAL] Build Your Own Proxy Server

Lecture 28 [OPTIONAL] Manipulating DOM With JavaScript

Lecture 29 [OPTIONAL] Creating A Loader With JavaScript

Lecture 30 Code Review

Lecture 31 Manipulating The DOM

Section 4: Infinity Scroll

Lecture 32 Infinity Scroll Project Overview

Lecture 33 Loader SVG

Lecture 34 Centering Elements On The Page

Lecture 35 Responsive Layout

Lecture 36 Fetching Data

Lecture 37 JavaScript To Display Data

Lecture 38 Infinite Scroll With JavaScript

Lecture 39 Infinite Scroll With JavaScript 2

Lecture 40 Code Review

Lecture 41 Exercises: Cleaning Up The Code

Section 5: Picture In Picture

Lecture 42 Picture In Picture Project Overview

Lecture 43 Setting Up Our Project

Lecture 44 Styling and HTML Elements

Lecture 45 Adding Functionality With JavaScript

Lecture 46 Code Review

Lecture 47 Endorsements On LinkedIN

Section 6: Joke Teller

Lecture 48 Joke Teller Project Overview

Lecture 49 Styling and HTML Elements

Lecture 50 Responsive Layout and Styling

Lecture 51 RapidAPI Disclaimer

Lecture 52 JavaScript In The Project

Lecture 53 JavaScript In The Project 2

Lecture 54 JavaScript In The Project 3

Lecture 55 Finishing Up The Project

Lecture 56 Code Review

Section 7: Light & Dark Mode

Lecture 57 Light Dark Mode Project Overview

Lecture 58 HTML and CSS Setup

Lecture 59 Content In Our Project

Lecture 60 Toggle Theme With JavaScript

Lecture 61 Toggle Theme With JavaScript 2

Lecture 62 LocalStorage To Save User Data

Lecture 63 Code Review

Lecture 64 Exercise: Imposter Syndrome

Lecture 65 Exercise: Making Code More Readable

Section 8: Animated Template

Lecture 66 Animated Template Project Overview

Lecture 67 Setting Up Our Template

Lecture 68 Setting Up Our Content

Lecture 69 JavaScript Inside of HTML

Lecture 70 Animation On Scroll

Lecture 71 Code Review

Section 9: Navigation Nation

Lecture 72 Navigation Nation Project Overview

Lecture 73 Setting Up Our HTML and CSS

Lecture 74 Navigation UI

Lecture 75 Animating Menu With JavaScript

Lecture 76 Animations CSS

Lecture 77 Cleaning Up Our JavaScript

Lecture 78 Code Review

Section 10: Music Player

Lecture 79 Music Player Project Overview

Lecture 80 Setting Up Our HTML and CSS

Lecture 81 Coding Our Responsive UI

Lecture 82 JavaScript To Play Audio

Lecture 83 Music Player With JavaScript

Lecture 84 Progress Bar

Lecture 85 Progress Bar 2

Lecture 86 Progress Bar 3

Lecture 87 Code Review

Section 11: Custom Countdown

Lecture 88 Custom Countdown Project Overview

Lecture 89 Video Background

Lecture 90 Building Our UI Components

Lecture 91 Building Our UI Components 2

Lecture 92 JavaScript Dates

Lecture 93 Form Values

Lecture 94 Populate Countdown UI

Lecture 95 setInterval And clearInterval

Lecture 96 Finishing Up The UI

Lecture 97 Caching With LocalStorage

Lecture 98 Code Review

Section 12: Book Keeper

Lecture 99 Book Keeper Project Overview

Lecture 100 Building Our UI

Lecture 101 Building Our UI 2

Lecture 102 Building Our Modal

Lecture 103 Modals With JavaScript

Lecture 104 Appending URL Issue

Lecture 105 Form Validation

Lecture 106 localStorage And Fetch

Lecture 107 Building The Bookmarks

Lecture 108 Deleting The Bookmarks

Lecture 109 Code Review

Section 13: Video Player

Lecture 110 Video Player Project Overview

Lecture 111 Video Source Updated

Lecture 112 Build UI - Player, Video, Mobile Responsive

Lecture 113 Build UI - Controls HTML, Show Controls on Hover

Lecture 114 Build UI - Progress Bar: Width, Hover

Lecture 115 Build UI - Selection, Show CSS Variables

Lecture 116 JS - Video Play/Pause

Lecture 117 JS - Progress Bar (Dynamic Width)

Lecture 118 JS - Populate Current Time / Duration

Lecture 119 JS - Progress Bar (Seek)

Lecture 120 JS - Volume (Slider)

Lecture 121 JS - Volume (Mute/Unmute)

Lecture 122 JS - Playback Seed

Lecture 123 JS - Fullscreen

Lecture 124 Code Review

Section 14: Form Validator

Lecture 125 Form Validator Project Overview

Lecture 126 Build UI - HTML Forms, Input, Labels

Lecture 127 Build UI - CSS (Body, Container), Google Fonts

Lecture 128 Build UI - Form CSS

Lecture 129 HTML Form Validation

Lecture 130 JS - Validate Form

Lecture 131 JS - Validate Passwords, Store Data

Lecture 132 Code Review

Lecture 133 How to Store User Passwords

Section 15: Spock Rock Game

Lecture 134 Spock Rock Project Overview

Lecture 135 Build UI - Player Containers, FontAwesome

Lecture 136 Build UI - CSS, Google Fonts

Lecture 137 JS - Setup, Player Selection

Lecture 138 JS - Computer Selection

Lecture 139 JS - Check Results

Lecture 140 JS - Reset All

Lecture 141 JS - Confetti Functionality

Lecture 142 JS - Module Refactoring

Lecture 143 Code Review

Section 16: NASA APOD

Lecture 144 NASA APOD Project Overview

Lecture 145 Asset - Custom Loading Animation

Lecture 146 Build UI - Navigation

Lecture 147 Build UI - Card with Image

Lecture 148 JS - NASA API Documentation/Fetch

Lecture 149 JS - Create DOM Elements

Lecture 150 JS - Save Favourites

Lecture 151 JS - Favorites DOM Elements

Lecture 152 JS - Delete Favorites

Lecture 153 JS - Navigation, Loader

Lecture 154 Code Review

Lecture 155 Optional: Declarative vs Imperative

Section 17: Math Sprint Game

Lecture 156 Math Sprint Game Project Overview

Lecture 157 Build UI - Splash Page, Countdown

Lecture 158 Build UI - Game Page, Score Page

Lecture 159 JS - Radio Selection & Functionality

Lecture 160 JS - Countdown Page

Lecture 161 JS - Generate Random Equations

Lecture 162 JS - Equations to DOM

Lecture 163 JS - Automatic Scrolling & Player Input

Lecture 164 JS - Check Score with Timing Events

Lecture 165 JS - Score Page

Lecture 166 JS - Best Scores in Local Storage

Lecture 167 Code Review

Section 18: Drag n' Drop

Lecture 168 Drag n' Drop Project Overview

Lecture 169 Build UI - Flexbox, Custom Scrollbar

Lecture 170 JS - localStorage

Lecture 171 JS - Update DOM

Lecture 172 JS - Drag and Drop API

Lecture 173 JS - Rebuild Arrays

Lecture 174 JS - Add Item

Lecture 175 JS - Delete Item

Lecture 176 JS - Update Item

Lecture 177 Code Review

Section 19: Calculator

Lecture 178 Calculator Project Overview

Lecture 179 Build UI - Calculator, Display, Buttons

Lecture 180 Build UI - Display CSS

Lecture 181 Build UI - CSS Grid

Lecture 182 Build UI - Button CSS

Lecture 183 JS - Adding Event Listeners

Lecture 184 JS - Reset Value, Add Decimal

Lecture 185 JS - Operator Functionality

Lecture 186 JS - Calculation

Lecture 187 Code Review

Section 20: Splash Page

Lecture 188 Splash Page Project Overview

Lecture 189 Initial Setup - Figma

Lecture 190 Build UI - Adding Image Assets

Lecture 191 Build UI - Styling Image Assets

Lecture 192 Build UI - Adding Custom Backgrounds

Lecture 193 JS - Background Controls

Lecture 194 Code Review

Lecture 195 Exercise: Memory Leaks And Heap Snapshots

Section 21: Paint Clone

Lecture 196 Paint Clone Project Overview

Lecture 197 Build UI - Custom Slider, JSColor, Mobile Message

Lecture 198 JS - Canvas Setup

Lecture 199 JS - Color/Range Inputs

Lecture 200 JS - Drawing on Canvas

Lecture 201 JS - Store Drawing Data

Lecture 202 JS - localStorage & Downloading an Image

Lecture 203 Code Review

Section 22: Pong

Lecture 204 Pong Project Overview

Lecture 205 JS - Create Canvas

Lecture 206 JS - RequestAnimationFrame

Lecture 207 JS - Game Over

Lecture 208 Code Review

Section 23: Where To Go From Here?

Lecture 209 Sharing Your Projects

Lecture 210 JavaScript And Beyond

Lecture 211 Thank You!

Lecture 212 Learning Guideline

Lecture 213 LinkedIn Endorsements

Lecture 214 Become An Alumni

Lecture 215 Coding Challenges

Section 24: Appendix: How JavaScript Works

Lecture 216 JavaScript Engine

Lecture 217 Exercise: Javascript Engine

Lecture 218 Inside the Engine

Lecture 219 Exercise: JS Engine For All

Lecture 220 Interpreters and Compilers

Lecture 221 Inside the V8 Engine

Lecture 222 Comparing Other Languages

Lecture 223 Writing Optimized Code

Lecture 224 WebAssembly

Lecture 225 Call Stack and Memory Heap

Lecture 226 Stack Overflow

Lecture 227 Garbage Collection

Lecture 228 Memory Leaks

Lecture 229 Single Threaded

Lecture 230 Exercise: Issue With Single Thread

Lecture 231 Javascript Runtime

Lecture 232 Node.js

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

Lecture 233 Git + Github Part 1

Lecture 234 Github Update: Master –> Main

Lecture 235 Git + Github Part 2

Lecture 236 Contributing To Open Source

Lecture 237 Contributing To Open Source 2

Lecture 238 Exercise: Contribute To Open Source

Lecture 239 Installing Node

Lecture 240 Create A Portfolio

Section 26: Appendix: CORS Issues

Lecture 241 Solving CORS Issues With Heroku Server

Section 27: BONUS SECTION

Lecture 242 Special Bonus Lecture

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