The Web Developer Bootcamp 2022

The Web Developer Bootcamp 2022

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 612 lectures (63h 38m) | 54.7 GB

COMPLETELY REDONE – The only course you need to learn web development – HTML, CSS, JS, Node, and More!

When you’re learning to program you often have to sacrifice learning the exciting and current technologies in favor of the “beginner friendly” classes. With this course, you get the best of both worlds. This is a course designed for the complete beginner, yet it covers some of the most exciting and relevant topics in the industry.

Throughout the brand new version of the course we cover tons of tools and technologies including:

  • HTML5
  • CSS3
  • Flexbox
  • Responsive Design
  • JavaScript (all 2022 modern syntax, ES6, ES2018, etc.)
  • Asynchronous JavaScript – Promises, async/await, etc.
  • AJAX and single page apps
  • Bootstrap 4 and 5 (alpha)
  • SemanticUI
  • Bulma CSS Framework
  • DOM Manipulation
  • Unix(Command Line) Commands
  • NodeJS
  • NPM
  • ExpressJS
  • Templating
  • REST
  • SQL vs. NoSQL databases
  • MongoDB
  • Database Associations
  • Schema Design
  • Mongoose
  • Authentication From Scratch
  • Cookies & Sessions
  • Authorization
  • Common Security Issues – SQL Injection, XSS, etc.
  • Developer Best Practices
  • Deploying Apps
  • Cloud Databases
  • Image Upload and Storage
  • Maps and Geocoding

What you’ll learn

  • The ins and outs of HTML5, CSS3, and Modern JavaScript for 2021
  • Make REAL web applications using cutting-edge technologies
  • Create responsive, accessible, and beautiful layouts
  • Recognize and prevent common security exploits like SQL-Injection & XSS
  • Continue to learn and grow as a developer, long after the course ends
  • Create a blog application from scratch using Node, Express, and MongoDB.
  • Create a complicated yelp-like application from scratch
  • Deploy your applications and work with cloud databases
  • Create static HTML and CSS portfolio sites and landing pages
  • Think like a developer. Become an expert at Googling code questions!
  • Create complex HTML forms with validations
  • Implement full authentication from scratch!
  • Use CSS Frameworks including Bootstrap 5, Semantic UI, and Bulma
  • Implement responsive navbars on websites
  • Use JavaScript variables, conditionals, loops, functions, arrays, and objects
  • Write Javascript functions, and understand scope and higher order functions
  • Master the “weird” parts of JavaScript
  • Create full-stack web applications from scratch
  • Manipulate the DOM with vanilla JS
  • Write JavaScript based browser games
  • Use Postman to monitor and test APIs
  • Use NodeJS to write server-side JavaScript
  • Write complex web apps with multiple models and data associations
  • Write a REAL application using everything in the course
  • Use Express and MongoDB to create full-stack JS applications
  • Use common JS data structures like Arrays and Objects
  • Master the command line interface
  • Use NPM to install all sorts of useful packages
  • Understand the ins and outs of HTTP requests
  • Create your own Node modules
  • Make a beautiful, responsive photographer’s portfolio page
  • Create a beautiful, responsive landing page for a startup
  • Implement user authentication
  • Create a beautiful animated todo list application
  • Create single page applications with AJAX
Table of Contents

Course Orientation
1 Welcome To The Course
2 Curriculum Walkthrough
3 When Was The Course Last Updated
4 Course Change Log
5 Will I Get A Job
6 Accessing Course Code & Slides
7 Joining The Community Chat & Groups
8 Tips On The Interactive Coding Exercises
9 Migrating From The Old Version Of This Course

An Introduction to Web Development
10 What Matters In This Section
11 The Internet in 5 Minutes
12 Intro to the Web
13 The Request Response Cycle
14 Front-End and Back-End
15 What do HTML CSS JS do
16 Setting Up Our Developer Environment
17 OPTIONAL VSCode Theme

HTML The Essentials
18 What Matters In This Section
19 Introduction to HTML
20 Our Very First HTML Page
21 TIP Mozilla Developer Network
22 Paragraph Elements
23 Heading Elements
24 Introduction to the Chrome Inspector
25 HTML Boilerplate
26 VSCode Tip Auto-format
27 List Elements
28 Anchor Tags
29 Images
30 Comments

