The Complete Web Developer in 2022: Zero to Mastery

The Complete Web Developer in 2022: Zero to Mastery

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 383 lectures (37h 38m) | 13.7 GB

Learn to code and become a Web Developer in 2022 with HTML, CSS, Javascript, React, Node.js, Machine Learning & more!

Think of this course like a Web Developer bootcamp. By the end, you will be comfortable using the below skills and you will be able to put them on your resume:

  • CSS/CSS3
  • SemanticUI
  • Responsive Design
  • Flexbox
  • CSS Grid
  • Bootstrap 5
  • DOM Manipulation
  • Javascript (including ES6/ES7/ES8/ES9/ES10/ES2020/ES2021)
  • Asynchronous JavaScript
  • React + Redux m+ React Hooks
  • Git + Github
  • Command Line
  • Node.js
  • Express.js
  • NPM
  • RESTful API Design
  • PostgresSQL
  • SQL
  • Authentication
  • Authorization
  • Scalable Infrastructure
  • Security
  • Production and Deployment

You will be taken through online videos and exercises where you will be able to do the following things by the end:

Build real complex applications and websites
Build an image recognition app so you can add it to your portfolio
Go into a job interview confident that you understand the fundamental building blocks of web development and the developer trends in 2022
Be able to go off on your own and grow your skills as a developer, having built a solid foundation
Learn how frontend, servers, and databases communicate and how they all fit together in the eco system
Build your own startup landing page
Go off and work remotely by being a freelance developer that can bid on projects

This course is the accumulation of all of my years working in the industry, learning, and teaching. There is so much information out there, so many opinions, and so many ways of doing things, that unless you have spent the last few years working with these technologies in a company, you will never fully understand. So this course is the answer to that exact problem for you: How to gain experience when you need experience to get hired? I have gone through thousands of coding books, online tutorials and bootcamps. Throughout the years I have taken notes on what has worked and what hasn’t, and I have created this course to narrow down the most efficient way to learn with the most relevant information.

I am 100% confident that you won’t find a course like this out there. We’re not going to be building simple todo applications and cat image sliders. We are going to learn actual practical skills that will put you into the workforce. Some unique sections that you won’t find anywhere else are:

React.js + Redux: You will learn the library that companies like Netflix, Facebook and Instagram use to build fast, scalable applications. This is one of the highest in-demand skill in the industry.

A day in the life of a developer: What will your day to day look like and what tools will you use? I will take you through a sample day at a tech company.

How does the internet actually work? What is the history of these technologies?: You will actually understand the underlying concepts of the internet, and how the technologies we have now, have come to be where they are.

How do you actually deploy a real life app so that it is secure, and won’t get hacked?: How does a real life app get out to the public in a safe and secure way?

What is Machine Learning and how you can harness its power: Whether you have heard about it or not, this is something that you will hear more and more in the coming years. Those who understand the high level concepts and can harness its power will have an advantage.

What does your developer environment on your computer look like?: We will be setting up our computers with all the tools necessary of a developer so you can use the same setup when you go work in the industry.

Why do we teach the above? Because in this day and age, just knowing HTML CSS and Javascript is not good enough, and you won’t be able to grow in your role and command a higher salary. You will learn these things because these are the things you should know in 2022 so that you are miles ahead of the rest.

What you’ll learn

  • Skills that will allow you to apply for jobs like: Web Developer, Software Developer, Front End Developer,
  • Javascript Developer, and Full Stack Developer
  • Learn modern technologies that are ACTUALLY being used behind tech companies in 2022
  • Build 10+ real world Web Development projects you can show off
  • Build a professional Portfolio Website
  • Learn best practices to write clean, performant, and bug free code
  • Master modern Web Development fundamentals as well as advanced topics
  • Work as a freelance Web Developer
  • Master beginner and advanced JavaScript topics
  • Learn React + Redux to build rich front end applications
  • Build your own full stack websites and applications
  • Build a complex image recognition app using everything we learn in the course
  • Become a professional Web Developer and get hired
  • Use NodeJS to write server-side JavaScript
  • Learn to implement user authentication
  • Use Express, SQL and PostgreSQL to create fullstack applications that scale
  • Master fundamental concepts in Web Development
