The Web Developer Bootcamp 2021

The Web Developer Bootcamp 2021

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 63 Hours | 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 2020 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 THE NEW VERSION OF THE COURSE IS HERE
2 Welcome To The Course
3 Curriculum Walkthrough
4 When Was The Course Last Updated
5 Course Change Log
6 Will I Get A Job
7 Accessing Course Code Slides
8 Joining The Community Chat Groups
9 Tips On The Interactive Coding Exercises
10 Migrating From The Old Version Of This Course

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 TryCatch

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 ParentChildSibling
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 Form Events PreventDefault
263 Input Change Events
264 Event Bubbling
265 Event Delegation

Score Keeper CodeAlong
266 Score Keeper Pt. 1
267 Score Keeper Pt. 2
268 Score Keeper Pt. 3 With Bulma
269 Score Keeper Pt. 4 Refactoring

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mongo Relationships With Express
454 What Matters In This Section
455 Defining Our Farm Product Models
456 Creating New Farms
457 Farms Show Page
458 Creating Products For A Farm
459 Finishing Touches
460 Deletion Mongoose Middleware

YelpCamp Adding The Reviews Model
461 Defining The Review Model
462 Adding The Review Form
463 Creating Reviews
464 Validating Reviews
465 Displaying Reviews
466 Styling Reviews
467 Deleting Reviews
468 Campground Delete Middleware

Express Router Cookies
469 What Matters In This Section
470 Express Router Intro
471 Express Router Middleware
472 Introducing Cookies
473 Sending Cookies
474 Cookie Parser Middleware
475 Signing Cookies
476 OPTIONAL HMAC Signing

Express Session Flash
477 What Matters In This Section
478 Introduction to Sessions
479 Express Session
480 More Express Session
481 Intro to Flash
482 Res.locals Flash

YelpCamp Restructuring Flash
483 Breaking Out Campground Routes
484 Breaking Out Review Routes
485 Serving Static Assets
486 Configuring Session
487 Setting Up Flash
488 Flash Success Partial
489 Flash Errors Partial

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

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

YelpCamp Basic Authorization
514 Adding an Author to Campground
515 Showing and Hiding EditDelete
516 Campground Permissions
517 Authorization Middleware
518 Reviews Permissions
519 More Reviews Authorization

YelpCamp Controllers Star Ratings
520 Refactoring To Campgrounds Controller
521 Adding a Reviews Controller
522 A Fancy Way To Restructure Routes
523 Displaying Star Ratings
524 Star Rating Form

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

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

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

YelpCamp Styles Clean Up
553 Styling Home Page
554 Additional Home Page Styling
555 Styling Login Form
556 Styling Register Form
557 Spacing Campgrounds
558 Removing Inline Map Styles
559 Adding Map Controls

YelpCamp Common Security Issues
560 Mongo Injection
561 Cross Site Scripting (XSS)
562 Sanitizing HTML w JOI
563 Minor Changes to SessionCookies
564 Hiding Errors
565 Using Helmet
566 Content Security Policy Fun

YelpCamp Deploying
567 Setting Up Mongo Atlas
568 Using Mongo For Our Session Store
569 Heroku Setup
570 Pushing to Heroku
571 Fixing Heroku Errors
572 Configuring Heroku Env Variables

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