HTML Next Steps & Semantics
31 What Matters In This Section
32 What Exactly Is HTML5
33 Block vs. Inline Elements – Divs and Spans
34 An Odd Assortment of Elements HR, BR, Sup, & Sub
35 Entity Codes
36 Intro to Semantic Markup
37 Playing With Semantic Elements
38 Screen Reader Demonstration
39 VSCode Tip Emmet

HTML Forms & Tables
40 What Matters In This Section
41 Unit Goals
42 Introducing HTML Tables
43 Tables TR, TD, and TH Elements
44 Tables Thead, Tbody, and Tfoot Elements
45 Tables Colspan & Rowspan
46 The Form Element
47 Common Input Types
48 The All-Important Label
49 HTML Buttons
50 The Name Attribute
51 Hijacking Google & Reddit’s Search
52 Radio Buttons, Checkboxes, & Selects
53 Range & Text Area
54 HTML5 Form Validations
55 Creating A Marathon Registration Form Intro
56 Creating A Marathon Registration Form Solution

CSS The Very Basics
57 What Matters In This Section
58 What is CSS
59 CSS is Huge, Don’t Panic
60 Including Styles Correctly
61 Color & Background-Color Properties
62 Colors Systems RGB & Named Colors
63 Colors Systems Hexadecimal
64 A Reminder On Semicolons & CSS
65 Common Text Properties
66 Font Size Basics With Pixels
67 The Font Family Property

The World of CSS Selectors
68 What Matters In This Section
69 Universal & Element Selectors
70 The ID Selector
71 The Class Selector
72 The Descendent Selector
73 The Adjacent & Direct-Descendent Selectors
74 The Attribute Selector
75 Pseudo Classes
76 Pseudo Elements
77 The CSS Cascade
78 WTF is Specificity
79 TIP Chrome Dev Tools & CSS
80 Inline Styles & Important
81 CSS Inheritance

The CSS Box Model
82 What Matters In This Section
83 Box Model Width & Height
84 Box Model Border & Border-Radius
85 Box Model Padding
86 Box Model Margin
87 The Display Property
88 CSS Units Revisited
89 CSS Units ems
90 CSS Units rems

Other Assorted Useful CSS Properties
91 What Matters In This Section
92 Opacity & The Alpha Channel
93 The Position Property
94 CSS Transitions (yay )
95 The Power of CSS Transforms
96 Fancy Button Hover Effect CodeAlong
97 The Truth About Background
98 Google Fonts is Amazing
99 Photo Blog CodeAlong Pt. 1
100 Photo Blog CodeAlong Pt. 2

Responsive CSS & Flexbox
101 What Matters In This Section
102 What on Earth Is Flexbox
103 Flex-Direction
104 Justify-Content
105 Flex-Wrap
106 Align-Items
107 Align-Content & Align-Self
108 Flex-Basis, Grow, & Shrink
109 Flex Shorthand
110 Responsive Design & Media Queries Intro
111 The Power of Media Queries
112 Building a Responsive Nav

Pricing Panel Project
113 Pricing Panel CodeAlong Pt. 1
114 Pricing Panel CodeAlong Pt. 2
115 Pricing Panel CodeAlong Pt. 3
116 Pricing Panel CodeAlong Pt. 4
117 Pricing Panel CodeAlong Pt. 5
118 Pricing Panel CodeAlong Pt. 6

CSS Frameworks Bootstrap
119 What Matters In This Section
120 WTF Is Bootstrap
121 Including Bootstrap & Containers
122 Bootstrap Buttons
123 Bootstrap Typography & Utilities
124 Badges, Alerts, & Button Groups
125 Intro to the Bootstrap Grid
126 Responsive Bootstrap Grids
127 Useful Grid Utilities
128 Bootstrap & Forms
129 Bootstrap Navbars
130 Bootstrap Icons
131 Other Bootstrap Utilities
132 A Mixed Bag of Other Bootstrap Stuff

