Library chevron_right

The Web Developer Bootcamp 2024

Contents
About

Course Contents

  • Section 1: Course Orientation
    8 lectures • 32 min
    • 1 The Web Developer Bootcamp 2025
      02:33
    • 2 Welcome To The Course!
      03:47
    • 3 Curriculum Walkthrough
      04:12
    • 4 When Was The Course Last Updated?
      02:17
    • 5 Will I Get A Job?
      05:45
    • 6 Accessing Course Code & Slides
      02:23
    • 7 Tips On The Interactive Coding Exercises
      03:25
    • 8 Migrating From The Old Version Of This Course
      08:07
  • Section 2: An Introduction to Web Development
    8 lectures • 40 min
    • 9 What Matters In This Section?
      03:28
    • 10 The Internet in 5 Minutes
      05:42
    • 11 Intro to the Web
      06:01
    • 12 The Request/Response Cycle
      04:21
    • 13 Front-End and Back-End
      03:59
    • 14 What do HTML/CSS/JS do?
      05:36
    • 15 Setting Up Our Developer Environment
      05:59
    • 16 OPTIONAL VSCode Theme
      04:28
  • Section 3: HTML: The Essentials
    13 lectures • 1.1 hr
    • 17 What Matters In This Section
      02:12
    • 18 Introduction to HTML
      06:55
    • 19 Our Very First HTML Page
      05:33
    • 20 TIP: Mozilla Developer Network
      02:41
    • 21 Paragraph Elements
      03:14
    • 22 Heading Elements
      06:34
    • 23 Introduction to the Chrome Inspector
      03:07
    • 24 HTML Boilerplate
      07:25
    • 25 VSCode Tip: Auto-format
      02:37
    • 26 List Elements
      06:39
    • 27 Anchor Tags
      07:07
    • 28 Images
      06:26
    • 29 Comments
      02:31
  • Section 4: HTML: Next Steps & Semantics
    9 lectures • 1.0 hr
    • 30 What Matters In This Section
      02:27
    • 31 What Exactly Is HTML5?
      06:27
    • 32 Block vs. Inline Elements - Divs and Spans
      08:42
    • 33 An Odd Assortment of Elements: HR, BR, Sup, & Sub
      06:18
    • 34 Entity Codes
      06:01
    • 35 Intro to Semantic Markup
      09:01
    • 36 Playing With Semantic Elements
      12:18
    • 37 Screen Reader Demonstration
      03:33
    • 38 VSCode Tip: Emmet
      06:12
  • Section 5: HTML: Forms & Tables
    17 lectures • 1.8 hr
    • 39 What Matters In This Section
      02:52
    • 40 Unit Goals
      01:09
    • 41 Introducing HTML Tables
      04:08
    • 42 Tables: TR, TD, and TH Elements
      09:11
    • 43 Tables: Thead, Tbody, and Tfoot Elements
      02:15
    • 44 Tables: Colspan & Rowspan
      04:14
    • 45 The Form Element
      09:18
    • 46 Common Input Types
      05:27
    • 47 The All-Important Label
      06:52
    • 48 HTML Buttons
      05:17
    • 49 The Name Attribute
      05:26
    • 50 "Hijacking" Google & Reddit's Search
      06:25
    • 51 Radio Buttons, Checkboxes, & Selects
      10:54
    • 52 Range & Text Area
      07:02
    • 53 HTML5 Form Validations
      09:27
    • 54 Creating A Marathon Registration Form Intro
      02:45
    • 55 Creating A Marathon Registration Form Solution
      12:20
  • Section 6: CSS: The Very Basics
    11 lectures • 60 min
    • 56 What Matters In This Section
      02:51
    • 57 What is CSS?
      04:55
    • 58 CSS is Huge, Don't Panic!
      04:03
    • 59 Including Styles Correctly
      06:15
    • 60 Color & Background-Color Properties
      05:15
    • 61 Colors Systems: RGB & Named Colors
      07:21
    • 62 Colors Systems: Hexadecimal
      07:38
    • 63 A Reminder On Semicolons & CSS
      01:11
    • 64 Common Text Properties
      11:16
    • 65 Font Size Basics With Pixels
      03:06
    • 66 The Font Family Property
      06:01
  • Section 7: The World of CSS Selectors
    14 lectures • 1.2 hr
    • 67 What Matters In This Section
      02:38
    • 68 Universal & Element Selectors
      04:57
    • 69 The ID Selector
      05:24
    • 70 The Class Selector
      04:43
    • 71 The Descendant Selector
      05:11
    • 72 The Adjacent & Direct-Descendant Selectors
      05:03
    • 73 The Attribute Selector
      05:30
    • 74 Pseudo Classes
      08:46
    • 75 Pseudo Elements
      04:23
    • 76 The CSS Cascade
      02:21
    • 77 WTF is Specificity
      08:00
    • 78 TIP: Chrome Dev Tools & CSS
      03:57
    • 79 Inline Styles & Important
      03:49
    • 80 CSS Inheritance
      05:10
  • Section 8: The CSS Box Model
    9 lectures • 1.1 hr
    • 81 What Matters In This Section
      02:42
    • 82 Box Model: Width & Height
      05:40
    • 83 Box Model: Border & Border-Radius
      12:08
    • 84 Box Model: Padding
      07:45
    • 85 Box Model: Margin
      06:11
    • 86 The Display Property
      11:46
    • 87 CSS Units Revisited
      05:39
    • 88 CSS Units: ems
      08:20
    • 89 CSS Units: rems
      07:43
  • Section 9: Other Assorted Useful CSS Properties
    10 lectures • 1.5 hr
    • 90 What Matters In This Section
      03:04
    • 91 Opacity & The Alpha Channel
      06:32
    • 92 The Position Property
      09:40
    • 93 CSS Transitions (yay!)
      11:17
    • 94 The Power of CSS Transforms
      13:13
    • 95 Fancy Button Hover Effect CodeAlong
      10:21
    • 96 The Truth About Background
      08:45
    • 97 Google Fonts is Amazing
      07:47
    • 98 Photo Blog CodeAlong Pt. 1
      08:44
    • 99 Photo Blog CodeAlong Pt. 2
      08:38
  • Section 10: Responsive CSS & Flexbox
    12 lectures • 1.2 hr
    • 100 What Matters In This Section
      03:11
    • 101 What on Earth Is Flexbox?
      04:23
    • 102 Flex-Direction
      05:58
    • 103 Justify-Content
      05:07
    • 104 Flex-Wrap
      03:42
    • 105 Align-Items
      07:47
    • 106 Align-Content & Align-Self
      05:18
    • 107 Flex-Basis, Grow, & Shrink
      07:51
    • 108 Flex Shorthand
      05:38
    • 109 Responsive Design & Media Queries Intro
      07:18
    • 110 The Power of Media Queries
      09:25
    • 111 Building a Responsive Nav
      08:42
  • Section 11: Pricing Panel Project
    6 lectures • 23 min
    • 112 Pricing Panel CodeAlong Pt. 1
      03:55
    • 113 Pricing Panel CodeAlong Pt. 2
      03:46
    • 114 Pricing Panel CodeAlong Pt. 3
      03:45
    • 115 Pricing Panel CodeAlong Pt. 4
      04:43
    • 116 Pricing Panel CodeAlong Pt. 5
      03:47
    • 117 Pricing Panel CodeAlong Pt. 6
      03:24
  • Section 12: CSS Frameworks: Bootstrap
    14 lectures • 2.1 hr
    • 118 What Matters In This Section
      03:02
    • 119 WTF Is Bootstrap
      08:01
    • 120 Including Bootstrap & Containers
      09:38
    • 121 Bootstrap Buttons
      09:34
    • 122 Bootstrap Typography & Utilities
      08:00
    • 123 Badges, Alerts, & Button Groups
      11:30
    • 124 Intro to the Bootstrap Grid
      08:05
    • 125 Responsive Bootstrap Grids
      11:17
    • 126 Useful Grid Utilities
      08:17
    • 127 Bootstrap & Forms
      13:17
    • 128 Bootstrap Navbars
      13:56
    • 129 Bootstrap Icons!
      07:53
    • 130 Other Bootstrap Utilities
      11:16
    • 131 A Mixed Bag of Other Bootstrap Stuff
      03:46
  • Section 13: OPTIONAL Museum Of Candy Project
    6 lectures • 59 min
    • 132 Watch This First! (it's short)
      01:09
    • 133 Museum of Candy Project Part 1
      05:16
    • 134 Museum of Candy Project Part 2
      14:01
    • 135 Museum of Candy Project Part 3
      12:41
    • 136 Museum of Candy Project Part 4
      16:39
    • 137 Museum of Candy Project Part 5
      09:41
  • Section 14: JavaScript Basics!
    12 lectures • 1.0 hr
    • 138 What Matters In This Section
      02:27
    • 139 Why JavaScript is Awesome
      08:09
    • 140 Primitives & The Console
      06:38
    • 141 JavaScript Numbers
      07:43
    • 142 WTF is NaN
      02:56
    • 143 Quick Numbers Quiz
      01:57
    • 144 Variables & Let
      06:31
    • 145 Updating Variables
      05:17
    • 146 Increment Operator Explanation: i++ vs ++i
      03:50
    • 147 Const & Var
      04:53
    • 148 Booleans
      04:37
    • 149 Variable Naming and Conventions
      05:31
  • Section 15: JavaScript Strings and More
    8 lectures • 50 min
    • 150 What Matters In This Section
      01:45
    • 151 Introducing Strings
      04:16
    • 152 Indices & Length
      08:25
    • 153 String Methods
      07:35
    • 154 String Methods With Arguments
      10:27
    • 155 String Template Literals -SUPER USEFUL
      07:01
    • 156 Undefined & Null
      03:06
    • 157 Random Numbers & The Math Object
      07:32
  • Section 16: JavaScript Decision Making
    15 lectures • 1.5 hr
    • 158 What Matters In This Section
      01:41
    • 159 Decision Making With Code??
      02:01
    • 160 Comparison Operators
      05:19
    • 161 Equality: Triple Vs. Double Equals
      05:39
    • 162 Console, Alert, & Prompt
      05:03
    • 163 Running JavaScript From A Script!
      05:46
    • 164 If Statements
      06:25
    • 165 Else-If
      08:33
    • 166 Else
      08:48
    • 167 Nesting Conditionals
      05:55
    • 168 Truth-y & False-y Values
      05:16
    • 169 Logical AND
      05:00
    • 170 Logical OR
      09:07
    • 171 Logical NOT
      05:40
    • 172 The Switch Statement Is...A Lot
      09:31
  • Section 17: JavaScript Arrays
    10 lectures • 1.0 hr
    • 173 What Matters In This Section
      01:41
    • 174 Introducing Arrays
      07:37
    • 175 Array Random Access
      07:50
    • 176 Push & Pop
      07:37
    • 177 Shift & Unshift
      04:20
    • 178 Concat, indexOf, includes & reverse
      05:57
    • 179 Slice & Splice
      13:01
    • 180 Reference Types & Equality Testing
      05:35
    • 181 Arrays + Const
      04:25
    • 182 Multi-Dimensional Arrays
      03:57
  • Section 18: JavaScript Object Literals
    6 lectures • 29 min
    • 183 What Matters In This Section
      01:41
    • 184 Introducing Object Literals
      04:45
    • 185 Creating Object Literals
      03:56
    • 186 Accessing Data Out Of Objects
      07:18
    • 187 Modifying Objects
      04:31
    • 188 Nesting Arrays & Objects
      06:29
  • Section 19: Repeating Stuff With Loops
    14 lectures • 1.8 hr
    • 189 What Matters In This Section
      02:37
    • 190 Intro to For Loops
      07:10
    • 191 More For Loops Examples
      05:29
    • 192 The Perils Of Infinite Loops :(
      05:39
    • 193 Looping Over Arrays
      05:59
    • 194 Nested Loops
      08:39
    • 195 Another Loop: The While Loop
      06:16
    • 196 The Break Keyword
      04:19
    • 197 Writing a Guessing Game
      11:20
    • 198 Guessing Game Explanation And Bug Fixes
      15:39
    • 199 The Lovely For...Of Loop
      06:21
    • 200 Iterating Over Objects
      05:59
    • 201 Todo List Project Intro
      05:14
    • 202 Todo List Project CodeAlong
      19:00
  • Section 20: NEW: Introducing Functions
    6 lectures • 36 min
    • 203 What Matters In This Section
      02:38
    • 204 Intro to Functions
      04:05
    • 205 Our Very First Function
      06:02
    • 206 Arguments Intro
      08:07
    • 207 Functions With Multiple Arguments
      07:57
    • 208 The Return Keyword
      06:52
  • Section 21: Leveling Up Our Functions
    10 lectures • 59 min
    • 209 What Matters In This Section
      03:40
    • 210 Function Scope
      05:56
    • 211 Block Scope
      04:52
    • 212 Lexical Scope
      03:42
    • 213 Function Expressions
      03:34
    • 214 Higher Order Functions
      05:00
    • 215 Returning Functions
      10:43
    • 216 Defining Methods
      05:45
    • 217 The Mysterious Keyword 'this'
      09:57
    • 218 Using Try/Catch
      06:09
  • Section 22: Callbacks & Array Methods
    12 lectures • 1.0 hr
    • 219 What Matters In This Section
      03:10
    • 220 What Is This Section Even About?!
      01:43
    • 221 The forEach Method
      05:25
    • 222 The map Method
      03:49
    • 223 Intro to Arrow Functions
      05:15
    • 224 Arrow Function Implicit Returns
      04:23
    • 225 Arrow Functions Wrapup
      02:34
    • 226 setTimeout and setInterval
      06:50
    • 227 The filter Method
      06:33
    • 228 Some & Every Methods
      03:21
    • 229 The Notorious Reduce Method
      10:53
    • 230 Arrow Functions & 'this'
      06:28
  • Section 23: Newer JavaScript Features
    9 lectures • 42 min
    • 231 What Matters In This Section
      02:06
    • 232 Default Params
      05:58
    • 233 Spread in Function Calls
      05:01
    • 234 Spread with Array Literals
      03:00
    • 235 Spread with Objects
      05:19
    • 236 Rest Params
      06:59
    • 237 Destructuring Arrays
      03:22
    • 238 Destructuring Objects
      05:38
    • 239 Destructuring Params
      04:58
  • Section 24: Introducing The World Of The DOM
    14 lectures • 1.8 hr
    • 240 What Matters In This Section
      02:08
    • 241 Introducing the DOM
      03:44
    • 242 The Document Object
      09:52
    • 243 getElementById
      06:51
    • 244 getElementsByTagName & className
      08:15
    • 245 querySelector & querySelectorAll
      07:16
    • 246 innerHTML, textContent, & innerText
      12:54
    • 247 Attributes
      07:03
    • 248 Changing Styles
      11:42
    • 249 ClassList
      07:27
    • 250 Traversing Parent/Child/Sibling
      07:25
    • 251 Append & AppendChild
      11:31
    • 252 removeChild & remove
      03:39
    • 253 Pokemon Sprites Demo
      10:02
  • Section 25: The Missing Piece: DOM Events
    14 lectures • 1.9 hr
    • 254 What Matters In This Section
      02:10
    • 255 Intro to Events
      06:00
    • 256 Inline Events
      05:44
    • 257 The Onclick Property
      08:54
    • 258 addEventListener
      09:22
    • 259 Random Color Exercise
      08:33
    • 260 Events & The Keyword This
      07:59
    • 261 Keyboard Events & Event Objects
      11:43
    • 262 NEW VERSION: Form Events & PreventDefault
      08:09
    • 263 NEW VERSION: Practice With Form Events & PreventDefault
      08:57
    • 264 ORIGINAL VERSION: Form Events & PreventDefault
      18:42
    • 265 Input & Change Events
      05:27
    • 266 Event Bubbling
      07:22
    • 267 Event Delegation
      07:48
  • Section 26: Score Keeper CodeAlong
    4 lectures • 47 min
    • 268 Score Keeper Pt. 1
      13:03
    • 269 Score Keeper Pt. 2
      10:29
    • 270 Score Keeper Pt. 3 With Bulma
      13:34
    • 271 Score Keeper Pt. 4 Refactoring
      10:11
  • Section 27: Async JavaScript: Oh Boy!
    11 lectures • 1.6 hr
    • 272 What Matters In This Section
      01:58
    • 273 The Call Stack
      11:30
    • 274 WebAPIs & Single Threaded
      09:43
    • 275 Callback Hell :(
      11:58
    • 276 Demo: fakeRequest Using Callbacks
      09:45
    • 277 Demo: fakeRequest Using Promises
      12:36
    • 278 The Magic Of Promises
      07:38
    • 279 Creating Our Own Promises
      10:35
    • 280 The Async Keyword
      10:31
    • 281 The Await Keyword
      08:11
    • 282 Handling Errors In Async Functions
      04:28
  • Section 28: AJAX and API's
    14 lectures • 1.8 hr
    • 283 What Matters In This Section
      02:29
    • 284 Intro to AJAX
      07:49
    • 285 Intro to APIs
      10:26
    • 286 WTF is JSON
      07:45
    • 287 Using Hoppscotch (or Postman)
      07:02
    • 288 HTTP Verbs
      03:02
    • 289 HTTP Status Codes
      04:30
    • 290 Understanding Query Strings
      08:42
    • 291 HTTP Headers
      04:00
    • 292 Making XHRs
      05:39
    • 293 Using The Fetch API
      11:49
    • 294 Introducing Axios
      06:27
    • 295 Setting Headers With Axios
      11:24
    • 296 TV Show Search App
      16:01
  • Section 29: Prototypes, Classes, & OOP
    8 lectures • 1.4 hr
    • 297 What Matters In This Section
      04:43
    • 298 What On Earth Are Prototypes
      12:23
    • 299 Intro to Object Oriented Programming
      07:13
    • 300 Factory Functions
      09:00
    • 301 Constructor Functions
      16:59
    • 302 JavaScript Classes
      15:04
    • 303 More Classes Practice
      10:18
    • 304 Extends and Super Keywords
      10:05
  • Section 30: Mastering The Terminal
    11 lectures • 54 min
    • 305 What Matters In This Section
      03:51
    • 306 Backend Overview
      03:38
    • 307 A Pep Talk On Terminal
      03:31
    • 308 Why Do We Need To Know Terminal Commands?
      08:32
    • 309 The Basics: LS & PWD
      05:12
    • 310 Changing Directories
      04:33
    • 311 Relative Vs. Absolute Paths
      05:31
    • 312 Making Directories
      03:00
    • 313 Man Pages & Flags
      06:20
    • 314 The Touch Command
      04:29
    • 315 Removing Files & Folders
      05:44
  • Section 31: Our First Brush With Node
    8 lectures • 45 min
    • 316 What Matters In This Section
      02:53
    • 317 Introducing Node JS
      05:35
    • 318 What Is Node Used For?
      04:44
    • 319 Installing Node
      01:53
    • 320 The Node REPL
      04:58
    • 321 Running Node Files
      02:48
    • 322 Process & Argv
      07:42
    • 323 File System Module Crash Course
      14:51
  • Section 32: Exploring Modules & The NPM Universe
    9 lectures • 59 min
    • 324 What Matters In This Section
      02:52
    • 325 Working With module.exports
      09:53
    • 326 Requiring A Directory
      05:31
    • 327 Introducing NPM
      03:03
    • 328 Installing Packages - Jokes & Rainbow
      08:08
    • 329 Adding Global Packages
      05:38
    • 330 The All-Important Package.json
      07:55
    • 331 Installing All Dependencies For A Project
      05:38
    • 332 Language Guesser Challenge
      10:04
  • Section 33: Creating Servers With Express
    8 lectures • 54 min
    • 333 What Matters In This Section
      02:48
    • 334 Introducing Express
      05:44
    • 335 Our Very First Express App
      09:55
    • 336 The Request & Response Objects
      07:44
    • 337 Express Routing Basics
      09:57
    • 338 Express Path Parameters
      09:14
    • 339 Working With Query Strings
      04:56
    • 340 Auto-Restart With Nodemon
      03:51
  • Section 34: Creating Dynamic HTML With Templating
    13 lectures • 1.3 hr
    • 341 What Matters In This Section
      02:38
    • 342 What is Templating?
      06:23
    • 343 Configuring Express For EJS
      05:46
    • 344 Setting The Views Directory
      04:32
    • 345 EJS Interpolation Syntax
      03:29
    • 346 Passing Data To Templates
      04:21
    • 347 Subreddit Template Demo
      02:51
    • 348 Conditionals in EJS
      07:12
    • 349 Loops In EJS
      06:24
    • 350 A More Complex Subreddit Demo
      10:52
    • 351 Serving Static Assets In Express
      06:40
    • 352 Bootstrap + Express
      08:04
    • 353 EJS & Partials
      09:58
  • Section 35: Defining RESTful Routes
    14 lectures • 1.8 hr
    • 354 What Matters In This Section
      04:05
    • 355 Get Vs. Post Requests
      06:33
    • 356 Defining Express Post Routes
      04:03
    • 357 Parsing The Request Body
      06:28
    • 358 Intro to REST
      08:27
    • 359 RESTful Comments Overview
      05:23
    • 360 RESTful Comments Index
      06:38
    • 361 RESTful Comments New
      08:13
    • 362 Express Redirects
      05:43
    • 363 RESTful Comments Show
      12:10
    • 364 The UUID Package
      05:12
    • 365 RESTful Comments Update
      10:33
    • 366 Express Method Override
      11:48
    • 367 RESTful Comments Delete
      10:18
  • Section 36: Our First Database: MongoDB
    12 lectures • 1.3 hr
    • 368 What Matters In This Section
      03:18
    • 369 Introduction to Databases
      04:36
    • 370 SQL Vs. NoSQL Databases
      08:50
    • 371 Why We're Learning Mongo
      06:46
    • 372 Installing Mongo: MacOS
      02:49
    • 373 The Mongo Shell
      05:28
    • 374 What On Earth Is BSON?
      03:07
    • 375 Inserting With Mongo
      11:19
    • 376 Finding With Mongo
      08:01
    • 377 Updating With Mongo
      10:22
    • 378 Deleting With Mongo
      04:27
    • 379 Additional Mongo Operators
      11:00
  • Section 37: Connecting To Mongo With Mongoose
    16 lectures • 1.8 hr
    • 380 What Matters In This Section
      02:48
    • 381 What is Mongoose
      04:07
    • 382 Connecting Mongoose to Mongo
      08:08
    • 383 Our First Mongoose Model
      10:19
    • 384 Insert Many
      04:20
    • 385 Finding With Mongoose
      09:23
    • 386 Updating With Mongoose
      10:09
    • 387 Deleting With Mongoose!
      04:55
    • 388 Mongoose Schema Validations
      08:39
    • 389 Additional Schema Constraints
      08:12
    • 390 Validating Mongoose Updates
      03:55
    • 391 Mongoose Validation Errors
      03:25
    • 392 Model Instance Methods
      12:12
    • 393 Adding Model Static Methods
      05:00
    • 394 Mongoose Virtuals
      06:57
    • 395 Defining Mongoose Middleware
      07:13
  • Section 38: Putting It All Together: Mongoose With Express
    10 lectures • 1.3 hr
    • 396 What Matters In This Section
      02:44
    • 397 Express + Mongoose Basic Setup
      03:55
    • 398 Creating Our Model
      11:16
    • 399 Products Index
      05:18
    • 400 Product Details
      08:13
    • 401 Creating Products
      09:27
    • 402 Updating Products
      14:01
    • 403 Tangent On Category Selector
      08:12
    • 404 Deleting Products
      04:53
    • 405 BONUS: Filtering By Category
      08:19
  • Section 39: YelpCamp: Campgrounds CRUD
    10 lectures • 59 min
    • 406 Introducing YelpCamp: Our Massive Project
      06:46
    • 407 How to Access YelpCamp Code
      03:12
    • 408 Creating the Basic Express App
      03:30
    • 409 Campground Model Basics
      07:09
    • 410 Seeding Campgrounds
      10:35
    • 411 Campground Index
      03:36
    • 412 Campground Show
      03:54
    • 413 Campground New & Create
      07:37
    • 414 Campground Edit & Update
      08:57
    • 415 Campground Delete
      03:22
  • Section 40: Middleware: The Key To Express
    8 lectures • 44 min
    • 416 What Matters In This Section
      01:20
    • 417 Intro to Express Middleware
      03:40
    • 418 Using Morgan - Logger Middleware
      07:08
    • 419 Defining Our Own Middleware
      08:13
    • 420 More Middleware Practice
      08:11
    • 421 Setting Up A 404 Route
      05:18
    • 422 Password Middleware Demo (NOT REAL AUTH)
      04:40
    • 423 Protecting Specific Routes
      05:15
  • Section 41: YelpCamp: Adding Basic Styles
    9 lectures • 50 min
    • 424 A New EJS Tool For Layouts
      06:29
    • 425 Bootstrap5! Boilerplate
      03:24
    • 426 Navbar Partial
      04:45
    • 427 Footer Partial
      04:17
    • 428 Adding Images
      06:00
    • 429 Styling Campgrounds Index
      04:46
    • 430 Styling The New Form
      09:00
    • 431 Styling Edit Form
      03:13
    • 432 Styling Show Page
      07:39
  • Section 42: Handling Errors In Express Apps
    8 lectures • 1.1 hr
    • 433 What Matters In This Section
      01:51
    • 434 Express' Built-In Error Handler
      08:01
    • 435 Defining Custom Error Handlers
      08:49
    • 436 Our Custom Error Class
      12:40
    • 437 Handling Async Errors
      11:41
    • 438 Handling More Async Errors!
      07:35
    • 439 Defining An Async Utility
      07:50
    • 440 Differentiating Mongoose Errors
      08:49
  • Section 43: YelpCamp: Errors & Validating Data
    8 lectures • 58 min
    • 441 Where To Next With YelpCamp?
      02:20
    • 442 Client-Side Form Validations
      10:19
    • 443 Basic Error Handler
      03:03
    • 444 Defining ExpressError Class
      07:06
    • 445 More Errors
      07:42
    • 446 Defining Error Template
      05:09
    • 447 JOI Schema Validations
      11:16
    • 448 JOI Validation Middleware
      10:49
  • Section 44: Data Relationships With Mongo
    8 lectures • 1.1 hr
    • 449 What Matters In This Section
      03:44
    • 450 Introduction to Mongo Relationships
      04:13
    • 451 SQL Relationships Overview
      08:25
    • 452 One to Few
      12:36
    • 453 One to Many
      13:27
    • 454 Mongoose Populate
      03:32
    • 455 One to "Bajillions"
      13:58
    • 456 Mongo Schema Design
      08:21
  • Section 45: Mongo Relationships With Express
    7 lectures • 57 min
    • 457 What Matters In This Section
      02:21
    • 458 Defining Our Farm & Product Models
      06:26
    • 459 Creating New Farms
      08:54
    • 460 Farms Show Page
      04:35
    • 461 Creating Products For A Farm
      10:44
    • 462 Finishing Touches
      10:58
    • 463 Deletion Mongoose Middleware
      13:31
  • Section 46: YelpCamp: Adding The Reviews Model
    8 lectures • 55 min
    • 464 Defining The Review Model
      05:15
    • 465 Adding The Review Form
      05:20
    • 466 Creating Reviews
      06:32
    • 467 Validating Reviews
      09:06
    • 468 Displaying Reviews
      06:06
    • 469 Styling Reviews
      04:52
    • 470 Deleting Reviews
      08:16
    • 471 Campground Delete Middleware
      09:27
  • Section 47: Express Router & Cookies
    8 lectures • 55 min
    • 472 What Matters In This Section
      02:19
    • 473 Express Router Intro
      10:43
    • 474 Express Router & Middleware
      04:53
    • 475 Introducing Cookies
      07:56
    • 476 Sending Cookies
      06:42
    • 477 Cookie Parser Middleware
      05:25
    • 478 Signing Cookies
      10:11
    • 479 OPTIONAL: HMAC Signing
      06:26
  • Section 48: Express Session & Flash
    6 lectures • 36 min
    • 480 What Matters In This Section
      01:30
    • 481 Introduction to Sessions
      05:19
    • 482 Express Session
      11:39
    • 483 More Express Session
      07:51
    • 484 Intro to Flash
      06:42
    • 485 Res.locals & Flash
      03:22
  • Section 49: YelpCamp: Restructuring & Flash
    7 lectures • 41 min
    • 486 Breaking Out Campground Routes
      06:01
    • 487 Breaking Out Review Routes
      05:34
    • 488 Serving Static Assets
      05:47
    • 489 Configuring Session
      06:48
    • 490 Setting Up Flash
      05:22
    • 491 Flash Success Partial
      07:03
    • 492 Flash Errors Partial
      04:06
  • Section 50: Authentication From "Scratch"
    13 lectures • 1.6 hr
    • 493 What Matters In This Section
      04:34
    • 494 Authentication Vs. Authorization
      03:31
    • 495 How to (not) Store Passwords
      05:01
    • 496 Cryptographic Hashing Functions
      07:05
    • 497 Password Salts
      11:29
    • 498 Intro to Bcrypt
      13:01
    • 499 Auth Demo: Setup
      07:25
    • 500 Auth Demo: Registering
      06:14
    • 501 Auth Demo: Login
      07:21
    • 502 Auth Demo: Staying Logged In With Session
      07:32
    • 503 Auth Demo: Logout
      05:58
    • 504 Auth Demo: Require Login Middleware
      03:22
    • 505 Auth Demo: Refactoring To Model Methods
      13:48
  • Section 51: YelpCamp: Adding In Authentication
    11 lectures • 1.1 hr
    • 506 Introduction to Passport
      04:43
    • 507 Creating Our User Model
      04:07
    • 508 Configuring Passport
      09:15
    • 509 Register Form
      07:01
    • 510 Register Route Logic
      06:20
    • 511 Login Routes
      05:40
    • 512 isLoggedIn Middleware
      08:55
    • 513 Adding Logout
      03:59
    • 514 currentUser Helper
      04:54
    • 515 Fixing Register Route
      03:42
    • 516 ReturnTo Behavior
      04:52
  • Section 52: YelpCamp: Basic Authorization
    6 lectures • 45 min
    • 517 Adding an Author to Campground
      07:20
    • 518 Showing and Hiding Edit/Delete
      03:01
    • 519 Campground Permissions
      06:57
    • 520 Authorization Middleware
      08:42
    • 521 Reviews Permissions
      05:44
    • 522 More Reviews Authorization
      12:49
  • Section 53: YelpCamp: Controllers & Star Ratings
    5 lectures • 35 min
    • 523 Refactoring To Campgrounds Controller
      09:50
    • 524 Adding a Reviews Controller
      06:08
    • 525 A Fancy Way To Restructure Routes
      05:57
    • 526 Displaying Star Ratings
      08:01
    • 527 Star Rating Form
      04:58
  • Section 54: YelpCamp: Image Upload
    14 lectures • 1.6 hr
    • 528 Intro To Image Upload Process
      03:31
    • 529 The Multer Middleware
      09:58
    • 530 Cloudinary Registration
      02:34
    • 531 Environment Variables with dotenv
      06:21
    • 532 Uploading To Cloudinary Basics
      09:01
    • 533 Storing Uploaded Image Links In Mongo
      11:29
    • 534 Displaying Images In A Carousel
      08:39
    • 535 Fixing Our Seeds
      02:43
    • 536 Adding Upload to Edit Page
      05:59
    • 537 Customizing File Input
      08:41
    • 538 A Word Of Warning!
      02:50
    • 539 Deleting Images Form
      06:50
    • 540 Deleting Images Backend
      06:08
    • 541 Adding a Thumbnail Virtual Property
      10:48
  • Section 55: YelpCamp: Adding Maps
    7 lectures • 49 min
    • 542 Registering For Mapbox
      04:36
    • 543 Geocoding Our Locations
      10:51
    • 544 Working With GeoJSON
      06:27
    • 545 Displaying A Map
      08:11
    • 546 Centering The Map On A Campground
      08:11
    • 547 Fixing Our Seeds Bug
      06:17
    • 548 Customizing Map Popup
      04:21
  • Section 56: YelpCamp: Fancy Cluster Map
    7 lectures • 48 min
    • 549 Intro To Our Cluster Map
      02:33
    • 550 Adding Earthquake Cluster Map
      05:48
    • 551 Reseeding Our Database (again)
      02:42
    • 552 Basic Clustering Campgrounds
      07:29
    • 553 Tweaking Clustering Code
      07:03
    • 554 Changing Cluster Size and Color
      07:11
    • 555 Adding Custom Popups
      15:39
  • Section 57: YelpCamp: Styles Clean Up
    7 lectures • 30 min
    • 556 Styling Home Page
      09:21
    • 557 Additional Home Page Styling
      06:30
    • 558 Styling Login Form
      03:48
    • 559 Styling Register Form
      03:41
    • 560 Spacing Campgrounds
      00:28
    • 561 Removing Inline Map Styles
      02:54
    • 562 Adding Map Controls
      03:14
  • Section 58: YelpCamp: Common Security Issues
    7 lectures • 45 min
    • 563 Mongo Injection
      07:46
    • 564 Cross Site Scripting (XSS)
      05:59
    • 565 Sanitizing HTML w/ JOI
      11:27
    • 566 Minor Changes to Session/Cookies
      03:26
    • 567 Hiding Errors
      02:17
    • 568 Using Helmet
      05:36
    • 569 Content Security Policy Fun
      08:25
  • Section 59: YelpCamp: Deploying
    6 lectures • 37 min
    • 570 Setting Up Mongo Atlas
      09:53
    • 571 Using Mongo For Our Session Store
      06:59
    • 572 Heroku Setup
      03:42
    • 573 Pushing to Heroku
      05:34
    • 574 Fixing Heroku Errors
      04:36
    • 575 Configuring Heroku Env Variables
      06:44
  • Section 60: Introducing React
    6 lectures • 28 min
    • 576 How The React Content Works
      02:49
    • 577 Introducing React
      07:05
    • 578 Setting Up Code Sand Box
      05:17
    • 579 The Basics of JSX
      04:16
    • 580 Basic React App Structure
      03:10
    • 581 Our First React Component
      04:58
  • Section 61: JSX In Detail
    8 lectures • 45 min
    • 582 Importing and Exporting Components
      08:02
    • 583 The Rules of JSX
      04:51
    • 584 React Fragments
      02:09
    • 585 Evaluating JS Expressions in JSX
      03:20
    • 586 Creating. a Die Component
      02:47
    • 587 Component Decomposition
      05:56
    • 588 Styling Components
      08:19
    • 589 Random PokeCard Exercise
      09:15
  • Section 62: Local React Apps With Vite
    3 lectures • 14 min
    • 590 Creating React Apps With Vite
      05:57
    • 591 A Note About Create React App
      01:29
    • 592 A Tour of A Vite App
      06:24
  • Section 63: Working With Props
    9 lectures • 55 min
    • 593 Introducing Props
      05:56
    • 594 Non-String Props
      06:01
    • 595 Setting Default Prop Values
      01:34
    • 596 Passing Arrays and Objects
      04:22
    • 597 React Conditionals
      09:42
    • 598 The React Developer Tools
      03:37
    • 599 Adding Dynamic Component Styles
      08:29
    • 600 Rendering Arrays With Map
      08:36
    • 601 Slot Machine Exercise
      06:16
  • Section 64: Shopping List Demo: keys, prop types, and more!
    6 lectures • 38 min
    • 602 Creating A Shopping List Component
      08:01
    • 603 The Key Prop
      03:59
    • 604 The Shopping List Item Component
      11:00
    • 605 Rental Property Exercise
      07:10
    • 606 Configuring ESLint
      03:35
    • 607 PropTypes Library Crash Course
      04:40
  • Section 65: React Events
    4 lectures • 15 min
    • 608 Intro to React Events
      05:19
    • 609 Non-Click Events
      02:49
    • 610 Working With The Event Object
      03:43
    • 611 Clicker Exercise
      02:47
  • Section 66: The Basics of React State
    7 lectures • 54 min
    • 612 Introducing State
      08:50
    • 613 Working With The useState() Hook
      08:33
    • 614 Creating a Toggler Component
      08:00
    • 615 Multiple Pieces of State In A Component
      03:38
    • 616 useState() and Rendering
      07:16
    • 617 Color Box Exercise INTRO
      01:59
    • 618 Color Box Exercise SOLUTION
      15:37
  • Section 67: Intermediate State Concepts
    10 lectures • 1.3 hr
    • 619 Setting State With An Updater Function
      10:51
    • 620 State Initializer Functions
      06:21
    • 621 When Does React Re-Render?
      02:54
    • 622 Working With Objects In State
      10:35
    • 623 Arrays In State
      07:42
    • 624 Generating Ids with UUID
      04:03
    • 625 Deleting From Arrays The React Way
      07:37
    • 626 Common Array Updating Patterns
      09:02
    • 627 Updating All Elements In An Array
      04:21
    • 628 Score Keeper Exercise
      12:25
  • Section 68: Component Design
    8 lectures • 1.0 hr
    • 629 Introducing The Lucky7 Game
      06:24
    • 630 Formulating Our Component Gameplan
      05:36
    • 631 Building Die and Dice Components
      07:28
    • 632 The LuckyN Component
      10:01
    • 633 State As Props
      01:34
    • 634 Passing Functions As Props
      07:42
    • 635 Passing Functions That Update State
      09:00
    • 636 Practice Passing State Updating Functions
      14:56
  • Section 69: React Forms
    10 lectures • 1.2 hr
    • 637 Controlled Components
      09:14
    • 638 The htmlFor Property
      02:07
    • 639 Working With Multiple Inputs
      04:32
    • 640 A Better Signup Form
      08:09
    • 641 Computed Property Names in HandleChange()
      03:37
    • 642 Creating a Shopping List Form
      06:35
    • 643 Shopping List Component
      09:38
    • 644 Finishing The Shopping List Component
      05:17
    • 645 Form Validation From Scratch
      09:55
    • 646 Validations using React Hook Form
      11:48
  • Section 70: Effects
    6 lectures • 31 min
    • 647 Introducing Effects
      01:33
    • 648 The useEffect Hook
      04:14
    • 649 useEffect Dependencies
      04:34
    • 650 Fetching Initial Data From an API
      10:29
    • 651 Adding a Loader
      06:11
    • 652 Github Profile Search
      04:24
  • Section 71: Material UI
    5 lectures • 29 min
    • 653 Introducing Material UI
      01:49
    • 654 Installing Material UI
      08:29
    • 655 The Rating Component
      04:02
    • 656 Material Forms
      06:33
    • 657 The SX Prop and Custom Styles
      07:59
  • Section 72: Building a Todo List With Material UI & Local Storage
    8 lectures • 48 min
    • 658 Creating The Application
      04:00
    • 659 The TodoList Component
      08:28
    • 660 Removing Todos
      07:15
    • 661 Toggling Todos
      03:33
    • 662 The New Todo Form
      11:18
    • 663 Adding LocalStorage
      04:26
    • 664 Tweaking the Todo Icons and Ids
      02:57
    • 665 Final Styles
      05:46
  • Section 73: BONUS: Fancy, More Advanced Todolist
    1 lecture • 3 min
    • 666 Check Out This Fancy Todo List
      03:09
  • Section 74: The End :(
    1 lecture • 10 min
    • 667 What's Next and Goodbye!
      09:41
  • Section 75: LEGACY CONTENT (The Old Version Of This Course)

The Web Developer Bootcamp 2024

10 Hours of React just added. Become a Developer With ONE course - HTML, CSS, JavaScript, React, Node, MongoDB and More!

73h 30m 18s
English
October 14, 2024
Colt

This comprehensive course is designed to equip you with the skills to become a proficient web developer. You'll journey through the fundamentals of web development, mastering HTML, CSS, and JavaScript. Furthermore, you'll delve into advanced topics including React, Node.js, and MongoDB. This is your all-in-one course for learning web development. It was originally published on Udemy, and we are glad to offer it for free streaming here. If you find this course exceptionally helpful, please consider buying the original course to support Colt Steele and help him keep making awesome content!

Course Details

  • Instructor: Colt Steele
  • Total Sections: 75
  • Total Lectures: 731
  • URL of original content: https://udemy.com/course/the-web-developer-bootcamp/
  • Contributor: Sourav

Thank you so much Sourav for sharing this course.

By the end of the course, youll be able to:

  • Build websites using HTML, CSS, and JavaScript.
  • Understand the fundamental concepts of web development.
  • Create interactive web applications with React.
  • Utilize Node.js for backend development.
  • Work with databases using MongoDB.
  • Design responsive and user-friendly interfaces.
  • Apply CSS frameworks like Bootstrap.
  • Implement server-side logic using Express.
  • Manage user authentication.
  • Deploy full-stack web applications.

The Web Developer Bootcamp 2024 is a meticulously structured course designed for individuals aspiring to become web developers. The curriculum begins with the core technologies of HTML, CSS, and JavaScript, providing a solid foundation for further learning. It then advances into more complex areas such as React, Node.js, and MongoDB. This course covers both front-end and back-end development, providing a holistic approach to web development.

The course includes a mix of lectures and practical coding exercises, ensuring a well-rounded educational experience. Students will have the opportunity to apply their learning through hands-on projects, such as the YelpCamp application. The course also covers advanced topics like authentication, authorization, image uploads, and mapping. It is designed to guide students from beginners to proficient web developers.

Happy learning!