The Complete Web Development Bootcamp

• What You'll Get in This Course
• Download the Course Syllabus
• Download the Course Resources
• Download the 12 Rules to Learn to Code eBook [Latest Edition]
• How Does the Internet Actually Work?
• How Do Websites Actually Work?
• How to Get the Most Out of the Course
• What You'll Need to Get Started - Setup Your Local Web Development Environment
• Setup Packages
• How to Get Help When You're Stuck
• Pathfinder

• Introduction to HTML
• The Anatomy of an HTML Tag
• What we're building - HTML Personal Site
• What is The HTML Boilerplate?
• How to Structure Text in HTML
• HTML Lists
• HTML Image Elements
• HTML Links and Anchor Tags
• How to Ace this Course

• HTML Tables
• Using HTML Tables for Layout
• HTML Tables Code Challenge
• How to Type Emojis
• HTML Tables Solution Walkthrough
• HTML Forms
• Forms in Practice - Create a Contact Me Form
• HTML Challenge
• Publish Your Website!
• Tip from Angela - Habit Building with the Calendar Trick
• Get Monthly Tips and Tools to Level Up as a Developer

• Introduction to CSS
• Inline CSS
• Internal CSS
• External CSS
• How to Debug CSS Code
• The Anatomy of CSS Syntax
• CSS Selectors
• Classes vs. Ids
• CSS Quiz
• Tip from Angela - Dealing with Distractions
• Join the Student Community

• What We'll Make - Stylised Personal Site
• What Are Favicons?
• HTML Divs
• The Box Model of Website Styling
• CSS Display Property
• Learn More About Web Design
• CSS Static and Relative Positioning
• Absolute positioning
• The Dark Art of Centering Elements with CSS
• Font Styling in Our Personal Site
• Learn More About Typography
• Adding Content to Our Website
• CSS Sizing
• Font Properties Challenge 1 - Change the Colours
• Font Properties Challenge 2 - Change the Font Weight
• Font Properties Challenge 3 - Change the Line Height
• CSS Font Property Challenge 
• CSS Float and Clear
• CSS Challenge
• Stylised Personal Site Solution Walkthrough
• [Optional] Get More Practice HTML and CSS
• Tip from Angela - Nothing Easy is Worth Doing!

• What is Bootstrap?
• Installing Bootstrap
• Web Design 101 - Wireframing
• The Bootstrap Navigation Bar
• What We'll Make: TinDog
• Download the Starting Files
• Setting Up Our New Project
• Bootstrap Grid Layout System
• Getting Montserrat Black and other Font Weights
• Adding Grid Layouts to Our Website
• A Note About CSS Link Order
• Bootstrap Containers
• Bootstrap Buttons & Font Awesome
• Styling Our Website Challenges and Solutions
• Bootstrap Challenge 1
• Solution to Bootstrap Challenge 1
• Tip from Angela - How to Deal with Procrastination

• The Bootstrap Carousel Part 1
• The Bootstrap Carousel Part 2
• Bootstrap Cards
• The CSS Z-Index and Stacking Order
• Media Query Breakpoints
• Bootstrap Challenge 2
• Bootstrap Challenge 2 Solution
• How to become a Better Programmer - Code Refactoring
• Put it into Practice - Refactor our Website Part 1
• Advanced CSS - Combining Selectors
• Refactoring our Website Part 2
• Advanced CSS - Selector Priority
• Completing the Website
• Download the Completed Website
• Tip from Angela - Building a Programming Habit

• Introduction to Web Design
• Understanding Colour Theory
• Understanding Typography and How to Choose a Font
• Manage ATTENTION with effective User Interface (UI) Design
• User Experience (UX) Design
• Web Design in Practice - Let's apply what we've learnt!

• Introduction to Javascript
• Javascript Alerts - Adding Behaviour to Websites
• Data Types
• Javascript Variables
• Javascript Variables Exercise Start
• Javascript Variables Exercise
• Javascript Variables Exercise Solution
• Naming and Naming Conventions for Javascript Variables
• Javascript Variable Naming Quiz
• String Concatenation
• String Lengths and Retrieving the Number of Characters
• Slicing and Extracting parts of strings
• Challenge: Changing Casing in Text
• Challenge: Changing String Casing Solution
• Basic Arithmetic and the Modulo Operator in Javascript
• Increment and Decrement Expressions
• Javascript Numbers Quiz
• Functions Part 1: Creating and Calling Functions 
• Functions Part 1 Challenge - The Karel Robot
• The Karel Chess Board Solution
• A Quick Note About the Next Lesson
• Functions Part 2: Parameters and Arguments
• Life in Weeks Coding Exercise
• Life in Weeks Solution
• Functions Part 3: Outputs & Return Values
• Challenge: Create a BMI Calculator
• BMI Calculator Challenge
• Challenge: BMI Calculator Solution
• JavaScript Functions Quiz
• Tip from Angela - Set Your Expectations