OPTIONAL Museum Of Candy Project
133 Watch This First (it’s short)
134 Museum of Candy Project Part 1
135 NOTE ABOUT THE NEXT VIDEO
136 Museum of Candy Project Part 2
137 Museum of Candy Project Part 3
138 Museum of Candy Project Part 4
139 Museum of Candy Project Part 5

JavaScript Basics
140 What Matters In This Section
141 Why JavaScript is Awesome
142 Primitives & The Console
143 JavaScript Numbers
144 WTF is NaN
145 Quick Numbers Quiz
146 Variables & Let
147 Updating Variables
148 Const & Var
149 Booleans
150 Variable Naming and Conventions

JavaScript Strings and More
151 What Matters In This Section
152 Introducing Strings
153 Indices & Length
154 String Methods
155 String Methods With Arguments
156 String Template Literals -SUPER USEFUL
157 Undefined & Null
158 Random Numbers & The Math Object

JavaScript Decision Making
159 What Matters In This Section
160 Decision Making With Code
161 Comparison Operators
162 Equality Triple Vs. Double Equals
163 Console, Alert, & Prompt
164 Running JavaScript From A Script
165 If Statements
166 Else-If
167 Else
168 Nesting Conditionals
169 Truth-y & False-y Values
170 Logical AND
171 Logical OR
172 Logical NOT
173 The Switch Statement Is…A Lot

JavaScript Arrays
174 What Matters In This Section
175 Introducing Arrays
176 Array Random Access
177 Push & Pop
178 Shift & Unshift
179 Concat, indexOf, includes & reverse
180 Slice & Splice
181 Reference Types & Equality Testing
182 Arrays + Const
183 Multi-Dimensional Arrays

JavaScript Object Literals
184 What Matters In This Section
185 Introducing Object Literals
186 Creating Object Literals
187 Accessing Data Out Of Objects
188 Modifying Objects
189 Nesting Arrays & Objects

