The Web Developer Bootcamp 2020
The Web Developer Bootcamp 2020

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

Created by Colt Steele
Language English

The Web Developer Bootcamp 2020

The Web Developer Bootcamp 2020
The Web Developer Bootcamp 2020

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

Created by Colt Steele
Language English
1. Course Orientation
  • 1. THE NEW VERSION OF THE COURSE IS HERE! .html
  • 2. Welcome To The Course! 00:03:47
  • 2.1 WDB Course Intro .pdf
  • 2.2 Slides For This Section .html
  • 3. Curriculum Walkthrough 00:04:12
  • 4. When Was The Course Last Updated 00:02:17
  • 5. Course Change Log .html
  • 6. Will I Get A Job 00:05:45
  • 7. Accessing Course Code & Slides 00:02:23
  • 8. Joining The Community Chat & Groups .html
  • 9. Tips On The Interactive Coding Exercises 00:03:25
  • 10. Migrating From The Old Version Of This Course 00:08:07
  • 10.1 Migration Guide .html
2. An Introduction to Web Development
  • 1. What Matters In This Section 00:03:28
  • 1.1 Public Trello Board .html
  • 1.2 WDB Web Dev Intro .pdf
  • 1.3 Slides .html
  • 2. The Internet in 5 Minutes 00:05:42
  • 3. Intro to the Web 00:06:01
  • 4. The RequestResponse Cycle 00:04:21
  • 5. Front-End and Back-End 00:03:59
  • 6. What do HTMLCSSJS do 00:05:36
  • 6.1 Calculator Codepen .html
  • 7. Setting Up Our Developer Environment 00:05:59
  • 7.1 Windows - Snap Your Windows .html
  • 7.2 VSCode Editor .html
  • 7.3 Chrome Download Link .html
  • 7.4 Mac - Spectacle App .html
  • 8. OPTIONAL VSCode Theme 00:04:28
  • 8.1 My Youtube Video On VSCode Extensions .html
3. HTML The Essentials
  • 1. What Matters In This Section 00:02:12
  • 1.1 Slides .html
  • 1.2 Intro To HTML CODE .zip
  • 1.3 WDB HTML Intro .pdf
  • 2. Introduction to HTML 00:06:55
  • 3. Our Very First HTML Page 00:05:33
  • 3.1 Chicken - Wikipedia Entry .html
  • 4. TIP Mozilla Developer Network 00:02:41
  • 4.1 MDN HTML Element Reference .html
  • 4.2 MDN Homepage .html
  • 5. Paragraph Elements 00:03:14
  • 6. Heading Elements 00:06:34
  • 7. Pangolin Practice .html
  • 8. Introduction to the Chrome Inspector 00:03:07
  • 9. HTML Boilerplate 00:07:25
  • 10. VSCode Tip Auto-format 00:02:37
  • 11. List Elements 00:06:39
  • 12. Favorite Movies Exercises .html
  • 13. Anchor Tags 00:07:07
  • 14. Images 00:06:26
  • 15. Comments 00:02:31
  • 16. Wolf Images & Links Exercise .html
4. HTML Next Steps & Semantics
  • 1. What Matters In This Section 00:02:27
  • 1.1 Slides .html
  • 1.2 HTML Next Steps CODE .zip
  • 1.3 WDB Intermediate HTML .pdf
  • 2. What Exactly Is HTML5 00:06:27
  • 2.1 The HTML Specification .html
  • 3. Block vs. Inline Elements - Divs and Spans 00:08:42
  • 4. An Odd Assortment of Elements HR BR Sup & Sub 00:06:18
  • 5. Entity Codes 00:06:01
  • 5.1 Entity Code Reference (one of many out there) .html
  • 6. Snowman Logo Exercise .html
  • 7. Intro to Semantic Markup 00:09:01
  • 7.1 Stripe Marketing Page .html
  • 8. Playing With Semantic Elements 00:12:18
  • 9. Screen Reader Demonstration 00:03:33
  • 10. VSCode Tip Emmet 00:06:12
  • 10.1 Emmet Documentation .html
5. HTML Forms & Tables
  • 1. What Matters In This Section 00:02:52
  • 1.1 WDB HTML Forms & Tables .pdf
  • 1.2 HTML Forms Tables CODE .zip
  • 1.3 Slides .html
  • 2. Unit Goals 00:01:09
  • 3. Introducing HTML Tables 00:04:08
  • 3.1 Space Jam Website .html
  • 3.2 DoleKemp 96 Website .html
  • 3.3 Wikipedia Table Example .html
  • 4. Tables TR TD and TH Elements 00:09:11
  • 4.1 Heaviest Living Bird Species Table .html
  • 5. Tables Thead Tbody and Tfoot Elements 00:02:16
  • 6. Tables Colspan & Rowspan 00:04:14
  • 7. Table Practice Exercise .html
  • 8. The Form Element 00:09:18
  • 9. Common Input Types 00:05:27
  • 10. The All-Important Label 00:06:52
  • 11. HTML Buttons 00:05:17
  • 12. The Name Attribute 00:05:26
  • 13. Hijacking Google & Reddits Search 00:06:25
  • 14. Radio Buttons Checkboxes & Selects 00:10:54
  • 15. Range & Text Area 00:07:02
  • 16. Forms Practice Exercise .html
  • 17. HTML5 Form Validations 00:09:27
  • 18. Creating A Marathon Registration Form Intro 00:02:45
  • 19. Creating A Marathon Registration Form Solution 00:09:10
