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 1280×720 | AAC 44KHz 2ch | 32 Hours | 16.0 GB

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

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

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.

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

Introduction
1 Course Outline
2 Join Our Online Classroom!
3 Exercise Meet The Community
4 The Purpose Of JavaScript
5 How To Get The Most Out Of The Course

Developer Setup
6 Setting Up For The Course
7 OPTIONAL MACLINUX Setup
8 OPTIONAL WINDOWS Setup
9 Our Visual Studio Code Setup + Templates
10 Developer Tools + Github Pages

Quote Generator
11 Quote Generator Project Overview
12 Manipulating The DOM
13 Setting Up Our Project
14 Styling and HTML Elements
15 Creating Beautiful Buttons
16 Fetching Data With JavaScript
17 Optional Build Your Own Proxy Server
18 Manipulating DOM With JavaScript
19 Creating A Loader With JavaScript
20 Code Review

Infinity Scroll
21 Infinity Scroll Project Overview
22 Exercises Cleaning Up The Code
23 Loader SVG
24 Centering Elements On The Page
25 Responsive Layout
26 Fetching Data
27 JavaScript To Display Data
28 Infinite Scroll With JavaScript
29 Infinite Scroll With JavaScript 2
30 Code Review

Picture In Picture
31 Picture In Picture Project Overview
32 Setting Up Our Project
33 Styling and HTML Elements
34 Adding Functionality With JavaScript
35 Code Review

Joke Teller
36 Joke Teller Project Overview
37 Styling and HTML Elements
38 Responsive Layout and Styling
39 JavaScript In The Project
40 JavaScript In The Project 2
41 JavaScript In The Project 3
42 Finishing Up The Project
43 Code Review

Light & Dark Mode
44 Light Dark Mode Project Overview
45 HTML and CSS Setup
46 Content In Our Project
47 Toggle Theme With JavaScript
48 Toggle Theme With JavaScript 2
49 LocalStorage To Save User Data
50 Code Review
51 Exercise Making Code More Readable

Animated Template
52 Animated Template Project Overview
53 Setting Up Our Template
54 Setting Up Our Content
55 JavaScript Inside of HTML
56 Animation On Scroll
57 Code Review

Navigation Nation
58 Navigation Nation Project Overview
59 Setting Up Our HTML and CSS
60 Navigation UI
61 Animating Menu With JavaScript
62 Animations CSS
63 Cleaning Up Our JavaScript
64 Code Review

Music Player
65 Music Player Project Overview
66 Setting Up Our HTML and CSS
67 Coding Our Responsive UI
68 JavaScript To Play Audio
69 Music Player With JavaScript
70 Progress Bar
71 Progress Bar 2
72 Progress Bar 3
73 Code Review

Custom Countdown
74 Custom Countdown Project Overview
75 Caching With LocalStorage
76 Code Review
77 Video Background
78 Building Our UI Components
79 Building Our UI Components 2
80 JavaScript Dates
81 Form Values
82 Populate Countdown UI
83 setInterval And clearInterval
84 Finishing Up The UI

Book Keeper
85 Book Keeper Project Overview
86 Code Review
87 Building Our UI
88 Building Our UI 2
89 Building Our Modal
90 Modals With JavaScript
91 Form Validation
92 localStorage And Fetch
93 Building The Bookmarks
94 Deleting The Bookmarks

Video Player
95 Video Player Project Overview
96 JS – Volume (Slider)
97 JS – Volume (MuteUnmute)
98 JS – Playback Seed
99 JS – Fullscreen
100 Code Review
101 Build UI – Player, Video, Mobile Responsive
102 Build UI – Controls HTML, Show Controls on Hover
103 Build UI – Progress Bar Width, Hover
104 Build UI – Selection, Show CSS Variables
105 JS – Video PlayPause
106 JS – Progress Bar (Dynamic Width)
107 JS – Populate Current Time Duration
108 JS – Progress Bar (Seek)

