The Web Developer Bootcamp 2024

Description

In this course, you will learn :

• For 2021, learn the ins and outs of HTML5, CSS3, and Modern JavaScript.
• Using cutting-edge technologies, create REAL web applications.
• Create layouts that are responsive, accessible, and visually appealing.
• Recognize and avoid common security exploits such as SQL-Injection and XSS.
• Long after the course has ended, you should continue to learn and grow as a developer.
• Make a blog application from the ground up with Node, Express, and MongoDB.
• Create a complex yelp-like application from the ground up.
• Deploy your apps and interact with cloud databases.
• Make static HTML and CSS portfolio and landing pages.
• Consider yourself a developer. Master the art of Googling code questions!
• Create complex HTML forms that include validations.
• Implement full authentication from the ground up!
• CSS Frameworks such as Bootstrap 5, Semantic UI, and Bulma can be used.
• Use responsive navbars on your website.
• Use variables, conditionals, loops, functions, arrays, and objects in JavaScript.
• Understand scope and higher order functions, as well as how to write Javascript functions.
• Understand the "weird" aspects of JavaScript.
• Create full-stack web applications from the ground up.
• Using vanilla JS, manipulate the DOM.
• Create browser games using JavaScript.
• Postman can be used to monitor and test APIs.
• To write server-side JavaScript, use NodeJS.
• Create sophisticated web applications with multiple models and data associations.
• Create a REAL application using everything you've learned in the course.
• Create full-stack JS applications with Express and MongoDB.
• Use standard JS data structures such as arrays and objects.
• Learn how to use the command line interface.
• NPM can be used to install a wide range of useful packages.
• Learn the intricacies of HTTP requests.
• You can create your own Node modules.
• Create a beautiful, responsive portfolio page for a photographer.
• Make a stunning, responsive landing page for a startup.
• Set up user authentication.
• Make an eye-catching animated to-do list app.
• AJAX can be used to create single-page applications.

Syllabus :

1. An Introduction to Web Development

• What Matters In This Section?
• The Internet in 5 Minutes
• Intro to the Web
• The Request/Response Cycle
• Front-End and Back-End
• What do HTML/CSS/JS do?
• Setting Up Our Developer Environment

2. HTML: The Essentials

• What Matters In This Section
• Introduction to HTML
• Our Very First HTML Page
• TIP: Mozilla Developer Network
• Paragraph Elements
• Heading Elements
• Introduction to the Chrome Inspector
• HTML Boilerplate
• VSCode Tip: Auto-format
• List Elements
• Anchor Tags
• Images
• Comments

3. HTML: Next Steps & Semantics

• What Matters In This Section
• What Exactly Is HTML5?
• Block vs. Inline Elements - Divs and Spans
• An Odd Assortment of Elements: HR, BR, Sup, & Sub
• Entity Codes
• Intro to Semantic Markup
• Playing With Semantic Elements
• Screen Reader Demonstration
• VSCode Tip: Emmet

4. HTML: Forms & Tables

• What Matters In This Section
• Unit Goals
• Introducing HTML Tables
• Tables: TR, TD, and TH Elements
• Tables: Thead, Tbody, and Tfoot Elements
• Tables: Colspan & Rowspan
• The Form Element
• Common Input Types
• The All-Important Label
• HTML Buttons
• The Name Attribute
• "Hijacking" Google & Reddit's Search
• Radio Buttons, Checkboxes, & Selects
• Range & Text Area
• HTML5 Form Validations
• Creating A Marathon Registration Form Intro
• Creating A Marathon Registration Form Solution

5. CSS: The Very Basics

• What Matters In This Section
• What is CSS?
• CSS is Huge, Don't Panic!
• Including Styles Correctly
• Color & Background-Color Properties
• Colors Systems: RGB & Named Colors
• Colors Systems: Hexadecimal
• A Reminder On Semicolons & CSS
• Common Text Properties
• Font Size Basics With Pixels
• The Font Family Property

6. The World of CSS Selectors