6. CSS The Very Basics
  • 1. What Matters In This Section 00:02:51
  • 1.1 04 CSS Intro CODE .zip
  • 1.2 WDB Intro to CSS .pdf
  • 1.3 Slides .html
  • 2. What is CSS 00:04:55
  • 2.1 BookStore UI Codepen .html
  • 3. CSS is Huge Dont Panic! 00:04:03
  • 3.1 MDN CSS Property Reference .html
  • 4. Including Styles Correctly 00:06:15
  • 5. Color & Background-Color Properties 00:05:15
  • 6. Our First CSS Exercise .html
  • 7. Colors Systems RGB & Named Colors 00:07:21
  • 7.1 My Favorite Color Picker .html
  • 7.2 Named Colors Reference .html
  • 8. Colors Systems Hexadecimal 00:07:38
  • 9. Colors Quiz .html
  • 10. A Reminder On Semicolons & CSS 00:01:11
  • 11. Common Text Properties 00:11:16
  • 12. Font Size Basics With Pixels 00:03:06
  • 13. The Font Family Property 00:06:01
  • 13.1 CSS Font Stack Website .html
  • 14. Hipster Logo Exercise .html
7. The World of CSS Selectors
  • 1. What Matters In This Section 00:02:38
  • 1.1 Slides .html
  • 1.2 CSS Selectors CODE .zip
  • 1.3 WDB CSS Selectors .pdf
  • 2. Universal & Element Selectors 00:04:57
  • 3. The ID Selector 00:05:24
  • 3.1 Coolors Color Palette Website .html
  • 4. The Class Selector 00:04:43
  • 5. Basic Selectors Practice .html
  • 6. The Descendent Selector 00:05:11
  • 7. Descendent Combinator Practice .html
  • 8. The Adjacent & Direct-Descendent Selectors 00:05:03
  • 9. The Attribute Selector 00:05:30
  • 10. Pseudo Classes 00:08:47
  • 11. Checkerboard Exercise .html
  • 12. Pseudo Elements 00:04:23
  • 13. The CSS Cascade 00:02:21
  • 14. WTF is Specificity 00:08:00
  • 14.1 Specificity Calculator Tool .html
  • 15. Specificity Quiz .html
  • 16. TIP Chrome Dev Tools & CSS 00:03:57
  • 17. Inline Styles & Important 00:03:49
  • 18. CSS Inheritance 00:05:10
8. The CSS Box Model
  • 1. What Matters In This Section 00:02:42
  • 1.1 WDB CSS Box Model .pdf
  • 1.2 Slides .html
  • 1.3 Box Model And Units CODE .zip
  • 2. Box Model Width & Height 00:05:40
  • 3. Box Model Border & Border-Radius 00:12:08
  • 4. Box Model Practice .html
  • 5. Box Model Padding 00:07:45
  • 6. Box Model Margin 00:06:11
  • 7. The Display Property 00:11:46
  • 8. CSS Units Revisited 00:05:39
  • 9. CSS Units ems 00:08:20
  • 10. CSS Units rems 00:07:43
9. Other Assorted Useful CSS Properties
  • 1. What Matters In This Section 00:03:04
  • 1.1 Slides .html
  • 1.2 WDB More CSS .pdf
  • 1.3 Other Properties CODE .zip
  • 2. Opacity & The Alpha Channel 00:06:32
  • 3. The Position Property 00:09:40
  • 4. CSS Transitions (yay!) 00:11:17
  • 4.1 Transition Easing Functions Website .html
  • 5. The Power of CSS Transforms 00:13:13
  • 6. Fancy Button Hover Effect CodeAlong 00:10:21
  • 7. The Truth About Background 00:08:45
  • 7.1 Unsplash Images .html
  • 8. Google Fonts is Amazing 00:07:47
  • 8.1 Google Fonts Website .html
  • 9. Photo Blog CodeAlong Pt. 1 00:08:44
  • 10. Photo Blog CodeAlong Pt. 2 00:08:38
10. Responsive CSS & Flexbox
  • 1. What Matters In This Section 00:03:11
  • 1.1 Slides .html
  • 1.2 WDB Flexbox & Responsive .pdf
  • 1.3 Flexbox And Responsive CODE .zip
  • 2. What on Earth Is Flexbox 00:04:24
  • 3. Flex-Direction 00:05:58
  • 4. Justify-Content 00:05:07
  • 5. Flex-Wrap 00:03:42
  • 6. Align-Items 00:07:47
  • 7. Align-Content & Align-Self 00:05:18
  • 8. Flex-Basis Grow & Shrink 00:07:51
  • 9. Flex Shorthand 00:05:38
  • 10. Responsive Design & Media Queries Intro 00:07:18
  • 11. The Power of Media Queries 00:09:25
  • 12. Building a Responsive Nav 00:08:42
11. Pricing Panel Project
  • 1. Pricing Panel CodeAlong Pt. 1 00:03:55
  • 1.1 PricingPanel CODE .zip
  • 2. Pricing Panel CodeAlong Pt. 2 00:03:46
  • 3. Pricing Panel CodeAlong Pt. 3 00:03:45
  • 4. Pricing Panel CodeAlong Pt. 4 00:04:43
  • 5. Pricing Panel CodeAlong Pt. 5 00:03:47
  • 6. Pricing Panel CodeAlong Pt. 6 00:03:24
12. CSS Frameworks Bootstrap
  • 1. What Matters In This Section 00:03:03
  • 1.1 Bootstrap Docs .html
  • 1.2 08 Bootstrap CODE .zip
  • 1.3 WDB BootStrap .pdf
  • 1.4 Slides (this deck is not very informative) .html
  • 2. WTF Is Bootstrap 00:08:01
  • 2.1 Bootstrap Docs .html
  • 3. Including Bootstrap & Containers 00:09:38
  • 4. Bootstrap Buttons 00:09:34
  • 5. Bootstrap Typography & Utilities 00:08:01
  • 6. Badges Alerts & Button Groups 00:11:30
  • 7. Bootstrap Basics Practice .html
  • 8. Intro to the Bootstrap Grid 00:08:05
  • 9. Bootstrap Grid Practice .html
  • 10. Responsive Bootstrap Grids 00:11:17
  • 11. Useful Grid Utilities 00:08:17
  • 12. Bootstrap & Forms 00:13:17
  • 13. Bootstrap Navbars 00:13:56
  • 14. Bootstrap Icons! 00:07:53
  • 15. Other Bootstrap Utilities 00:11:17
  • 16. A Mixed Bag of Other Bootstrap Stuff 00:03:46