Table of Contents

1 Course Outline
2 Join Our Online Classroom
3 Exercise Meet The Community
4 Join Our Open Source Projects

How The Internet Works
5 Browsing the Web
6 Breaking Google
7 Exercise Break Google Yourself
8 The Internet Backbone
9 Traceroute
10 Exercise Running traceroute
12 What Does A Developer Do
13 Optional The Article Which Inspired This Course
14 Web Developer Monthly

History Of The Web
15 WWW vs Internet
16 HTML, CSS, Javascript
18 Monthly Coding Challenges, Free Resources and Guides
19 Developer History
20 Exercise Adding CSS and JavaScript to Tim’s website
21 Optional Resource More About the History of the Web

22 Build Your First Website
23 Resources Your Text Editor
25 Quick Note About w3schools
26 How To Ask Questions
27 HTML Tags
28 HTML Tags 2
29 Self Closing HTML Tags
30 Anchor Tag
31 Q&A index.html
32 Q&A Relative vs Absolute Path

Advanced HTML 5
33 HTML Forms
34 HTML Forms 2
35 Submitting A Form
36 HTML Tags 3
37 HTML vs HTML 5
38 Copy A Website
39 HTML Challenge
40 HTML Lesson Files
41 Exercise HTML Quiz
42 Optional Exercise More HTML

43 Exercise Files Code-Along
44 Your First CSS
45 CSS Properties
46 CSS Selectors
47 Optional Exercise CSS Selectors
48 Text and Font
49 Images In CSS
50 Box Model
51 px vs em vs rem
52 Optional PX, EM, REM, %, VW, and VH
53 Exercise CSS Quiz

Advanced CSS
54 Critical Render Path
55 Exercise File Code-Along Images
56 Flexbox
57 Optional Exercise Flexbox Froggy
58 CSS 3
59 Optional Exercise Mastering Transitions and Transforms
60 Responsive UI
61 Image Gallery Files
62 Exercise Robot Animation
63 Exercise Robot Animation Starter Files
64 Solution Robot Animation
65 Optional Exercise CSS

Bootstrap, Templates, And Building Your Startup Landing Page
66 Evolving Technology
67 Bootstrap Introduction
68 Bootstrap
69 Bootstrap 5 Update
70 Bootstrap Grid
71 Free Resources For Our Project
72 Exercise Startup Landing Page
73 Exercise Startup Landing Page 2
74 Exercise Startup Landing Page 3
75 Quick Note The hr tag
76 Exercise Startup Landing Page 4
77 Exercise Startup Landing Page 5
78 Quick Note Mailchimp
79 Exercise Adding Email Subscribe Form With MailChimp
80 Quick Note Upcoming Videos
81 Exercise Putting Your Website Online
82 Exercise Putting Your Website Online 2
83 Quick Note Upcoming Video
85 Using Templates
86 Resources for FREE Templates
87 Startup Landing Pages by Students

CSS Grid + CSS Layout
88 Section Overview
89 CSS Grid vs Flexbox vs Bootstrap
90 Quick Note grid-gap to gap
91 CSS Grid 1
92 CSS Grid 2
93 CSS Grid 3
94 CSS Grid 4
95 CSS Grid 5
96 Optional Exercise CSS Grid
97 Exercise CSS Layout
98 Solution Navigation Bar
99 Solution Navigation Bar 2
100 Solution Cover
101 Solution Project Grid + Footer
102 Quick Note Upcoming Video
103 Solution Prettify
104 Resources CSS Guide
105 The Truth About CSS

Career Of A Web Developer
106 Career Of A Web Developer
107 Updated Statistics
108 Web Developer Roadmap
109 Quick Note Upcoming Video
110 What If I Don’t Have Enough Experience
111 Endorsements On LinkedIN
113 Learning Guideline

114 Introduction To Javascript
115 What Is Javascript
116 Your First Javascript
117 Exercise Number, String, Boolean, Comparisons
118 Variables
119 Exercise Variables
120 Exercise Make A Calculator
121 Control Flow
122 Exercise Make A Keyless Car
123 Javascript On Our Webpage
124 Functions
125 Exercise Make A Keyless Car Even Better
126 Data Structures Arrays
127 Exercise Arrays
128 Data Structures Objects
129 Exercise Objects And Arrays For Facebook App
130 Exercise Build Facebook
131 Javascript Terminology
132 Loops
133 Exercise Build Facebook 2
134 Javascript Keywords
135 Section Outline Document

