English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 236 lectures (32h 47m) | 13.5 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 MAC LINUX Setup
8 OPTIONAL WINDOWS Setup
9 Our Visual Studio Code Setup + Templates
10 Developer Tools + Github Pages
11 Bonus resource Advanced JavaScript Cheatsheet
12 Monthly Coding Challenges, Free Resources and Guides
Quote Generator
13 Quote Generator Project Overview
14 Setting Up Our Project
15 Styling and HTML Elements
16 Creating Beautiful Buttons
17 [NEW] Fetching Data With JavaScript
18 [NEW] Manipulating DOM With JavaScript
19 [NEW] Creating A Loader With JavaScript
20 Sharing Your Projects
21 Quick Note Upcoming Videos
22 [OPTIONAL] Fetching Data With JavaScript
23 [OPTIONAL] 429 Error
24 [OPTIONAL] Build Your Own Proxy Server
25 [OPTIONAL] Manipulating DOM With JavaScript
26 [OPTIONAL] Creating A Loader With JavaScript
27 Code Review
28 Manipulating The DOM
Infinity Scroll
29 Infinity Scroll Project Overview
30 Loader SVG
31 Centering Elements On The Page
32 Responsive Layout
33 Fetching Data
34 JavaScript To Display Data
35 Infinite Scroll With JavaScript
36 Infinite Scroll With JavaScript 2
37 Code Review
38 Exercises Cleaning Up The Code
Picture In Picture
39 Picture In Picture Project Overview
40 Setting Up Our Project
41 Styling and HTML Elements
42 Adding Functionality With JavaScript
43 Code Review
44 Endorsements On LinkedIN
Joke Teller
45 Joke Teller Project Overview
46 Styling and HTML Elements
47 Responsive Layout and Styling
48 RapidAPI Disclaimer
49 JavaScript In The Project
50 JavaScript In The Project 2
51 JavaScript In The Project 3
52 Finishing Up The Project
53 Code Review
Light & Dark Mode
54 Light Dark Mode Project Overview
55 HTML and CSS Setup
56 Content In Our Project
57 Toggle Theme With JavaScript
58 Toggle Theme With JavaScript 2
59 LocalStorage To Save User Data
60 Code Review
61 Exercise Making Code More Readable
Animated Template
62 Animated Template Project Overview
63 Setting Up Our Template
64 Setting Up Our Content
65 JavaScript Inside of HTML
66 Animation On Scroll
67 Code Review
Navigation Nation
68 Navigation Nation Project Overview
69 Setting Up Our HTML and CSS
70 Navigation UI
71 Animating Menu With JavaScript
72 Animations CSS
73 Cleaning Up Our JavaScript
74 Code Review
Music Player
75 Music Player Project Overview
76 Setting Up Our HTML and CSS
77 Coding Our Responsive UI
78 JavaScript To Play Audio
79 Music Player With JavaScript
80 Progress Bar
81 Progress Bar 2
82 Progress Bar 3
83 Code Review
Custom Countdown
84 Custom Countdown Project Overview
85 Video Background
86 Building Our UI Components
87 Building Our UI Components 2
88 JavaScript Dates
89 Form Values
90 Populate Countdown UI
91 setInterval And clearInterval
92 Finishing Up The UI
93 Caching With LocalStorage
94 Code Review
Book Keeper
95 Book Keeper Project Overview
96 Building Our UI
97 Building Our UI 2
98 Building Our Modal
99 Modals With JavaScript
100 Appending URL Issue
101 Form Validation
102 localStorage And Fetch
103 Building The Bookmarks
104 Deleting The Bookmarks
105 Code Review
Video Player
106 Video Player Project Overview
107 Build UI – Player, Video, Mobile Responsive
108 Build UI – Controls HTML, Show Controls on Hover
109 Build UI – Progress Bar Width, Hover
110 Build UI – Selection, Show CSS Variables
111 JS – Video Play Pause
112 JS – Progress Bar (Dynamic Width)
113 JS – Populate Current Time Duration
114 JS – Progress Bar (Seek)
115 JS – Volume (Slider)
116 JS – Volume (Mute Unmute)
117 JS – Playback Seed
118 JS – Fullscreen
119 Code Review
Form Validator
120 Form Validator Project Overview
121 Build UI – HTML Forms, Input, Labels
122 Build UI – CSS (Body, Container), Google Fonts
123 Build UI – Form CSS
124 HTML Form Validation
125 JS – Validate Form
126 JS – Validate Passwords, Store Data
127 Code Review
128 How to Store User Passwords
Spock Rock Game
129 Spock Rock Project Overview
130 Build UI – Player Containers, FontAwesome
131 Build UI – CSS, Google Fonts
132 JS – Setup, Player Selection
133 JS – Computer Selection
134 JS – Check Results
135 JS – Reset All
136 JS – Confetti Functionality
137 JS – Module Refactoring
138 Code Review
NASA APOD
139 NASA APOD Project Overview
140 Asset – Custom Loading Animation
141 Build UI – Navigation
142 Build UI – Card with Image
143 JS – NASA API Documentation Fetch
144 JS – Create DOM Elements
145 JS – Save Favourites
146 JS – Favorites DOM Elements
147 JS – Delete Favorites
148 JS – Navigation, Loader
149 Code Review
150 Optional Declarative vs Imperative
Math Sprint Game
151 Math Sprint Game Project Overview
152 Build UI – Splash Page, Countdown
153 Build UI – Game Page, Score Page
154 JS – Radio Selection & Functionality
155 JS – Countdown Page
156 JS – Generate Random Equations
157 JS – Equations to DOM
158 JS – Automatic Scrolling & Player Input
159 JS – Check Score with Timing Events
160 JS – Score Page
161 JS – Best Scores in Local Storage
162 Code Review
Drag n’ Drop
163 Drag n’ Drop Project Overview
164 Build UI – Flexbox, Custom Scrollbar
165 JS – localStorage
166 JS – Update DOM
167 JS – Drag and Drop API
168 JS – Rebuild Arrays
169 JS – Add Item
170 JS – Delete Item
171 JS – Update Item
172 Code Review
Calculator
173 Calculator Project Overview
174 Build UI – Calculator, Display, Buttons
175 Build UI – Display CSS
176 Build UI – CSS Grid
177 Build UI – Button CSS
178 JS – Adding Event Listeners
179 JS – Reset Value, Add Decimal
180 JS – Operator Functionality
181 JS – Calculation
182 Code Review
Splash Page
183 Splash Page Project Overview
184 Initial Setup – Figma
185 Build UI – Adding Image Assets
186 Build UI – Styling Image Assets
187 Build UI – Adding Custom Backgrounds
188 JS – Background Controls
189 Code Review
190 Exercise Memory Leaks And Heap Snapshots
Paint Clone
191 Paint Clone Project Overview
192 Build UI – Custom Slider, JSColor, Mobile Message
193 JS – Canvas Setup
194 JS – Color Range Inputs
195 JS – Drawing on Canvas
196 JS – Store Drawing Data
197 JS – localStorage & Downloading an Image
198 Code Review
Pong
199 Pong Project Overview
200 JS – Create Canvas
201 JS – RequestAnimationFrame
202 JS – Game Over
203 Code Review
Where To Go From Here
204 Sharing Your Projects
205 JavaScript And Beyond
206 Learning Guideline
207 LinkedIn Endorsements
208 Become An Alumni
209 Coding Challenges
Appendix How JavaScript Works
210 JavaScript Engine
211 Exercise Javascript Engine
212 Inside the Engine
213 Exercise JS Engine For All
214 Interpreters and Compilers
215 Inside the V8 Engine
216 Comparing Other Languages
217 Writing Optimized Code
218 WebAssembly
219 Call Stack and Memory Heap
220 Stack Overflow
221 Garbage Collection
222 Memory Leaks
223 Single Threaded
224 Exercise Issue With Single Thread
225 Javascript Runtime
226 Node.js
Appendix Git, Github, Open Source and Building a Portfolio
227 Git + Github Part 1
228 Github Update Master — Main
229 Git + Github Part 2
230 Contributing To Open Source
231 Contributing To Open Source 2
232 Exercise Contribute To Open Source
233 Installing Node
234 Create A Portfolio
Appendix CORS Issues
235 Solving CORS Issues With Heroku Server
BONUS SECTION
236 Bonus Lecture
Resolve the captcha to access the links!