• Random Number Generation in Javascript: Building a Love Calculator
• Control Statements: Using If-Else Conditionals & Logic
• Comparators and Equality
• Combining Comparators
• BMI Calculator Advanced (IF/ELSE)
• Introducing the Leap Year Code Challenge
• Leap Year Challenge Exercise
• Leap Year Solution
• Collections: Working with Javascript Arrays
• Adding Elements and Intermediate Array Techniques
• Who's Buying Lunch? Code Challenge
• Who's Buying Lunch Solution
• Control Statements: While Loops
• Solution to the 99 Bottles Challenge
• Control Statements: For Loops
• Introducing the Fibonacci Code Challenge
• The Fibonacci Exercise
• Fibonacci Solution
• Tip from Angela - Retrieval is How You Learn

• Adding Javascript to Websites
• Introduction to the Document Object Model (DOM)
• Solution to the DOM Challenge
• Selecting HTML Elements with Javascript
• Manipulating and Changing Styles of HTML Elements with Javascript
• The Separation of Concerns: Structure vs Style vs Behaviour
• Text Manipulation and the Text Content Property
• Manipulating HTML Element Attributes
• Tip from Angela - The 20 Minute Method

• Challenge: The Dicee Challenge
• Dicee Challenge Step 0 - Download the Skeleton Project
• Dicee Challenge Step 1 - Create an External Javascript File
• Dicee Challenge Step 2 - Add Dice Images
• Dicee Challenge Step 3 - Create a Random Number
• Dicee Challenge Step 4 - Change the <img> to a Random Dice
• Dicee Challenge Step 5 - Change both <img> Elements
• Dicee Challenge Step 6 - Change the Title to Display a Winner
• The Solution to the Dicee Challenge
• Download the Completed Website
• Tip from Angela - Learning Before you Eat

• Preview
• Download the Starting Files
• Adding Event Listeners to a Button
• Higher Order Functions and Passing Functions as Arguments
• Higher Order Function Challenge Solution
• How to Play Sounds on a Website
• A Deeper Understanding of Javascript Objects
• How to Use Switch Statements in Javascript
• Objects, their Methods and the Dot Notation
• A Quick Note About the Next Lesson
• Using Keyboard Event Listeners to Check for Key Presses
• Understanding Callbacks and How to Respond to Events
• Adding Animation to Websites
• Download the Completed Website
• Tip from Angela - Dealing with Lack of Progress

• What is jQuery?
• How to Incorporate jQuery into Websites
• How Minification Works to Reduce File Size
• Selecting Elements with jQuery
• Manipulating Styles with jQuery
• Manipulating Text with jQuery
• Manipulating Attributes with jQuery
• Adding Event Listeners with jQuery
• Adding and Removing Elements with jQuery
• Website Animations with jQuery
• Tip from Angela - Mixing Knowledge

• What You'll Make: The Simon Game
• Play the Game
• Step 0 - Download the Starting Files
• Step 1 - Add Javascript and jQuery
• Step 1 - Answer
• Step 2 - Create A New Pattern
• Step 2 - Answer
• Step 3 - Show the Sequence to the User with Animations and Sounds
• Step 3 - Answer
• Step 4 - Check Which Button is Pressed
• Step 4 - Answer
• Step 5 - Add Sounds to Button Clicks
• Step 5 - Answer
• Step 6 - Add Animations to User Clicks
• Step 6 - Answer
• Step 7 - Start the Game
• Step 7 - Answer
• Step 8 - Check the User's Answer Against the Game Sequence8
• Step 8 - Answer
• Step 9 - Game Over
• Step 9 - Answer
• Step 10 - Restart the Game
• Step 10 - Answer
• Download the Completed Project Code
• Tip from Angela - Dealing with Frustration