13. OPTIONAL Museum Of Candy Project
  • 1. Watch This First! (its short) 00:01:10
  • 2. Museum of Candy Project Part 1 00:05:16
  • 2.1 Bootstrap4 Code .zip
  • 3. NOTE ABOUT THE NEXT VIDEO! .html
  • 4. Museum of Candy Project Part 2 00:14:01
  • 4.1 Bootstrap4 Code .zip
  • 5. Museum of Candy Project Part 3 00:12:41
  • 5.1 Bootstrap4 Code .zip
  • 6. Museum of Candy Project Part 4 00:16:39
  • 6.1 Bootstrap4 Code .zip
  • 7. Museum of Candy Project Part 5 00:09:41
  • 7.1 Bootstrap4 Code .zip
14. JavaScript Basics!
  • 1. What Matters In This Section 00:02:27
  • 1.1 basicsCheatsheet .js
  • 1.2 Slides .html
  • 1.3 WDB JavaScript Introduction .pdf
  • 2. Why JavaScript is Awesome 00:08:09
  • 2.1 Airplanes Codepen .html
  • 3. Primitives & The Console 00:06:38
  • 4. JavaScript Numbers 00:07:43
  • 5. WTF is NaN 00:02:56
  • 6. Quick Numbers Quiz 00:01:57
  • 7. Variables & Let 00:06:31
  • 8. Our First Variables Exercise .html
  • 9. Updating Variables 00:05:17
  • 10. Const & Var 00:04:53
  • 11. Our First Constants Exercise .html
  • 12. Variables Quiz .html
  • 13. Booleans 00:04:37
  • 14. Variable Naming and Conventions 00:05:31
  • 15. Quick Variable Quiz .html
15. JavaScript Strings and More
  • 1. What Matters In This Section 00:01:45
  • 1.1 WDB JavaScript Strings .pdf
  • 1.2 Strings CheatSheet .js
  • 1.3 Slides .html
  • 2. Introducing Strings 00:04:16
  • 3. Our First String Variables Practice .html
  • 4. Indices & Length 00:08:25
  • 5. Strings Basics Quiz .html
  • 6. String Methods 00:07:35
  • 7. String Methods Practice .html
  • 8. String Methods With Arguments 00:10:27
  • 9. More String Methods Practice .html
  • 10. String Template Literals -SUPER USEFUL 00:07:01
  • 11. Undefined & Null 00:03:06
  • 12. Random Numbers & The Math Object 00:07:32
  • 13. String Template Literal Exercise .html
16. JavaScript Decision Making
  • 1. What Matters In This Section 00:01:41
  • 1.1 Slides .html
  • 1.2 WDB Boolean Logic .pdf
  • 1.3 12 Boolean Logic CODE .zip
  • 2. Decision Making With Code 00:02:01
  • 3. Comparison Operators 00:05:19
  • 4. Equality Triple Vs. Double Equals 00:05:39
  • 5. Comparison Quiz! .html
  • 6. Console Alert & Prompt 00:05:03
  • 7. Running JavaScript From A Script! 00:05:46
  • 8. If Statements 00:06:25
  • 9. Our First Conditional Exercise .html
  • 10. Else-If 00:08:33
  • 11. Else 00:08:48
  • 12. getColor Conditional Exercise .html
  • 13. Nesting Conditionals 00:05:55
  • 14. Nested Conditionals Practice .html
  • 15. Truth-y & False-y Values 00:05:16
  • 16. Logical AND 00:05:00
  • 17. Logical AND Mystery Exercise .html
  • 18. Logical OR 00:09:07
  • 19. Logical NOT 00:05:40
17. JavaScript Arrays
  • 1. What Matters In This Section 00:01:41
  • 1.1 array cheatsheet .js
  • 1.2 Slides .html
  • 1.3 WDB Arrays .pdf
  • 2. Introducing Arrays 00:07:37
  • 3. Lotto Numbers Exercise .html
  • 4. Array Random Access 00:07:50
  • 5. Array Access Exercise .html
  • 6. Push & Pop 00:07:37
  • 7. Shift & Unshift 00:04:20
  • 8. PushPopShiftUnshift Practice .html
  • 9. Concat indexOf includes & reverse 00:05:57
  • 10. Slice & Splice 00:13:01
  • 11. Reference Types & Equality Testing 00:05:35
  • 12. Arrays Const 00:04:25
  • 13. Multi-Dimensional Arrays 00:03:57
  • 14. Nested Arrays Exercise .html
18. JavaScript Object Literals
  • 1. What Matters In This Section 00:01:41
  • 1.1 Slides .html
  • 1.2 WDB Objects .pdf
  • 1.3 Objects cheatsheet .js
  • 2. Introducing Object Literals 00:04:46
  • 3. Creating Object Literals 00:03:56
  • 4. Our First Object Exercise .html
  • 5. Accessing Data Out Of Objects 00:07:18
  • 6. Object Access Exercise .html
  • 7. Modifying Objects 00:04:31
  • 8. Nesting Arrays & Objects 00:06:29