Form Validator
109 Form Validator Project Overview
110 Build UI – HTML Forms, Input, Labels
111 Build UI – CSS (Body, Container), Google Fonts
112 Build UI – Form CSS
113 HTML Form Validation
114 JS – Validate Form
115 JS – Validate Passwords, Store Data
116 Code Review
117 How to Store User Passwords

Spock Rock Game
118 Spock Rock Project Overview
119 Code Review
120 Build UI – Player Containers, FontAwesome
121 Build UI – CSS, Google Fonts
122 JS – Setup, Player Selection
123 JS – Computer Selection
124 JS – Check Results
125 JS – Reset All
126 JS – Confetti Functionality
127 JS – Module Refactoring

NASA APOD
128 NASA APOD Project Overview
129 JS – Navigation, Loader
130 Code Review
131 Optional Declarative vs Imperative
132 Asset – Custom Loading Animation
133 Build UI – Navigation
134 Build UI – Card with Image
135 JS – NASA API DocumentationFetch
136 JS – Create DOM Elements
137 JS – Save Favourites
138 JS – Favorites DOM Elements
139 JS – Delete Favorites

Math Sprint Game
140 Math Sprint Game Project Overview
141 JS – Score Page
142 JS – Best Scores in Local Storage
143 Code Review
144 Build UI – Splash Page, Countdown
145 Build UI – Game Page, Score Page
146 JS – Radio Selection & Functionality
147 JS – Countdown Page
148 JS – Generate Random Equations
149 JS – Equations to DOM
150 JS – Automatic Scrolling & Player Input
151 JS – Check Score with Timing Events

Drag n’ Drop
152 Drag n’ Drop Project Overview
153 Code Review
154 Build UI – Flexbox, Custom Scrollbar
155 JS – localStorage
156 JS – Update DOM
157 JS – Drag and Drop API
158 JS – Rebuild Arrays
159 JS – Add Item
160 JS – Delete Item
161 JS – Update Item

Calculator
162 Calculator Project Overview
163 Code Review
164 Build UI – Calculator, Display, Buttons
165 Build UI – Display CSS
166 Build UI – CSS Grid
167 Build UI – Button CSS
168 JS – Adding Event Listeners
169 JS – Reset Value, Add Decimal
170 JS – Operator Functionality
171 JS – Calculation

Splash Page
172 Splash Page Project Overview
173 Initial Setup – Figma
174 Build UI – Adding Image Assets
175 Build UI – Styling Image Assets
176 Build UI – Adding Custom Backgrounds
177 JS – Background Controls
178 Code Review
179 Exercise Memory Leaks And Heap Snapshots

Paint Clone
180 Paint Clone Project Overview
181 Build UI – Custom Slider, JSColor, Mobile Message
182 JS – Canvas Setup
183 JS – ColorRange Inputs
184 JS – Drawing on Canvas
185 JS – Store Drawing Data
186 JS – localStorage & Downloading an Image
187 Code Review

Pong
188 Pong Project Overview
189 JS – Create Canvas
190 JS – RequestAnimationFrame
191 JS – Game Over
192 Code Review

Where To Go From Here
193 Sharing Your Projects
194 JavaScript And Beyond
195 Learning Guideline
196 LinkedIn Endorsements
197 Become An Alumni
198 Coding Challenges

Appendix How JavaScript Works
199 JavaScript Engine
200 Call Stack and Memory Heap
201 Stack Overflow
202 Garbage Collection
203 Memory Leaks
204 Single Threaded
205 Exercise Issue With Single Thread
206 Javascript Runtime
207 Node.js
208 Exercise Javascript Engine
209 Inside the Engine
210 Exercise JS Engine For All
211 Interpreters and Compilers
212 Inside the V8 Engine
213 Comparing Other Languages
214 Writing Optimized Code
215 WebAssembly

Appendix Git, Github, Open Source and Building a Portfolio
216 Git + Github Part 1
217 Git + Github Part 2
218 Contributing To Open Source
219 Contributing To Open Source 2
220 Exercise Contribute To Open Source
221 Installing Node
222 Create A Portfolio

Appendix CORS Issues
223 Solving CORS Issues With Heroku Server

Extras
224 Bonus Special Thank You Gift!