• What Matters In This Section
• Universal & Element Selectors
• The ID Selector
• The Class Selector
• The Descendant Selector
• The Adjacent & Direct-Descendant Selectors
• The Attribute Selector
• Pseudo Classes
• Pseudo Elements
• The CSS Cascade
• WTF is Specificity
• TIP: Chrome Dev Tools & CSS
• Inline Styles & Important
• CSS Inheritance

7. The CSS Box Model

• What Matters In This Section
• Box Model: Width & Height
• Box Model: Border & Border-Radius
• Box Model: Padding
• Box Model: Margin
• The Display Property
• CSS Units Revisited
• CSS Units: ems
• CSS Units: rems

8. Other Assorted Useful CSS Properties

• What Matters In This Section
• Opacity & The Alpha Channel
• The Position Property
• CSS Transitions (yay!)
• The Power of CSS Transforms
• Fancy Button Hover Effect CodeAlong
• The Truth About Background
• Google Fonts is Amazing
• Photo Blog CodeAlong

9. Responsive CSS & Flexbox

• What Matters In This Section
• What on Earth Is Flexbox?
• Flex-Direction
• Justify-Content
• Flex-Wrap
• Align-Items
• Align-Content & Align-Self
• Flex-Basis, Grow, & Shrink
• Flex Shorthand
• Responsive Design & Media Queries Intro
• The Power of Media Queries
• Building a Responsive Nav

10. Pricing Panel Project

• Pricing Panel CodeAlong

11. CSS Frameworks: Bootstrap

• What Matters In This Section
• WTF Is Bootstrap
• Including Bootstrap & Containers
• Bootstrap Buttons
• Bootstrap Typography & Utilities
• Badges, Alerts, & Button Groups
• Intro to the Bootstrap Grid
• Responsive Bootstrap Grids
• Useful Grid Utilities
• Bootstrap & Forms
• Bootstrap Navbars
• Bootstrap Icons!
• Other Bootstrap Utilities
• A Mixed Bag of Other Bootstrap Stuff

12. OPTIONAL Museum Of Candy Project

