JavaScript Web Projects: 20 Projects to Build Your Portfolio

JavaScript Web Projects: 20 Projects to Build Your Portfolio
JavaScript Web Projects: 20 Projects to Build Your Portfolio

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 16h 23m | 5.12 GB
eLearning | Skill level: All Levels


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

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 and confidence 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 things without crutches like libraries and frameworks, you will future proof yourself and maximize your income.

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 do 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, point out 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, 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

We 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.

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.

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
+ Table of Contents

Course Outline
The Purpose Of JavaScript
OPTIONAL: MAC/LINUX Setup
OPTIONAL: WINDOWS Setup
Our Visual Studio Code Setup + Templates
Developer Tools + Github Pages
Quote Generator Project Overview
Setting Up Our Project
Styling and HTML Elements
Creating Beautiful Buttons
Fetching Data With JavaScript
Manipulating DOM With JavaScript
Creating A Loader With JavaScript
Code Review
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
Picture In Picture Project Overview
Setting Up Our Project
Styling and HTML Elements
Adding Functionality With JavaScript
Code Review
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 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
Animated Template Project Overview
Setting Up Our Template
Setting Up Our Content
JavaScript Inside of HTML
Animation On Scroll
Code Review
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 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 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 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
JavaScript And Beyond
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
Git + Github Part 1
Git + Github Part 2
Setting Up Github
Contributing To Open Source
Contributing To Open Source 2
Create A Portfolio
Solving CORS Issues With Heroku Server