• Installing the Hyper Terminal
• Command Line Hyper Setup
• Understanding the Command Line. Long Live the Command Line!
• Command Line Techniques and Directory Navigation
• Creating, Opening, and Removing Files through the Command Line
• Tip from Angela - Sleep is My Secret Weapon

• Backend Web Development Explained

• Preview
• Install Node.js on Mac
• Install Node.js on Windows
• The Power of the Command Line and How to Use Node
• The Node REPL (Read Evaluation Print Loops)
• How to Use the Native Node Modules
• The NPM Package Manager and Installing External Node Modules
• Tip from Angela - Step Up to the Challenge

• What is Express?
• Creating Our First Server with Express
• Handling Requests and Responses: the GET Request
• Nodemon Installation
• Understanding and Working with Routes
• What We'll Make: A Calculator
• Calculator Setup Challenge
• Calculator Setup: Challenge Solution
• Responding to Requests with HTML Files
• Processing Post Requests with Body Parser
• BMI Routing Challenge
• Solution to the BMI Routing Challenge
• Tip from Angela - How to Solidify Your Knowledge

• Why Do We Need APIs?
• API Endpoints, Paths and Parameters.
• API Authentication and Postman
• What is JSON?
• Making GET Requests with the Node HTTPS Module
• How to Parse JSON
• Using Express to Render a Website with Live API Data
• Using Body Parser to Parse POST Requests to the Server
• The Mailchimp API - What You'll Make
• Setting Up the Sign Up Page
• Posting Data to Mailchimp's Servers via their API
• Adding Success and Failure Pages
• Deploying Your Server with Heroku
• Tip from Angela - Location, Location, Location!

• Introduction to Version Control and Git
• Version Control Using Git and the Command Line
• GitHub and Remote Repositories
• GitHub Private Repos are now Free! ?
• Gitignore
• Cloning
• Branching and Merging
• Optional Git Challenge
• Forking and Pull Requests
• Tip from Angela - Spaced Repetition

• Preview
• Linter Errors with EJS
• Templates? Why Do We Need Templates?
• Creating Your First EJS Templates
• Running Code Inside the EJS Template
• Passing Data from Your Webpage to Your Server
• The Concept of Scope in the Context of Javascript
• Adding Pre-Made CSS Stylesheets to Your Website
• Understanding Templating vs. Layouts
• Understanding Node Module Exports: How to Pass Functions and Data between Files
• Tip from Angela - Use Accountability in your Favour

• A New Challenge Format and What We'll Make: A Blog 
• Setting Up the Blog Project
• Challenge 1
• Challenge 1 Solution
• Challenge 2
• Challenge 2 Solution
• Challenge 3
• Challenge 3 Solution
• Challenge 4
• Challenge 4 Solution
• Challenge 5
• Challenge 5 Solution
• Challenge 6
• Challenge 6 Solution
• Challenge 7
• Challenge 7 Solution
• Challenge 8
• Challenge 8 Solution
• Challenge 9
• Challenge 9 Solution
• Challenge 10
• Challenge 10 Solution
• Challenge 11
• Challenge 11 Solution
• Challenge 12
• Challenge 12 Solution
• Challenge 13
• Challenge 13 Solution
• Challenge 14 and Solution
• Challenge 15
• Challenge 15 Solution
• Express Routing Parameters
• Challenge 16
• Challenge 16 Solution
• Challenge 17
• Challenge 17 Solution
• Challenge 18
• Challenge 18 Solution
• Challenge 19
• Challenge 19 Solution
• Challenge 20
• Challenge 20 Solution
• Challenge 21
• Challenge 21 Solution
• Tip from Angela - When Life Gives You Lemons

•    Databases Explained: SQL vs. NOSQL

• SQL Commands: CREATE Table and INSERT Data
• SQL Commands: READ, SELECT, and WHERE
• Updating Single Values and Adding Columns in SQL
• SQL Commands: DELETE
• Understanding SQL Relationships, Foreign Keys and Inner Joins
• Tip from Angela - Find All the Hard Working People

• Installing MongoDB on Mac
• Installing MongoDB on Windows
• MongoDB CRUD Operations in the Shell: Create
• MongoDB CRUD Operations in the Shell: Reading & Queries
• MongoDB CRUD Operations in the Shell: Update
• MongoDB CRUD Operations in the Shell: Delete
• Relationships in MongoDB
• Working with The Native MongoDB Driver
• If You Have Forgotten to Quit the Mongod Server
• Tip from Angela - Daily Routines

