The Web Developer Bootcamp 2024 by Udemy
10 Hours of React just added. Become a Developer With ONE course - HTML, CSS, JavaScript, React, Node, MongoDB and More!
Course Highlights
- 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
Skills you will learn!
Curriculum
10 Topics
Welcome To The Course!
Joining The Community Chat & Groups
Curriculum Walkthrough
When Was The Course Last Updated?
Course Change Log
Will I Get A Job?
Accessing Course Code & Slides
Tips On The Interactive Coding Exercises
Course Coding Exercise Solutions
Migrating From The Old Version Of This Course
8 Topics
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
OPTIONAL VSCode Theme
16 Topics
What Matters In This Section
Introduction to HTML
Our Very First HTML Page
TIP: Mozilla Developer Network
Paragraph Elements
Heading Elements
Pangolin Practice
Introduction to the Chrome Inspector
HTML Boilerplate
VSCode Tip: Auto-format
List Elements
Favorite Movies Exercises
Anchor Tags
Images
Comments
Wolf Images & Links Exercise
10 Topics
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
Snowman Logo Exercise
Intro to Semantic Markup
Playing With Semantic Elements
Screen Reader Demonstration
VSCode Tip: Emmet
19 Topics
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
Table Practice Exercise
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
Forms Practice Exercise
HTML5 Form Validations
Creating A Marathon Registration Form Intro
Creating A Marathon Registration Form Solution
14 Topics
What Matters In This Section
What is CSS?
CSS is Huge Don't Panic!
Including Styles Correctly
Color & Background-Color Properties
Our First CSS Exercise
Colors Systems: RGB & Named Colors
Colors Systems: Hexadecimal
Colors Quiz
A Reminder On Semicolons & CSS
Common Text Properties
Font Size Basics With Pixels
The Font Family Property
Hipster Logo Exercise
18 Topics
What Matters In This Section
Universal & Element Selectors
The ID Selector
The Class Selector
Basic Selectors Practice
The Descendant Selector
Descendant Combinator Practice
The Adjacent & Direct-Descendant Selectors
The Attribute Selector
Pseudo Classes
Checkerboard Exercise
Pseudo Elements
The CSS Cascade
WTF is Specificity
Specificity Quiz
TIP: Chrome Dev Tools & CSS
Inline Styles & Important
CSS Inheritance
10 Topics
What Matters In This Section
Box Model: Width & Height
Box Model: Border & Border-Radius
Box Model Practice
Box Model: Padding
Box Model: Margin
The Display Property
CSS Units Revisited
CSS Units: ems
CSS Units: rems
11 Topics
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
IMPORTANT REMINDER: How To Find And Download Course Code
Photo Blog CodeAlong Pt. 1
Photo Blog CodeAlong Pt. 2
13 Topics
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
NOTE: Fixing The Code Order In The Next Lecture
Building a Responsive Nav
6 Topics
Pricing Panel CodeAlong Pt. 1
Pricing Panel CodeAlong Pt. 2
Pricing Panel CodeAlong Pt. 3
Pricing Panel CodeAlong Pt. 4
Pricing Panel CodeAlong Pt. 5
Pricing Panel CodeAlong Pt. 6
16 Topics
What Matters In This Section
WTF Is Bootstrap
Including Bootstrap & Containers
Bootstrap Buttons
Bootstrap Typography & Utilities
Badges Alerts & Button Groups
Bootstrap Basics Practice
Intro to the Bootstrap Grid
Bootstrap Grid Practice
Responsive Bootstrap Grids
Useful Grid Utilities
Bootstrap & Forms
Bootstrap Navbars
Bootstrap Icons!
Other Bootstrap Utilities
A Mixed Bag of Other Bootstrap Stuff
7 Topics
Watch This First! (it's short)
Museum of Candy Project Part 1
NOTE ABOUT THE NEXT VIDEO!
Museum of Candy Project Part 2
Museum of Candy Project Part 3
Museum of Candy Project Part 4
Museum of Candy Project Part 5
16 Topics
What Matters In This Section
Why JavaScript is Awesome
Primitives & The Console
JavaScript Numbers
WTF is NaN
Quick Numbers Quiz
Variables & Let
Our First Variables Exercise
Updating Variables
Increment Operator Explanation: i++ vs ++i
Const & Var
Our First Constants Exercise
Variables Quiz
Booleans
Variable Naming and Conventions
Quick Variable Quiz
13 Topics
What Matters In This Section
Introducing Strings
Our First String Variables Practice
Indices & Length
Strings Basics Quiz
String Methods
String Methods Practice
String Methods With Arguments
More String Methods Practice
String Template Literals -SUPER USEFUL
Undefined & Null
Random Numbers & The Math Object
String Template Literal Exercise
20 Topics
What Matters In This Section
Decision Making With Code??
Comparison Operators
Equality: Triple Vs. Double Equals
Comparison Quiz!
Console Alert & Prompt
Running JavaScript From A Script!
If Statements
Our First Conditional Exercise
Else-If
Else
getColor Conditional Exercise
Nesting Conditionals
Nested Conditionals Practice
Truth-y & False-y Values
Logical AND
Logical AND Mystery Exercise
Logical OR
Logical NOT
The Switch Statement Is...A Lot
14 Topics
What Matters In This Section
Introducing Arrays
Lotto Numbers Exercise
Array Random Access
Array Access Exercise
Push & Pop
Shift & Unshift
Push/Pop/Shift/Unshift Practice
Concat indexOf includes & reverse
Slice & Splice
Reference Types & Equality Testing
Arrays + Const
Multi-Dimensional Arrays
Nested Arrays Exercise
8 Topics
What Matters In This Section
Introducing Object Literals
Creating Object Literals
Our First Object Exercise
Accessing Data Out Of Objects
Object Access Exercise
Modifying Objects
Nesting Arrays & Objects
18 Topics
What Matters In This Section
Intro to For Loops
Our First For Loop Practice
More For Loops Examples
More For Loops Practice
The Perils Of Infinite Loops :(
Looping Over Arrays
Iterating Arrays Exercise
Nested Loops
Another Loop: The While Loop
The Break Keyword
Writing a Guessing Game
Guessing Game Explanation And Bug Fixes
The Lovely For...Of Loop
For...Of Practice
Iterating Over Objects
Todo List Project Intro
Todo List Project CodeAlong
15 Topics
What Matters In This Section
Intro to Functions
Our Very First Function
Heart Function Exercise
Arguments Intro
Rant Exercise
Functions With Multiple Arguments
Multiple Args Exercise
The Return Keyword
Return Value Practice
isShortsWeather Function
Last Element Exercise
Capitalize Exercise
Sum Array Exercise
Days Of The Week Exercise
14 Topics
What Matters In This Section
Function Scope
Function Scope Quiz
Block Scope
Lexical Scope
Function Expressions
Function Expression Exercise
Higher Order Functions
Returning Functions
Defining Methods
Methods Exercise
The Mysterious Keyword 'this'
Egg Laying Exercise
Using Try/Catch
16 Topics
What Matters In This Section
What Is This Section Even About?!
The forEach Method
The map Method
Map Practice
Intro to Arrow Functions
Arrow Function Exercise
Arrow Function Implicit Returns
Arrow Functions Wrapup
setTimeout and setInterval
The filter Method
Filter Exercise
Some & Every Methods
Some/Every Exercise
The Notorious Reduce Method
Arrow Functions & 'this'
9 Topics
What Matters In This Section
Default Params
Spread in Function Calls
Spread with Array Literals
Spread with Objects
Rest Params
Destructuring Arrays
Destructuring Objects
Destructuring Params
22 Topics
What Matters In This Section
Introducing the DOM
The Document Object
getElementById
getElementById Practice
getElementsByTagName & className
querySelector & querySelectorAll
querySelector Practice
innerHTML textContent & innerText
Pickles Exercise
Attributes
Manipulating Attributes Practice
Changing Styles
Magical Forest Circle Exercise
Rainbow Text Exercise
ClassList
ClassList Practice
Traversing Parent/Child/Sibling
Append & AppendChild
100 Button Insanity Exercise
removeChild & remove
Pokemon Sprites Demo
18 Topics
What Matters In This Section
Intro to Events
Inline Events
Know Thy Enemy Exercise
The Onclick Property
addEventListener
Click Events Exercise
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
Form Events Exercise
Input & Change Events
Input Event Practice
Event Bubbling
Event Delegation
4 Topics
Score Keeper Pt. 1
Score Keeper Pt. 2
Score Keeper Pt. 3 With Bulma
Score Keeper Pt. 4 Refactoring
11 Topics
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
14 Topics
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
8 Topics
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
12 Topics
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
9 Topics
What Matters In This Section
Introducing Node JS
What Is Node Used For?
Installing Node
The Node REPL
Running Node Files
Process & Argv
IMPORTANT NOTE: fs.writeFileSync Changes
File System Module Crash Course
10 Topics
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
IMPORTANT NOTE: Fixing Issues — Language Guesser Challenge
Language Guesser Challenge
8 Topics
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
13 Topics
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
14 Topics
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
14 Topics
What Matters In This Section
Introduction to Databases
SQL Vs. NoSQL Databases
Why We're Learning Mongo
Installing Mongo: MacOS
Installing Mongo: Windows Installation Tutorial
IMPORTANT NOTE: About The Mongo Shell
The Mongo Shell
What On Earth Is BSON?
Inserting With Mongo
Finding With Mongo
Updating With Mongo
Deleting With Mongo
Additional Mongo Operators
18 Topics
What Matters In This Section
What is Mongoose
A note about solving mongoose connection issues
Connecting Mongoose to Mongo
A note about the node .load index.js command issue
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
10 Topics
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
BONUS: Filtering By Category
10 Topics
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
8 Topics
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
9 Topics
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
8 Topics
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
8 Topics
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
9 Topics
What Matters In This Section
Introduction to Mongo Relationships
SQL Relationships Overview
Note: Solving an upcoming code issue with mongoose version 7
One to Few
One to Many
Mongoose Populate
One to "Bajillions"
Mongo Schema Design
8 Topics
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
8 Topics
Defining The Review Model
Adding The Review Form
Creating Reviews
Validating Reviews
Displaying Reviews
Styling Reviews
Deleting Reviews
Campground Delete Middleware
8 Topics
What Matters In This Section
Express Router Intro
Express Router & Middleware
Introducing Cookies
Sending Cookies
Cookie Parser Middleware
Signing Cookies
OPTIONAL: HMAC Signing
6 Topics
What Matters In This Section
Introduction to Sessions
Express Session
More Express Session
Intro to Flash
Res.locals & Flash
7 Topics
Breaking Out Campground Routes
Breaking Out Review Routes
Serving Static Assets
Configuring Session
Setting Up Flash
Flash Success Partial
Flash Errors Partial
13 Topics
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
13 Topics
Introduction to Passport
Creating Our User Model
Configuring Passport
Register Form
Register Route Logic
Login Routes
isLoggedIn Middleware
IMPORTANT: Fixing Logout
Adding Logout
currentUser Helper
Fixing Register Route
IMPORTANT: Passport.js Updates — Fixing The returnTo/Redirect Issue
ReturnTo Behavior
6 Topics
Adding an Author to Campground
Showing and Hiding Edit/Delete
Campground Permissions
Authorization Middleware
Reviews Permissions
More Reviews Authorization
5 Topics
Refactoring To Campgrounds Controller
Adding a Reviews Controller
A Fancy Way To Restructure Routes
Displaying Star Ratings
Star Rating Form
14 Topics
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
7 Topics
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
7 Topics
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
7 Topics
Styling Home Page
Additional Home Page Styling
Styling Login Form
Styling Register Form
Spacing Campgrounds
Removing Inline Map Styles
Adding Map Controls
8 Topics
Mongo Injection
Cross Site Scripting (XSS)
Sanitizing HTML w/ JOI
Minor Changes to Session/Cookies
Hiding Errors
IMPORTANT: Helmet Updates — Fixing Issues
Using Helmet
Content Security Policy Fun
8 Topics
Setting Up Mongo Atlas
IMPORTANT: connect-mongo — Handling Updates
Using Mongo For Our Session Store
Render — A free alternative for deploying your app
Heroku Setup
Pushing to Heroku
Fixing Heroku Errors
Configuring Heroku Env Variables
7 Topics
How The React Content Works
React Content Slides
Introducing React
Setting Up Code Sand Box
The Basics of JSX
Basic React App Structure
Our First React Component
9 Topics
Importing and Exporting Components
The Rules of JSX
React Fragments
Evaluating JS Expressions in JSX
Creating. a Die Component
Component Decomposition
Styling Components
Random PokeCard Exercise
GET THE POKEMON IMAGE URL HERE
3 Topics
Creating React Apps With Vite
A Note About Create React App
A Tour of A Vite App
9 Topics
Introducing Props
Non-String Props
Setting Default Prop Values
Passing Arrays and Objects
React Conditionals
The React Developer Tools
Adding Dynamic Component Styles
Rendering Arrays With Map
Slot Machine Exercise
7 Topics
Creating A Shopping List Component
The Key Prop
The Shopping List Item Component
Rental Property Exercise
Rental Properties Exercise STARTER DATA
Configuring ESLint
PropTypes Library Crash Course
4 Topics
Intro to React Events
Non-Click Events
Working With The Event Object
Clicker Exercise
7 Topics
Introducing State
Working With The useState() Hook
Creating a Toggler Component
Multiple Pieces of State In A Component
useState() and Rendering
Color Box Exercise INTRO
Color Box Exercise SOLUTION
10 Topics
Setting State With An Updater Function
State Initializer Functions
When Does React Re-Render?
Working With Objects In State
Arrays In State
Generating Ids with UUID
Deleting From Arrays The React Way
Common Array Updating Patterns
Updating All Elements In An Array
Score Keeper Exercise
8 Topics
Introducing The Lucky7 Game
Formulating Our Component Gameplan
Building Die and Dice Components
The LuckyN Component
State As Props
Passing Functions As Props
Passing Functions That Update State
Practice Passing State Updating Functions
10 Topics
Controlled Components
The htmlFor Property
Working With Multiple Inputs
A Better Signup Form
Computed Property Names in HandleChange()
Creating a Shopping List Form
Shopping List Component
Finishing The Shopping List Component
Form Validation From Scratch
Validations using React Hook Form
6 Topics
Introducing Effects
The useEffect Hook
useEffect Dependencies
Fetching Initial Data From an API
Adding a Loader
Github Profile Search
5 Topics
Introducing Material UI
Installing Material UI
The Rating Component
Material Forms
The SX Prop and Custom Styles
8 Topics
Creating The Application
The TodoList Component
Removing Todos
Toggling Todos
The New Todo Form
Adding LocalStorage
Tweaking the Todo Icons and Ids
Final Styles
1 Topic
Check Out This Fancy Todo List
1 Topic
What's Next and Goodbye!
36 Topics
LEGACY Download: Introduction To This Course
LEGACY Download: Introduction To Front End Development
LEGACY Download: Introduction to HTML
LEGACY Download: Intermediate HTML
LEGACY Download: Introduction to CSS
LEGACY Download: Intermediate CSS
LEGACY Download: Bootstrap
LEGACY Download: Bootstrap 4
LEGACY Download: Bootstrap 4 Flexbox & Layout
LEGACY Download: Introduction to JavaScript
LEGACY Download: JavaScript Basics Control Flow
LEGACY Download: JavaScript Basics Functions
LEGACY Download: JavaScript Basics Arrays
LEGACY Download: JavaScript Basics Objects
LEGACY Download: DOM Manipulation
LEGACY Download: Advanced DOM Manipulation
LEGACY Download: Color Game Project
LEGACY Download: Intro to jQuery
LEGACY Download: Advanced jQuery
LEGACY Download: Todo List Projects
LEGACY Download: Patatap Clone
LEGACY Download: Backend Basics
LEGACY Download: The Command Line
LEGACY Download: Node JS
LEGACY Download: Server Side Frameworks
LEGACY Download: Intermediate Express
LEGACY Download: Working With APIs
LEGACY Download: YelpCamp Basics
LEGACY Download: Databases
LEGACY Download: YelpCamp Data Persistence
LEGACY Download: RESTful Routing
LEGACY Download: Data Associations
LEGACY Download: YelpCamp Comments
LEGACY Download: Authentication
LEGACY Download: YelpCamp Adding Authentication
LEGACY Download: YelpCamp Cleaning Up
The Web Developer Bootcamp 2024
Related Web Development Courses
.webp)
Thank You!
Your review has been submitted successfully.