DOM Manipulation
136 Document Object Model
137 DOM Selectors
138 Exercise DOM Selectors
139 DOM Events
140 Note Callback Functions
141 Exercise DOM Events
142 Solution DOM Events
143 Exercise Background Generator
144 Background Generator Files
145 jQuery

Advanced Javascript
147 Scope
148 Exercise Scope
149 Advanced Control Flow
150 Exercise Advanced Control Flow
151 ES5 and ES6
152 Exercise ES5 and ES6
153 Advanced Functions
154 Exercise Advanced Functions
155 Advanced Arrays
156 Exercise Advanced Arrays
157 Advanced Objects
158 Quick Note Upcoming Videos
159 Pass By Value vs Pass By Reference
160 Type Coercion
161 Exercise Advanced Objects
162 ES7 (ESE6)
163 Exercise ES7
164 ES8 (ESE7)
165 Exercise ES8
166 Note ES9 + ES8 Async Await
167 ES10 (ES2019)
168 Exercise ES10
169 Advanced Loops
170 Exercise Advanced Loops
171 ES2020 Part 1
172 ES2020 Part 2
173 ES2020 Part 3
174 Exercise ES2020
175 ES2021
176 Debugging
177 How Javascript Works
178 Modules
179 Resources Modules
180 Extra Javascript Practice
181 Optional Exercise Javascript Logic

Command Line
182 For WINDOWS Users ONLY
183 Quick Note For Windows Users
184 Using The Terminal
185 Exercise Practice Using The Terminal

Developer Environment
186 Sublime Text
187 Resources Customizing Sublime Text
188 VS Code
189 Resources Customizing VS Code
190 Terminal
191 Resources Customizing Terminal
192 For Windows Customizing Git Bash

Git + Github + Open Source Projects
193 Installing Git
194 Git + Github Part 1
195 Github Update Master — Main
196 Git + Github Part 2
197 My Terminal Setup
198 Contributing To Open Source
199 Contributing To Open Source 2
200 Exercise Contribute To Our Open Source
201 Keeping Your Fork Up To Date
202 Portfolio Website for Recruiters
203 Student Generated Top Resources

A Day In The Life Of A Developer
204 A Typical Day
205 Exercise Helping A Developer
206 A Developer’s Morning Routine

NPM + NPM Scripts
207 Introduction To NPM
208 Setting Up NPM and package.json
209 Update Latest Node.js and NPM
210 Troubleshoot Installing NPM and Node.js
211 Installing And Using Packages
212 Why Update Packages
213 Quick Note About Packages
214 Exercise Create A Portfolio

React.js, React Hooks, Redux (Hooks and Redux videos moved to end of course )
215 Introduction To React.js
216 Create React App
217 Create React App v5
218 React App Folder Structure
219 React Fundamentals
220 React Fundamentals 2
221 Class vs Functional App.js
222 Hooks vs Classes
223 Quick Note Service Worker File
224 Your First React Component
225 Building A React App 1
226 React.Fragment and Semantic HTML
227 Exercise Learn to Read the Docs
228 Building A React App 2
229 Building A React App 3
230 Styling Your React App
231 Quick Note JSON Placeholder
232 Building A React App 4
233 Building A React App 5
234 Building A React App 6
235 Project Files
236 Keeping Your Projects Up To Date
237 Exercise React 17
238 Solution React 17
239 React Review
240 Error Boundary In React
241 Deploying Our React App
242 React Hooks + Redux (Saved For End Of The Course)

HTTP JSON AJAX + Asynchronous Javascript
244 JSON
245 JSON vs Form Data
246 AJAX
247 Quick Note Upcoming Video
248 Promises
249 Exercise Promises
250 ES8 – Async Await
251 Exercise ES8 – Async Await
252 ES9 (ESE8)
253 ES9 (ESE8) – Async
254 ES2020 allSettled()
255 ES2021 any()
256 Reviewing ES6, ES7, ES8, ES9, ES10, ES11 Features