• Introduction to Mongoose
• Reading from Your Database with Mongoose
• Data Validation with Mongoose
• Updating and Deleting Data Using Mongoose
• Establishing Relationships and Embedding Documents using Mongoose
• Tip from Angela - Deep Work

• Let's take the ToDoList Project to the Next Level and Connect it with Mongoose
• Rendering Database Items in the ToDoList App
• Adding New Items to our ToDoList Database
• Deleting Items from our ToDoList Database
• Creating Custom Lists using Express Route Parameters
• Adding New Items to the Custom ToDo Lists
• Revisiting Lodash and Deleting Items from Custom ToDo Lists
• Tip from Angela - One Step at a Time

• How to Deploy Web Apps with a Database
• How to Setup MongoDB Atlas
• Deploying an App with a Database to Heroku
• Tip from Angela - Discipline Breeds Discipline

• Challenge: Give your Blog a Database
• Step 0 - Download the Starting Files
• Step 1 - Save Composed Posts with MongoDB
• Step 2 - Get the Home Page to Render the Posts
• Step 3 - Fix the bug
• Step 4 - Render the correct blog post based on post _id
• completed Blog with Database Solution
• Tip from Angela - Dealing with Limitations

• What is REST?
• Creating a Database with Robo 3T
• Set Up Server Challenge
• Set Up Server Solution
• GET All Articles
• POST a New Article
• DELTE All Articles
• Chained Route Handlers Using Express
• GET a Specific Article
• PUT a Specific Article
• PATCH a Specific Article
• DELETE a Specific Article
• Download the Completed Project Code
• Tip from Angela - How to Get a Job as Programmer

• Introduction to Authentication
• Getting Set Up
• Level 1 - Register Users with Username and Password
• How to Review the Source Code
• Level 2 - Database Encryption
• Using Environment Variables to Keep Secrets Safe
• Level 3 - Hashing Passwords
• Hacking 101 
• Level 4 - Salting and Hashing Passwords with bcrypt
• What are Cookies and Sessions?
• Using Passport.js to Add Cookies and Sessions
• Level 6 - OAuth 2.0 & How to Implement Sign In with Google
• Finishing Up the App - Letting Users Submit Secrets
• Download the Completed Project Code
• Tip from Angela - How to Work as a Freelancer

• What is React?
• What we will make in this React module
• Introduction to Code Sandbox and the Structure of the Module
• Introduction to JSX and Babel
• JSX Code Practice
• Javascript Expressions in JSX & ES6 Template Literals
• Javascript Expressions in JSX Practice
• JSX Attributes & Styling React Elements
• Inline Styling for React Elements
• React Styling Practice
• React Components
• React Components Practice
• Javascript ES6 - Import, Export and Modules
• Javascript ES6 Import, Export and Modules Practice
• [Windows] Local Environment Setup for React Development
• [Mac] Local Environment Setup for React Development
• Keeper App Project - Part 1 Challenge
• Keeper App Part 1 Solution
• React Props
• React Props Practice
• React DevTools
• Mapping Data to Components
• Mapping Data to Components Practice
• Javascript ES6 Map/Filter/Reduce
• Javascript ES6 Arrow functions
• Keeper App Project - Part 2
• React Conditional Rendering with the Ternary Operator & AND Operator
• Conditional Rendering Practice
• State in React - Declarative vs. Imperative Programming
• React Hooks - useState
• useState Hook Practice
• Javascript ES6 Object & Array Destructuring
• Javascript ES6 Destructuring Challenge Solution
• Event Handling in React
• React Forms
• Class Components vs. Functional Components
• Changing Complex 
• Changing Complex State Practice
• Javascript ES6 Spread Operator
• Javascript ES6 Spread Operator Practice
• Managing a Component Tree
• Managing a Component Tree Practice
• Keeper App Project - Part 3
• React Dependencies & Styling the Keeper App
• Tip from Angela - How to Build Your Own Product

• AAA 1 - How to Soak in Programming Concepts and more...
• AAA 2 - Schedule for Learning to Code and more...
• AAA 3 - How to Start Freelancing and more...
• AAA 4 - The Live AMA

• Vote for the Next Module!
• Bonus Lecture: Check out my other courses