The Complete Web Developer in 2021: Zero to Mastery

The Complete Web Developer in 2021: Zero to Mastery

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 35.5 Hours | 18.2 GB

Learn to code and become a Web Developer in 2021 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 4
  • DOM Manipulation
  • Javascript (including ES6/ES7/ES8/ES9/ES10)
  • Asynchronous JavaScript
  • React + Redux
  • 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 2021
  • 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.

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 2021 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 2021
  • 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 Developer History
19 Exercise Adding CSS and JavaScript to Tims website
20 Optional Resource More About the History of the Web

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

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

42 Exercise Files Code-Along
43 Your First CSS
44 CSS Properties
45 CSS Selectors
46 Optional Exercise CSS Selectors
47 Text and Font
48 Images In CSS
49 Box Model
50 px vs em vs rem
51 Exercise CSS Quiz

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

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

CSS Grid CSS Layout
83 Section Overview
84 CSS Grid vs Flexbox vs Bootstrap
85 Quick Note grid-gap to gap
86 CSS Grid 1
87 CSS Grid 2
88 CSS Grid 3
89 CSS Grid 4
90 CSS Grid 5
91 Optional Exercise CSS Grid
92 Exercise CSS Layout
93 Solution Navigation Bar
94 Solution Navigation Bar 2
95 Solution Cover
96 Solution Project Grid Footer
97 Quick Note Upcoming Video
98 Solution Prettify
99 The Truth About CSS

Career Of A Web Developer
100 Career Of A Web Developer
101 Updated Statistics
102 Web Developer Roadmap This Year
103 Endorsements On LinkedIN
104 Quick Note Upcoming Video
105 What If I Dont Have Enough Experience
106 Learning Guideline

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

DOM Manipulation
130 Document Object Model
131 DOM Selectors
132 Exercise DOM Selectors
133 DOM Events
134 Note Callback Functions
135 Exercise DOM Events
136 Solution DOM Events
137 Exercise Background Generator
138 Background Generator Files
139 jQuery

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

Command Line
175 For WINDOWS Users ONLY
176 Quick Note For Windows Users
177 Using The Terminal
178 Exercise Practice Using The Terminal

Developer Environment
179 Sublime Text 3
180 Resources Customizing Sublime Text 3
181 VS Code
182 Resources Customizing VS Code
183 Terminal
184 Resources Customizing Terminal
185 For Windows Customizing Git Bash

Git Github Open Source Projects
186 Installing Git
187 Git Github Part 1
188 Github Update Master — Main
189 Git Github Part 2
190 My Terminal Setup
191 Contributing To Open Source
192 Contributing To Open Source 2
193 Exercise Contribute To Our Open Source
194 Keeping Your Fork Up To Date
195 Portfolio Website for Recruiters
196 Student Generated Top Resources

A Day In The Life Of A Developer
197 A Typical Day
198 Exercise Helping A Developer
199 A Developers Morning Routine

NPM NPM Scripts
200 Introduction To NPM
201 Setting Up NPM and package.json
202 Update Latest Node.js and NPM
203 Troubleshoot Installing NPM and Node.js
204 Installing And Using Packages
205 Why Update Packages
206 Quick Note About Packages
207 Exercise Create A Portfolio

React.js React Hooks Redux (Hooks and Redux videos moved to end of course)
208 Introduction To React.js
209 Quick Note CRA Growing Pains
210 create-react-app
211 create-react-app 2
212 create-react-app 3
213 Quick Note Class vs Functional App.js
214 Code From Previous Video
215 Quick Note CRA 4
216 Your First React Component
217 Building A React App 1
218 React.Fragment and Semantic HTML
219 Building A React App 2
220 Building A React App 3
221 Styling Your React App
222 Building A React App 4
223 Building A React App 5
224 Building A React App 6
225 Project Files
226 Keeping Your Projects Up To Date
227 Exercise React 17
228 Solution React 17
229 React Review
230 Error Boundary In React
231 Deploying Our React App
232 React Hooks Redux (Saved For End Of The Course)

HTTPJSONAJAX Asynchronous Javascript
234 JSON
235 JSON vs Form Data
236 AJAX
237 Promises
238 Exercise Promises
239 ES8 – Async Await
240 Exercise ES8 – Async Await
241 ES9 (ESE8)
242 ES9 (ESE8) – Async
243 ES2020 allSettled()
244 Reviewing ES6 ES7 ES8 ES9 ES10 ES11 Features