Backend Introduction
257 Backend Basics

258 Getting Ready For This Section
259 Introduction to APIs
260 Exercise Web App APIs
261 Optional Exercise Speech Recognition
262 Resources Public APIs

FINAL PROJECT SmartBrain Front-End
263 What We Are Building
264 Quick Note React Tilt + React Particles
265 Building Our Components
266 Create React App v5 Changes
267 Before We Start The Big Part
268 Image Recognition API
269 Clarifai API Updates, Models and Troubleshooting
270 Resource Clarifai API Docs
271 Face Detection Box
272 Sign In Form And Routing
273 Project Files Github

Node.js + Express.js
274 Introduction To Node.js
275 Latest Version of Node.js
276 For Windows Users
277 Running script.js In Node
278 ES2020 globalThis
279 Modules In Node
280 ES6 Modules
281 ES6 Modules In Node
282 Types of Modules
283 Building a Server
284 Introduction to Express.js
285 Express Middleware
286 Express Version Update
287 Postman
288 Quick Note req.header
289 RESTful APIs
290 Node File System Module
291 Exercise Santa’s Node Helper
292 Exercise Resources Santa’s Node Helper
293 Solution Santa’s Node Helper

FINAL PROJECT SmartBrain Back-End — Server
294 Setting Up Our Server
295 signin and register
296 profile id and image
297 Quick Note Bcrypt
298 Storing User Passwords
299 Resource Storing User Passwords Securely
300 Connecting To Our Front-End
301 Resource CORS
302 Registering Users
303 Exercise Load User Feature
304 User Profile Update
305 Project Files Github

306 Introduction To Databases
307 Installing PostgreSQL
308 For Windows Users
309 Resources Installing PostgreSQL
310 SQL Create Table
311 SQL Insert Into + Select
312 SQL Alter Table + Update
313 SQL Conditional Selections
314 SQL Functions
315 Joining Tables Part 1
316 Joining Tables Part 2
317 SQL Delete From + Drop Table
318 Exercises SQL Commands

FINAL PROJECT SmartBrain Back-End — Database
319 Setting Up Your Database
320 Connecting To The Database
321 Registering A User Part 1
322 Troubleshooting Connecting Knex
323 Registering A User Part 2
324 Getting User Profiles
325 Updating Entries
326 Sign In
327 Quick Note Removing Unused Variables
328 Putting It All Together
329 Optional Using gRPC API
330 What’s Next

Production + Deployment
331 Deploying Our Files
332 Code Review
333 Quick Note Clarifai API
334 Security Review
335 Environment Variables
336 Exercise Deploying To Production
337 Deploying On Heroku
338 Quick Note Troubleshooting Next Video
339 Deploying To Heroku Part 2
340 Deploying To Heroku Part 3
341 Npm Serve
342 Deploying To Heroku Part 4
343 Project Files Github

Where To Go From Here
344 Become an Alumni
345 Resource Interviewing
346 My Advice On Interviewing
347 My Advice On Getting Hired
348 My Advice On Resume Portfolio LinkedIn
349 My Advice On Being a Junior Developer
350 My Advice On How To Become A Senior Developer
351 Thank you

Extra Bits
352 Ask Me Anything – 1,000 Students
353 AMA – 100,000 Students
354 Coding Challenges

Extra Learning React Hooks
355 React Hooks
356 React Hooks 2
357 React Hooks 3
358 React Hooks 4
359 React Hooks 5
360 React Hooks 6
361 React Hooks 7
362 React Hooks 8
363 Project Files – Hooks
364 React Hooks 9

Optional Extra Learning Redux
365 Quick Note About Redux
366 State management
367 Why Redux
368 Installing Redux
369 Redux Toolkit
370 Redux Actions and Reducers
371 Redux Store and Provider
372 Redux connect()
373 Redux Middleware
374 Redux Async Actions
375 Redux Project Structures
376 Popular Tools For React + Redux
377 Project Files – Redux

Extra For Windows Users
378 Introduction From Wolfgang
379 Git for Windows
380 Install NodeJS for Windows
381 Install PostgreSQL for Windows
382 Using PSQL and PGADMIN

383 Bonus Lecture