19. Repeating Stuff With Loops
  • 1. What Matters In This Section 00:02:37
  • 1.1 WDB Loops .pdf
  • 1.2 Loops CODE .zip
  • 1.3 Slides .html
  • 2. Intro to For Loops 00:07:10
  • 3. Our First For Loop Practice .html
  • 4. More For Loops Examples 00:05:29
  • 5. More For Loops Practice .html
  • 6. The Perils Of Infinite Loops ( 00:05:39
  • 7. Looping Over Arrays 00:05:59
  • 8. Iterating Arrays Exercise .html
  • 9. Nested Loops 00:08:39
  • 10. Another Loop The While Loop 00:06:16
  • 11. The Break Keyword 00:04:19
  • 12. Writing a Guessing Game 00:11:20
  • 13. The Lovely For...Of Loop 00:06:21
  • 14. For...Of Practice .html
  • 15. Iterating Over Objects 00:05:59
  • 16. Todo List Project Intro 00:05:14
  • 17. Todo List Project CodeAlong 00:19:00
20. NEW Introducing Functions
  • 1. What Matters In This Section 00:02:38
  • 1.1 Slides .html
  • 1.2 WDB Functions Intro .pdf
  • 1.3 Functions Intro CODE .zip
  • 2. Intro to Functions 00:04:05
  • 3. Our Very First Function 00:06:02
  • 4. Heart Function Exercise .html
  • 5. Arguments Intro 00:08:07
  • 6. Rant Exercise .html
  • 7. Functions With Multiple Arguments 00:07:57
  • 8. Multiple Args Exercise .html
  • 9. The Return Keyword 00:06:52
  • 10. Return Value Practice .html
  • 11. isShortsWeather Function .html
  • 12. Last Element Exercise .html
  • 13. Capitalize Exercise .html
  • 14. Sum Array Exercise .html
  • 15. Days Of The Week Exercise .html
21. Leveling Up Our Functions
  • 1. What Matters In This Section 00:03:40
  • 1.1 More Functions CODE .zip
  • 1.2 WDB Functions Pt. 2 .pdf
  • 1.3 Slides .html
  • 2. Function Scope 00:05:56
  • 3. Function Scope Quiz .html
  • 4. Block Scope 00:04:52
  • 5. Lexical Scope 00:03:42
  • 6. Function Expressions 00:03:34
  • 7. Function Expression Exercise .html
  • 8. Higher Order Functions 00:05:00
  • 9. Returning Functions 00:10:43
  • 10. Defining Methods 00:05:45
  • 11. Methods Exercise .html
  • 12. The Mysterious Keyword this 00:09:57
  • 13. Egg Laying Exercise .html
  • 14. Using TryCatch 00:06:09
22. Callbacks & Array Methods
  • 1. What Matters In This Section 00:03:10
  • 1.1 Callback Methods CODE .zip
  • 1.2 WDB Array Callback Methods .pdf
  • 1.3 Slides .html
  • 2. What Is This Section Even About! 00:01:43
  • 3. The forEach Method 00:05:25
  • 4. The map Method 00:03:49
  • 5. Map Practice .html
  • 6. Intro to Arrow Functions 00:05:15
  • 7. Arrow Function Exercise .html
  • 8. Arrow Function Implicit Returns 00:04:23
  • 9. Arrow Functions Wrapup 00:02:34
  • 10. setTimeout and setInterval 00:06:50
  • 11. The filter Method 00:06:33
  • 12. Filter Exercise .html
  • 13. Some & Every Methods 00:03:22
  • 14. SomeEvery Exercise .html
  • 15. The Notorious Reduce Method 00:10:53
  • 16. Arrow Functions & this 00:06:28
23. Newer JavaScript Features
  • 1. What Matters In This Section 00:02:06
  • 1.1 Slides .html
  • 1.2 WDB Modern JS Features .pdf
  • 1.3 New JS Features CODE .zip
  • 2. Default Params 00:05:58
  • 3. Spread in Function Calls 00:05:01
  • 4. Spread with Array Literals 00:03:00
  • 5. Spread with Objects 00:05:19
  • 6. Rest Params 00:06:59
  • 7. Destructuring Arrays 00:03:22
  • 8. Destructuring Objects 00:05:38
  • 9. Destructuring Params 00:04:58
24. Introducing The World Of The DOM
  • 1. What Matters In This Section 00:02:08
  • 1.1 WDB DOM Manipulation .pdf
  • 1.2 Slides .html
  • 1.3 DOM Intro CODE .zip
  • 2. Introducing the DOM 00:03:44
  • 3. The Document Object 00:09:52
  • 4. getElementById 00:06:51
  • 5. getElementById Practice .html
  • 6. getElementsByTagName & className 00:08:15
  • 7. querySelector & querySelectorAll 00:07:16
  • 8. querySelector Practice .html
  • 9. innerHTML textContent & innerText 00:12:54
  • 10. Pickles Exercise .html
  • 11. Attributes 00:07:03
  • 12. Manipulating Attributes Practice .html
  • 13. Changing Styles 00:11:42
  • 14. Magical Forest Circle Exercise .html
  • 15. Rainbow Text Exercise .html
  • 16. ClassList 00:07:27
  • 17. ClassList Practice .html
  • 18. Traversing ParentChildSibling 00:07:25
  • 19. Append & AppendChild 00:11:31
  • 20. 100 Button Insanity Exercise .html
  • 21. removeChild & remove 00:03:39
  • 22. Pokemon Sprites Demo 00:10:02
25. The Missing Piece DOM Events
  • 1. What Matters In This Section 00:02:10
  • 1.1 DOM Events CODE .zip
  • 2. Intro to Events 00:06:00
  • 3. Inline Events 00:05:44
  • 4. Know Thy Enemy Exercise .html
  • 5. The Onclick Property 00:08:54
  • 6. addEventListener 00:09:22
  • 7. Click Events Exercise .html
  • 8. Random Color Exercise 00:08:33
  • 9. Events & The Keyword This 00:07:59
  • 10. Keyboard Events & Event Objects 00:11:43
  • 11. Form Events & PreventDefault 00:18:42
  • 12. Form Events Exercise .html
  • 13. Input & Change Events 00:05:27
  • 14. Input Event Practice .html
  • 15. Event Bubbling 00:07:22
  • 16. Event Delegation 00:07:48
26. Score Keeper CodeAlong
  • 1. Score Keeper Pt. 1 00:13:03
  • 1.1 ScoreKeeper .zip
  • 2. Score Keeper Pt. 2 00:10:29
  • 3. Score Keeper Pt. 3 With Bulma 00:13:34
  • 3.1 Bulma Docs .html
  • 4. Score Keeper Pt. 4 Refactoring 00:10:11
27. Async JavaScript Oh Boy!
  • 1. What Matters In This Section 00:01:58
  • 1.1 WDB Async JavaScript .pdf
  • 1.2 Slides .html
  • 1.3 Async JS CODE .zip
  • 2. The Call Stack 00:11:30
  • 2.1 Loupe IsRightTriangle CallStack Demo .html
  • 3. WebAPIs & Single Threaded 00:09:43
  • 3.1 Loupe setTimeout Demo .html
  • 4. Callback Hell ( 00:11:58
  • 5. Demo fakeRequest Using Callbacks 00:09:45
  • 6. Demo fakeRequest Using Promises 00:12:36
  • 7. The Magic Of Promises 00:07:38
  • 8. Creating Our Own Promises 00:10:35
  • 9. The Async Keyword 00:10:31
  • 10. The Await Keyword 00:08:11
  • 11. Handling Errors In Async Functions 00:04:29
28. AJAX and APIs
  • 1. What Matters In This Section 00:02:29
  • 1.1 AJAX CODE .zip
  • 1.2 Slides .html
  • 1.3 WDB AJAX .pdf
  • 2. Intro to AJAX 00:07:49
  • 3. Intro to APIs 00:10:26
  • 3.1 Crypto API Docs .html
  • 4. WTF is JSON 00:07:45
  • 4.1 The JSON Standard .html
  • 4.2 JSON FormatterValidator .html
  • 5. Using Postman 00:10:43
  • 5.1 Postman Download Page .html
  • 5.2 Cryptonator API .html
  • 6. Query Strings & Headers 00:12:01
  • 6.1 Dad Jokes API .html
  • 6.2 TVMaze API .html
  • 7. Making XHRs 00:04:39
  • 8. The Fetch API 00:08:55
  • 9. Intro to Axios 00:06:35
  • 9.1 Axios Github .html
  • 9.2 Cryptonator API .html
  • 10. Setting Headers With Axios 00:11:24
  • 10.1 Dad Jokes API .html
  • 11. TV Show Search App 00:16:01
  • 11.1 TV Maze API .html
29. Prototypes Classes & OOP
  • 1. What Matters In This Section 00:04:43
  • 1.1 OOP Code .zip
  • 2. What On Earth Are Prototypes 00:12:23
  • 3. Intro to Object Oriented Programming 00:07:13
  • 4. Factory Functions 00:09:00
  • 5. Constructor Functions 00:16:59
  • 6. JavaScript Classes 00:15:04
  • 7. More Classes Practice 00:10:18
  • 8. Extends and Super Keywords 00:10:05
30. Mastering The Terminal
  • 1. What Matters In This Section 00:03:51
  • 1.1 WDB Terminal .pdf
  • 1.2 Slides .html
  • 2. Backend Overview 00:03:38
  • 3. A Pep Talk On Terminal 00:03:31
  • 4. Why Do We Need To Know Terminal Commands 00:08:32
  • 5. Windows Terminal Installation Instructions .html
  • 6. The Basics LS & PWD 00:05:12
  • 7. Changing Directories 00:04:33
  • 8. Relative Vs. Absolute Paths 00:05:31
  • 9. Making Directories 00:03:00
  • 10. Man Pages & Flags 00:06:20
  • 11. The Touch Command 00:04:29
  • 12. Removing Files & Folders 00:05:44
31. Our First Brush With Node
  • 1. What Matters In This Section 00:02:53
  • 1.1 Node Intro CODE .zip
  • 1.2 WDB Intro to Node .pdf
  • 1.3 Slides .html
  • 2. Introducing Node JS 00:05:35
  • 2.1 NodeJS Home Page .html
  • 3. What Is Node Used For 00:04:44
  • 3.1 NASA Node Case Study .html
  • 3.2 Electron (if youre curious) .html
  • 3.3 Cross Code Game (Written in Node!) .html
  • 4. Installing Node 00:01:53
  • 4.1 Node Home Page .html
  • 5. The Node REPL 00:04:58
  • 6. Running Node Files 00:02:48
  • 7. Process & Argv 00:07:42
  • 8. File System Module Crash Course 00:14:51
32. Exploring Modules & The NPM Universe
  • 1. What Matters In This Section 00:02:52
  • 1.1 Modules And NPM CODE .zip
  • 2. Working With module.exports 00:09:53
  • 3. Requiring A Directory 00:05:31
  • 4. Introducing NPM 00:03:03
  • 5. Installing Packages - Jokes & Rainbow 00:08:08
  • 5.1 Colors Package .html
  • 5.2 Give Me A Joke Package .html
  • 6. Adding Global Packages 00:05:38
  • 6.1 Cowsay Package .html
  • 7. The All-Important Package.json 00:07:55
  • 8. Installing All Dependencies For A Project 00:05:38
  • 8.1 Node Group Chat Repo .html
  • 9. Language Guesser Challenge 00:10:04
  • 9.1 Franc Package .html
  • 9.2 NodeJS Langs Package .html
33. Creating Servers With Express
  • 1. What Matters In This Section 00:02:48
  • 1.1 Slides .html
  • 1.2 WDB Express Intro .pdf
  • 1.3 Express Intro CODE .zip
  • 2. Introducing Express 00:05:44
  • 2.1 Express Home Page .html
  • 3. Our Very First Express App 00:09:55
  • 4. The Request & Response Objects 00:07:44
  • 5. Express Routing Basics 00:09:57
  • 6. Express Path Parameters 00:09:14
  • 7. Working With Query Strings 00:04:56
  • 8. Auto-Restart With Nodemon 00:03:51
  • 8.1 Nodemon .html
34. Creating Dynamic HTML With Templating
  • 1. What Matters In This Section 00:02:38
  • 1.1 Express Templating CODE .zip
  • 2. What is Templating 00:06:23
  • 3. Configuring Express For EJS 00:05:46
  • 3.1 EJS Docs .html
  • 4. Setting The Views Directory 00:04:32
  • 5. EJS Interpolation Syntax 00:03:29
  • 6. Passing Data To Templates 00:04:21
  • 7. Subreddit Template Demo 00:02:51
  • 8. Conditionals in EJS 00:07:12
  • 9. Loops In EJS 00:06:24
  • 10. A More Complex Subreddit Demo 00:10:52
  • 11. Serving Static Assets In Express 00:06:40
  • 12. Bootstrap Express 00:08:04
  • 13. EJS & Partials 00:09:58
35. Defining RESTful Routes
  • 1. What Matters In This Section 00:04:05
  • 1.1 Slides .html
  • 1.2 RESTful Routes CODE .zip
  • 1.3 WDB RESTful Routing .pdf
  • 2. Get Vs. Post Requests 00:06:33
  • 3. Defining Express Post Routes 00:04:03
  • 4. Parsing The Request Body 00:06:28
  • 5. Intro to REST 00:08:27
  • 5.1 Original REST Dissertation (heavy reading!) .html
  • 6. RESTful Comments Overview 00:05:23
  • 7. RESTful Comments Index 00:06:38
  • 8. RESTful Comments New 00:08:13
  • 9. Express Redirects 00:05:43
  • 10. RESTful Comments Show 00:12:10
  • 11. The UUID Package 00:05:12
  • 11.1 UUID Package .html
  • 12. RESTful Comments Update 00:10:33
  • 13. Express Method Override 00:11:48
  • 13.1 Method Override .html
  • 14. RESTful Comments Delete 00:10:18
36. Our First Database MongoDB
  • 1. What Matters In This Section 00:03:18
  • 1.1 WDB Intro to Mongo .pdf
  • 1.2 Slides .html
  • 2. Introduction to Databases 00:04:36
  • 3. SQL Vs. NoSQL Databases 00:08:50
  • 4. Why Were Learning Mongo 00:06:46
  • 4.1 MongoDB Website .html
  • 5. Installing Mongo MacOS 00:02:49
  • 5.1 Mongo Mac Install Instructions .html
  • 6. Installing Mongo Windows .html
  • 7. The Mongo Shell 00:05:28
  • 8. What On Earth Is BSON 00:03:07
  • 9. Inserting With Mongo 00:11:19
  • 10. Finding With Mongo 00:08:01
  • 11. Updating With Mongo 00:10:22
  • 12. Deleting With Mongo 00:04:27
  • 13. Additional Mongo Operators 00:11:00
37. Connecting To Mongo With Mongoose
  • 1. What Matters In This Section 00:02:48
  • 1.1 Mongoose CODE .zip
  • 2. What is Mongoose 00:04:07
  • 2.1 Mongoose Docs .html
  • 3. Connecting Mongoose to Mongo 00:08:08
  • 4. Our First Mongoose Model 00:10:19
  • 5. Insert Many 00:04:20
  • 6. Finding With Mongoose 00:09:23
  • 7. Updating With Mongoose 00:10:09
  • 8. Deleting With Mongoose! 00:04:55
  • 9. Mongoose Schema Validations 00:08:39
  • 10. Additional Schema Constraints 00:08:12
  • 11. Validating Mongoose Updates 00:03:55
  • 12. Mongoose Validation Errors 00:03:25
  • 13. Model Instance Methods 00:12:12
  • 14. Adding Model Static Methods 00:05:00
  • 15. Mongoose Virtuals 00:06:57
  • 16. Defining Mongoose Middleware 00:07:13
38. Putting It All Together Mongoose With Express
  • 1. What Matters In This Section 00:02:44
  • 1.1 Mongoose With Express CODE .zip
  • 2. Express Mongoose Basic Setup 00:03:55
  • 3. Creating Our Model 00:11:16
  • 4. Products Index 00:05:18
  • 5. Product Details 00:08:13
  • 6. Creating Products 00:09:27
  • 7. Updating Products 00:14:01
  • 8. Tangent On Category Selector 00:08:12
  • 9. Deleting Products 00:04:53
  • 10. BONUS Filtering By Category 00:08:19
39. YelpCamp Campgrounds CRUD
  • 1. Introducing YelpCamp Our Massive Project 00:06:46
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 2. How to Access YelpCamp Code 00:03:12
  • 3. Creating the Basic Express App 00:03:30
  • 4. Campground Model Basics 00:07:09
  • 5. Seeding Campgrounds 00:10:35
  • 5.1 Cities Dataset File .html
  • 6. Campground Index 00:03:36
  • 7. Campground Show 00:03:54
  • 8. Campground New & Create 00:07:37
  • 9. Campground Edit & Update 00:08:57
  • 10. Campground Delete 00:03:22
40. Middleware The Key To Express
  • 1. What Matters In This Section 00:01:20
  • 1.1 Middleware Intro CODE .zip
  • 2. Intro to Express Middleware 00:03:40
  • 3. Using Morgan - Logger Middleware 00:07:08
  • 3.1 Morgan Docs .html
  • 4. Defining Our Own Middleware 00:08:13
  • 5. More Middleware Practice 00:08:11
  • 6. Setting Up A 404 Route 00:05:18
  • 7. Password Middleware Demo (NOT REAL AUTH) 00:04:40
  • 8. Protecting Specific Routes 00:05:15
41. YelpCamp Adding Basic Styles
  • 1. A New EJS Tool For Layouts 00:06:29
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 1.2 EJS-Mate Package .html
  • 2. Bootstrap5! Boilerplate 00:03:24
  • 2.1 Bootstrap v5 Alpha Docs .html
  • 3. Navbar Partial 00:04:45
  • 4. Footer Partial 00:04:17
  • 5. Adding Images 00:06:00
  • 6. Styling Campgrounds Index 00:04:46
  • 7. Styling The New Form 00:09:00
  • 8. Styling Edit Form 00:03:13
  • 9. Styling Show Page 00:07:39
42. Handling Errors In Express Apps
  • 1. What Matters In This Section 00:01:51
  • 1.1 Express Errors CODE .zip
  • 2. Express Built-In Error Handler 00:08:01
  • 3. Defining Custom Error Handlers 00:08:49
  • 4. Our Custom Error Class 00:12:40
  • 5. Handling Async Errors 00:11:41
  • 6. Handling More Async Errors! 00:07:35
  • 7. Defining An Async Utility 00:07:50
  • 8. Differentiating Mongoose Errors 00:08:49
43. YelpCamp Errors & Validating Data
  • 1. Where To Next With YelpCamp 00:02:20
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 2. Client-Side Form Validations 00:10:19
  • 3. Basic Error Handler 00:03:03
  • 4. Defining ExpressError Class 00:07:06
  • 5. More Errors 00:07:42
  • 6. Defining Error Template 00:05:09
  • 7. JOI Schema Validations 00:11:16
  • 7.1 JOI Docs .html
  • 8. JOI Validation Middleware 00:10:49
44. Data Relationships With Mongo
  • 1. What Matters In This Section 00:03:44
  • 1.1 Mongoose Relationships CODE .zip
  • 1.2 Slides (very slim deck!) .html
  • 1.3 WDB Mongoose Relationships .pdf
  • 2. Introduction to Mongo Relationships 00:04:13
  • 3. SQL Relationships Overview 00:08:25
  • 4. One to Few 00:12:37
  • 5. One to Many 00:13:27
  • 6. Mongoose Populate 00:03:32
  • 7. One to Bajillions 00:13:58
  • 8. Mongo Schema Design 00:08:21
  • 8.1 Mongo Blog Post On Schema Design .html
45. Mongo Relationships With Express
  • 1. What Matters In This Section 00:02:21
  • 1.1 Mongoose Relationships Express CODE .zip
  • 2. Defining Our Farm & Product Models 00:06:26
  • 3. Creating New Farms 00:08:54
  • 4. Farms Show Page 00:03:25
  • 5. Creating Products For A Farm 00:10:44
  • 6. Finishing Touches 00:10:58
  • 7. Deletion Mongoose Middleware 00:13:31
46. YelpCamp Adding The Reviews Model
  • 1. Defining The Review Model 00:05:15
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 2. Adding The Review Form 00:05:20
  • 3. Creating Reviews 00:06:32
  • 4. Validating Reviews 00:09:06
  • 5. Displaying Reviews 00:06:06
  • 6. Styling Reviews 00:04:52
  • 7. Deleting Reviews 00:08:16
  • 8. Campground Delete Middleware 00:09:27
47. Express Router & Cookies
  • 1. What Matters In This Section 00:02:19
  • 1.1 Router and Cookies CODE .zip
  • 1.2 Slides .html
  • 1.3 WDB More Express .pdf
  • 2. Express Router Intro 00:10:43
  • 3. Express Router & Middleware 00:04:53
  • 4. Introducing Cookies 00:07:56
  • 5. Sending Cookies 00:06:42
  • 6. Cookie Parser Middleware 00:05:25
  • 6.1 Cookie Parser Middleware .html
  • 7. Signing Cookies 00:10:11
  • 8. OPTIONAL HMAC Signing 00:06:26
  • 8.1 HMAC Tester Tool .html
48. Express Session & Flash
  • 1. What Matters In This Section 00:01:30
  • 1.1 Slides (same deck as last section) .html
  • 1.2 Session And Flash CODE .zip
  • 2. Introduction to Sessions 00:05:19
  • 2.1 Express Session .html
  • 3. Express Session 00:11:39
  • 4. More Express Session 00:07:51
  • 5. Intro to Flash 00:06:42
  • 5.1 Connect Flash .html
  • 6. Res.locals & Flash 00:03:22
49. YelpCamp Restructuring & Flash
  • 1. Breaking Out Campground Routes 00:06:01
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 2. Breaking Out Review Routes 00:05:34
  • 3. Serving Static Assets 00:05:47
  • 4. Configuring Session 00:06:48
  • 5. Setting Up Flash 00:05:22
  • 6. Flash Success Partial 00:07:03
  • 7. Flash Errors Partial 00:04:06
50. Authentication From Scratch
  • 1. What Matters In This Section 00:04:34
  • 1.1 WDB Authentication .pdf
  • 1.2 Auth From Scratch CODE .zip
  • 1.3 Slides .html
  • 2. Authentication Vs. Authorization 00:03:31
  • 3. How to (not) Store Passwords 00:05:01
  • 4. Cryptographic Hashing Functions 00:07:05
  • 5. Password Salts 00:11:29
  • 6. Intro to Bcrypt 00:13:01
  • 6.1 Bcrypt Package .html
  • 7. Auth Demo Setup 00:07:25
  • 8. Auth Demo Registering 00:06:14
  • 9. Auth Demo Login 00:07:21
  • 10. Auth Demo Staying Logged In With Session 00:07:32
  • 11. Auth Demo Logout 00:05:58
  • 12. Auth Demo Require Login Middleware 00:03:22
  • 13. Auth Demo Refactoring To Model Methods 00:13:48
51. YelpCamp Adding In Authentication
  • 1. Introduction to Passport 00:04:43
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 1.2 Passport-Local-Mongoose .html
  • 1.3 Passport Docs .html
  • 1.4 Passport-Local .html
  • 2. Creating Our User Model 00:04:07
  • 3. Configuring Passport 00:09:15
  • 4. Register Form 00:07:01
  • 5. Register Route Logic 00:06:20
  • 6. Login Routes 00:05:40
  • 7. isLoggedIn Middleware 00:08:55
  • 8. Adding Logout 00:03:59
  • 9. currentUser Helper 00:04:54
  • 10. Fixing Register Route 00:03:42
  • 11. ReturnTo Behavior 00:04:52
52. YelpCamp Basic Authorization
  • 1. Adding an Author to Campground 00:07:20
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 2. Showing and Hiding EditDelete 00:03:01
  • 3. Campground Permissions 00:06:57
  • 4. Authorization Middleware 00:08:42
  • 5. Reviews Permissions 00:05:44
  • 6. More Reviews Authorization 00:12:49
53. YelpCamp Controllers & Star Ratings
  • 1. Refactoring To Campgrounds Controller 00:09:50
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 2. Adding a Reviews Controller 00:06:08
  • 3. A Fancy Way To Restructure Routes 00:05:57
  • 4. Displaying Star Ratings 00:08:01
  • 4.1 Starability CSS .html
  • 5. Star Rating Form 00:04:58
54. YelpCamp Image Upload
  • 1. Intro To Image Upload Process 00:03:32
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 2. The Multer Middleware 00:09:58
  • 2.1 Multer Docs .html
  • 3. Cloudinary Registration 00:02:34
  • 3.1 Cloudinary .html
  • 4. Environment Variables with dotenv 00:06:21
  • 4.1 DotEnv .html
  • 5. Uploading To Cloudinary Basics 00:09:01
  • 6. Storing Uploaded Image Links In Mongo 00:11:29
  • 7. Displaying Images In A Carousel 00:08:39
  • 8. Fixing Our Seeds 00:02:43
  • 9. Adding Upload to Edit Page 00:05:59
  • 10. Customizing File Input 00:08:41
  • 11. A Word Of Warning! 00:02:50
  • 12. Deleting Images Form 00:06:50
  • 13. Deleting Images Backend 00:06:08
  • 14. Adding a Thumbnail Virtual Property 00:10:48
  • 14.1 Cloudinary Image Transformations .html
55. YelpCamp Adding Maps
  • 1. Registering For Mapbox 00:04:36
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 1.2 Mapbox .html
  • 2. Geocoding Our Locations 00:10:51
  • 2.1 Mapbox Geocoding SDK Docs .html
  • 3. Working With GeoJSON 00:06:27
  • 4. Displaying A Map 00:08:11
  • 4.1 Mapbox GL Docs .html
  • 5. Centering The Map On A Campground 00:08:11
  • 6. Fixing Our Seeds Bug 00:06:17
  • 7. Customizing Map Popup 00:04:21
56. YelpCamp Fancy Cluster Map
  • 1. Intro To Our Cluster Map 00:02:33
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 2. Adding Earthquake Cluster Map 00:05:48
  • 2.1 Mapbox Cluster Example .html
  • 3. Reseeding Our Database (again) 00:02:42
  • 4. Basic Clustering Campgrounds 00:07:29
  • 5. Tweaking Clustering Code 00:07:03
  • 6. Changing Cluster Size and Color 00:07:11
  • 7. Adding Custom Popups 00:15:39
57. YelpCamp Styles Clean Up
  • 1. Styling Home Page 00:09:21
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 2. Additional Home Page Styling 00:06:30
  • 3. Styling Login Form 00:03:48
  • 4. Styling Register Form 00:03:41
  • 5. Spacing Campgrounds 00:00:28
  • 6. Removing Inline Map Styles 00:02:54
  • 7. Adding Map Controls 00:03:14
58. YelpCamp Common Security Issues
  • 1. Mongo Injection 00:07:46
  • 1.1 YelpCamp Code (up to the end of this section) .html
  • 1.2 Express Mongo Sanitize Package .html
  • 2. Cross Site Scripting (XSS) 00:05:59
  • 2.1 XSS Game .html
  • 3. Sanitizing HTML w JOI 00:11:27
  • 3.1 Sanitize HTML Package .html
  • 4. Minor Changes to SessionCookies 00:03:26
  • 5. Hiding Errors 00:02:17
  • 6. Using Helmet 00:05:36
  • 6.1 Helmet Docs .html
  • 7. Content Security Policy Fun 00:08:25
59. YelpCamp Deploying
  • 1. Setting Up Mongo Atlas 00:09:53
  • 1.1 Mongo Cloud Sign Up .html
  • 1.2 YelpCamp Code (up to the end of this section) .html
  • 2. Using Mongo For Our Session Store 00:06:59
  • 2.1 Connect-Mongo Package .html
  • 3. Heroku Setup 00:03:42
  • 3.1 Heroku .html
  • 4. Pushing to Heroku 00:05:34
  • 5. Fixing Heroku Errors 00:04:36
  • 6. Configuring Heroku Env Variables 00:06:44