Repeating Stuff With Loops
190 What Matters In This Section
191 Intro to For Loops
192 More For Loops Examples
193 The Perils Of Infinite Loops (
194 Looping Over Arrays
195 Nested Loops
196 Another Loop The While Loop
197 The Break Keyword
198 Writing a Guessing Game
199 The Lovely For…Of Loop
200 Iterating Over Objects
201 Todo List Project Intro
202 Todo List Project CodeAlong

NEW Introducing Functions
203 What Matters In This Section
204 Intro to Functions
205 Our Very First Function
206 Arguments Intro
207 Functions With Multiple Arguments
208 The Return Keyword

Leveling Up Our Functions
209 What Matters In This Section
210 Function Scope
211 Block Scope
212 Lexical Scope
213 Function Expressions
214 Higher Order Functions
215 Returning Functions
216 Defining Methods
217 The Mysterious Keyword ‘this’
218 Using Try Catch

Callbacks & Array Methods
219 What Matters In This Section
220 What Is This Section Even About
221 The forEach Method
222 The map Method
223 Intro to Arrow Functions
224 Arrow Function Implicit Returns
225 Arrow Functions Wrapup
226 setTimeout and setInterval
227 The filter Method
228 Some & Every Methods
229 The Notorious Reduce Method
230 Arrow Functions & ‘this’

Newer JavaScript Features
231 What Matters In This Section
232 Default Params
233 Spread in Function Calls
234 Spread with Array Literals
235 Spread with Objects
236 Rest Params
237 Destructuring Arrays
238 Destructuring Objects
239 Destructuring Params

Introducing The World Of The DOM
240 What Matters In This Section
241 Introducing the DOM
242 The Document Object
243 getElementById
244 getElementsByTagName & className
245 querySelector & querySelectorAll
246 innerHTML, textContent, & innerText
247 Attributes
248 Changing Styles
249 ClassList
250 Traversing Parent Child Sibling
251 Append & AppendChild
252 removeChild & remove
253 Pokemon Sprites Demo

The Missing Piece DOM Events
254 What Matters In This Section
255 Intro to Events
256 Inline Events
257 The Onclick Property
258 addEventListener
259 Random Color Exercise
260 Events & The Keyword This
261 Keyboard Events & Event Objects
262 NEW VERSION Form Events & PreventDefault
263 NEW VERSION Practice With Form Events & PreventDefault
264 ORIGINAL VERSION Form Events & PreventDefault
265 Input & Change Events
266 Event Bubbling
267 Event Delegation

Score Keeper CodeAlong
268 Score Keeper Pt. 1
269 Score Keeper Pt. 2
270 Score Keeper Pt. 3 With Bulma
271 Score Keeper Pt. 4 Refactoring

Async JavaScript Oh Boy
272 What Matters In This Section
273 The Call Stack
274 WebAPIs & Single Threaded
275 Callback Hell (
276 Demo fakeRequest Using Callbacks
277 Demo fakeRequest Using Promises
278 The Magic Of Promises
279 Creating Our Own Promises
280 The Async Keyword
281 The Await Keyword
282 Handling Errors In Async Functions

AJAX and API’s
283 What Matters In This Section
284 Intro to AJAX
285 Intro to APIs
286 WTF is JSON
287 Using Postman
288 Query Strings & Headers
289 Making XHR’s
290 The Fetch API
291 Intro to Axios
292 Setting Headers With Axios
293 TV Show Search App

Prototypes, Classes, & OOP
294 What Matters In This Section
295 What On Earth Are Prototypes
296 Intro to Object Oriented Programming
297 Factory Functions
298 Constructor Functions
299 JavaScript Classes
300 More Classes Practice
301 Extends and Super Keywords

Mastering The Terminal
302 What Matters In This Section
303 Backend Overview
304 A Pep Talk On Terminal
305 Why Do We Need To Know Terminal Commands
306 Windows Terminal Installation Instructions
307 The Basics LS & PWD
308 Changing Directories
309 Relative Vs. Absolute Paths
310 Making Directories
311 Man Pages & Flags
312 The Touch Command
313 Removing Files & Folders

Our First Brush With Node
314 What Matters In This Section
315 Introducing Node JS
316 What Is Node Used For
317 Installing Node
318 The Node REPL
319 Running Node Files
320 Process & Argv
321 File System Module Crash Course

Exploring Modules & The NPM Universe
322 What Matters In This Section
323 Working With module.exports
324 Requiring A Directory
325 Introducing NPM
326 Installing Packages – Jokes & Rainbow
327 Adding Global Packages
328 The All-Important Package.json
329 Installing All Dependencies For A Project
330 Language Guesser Challenge

Creating Servers With Express
331 What Matters In This Section
332 Introducing Express
333 Our Very First Express App
334 The Request & Response Objects
335 Express Routing Basics
336 Express Path Parameters
337 Working With Query Strings
338 Auto-Restart With Nodemon

Creating Dynamic HTML With Templating
339 What Matters In This Section
340 What is Templating
341 Configuring Express For EJS
342 Setting The Views Directory
343 EJS Interpolation Syntax
344 Passing Data To Templates
345 Subreddit Template Demo
346 Conditionals in EJS
347 Loops In EJS
348 A More Complex Subreddit Demo
349 Serving Static Assets In Express
350 Bootstrap + Express
351 EJS & Partials

Defining RESTful Routes
352 What Matters In This Section
353 Get Vs. Post Requests
354 Defining Express Post Routes
355 Parsing The Request Body
356 Intro to REST
357 RESTful Comments Overview
358 RESTful Comments Index
359 RESTful Comments New
360 Express Redirects
361 RESTful Comments Show
362 The UUID Package
363 RESTful Comments Update
364 Express Method Override
365 RESTful Comments Delete

Our First Database MongoDB
366 What Matters In This Section
367 Introduction to Databases
368 SQL Vs. NoSQL Databases
369 Why We’re Learning Mongo
370 Installing Mongo MacOS
371 Installing Mongo Windows
372 The Mongo Shell
373 What On Earth Is BSON
374 Inserting With Mongo
375 Finding With Mongo
376 Updating With Mongo
377 Deleting With Mongo
378 Additional Mongo Operators

Connecting To Mongo With Mongoose
379 What Matters In This Section
380 What is Mongoose
381 Connecting Mongoose to Mongo
382 Our First Mongoose Model
383 Insert Many
384 Finding With Mongoose
385 Updating With Mongoose
386 Deleting With Mongoose
387 Mongoose Schema Validations
388 Additional Schema Constraints
389 Validating Mongoose Updates
390 Mongoose Validation Errors
391 Model Instance Methods
392 Adding Model Static Methods
393 Mongoose Virtuals
394 Defining Mongoose Middleware

Putting It All Together Mongoose With Express
395 What Matters In This Section
396 Express + Mongoose Basic Setup
397 Creating Our Model
398 Products Index
399 Product Details
400 Creating Products
401 Updating Products
402 Tangent On Category Selector
403 Deleting Products
404 BONUS Filtering By Category

YelpCamp Campgrounds CRUD
405 Introducing YelpCamp Our Massive Project
406 How to Access YelpCamp Code
407 Creating the Basic Express App
408 Campground Model Basics
409 Seeding Campgrounds
410 Campground Index
411 Campground Show
412 Campground New & Create
413 Campground Edit & Update
414 Campground Delete

Middleware The Key To Express
415 What Matters In This Section
416 Intro to Express Middleware
417 Using Morgan – Logger Middleware
418 Defining Our Own Middleware
419 More Middleware Practice
420 Setting Up A 404 Route
421 Password Middleware Demo (NOT REAL AUTH)
422 Protecting Specific Routes

YelpCamp Adding Basic Styles
423 A New EJS Tool For Layouts
424 Bootstrap5 Boilerplate
425 Navbar Partial
426 Footer Partial
427 Adding Images
428 Styling Campgrounds Index
429 Styling The New Form
430 Styling Edit Form
431 Styling Show Page

Handling Errors In Express Apps
432 What Matters In This Section
433 Express’ Built-In Error Handler
434 Defining Custom Error Handlers
435 Our Custom Error Class
436 Handling Async Errors
437 Handling More Async Errors
438 Defining An Async Utility
439 Differentiating Mongoose Errors

YelpCamp Errors & Validating Data
440 Where To Next With YelpCamp
441 Client-Side Form Validations
442 Basic Error Handler
443 Defining ExpressError Class
444 More Errors
445 Defining Error Template
446 JOI Schema Validations
447 JOI Validation Middleware

Data Relationships With Mongo
448 What Matters In This Section
449 Introduction to Mongo Relationships
450 SQL Relationships Overview
451 One to Few
452 One to Many
453 Mongoose Populate
454 One to Bajillions
455 Mongo Schema Design

Mongo Relationships With Express
456 What Matters In This Section
457 Defining Our Farm & Product Models
458 Note about Farm model
459 Creating New Farms
460 Farms Show Page
461 Creating Products For A Farm
462 Finishing Touches
463 Deletion Mongoose Middleware

YelpCamp Adding The Reviews Model
464 Defining The Review Model
465 Adding The Review Form
466 Creating Reviews
467 Validating Reviews
468 Displaying Reviews
469 Styling Reviews
470 Deleting Reviews
471 Campground Delete Middleware

Express Router & Cookies
472 What Matters In This Section
473 Express Router Intro
474 Express Router & Middleware
475 Introducing Cookies
476 Sending Cookies
477 Cookie Parser Middleware
478 Signing Cookies
479 OPTIONAL HMAC Signing

Express Session & Flash
480 What Matters In This Section
481 Introduction to Sessions
482 Express Session
483 More Express Session
484 Intro to Flash
485 Res.locals & Flash

YelpCamp Restructuring & Flash
486 Breaking Out Campground Routes
487 Breaking Out Review Routes
488 Serving Static Assets
489 Configuring Session
490 Setting Up Flash
491 Flash Success Partial
492 Flash Errors Partial

Authentication From Scratch
493 What Matters In This Section
494 Authentication Vs. Authorization
495 How to (not) Store Passwords
496 Cryptographic Hashing Functions
497 Password Salts
498 Intro to Bcrypt
499 Auth Demo Setup
500 Auth Demo Registering
501 Auth Demo Login
502 Auth Demo Staying Logged In With Session
503 Auth Demo Logout
504 Auth Demo Require Login Middleware
505 Auth Demo Refactoring To Model Methods

YelpCamp Adding In Authentication
506 Introduction to Passport
507 Creating Our User Model
508 Configuring Passport
509 Register Form
510 Register Route Logic
511 Login Routes
512 isLoggedIn Middleware
513 Adding Logout
514 currentUser Helper
515 Fixing Register Route
516 ReturnTo Behavior

YelpCamp Basic Authorization
517 Adding an Author to Campground
518 Showing and Hiding Edit Delete
519 Campground Permissions
520 Authorization Middleware
521 Reviews Permissions
522 More Reviews Authorization

YelpCamp Controllers & Star Ratings
523 Refactoring To Campgrounds Controller
524 Adding a Reviews Controller
525 A Fancy Way To Restructure Routes
526 Displaying Star Ratings
527 Star Rating Form

YelpCamp Image Upload
528 Intro To Image Upload Process
529 The Multer Middleware
530 Cloudinary Registration
531 Environment Variables with dotenv
532 Uploading To Cloudinary Basics
533 Storing Uploaded Image Links In Mongo
534 Displaying Images In A Carousel
535 Fixing Our Seeds
536 Adding Upload to Edit Page
537 Customizing File Input
538 A Word Of Warning
539 Deleting Images Form
540 Deleting Images Backend
541 Adding a Thumbnail Virtual Property

YelpCamp Adding Maps
542 Registering For Mapbox
543 Geocoding Our Locations
544 Working With GeoJSON
545 Displaying A Map
546 Centering The Map On A Campground
547 Fixing Our Seeds Bug
548 Customizing Map Popup

YelpCamp Fancy Cluster Map
549 Intro To Our Cluster Map
550 Adding Earthquake Cluster Map
551 Reseeding Our Database (again)
552 Basic Clustering Campgrounds
553 Tweaking Clustering Code
554 Changing Cluster Size and Color
555 Adding Custom Popups

YelpCamp Styles Clean Up
556 Styling Home Page
557 Additional Home Page Styling
558 Styling Login Form
559 Styling Register Form
560 Spacing Campgrounds
561 Removing Inline Map Styles
562 Adding Map Controls

YelpCamp Common Security Issues
563 Mongo Injection
564 Cross Site Scripting (XSS)
565 Sanitizing HTML w JOI
566 Minor Changes to Session Cookies
567 Hiding Errors
568 Using Helmet
569 Content Security Policy Fun

YelpCamp Deploying
570 Setting Up Mongo Atlas
571 Using Mongo For Our Session Store
572 Heroku Setup
573 Pushing to Heroku
574 Fixing Heroku Errors
575 Configuring Heroku Env Variables

The End (
576 What’s Next and Goodbye

LEGACY CONTENT (The Old Version Of This Course)
577 LEGACY Download Introduction To This Course
578 LEGACY Download Introduction To Front End Development
579 LEGACY Download Introduction to HTML
580 LEGACY Download Intermediate HTML
581 LEGACY Download Introduction to CSS
582 LEGACY Download Intermediate CSS
583 LEGACY Download Bootstrap
584 LEGACY Download Bootstrap 4
585 LEGACY Download Bootstrap 4 Flexbox & Layout
586 LEGACY Download Introduction to JavaScript
587 LEGACY Download JavaScript Basics Control Flow
588 LEGACY Download JavaScript Basics Functions
589 LEGACY Download JavaScript Basics Arrays
590 LEGACY Download JavaScript Basics Objects
591 LEGACY Download DOM Manipulation
592 LEGACY Download Advanced DOM Manipulation
593 LEGACY Download Color Game Project
594 LEGACY Download Intro to jQuery
595 LEGACY Download Advanced jQuery
596 LEGACY Download Todo List Projects
597 LEGACY Download Patatap Clone
598 LEGACY Download Backend Basics
599 LEGACY Download The Command Line
600 LEGACY Download Node JS
601 LEGACY Download Server Side Frameworks
602 LEGACY Download Intermediate Express
603 LEGACY Download Working With APIs
604 LEGACY Download YelpCamp Basics
605 LEGACY Download Databases
606 LEGACY Download YelpCamp Data Persistence
607 LEGACY Download RESTful Routing
608 LEGACY Download Data Associations
609 LEGACY Download YelpCamp Comments
610 LEGACY Download Authentication
611 LEGACY Download YelpCamp Adding Authentication
612 LEGACY Download YelpCamp Cleaning Up

Homepage