• Watch This First! (it's short)
• Museum of Candy Project 

13. JavaScript Basics!

• What Matters In This Section
• Why JavaScript is Awesome
• Primitives & The Console
• JavaScript Numbers
• WTF is NaN
• Quick Numbers Quiz
• Variables & Let
• Updating Variables
• Const & Var
• Our First Constants Exercise
• Booleans
• Variable Naming and Conventions

14. JavaScript Strings and More

• What Matters In This Section
• Introducing Strings
• Indices & Length
• String Methods
• String Methods With Arguments
• String Template Literals -SUPER USEFUL
• Undefined & Null
• Random Numbers & The Math Object

15. JavaScript Decision Making

• What Matters In This Section
• Decision Making With Code??
• Comparison Operators
• Equality: Triple Vs. Double Equals
• Console, Alert, & Prompt
• Running JavaScript From A Script!
• If Statements
• Else-If
• Else
• Nesting Conditionals
• Truth-y & False-y Values
• Logical AND
• Logical OR
• Logical NOT
• The Switch Statement Is...A Lot

16. JavaScript Arrays

• What Matters In This Section
• Introducing Arrays
• Array Random Access
• Push & Pop
• Shift & Unshift
• Concat, indexOf, includes & reverse
• Slice & Splice
• Reference Types & Equality Testing
• Arrays + Const
• Multi-Dimensional Arrays

17. JavaScript Object Literals

• What Matters In This Section
• Introducing Object Literals
• Creating Object Literals
• Accessing Data Out Of Objects
• Modifying Objects
• Nesting Arrays & Objects

18. Repeating Stuff With Loops

• What Matters In This Section
• Intro to For Loops
• More For Loops Examples
• The Perils Of Infinite Loops :(
• Looping Over Arrays
• Nested Loops
• Another Loop: The While Loop
• The Break Keyword
• Writing a Guessing Game
• The Lovely For...Of Loop
• Iterating Over Objects
• Todo List Project Intro
• Todo List Project CodeAlong

19. NEW: Introducing Functions

• What Matters In This Section
• Intro to Functions
• Our Very First Function
• Arguments Intro
• Functions With Multiple Arguments
• The Return Keyword

20. Leveling Up Our Functions

• What Matters In This Section
• Function Scope
• Block Scope
• Lexical Scope
• Function Expressions
• Higher Order Functions
• Returning Functions
• Defining Methods
• The Mysterious Keyword 'this'
• Using Try/Catch

21. Callbacks & Array Methods

• What Matters In This Section
• What Is This Section Even About?!
• The forEach Method
• The map Method
• Intro to Arrow Functions
• Arrow Function Implicit Returns
• Arrow Functions Wrapup
• setTimeout and setInterval
• The filter Method
• Some & Every Methods
• The Notorious Reduce Method
• Arrow Functions & 'this'

22. Newer JavaScript Features

• What Matters In This Section
• Default Params
• Spread in Function Calls
• Spread with Array Literals
• Spread with Objects
• Rest Params
• Destructuring Arrays
• Destructuring Object
• Destructuring Params

23. Introducing The World Of The DOM

• What Matters In This Section
• Introducing the DOM
• The Document Object
• getElementById
• getElementsByTagName & className
• querySelector & querySelectorAll
• innerHTML, textContent, & innerText
• Attributes
• Changing Styles
• ClassList
• Traversing Parent/Child/Sibling
• Append & AppendChild
• removeChild & remove
• Pokemon Sprites Demo

24. The Missing Piece: DOM Events

• What Matters In This Section
• Intro to Events
• Inline Events
• The Onclick Property
• addEventListener
• Random Color Exercise
• Events & The Keyword This
• Keyboard Events & Event Objects
• NEW VERSION: Form Events & PreventDefault
• NEW VERSION: Practice With Form Events & PreventDefault
• ORIGINAL VERSION: Form Events & PreventDefault
• Input & Change Events
• Event Bubbling
• Event Delegation

25. Score Keeper CodeAlong

• Score Keeper
• Score Keeper : With Bulma
• Score Keeper : Refactoring

26. Async JavaScript: Oh Boy!

• What Matters In This Section
• The Call Stack
• WebAPIs & Single Threaded
• Callback Hell :(
• Demo: fakeRequest Using Callbacks
• Demo: fakeRequest Using Promises
• The Magic Of Promises
• Creating Our Own Promises
• The Async Keyword
• The Await Keyword
• Handling Errors In Async Functions

27. AJAX and API's

• What Matters In This Section
• Intro to AJAX
• Intro to APIs
• WTF is JSON
• Using Hoppscotch (or Postman)
• HTTP Verbs
• HTTP Status Codes
• Understanding Query Strings
• HTTP Headers
• Making XHRs
• Using The Fetch API
• Introducing Axios
• Setting Headers With Axios
• TV Show Search App

28. Prototypes, Classes, & OOP

• What Matters In This Section
• What On Earth Are Prototypes
• Intro to Object Oriented Programming
• Factory Functions
• Constructor Functions
• JavaScript Classes
• More Classes Practice
• Extends and Super Keywords

29. Mastering The Terminal

• What Matters In This Section
• Backend Overview
• A Pep Talk On Terminal
• Why Do We Need To Know Terminal Commands?
• Windows Terminal Installation Instructions
• The Basics: LS & PWD
• Changing Directories
• Relative Vs. Absolute Paths
• Making Directories
• Man Pages & Flags
• The Touch Command
• Removing Files & Folders

30. Our First Brush With Node

• What Matters In This Section
• Introducing Node JS
• What Is Node Used For?
• Installing Node
• The Node REPL
• Running Node Files
• Process & Argv
• File System Module Crash Course

31. Exploring Modules & The NPM Universe

• What Matters In This Section
• Working With module.exports
• Requiring A Directory
• Introducing NPM
• Installing Packages - Jokes & Rainbow
• Adding Global Packages
• The All-Important Package.json
• Installing All Dependencies For A Project
• Language Guesser Challenge

32. Creating Servers With Express

• What Matters In This Section
• Introducing Express
• Our Very First Express App
• The Request & Response Objects
• Express Routing Basics
• Express Path Parameters
• Working With Query Strings
• Auto-Restart With Nodemon

33. Creating Dynamic HTML With Templating

• What Matters In This Section
• What is Templating?
• Configuring Express For EJS
• Setting The Views Directory
• EJS Interpolation Syntax
• Passing Data To Templates
• Subreddit Template Demo
• Conditionals in EJS
• Loops In EJS
• A More Complex Subreddit Demo
• Serving Static Assets In Express
• Bootstrap + Express
• EJS & Partials

34. Defining RESTful Routes

• What Matters In This Section
• Get Vs. Post Requests
• Defining Express Post Routes
• Parsing The Request Body
• Intro to REST
• RESTful Comments Overview
• RESTful Comments Index
• RESTful Comments New
• Express Redirects
• RESTful Comments Show
• The UUID Package
• RESTful Comments Update
• Express Method Override
• RESTful Comments Delete

35. Our First Database: MongoDB

• What Matters In This Section
• Introduction to Databases
• SQL Vs. NoSQL Databases
• Why We're Learning Mongo
• Installing Mongo: MacOS
• Installing Mongo: Windows
• The Mongo Shell
• What On Earth Is BSON?
• Inserting With Mongo
• Finding With Mongo
• Updating With Mongo
• Deleting With Mongo
• Additional Mongo Operators

36. Connecting To Mongo With Mongoose

• What Matters In This Section
• What is Mongoose
• Connecting Mongoose to Mongo
• Our First Mongoose Model
• Insert Many
• Finding With Mongoose
• Updating With Mongoose
• Deleting With Mongoose!
• Mongoose Schema Validations
• Additional Schema Constraints
• Validating Mongoose Updates
• Mongoose Validation Errors
• Model Instance Methods
• Adding Model Static Methods
• Mongoose Virtuals
• Defining Mongoose Middleware

37. Putting It All Together: Mongoose With Express

• What Matters In This Section
• Express + Mongoose Basic Setup
• Creating Our Model
• Products Index
• Product Details
• Creating Products
• Updating Products
• Tangent On Category Selector
• Deleting Products

38. YelpCamp: Campgrounds CRUD

• Introducing YelpCamp: Our Massive Project
• How to Access YelpCamp Code
• Creating the Basic Express App
• Campground Model Basics
• Seeding Campgrounds
• Campground Index
• Campground Show
• Campground New & Create
• Campground Edit & Update
• Campground Delete

39. Middleware: The Key To Express

• What Matters In This Section
• Intro to Express Middleware
• Using Morgan - Logger Middleware
• Defining Our Own Middleware
• More Middleware Practice
• Setting Up A 404 Route
• Password Middleware Demo (NOT REAL AUTH)
• Protecting Specific Routes

40. YelpCamp: Adding Basic Styles

• A New EJS Tool For Layouts
• Bootstrap5! Boilerplate
• Navbar Partial
• Footer Partial
• Adding Images
• Styling Campgrounds Index
• Styling The New Form
• Styling Edit Form
• Styling Show Page

41. Handling Errors In Express Apps

• What Matters In This Section
• Express' Built-In Error Handler
• Defining Custom Error Handlers
• Our Custom Error Class
• Handling Async Errors
• Handling More Async Errors!
• Defining An Async Utility
• Differentiating Mongoose Errors

42. YelpCamp: Errors & Validating Data

• Where To Next With YelpCamp?
• Client-Side Form Validations
• Basic Error Handler
• Defining ExpressError Class
• More Errors
• Defining Error Template
• JOI Schema Validations
• JOI Validation Middleware

43. Data Relationships With Mongo

• What Matters In This Section
• Introduction to Mongo Relationships
• SQL Relationships Overview
• One to Few
• One to Many
• Mongoose Populate
• One to "Bajillions"
• Mongo Schema Design

44. Mongo Relationships With Express

• What Matters In This Section
• Defining Our Farm & Product Models
• Note about Farm model
• Creating New Farms
• Farms Show Page
• Creating Products For A Farm
• Finishing Touches
• Deletion Mongoose Middleware

45. YelpCamp: Adding The Reviews Model

• Defining The Review Model
• Adding The Review Form
• Creating Reviews
• Validating Reviews
• Displaying Reviews
• Styling Reviews
• Deleting Reviews
• Campground Delete Middleware

46. Express Router & Cookies

• What Matters In This Section
• Express Router Intro
• Express Router & Middleware
• Introducing Cookies
• Sending Cookies
• Cookie Parser Middleware
• Signing Cookies

47. Express Session & Flash

• What Matters In This Section
• Introduction to Sessions
• Express Session
• More Express Session
• Intro to Flash
• Res.locals & Flash

48. YelpCamp: Restructuring & Flash

• Breaking Out Campground Routes
• Breaking Out Review Routes
• Serving Static Assets
• Configuring Session
• Setting Up Flash
• Flash Success Partial
• Flash Errors Partial

49. Authentication From "Scratch"

• What Matters In This Section
• Authentication Vs. Authorization
• How to (not) Store Passwords
• Cryptographic Hashing Functions
• Password Salts
• Intro to Bcrypt
• Auth Demo: Setup
• Auth Demo: Registering
• Auth Demo: Login
• Auth Demo: Staying Logged In With Session
• Auth Demo: Logout
• Auth Demo: Require Login Middleware
• Auth Demo: Refactoring To Model Methods

50. YelpCamp: Adding In Authentication

• Introduction to Passport
• Creating Our User Model
• Configuring Passport
• Register Form
• Register Route Logic
• Login Routes
• isLoggedIn Middleware
• Adding Logout
• currentUser Helper
• Fixing Register Route
• ReturnTo Behavior

51. YelpCamp: Basic Authorization

• Adding an Author to Campground
• Showing and Hiding Edit/Delete
• Campground Permissions
• Authorization Middleware
• Reviews Permissions
• More Reviews Authorization

52. YelpCamp: Controllers & Star Ratings

• Refactoring To Campgrounds Controller
• Adding a Reviews Controller
• A Fancy Way To Restructure Routes
• Displaying Star Ratings
• Star Rating Form

53. YelpCamp: Image Upload

• Intro To Image Upload Process
• The Multer Middleware
• Cloudinary Registration
• Environment Variables with dotenv
• Uploading To Cloudinary Basics
• Storing Uploaded Image Links In Mongo
• Displaying Images In A Carousel
• Fixing Our Seeds
• Adding Upload to Edit Page
• Customizing File Input
• A Word Of Warning!
• Deleting Images Form
• Deleting Images Backend
• Adding a Thumbnail Virtual Property

54. YelpCamp: Adding Maps

• Registering For Mapbox
• Geocoding Our Locations
• Working With GeoJSON
• Displaying A Map
• Centering The Map On A Campground
• Fixing Our Seeds Bug
• Customizing Map Popup

55. YelpCamp: Fancy Cluster Map

• Intro To Our Cluster Map
• Adding Earthquake Cluster Map
• Reseeding Our Database (again)
• Basic Clustering Campgrounds
• Tweaking Clustering Code
• Changing Cluster Size and Color
• Adding Custom Popups

56. YelpCamp: Styles Clean Up

• Styling Home Page
• Additional Home Page Styling
• Styling Login Form
• Styling Register Form
• Spacing Campgrounds
• Removing Inline Map Styles
• Adding Map Controls

57. YelpCamp: Common Security Issues

• Mongo Injection
• Cross Site Scripting (XSS)
• Sanitizing HTML w/ JOI
• Minor Changes to Session/Cookies
• Hiding Errors
• Using Helmet
• Content Security Policy Fun

58. YelpCamp: Deploying

• Setting Up Mongo Atlas
• Using Mongo For Our Session Store
• Heroku Setup
• Pushing to Heroku
• Fixing Heroku Errors
• Configuring Heroku Env Variables

Show more