The Complete Web Developer in 2023: Zero to Mastery

The Complete Web Developer in 2023: Zero to Mastery

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 399 lectures (38h 38m) | 27.0 GB

Learn to code and become a Web Developer in 2023 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 2023
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 2023 so that you are miles ahead of the rest.

Make this the year that you took a risk, you learned highly in demand skills, you had new experiences, and you received new opportunities. I hope you join me in this journey.

This is the proudest work I have ever done in my life and I am confident that you won’t find a course better than this.

Table of Contents

1 Course Outline
2 Join Our Online Classroom
3 Exercise Meet Your Classmates and Instructor
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 Tims 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 indexhtml
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 CodeAlong
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 CodeAlong 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 Exercise Changing Versions
71 Bootstrap Grid
72 Free Resources For Our Project
73 Exercise Startup Landing Page
74 Exercise Startup Landing Page 2
75 Exercise Startup Landing Page 3
76 Quick Note The hr tag
77 Exercise Startup Landing Page 4
78 Exercise Startup Landing Page 5
79 Quick Note Mailchimp
80 Exercise Adding Email Subscribe Form With MailChimp
81 Quick Note Upcoming Videos
82 Exercise Putting Your Website Online
83 Exercise Putting Your Website Online 2
84 Quick Note Upcoming Video
86 Using Templates
87 Resources for FREE Templates
88 Startup Landing Pages by Students

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

Career Of A Web Developer
107 Career Of A Web Developer
108 Updated Statistics
109 Web Developer Roadmap
110 Quick Note Upcoming Video
111 What If I Dont Have Enough Experience
112 Endorsements On LinkedIN
114 Learning Guideline

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

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

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

Command Line
185 For WINDOWS Users ONLY
186 Quick Note For Windows Users
187 Using The Terminal
188 Exercise Practice Using The Terminal

Developer Environment
189 Sublime Text
190 Resources Customizing Sublime Text
191 VS Code
192 Resources Customizing VS Code
193 Terminal
194 Resources Customizing Terminal
195 For Windows Customizing Git Bash

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

A Day In The Life Of A Developer
207 A Typical Day
208 Exercise Helping A Developer
209 A Developers Morning Routine

NPM NPM Scripts
210 Introduction To NPM
211 Setting Up NPM and packagejson
212 Update Latest Nodejs and NPM
213 Troubleshoot Installing NPM and Nodejs
214 Installing And Using Packages
215 Why Update Packages
216 Quick Note About Packages
217 Exercise Create A Portfolio

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

HTTPJSONAJAX Asynchronous Javascript
247 JSON
248 JSON vs Form Data
249 AJAX
250 Quick Note Upcoming Video
251 Promises
252 Exercise Promises
253 ES8 Async Await
254 Exercise ES8 Async Await
255 ES9 ES2018
256 ES9 ES2018 Async
257 ES2020 allSettled
258 ES2021 any
259 Reviewing ES6 ES7 ES8 ES9 ES10 ES11 Features

Backend Introduction
260 Backend Basics

261 Getting Ready For This Section
262 Introduction to APIs
263 Exercise Web App APIs
264 Optional Exercise Speech Recognition
265 Resources Public APIs

Leveling Up The Power of Problem Solving
266 Snapshot Model of Learning
267 LTL Deliberate Practice
268 Exercise Deliberate Practice

FINAL PROJECT SmartBrain FrontEnd
269 What We Are Building
270 DEVELOPER FUNDAMENTALS Maintain Your Codebase
271 Quick Note React Tilt React Particles
272 Building Our Components
273 Create React App v5 Changes
274 Before We Start The Big Part
275 Exercise Reading the Docs
276 Image Recognition API
277 Clarifai API Updates Models and Troubleshooting
278 Resource Clarifai API Docs
279 Face Detection Box
280 Sign In Form And Routing
281 Project Files Github

Nodejs Expressjs
282 Introduction To Nodejs
283 fetch in Node
284 Latest Version of Nodejs
285 For Windows Users
286 Running scriptjs In Node
287 ES2020 globalThis
288 Modules In Node
289 ES6 Modules
290 ES6 Modules In Node
291 ES2022 Top Level Await
292 Exercise ES2022 Top Level Await
293 ES2022 Await Import
294 Types of Modules
295 Building a Server
296 Introduction to Expressjs
297 Express Middleware
298 Express Version Update
299 Postman
300 Quick Note reqheader
301 RESTful APIs
302 Node File System Module
303 Exercise Santas Node Helper
304 Exercise Resources Santas Node Helper
305 Solution Santas Node Helper

FINAL PROJECT SmartBrain BackEnd Server
306 Setting Up Our Server
307 signin and register
308 profileid and image
309 Quick Note Bcrypt
310 Storing User Passwords
311 Resource Storing User Passwords Securely
312 Connecting To Our FrontEnd
313 Resource CORS
314 Registering Users
315 Exercise Load User Feature
316 User Profile Update
317 Project Files Github

318 Introduction To Databases
319 Installing PostgreSQL
320 For Windows Users
321 Resources Installing PostgreSQL
322 SQL Create Table
323 SQL Insert Into Select
324 SQL Alter Table Update
325 SQL Conditional Selections
326 SQL Functions
327 Joining Tables Part 1
328 Joining Tables Part 2
329 SQL Delete From Drop Table
330 Exercises SQL Commands

FINAL PROJECT SmartBrain BackEnd Database
331 Setting Up Your Database
332 Connecting To The Database
333 Troubleshooting Connecting Knex
334 Registering A User Part 1
335 Registering A User Part 2
336 Getting User Profiles
337 Quick Note Knexjs Breaking Changes
338 Updating Entries
339 Quick Note Knexjs Breaking Changes 2
340 Sign In
341 Quick Note Removing Unused Variables
342 Putting It All Together
343 Optional Using gRPC API
344 Whats Next

Production Deployment
345 Deploying Our Files
346 Code Review
347 Quick Note Clarifai API
348 Security Review
349 Quick Note Cleaning Up
350 Environment Variables
351 Exercise Deploying To Production
352 Deploying On Heroku
353 Quick Note Troubleshooting Next Video
354 Deploying To Heroku Part 2
355 Deploying To Heroku Part 3
356 Npm Serve
357 Deploying To Heroku Part 4
358 Project Files Github

Where To Go From Here
359 Thank You
360 Become an Alumni
361 Resource Interviewing
362 My Advice On Interviewing
363 My Advice On Getting Hired
364 My Advice On ResumePortfolioLinkedIn
365 My Advice On Being a Junior Developer
366 My Advice On How To Become A Senior Developer
367 Part 2

Extra Bits
368 Ask Me Anything 1000 Students
369 AMA 100000 Students
370 Coding Challenges

Extra Learning React Hooks
371 React Hooks
372 React Hooks 2
373 React Hooks 3
374 React Hooks 4
375 React Hooks 5
376 React Hooks 6
377 React Hooks 7
378 React Hooks 8
379 Project Files Hooks
380 React Hooks 9

Optional Extra Learning Redux
381 Quick Note About Redux
382 State management
383 Why Redux
384 Installing Redux
385 Redux Toolkit
386 Redux Actions and Reducers
387 Redux Store and Provider
388 Redux connect
389 Redux Middleware
390 Redux Async Actions
391 Redux Project Structures
392 Popular Tools For React Redux
393 Project Files Redux

Extra For Windows Users
394 Introduction From Wolfgang
395 Git for Windows
396 Install NodeJS for Windows
397 Install PostgreSQL for Windows
398 Using PSQL and PGADMIN

399 Special Bonus Lecture