Backend Introduction
245 Backend Basics

246 Getting Ready For This Section
247 Introduction to APIs
248 Exercise Web App APIs
249 Optional Exercise Speech Recognition
250 Resources Public APIs

FINAL PROJECT SmartBrain Front-End
251 What We Are Building
252 Building Our Components
253 Quick Note Updated API
254 Image Recognition API
255 Clarifai API Updates Models and Troubleshooting
256 Resource Clarifai API Docs
257 Optional Advanced setState()
258 Face Detection Box
259 Sign In Form And Routing
260 Project Files Github

Node.js Express.js
261 Introduction To Node.js
262 Latest Version of Node.js
263 For Windows Users
264 Running script.js In Node
265 ES2020 globalThis
266 Modules In Node
267 ES6 Modules
268 ES6 Modules In Node
269 Types of Modules
270 Building a Server
271 Introduction to Express.js
272 Express Middleware
273 Express Version Update
274 Postman
275 Quick Note req.header
276 RESTful APIs
277 Node File System Module
278 Exercise Santas Node Helper
279 Exercise Resources Santas Node Helper
280 Solution Santas Node Helper

FINAL PROJECT SmartBrain Back-End — Server
281 Setting Up Our Server
282 signin and register
283 profileid and image
284 Quick Note Bcrypt
285 Storing User Passwords
286 Resource Storing User Passwords Securely
287 Connecting To Our Front-End
288 Resource CORS
289 Registering Users
290 Exercise Load User Feature
291 User Profile Update
292 Project Files Github

293 Introduction To Databases
294 Installing PostgreSQL
295 For Windows Users
296 Resources Installing PostgreSQL
297 SQL Create Table
298 SQL Insert Into Select
299 SQL Alter Table Update
300 SQL Conditional Selections
301 SQL Functions
302 Joining Tables Part 1
303 Joining Tables Part 2
304 SQL Delete From Drop Table
305 Exercises SQL Commands

FINAL PROJECT SmartBrain Back-End — Database
306 Setting Up Your Database
307 Connecting To The Database
308 Registering A User Part 1
309 Troubleshooting Connecting Knex
310 Registering A User Part 2
311 Getting User Profiles
312 Updating Entries
313 Sign In
314 Quick Note Removing Unused Variables
315 Putting It All Together
316 Whats Next

Production Deployment
317 Deploying Our Files
318 Code Review
319 Quick Note Updated API
320 Security Review
321 Environment Variables
322 Exercise Deploying To Production
323 Deploying On Heroku
324 Quick Note Troubleshooting Next Video
325 Deploying To Heroku Part 2
326 Deploying To Heroku Part 3
327 Npm Serve
328 Deploying To Heroku Part 4
329 Project Files Github

Where To Go From Here
330 Become an Alumni
331 Resource Interviewing
332 My Advice On Interviewing
333 My Advice On Getting Hired
334 My Advice On ResumePortfolioLinkedIn
335 My Advice On Being a Junior Developer
336 My Advice On How To Become A Senior Developer
337 Thank you

Bonus Extra Bits
338 Ask Me Anything – 1000 Students
339 AMA – 100000 Students
340 Coding Challenges

Extra Learning React Hooks
341 React Hooks
342 React Hooks 2
343 React Hooks 3
344 React Hooks 4
345 React Hooks 5
346 React Hooks 6
347 React Hooks 7
348 React Hooks 8
349 Project Files – Hooks
350 React Hooks 9

Extra Learning Redux
351 Quick Note About Redux
352 State management
353 Why Redux
354 Installing Redux
355 Redux Toolkit
356 Redux Actions and Reducers
357 Redux Store and Provider
358 Redux connect()
359 Redux Middleware
360 Redux Async Actions
361 Redux Project Structures
362 Popular Tools For React Redux
363 Project Files – Redux

Extra For Windows Users
364 Introduction From Wolfgang
365 Quick Note Upcoming Video
366 Installing Git for Windows
367 Installing NodeJs for Windows
368 Installing PostgreSQL for Windows
369 Set Up PostgreSQL for CMD Using PgAdmin

370 Bonus Lecture