The Complete 2023 Web Development Bootcamp

FrontEnd Web Development
What Youll Get in This Course
Download the Course Syllabus
Download the 12 Rules to Learn to Code eBook Latest Edition
Download the Required Software
How Does the Internet Actually Work
How Do Websites Actually Work
How to Get the Most Out of the Course
How to Get Help When Youre Stuck
Pathfinder
Pathfinder

Introduction to HTML
A Note About 2023 Course Updates
A Note About 2023 Course Updates
What is HTML
How to Download the Course Resources
HTML Heading Elements
HTML Paragraph Elements
Self Closing Tags
Project Movie Ranking
How to Ace this Course

Intermediate HTML
The List Element
Nesting and Indentation
Anchor Elements
Image Elements
Project Birthday Invite
Tip from Angela Habit Building with the Calendar Trick
Get Monthly Tips and Tools to Level Up as a Developer

MultiPage Websites
Computer File Paths
What are Webpages
The HTML Boilerplate
Project Portfolio Website
How to Host Your Website for Free with GitHub
Introduction to Capstone Projects
Instructions for Capstone Project 1 Online Resume

Introduction to CSS
Why do we need CSS
How to add CSS
CSS Selectors
Project Colour Vocab Website
Tip from Angela Dealing with Distractions
Join the Student Community

CSS Properties
CSS Colours
Font Properties
Inspecting CSS
The CSS Box Model Margin Padding and Border
Project Motivational Poster Website

Intermediate CSS
The Cascade Specificity and Inheritance
Combining CSS Selectors
CSS Positioning
Project CSS Flag
Tip from Angela Nothing Easy is Worth Doing

Advanced CSS
CSS Display
CSS Float
How to Create Responsive Websites
Media Queries
Project Web Design Agency Website
Tip from Angela How to Deal with Procrastination

Flexbox
Display Flex
Flex Direction
Flex Layout
Flex Sizing
Project Pricing Table
Tip from Angela Building a Programming Habit

Grid
Display Grid
Grid Sizing
Grid Placement
Project Mondrian Painting

Bootstrap
What is Bootstrap
Bootstrap Layout
Bootstrap Components
Project TinDog Startup Website

Web Design School Create a Website that People Love
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 Lets apply what weve learnt

Capstone Project 2 Personal Site
Instructions

Introduction to Javascript ES6
Download the Course Resources PDF
Introduction to Javascript
Javascript Alerts Adding Behaviour to Websites
Data Types
Javascript Variables
Javascript Variables Exercise Start
Javascript Variables Exercise Solution
Naming and Naming Conventions for Javascript Variables
String Concatenation
String Lengths and Retrieving the Number of Characters
Slicing and Extracting Parts of a String
Challenge Changing Casing in Text
Challenge Changing String Casing Solution
Basic Arithmetic and the Modulo Operator in Javascript
Increment and Decrement Expressions
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 Solution
Functions Part 3 Outputs Return Values
Challenge Create a BMI Calculator
Challenge BMI Calculator Solution
Tip from Angela Set Your Expectations

Intermediate Javascript
Random Number Generation in Javascript Building a Love Calculator
Control Statements Using IfElse Conditionals Logic
Comparators and Equality
Combining Comparators
Introducing the Leap Year Code Challenge
Leap Year Solution
Collections Working with Javascript Arrays
Adding Elements and Intermediate Array Techniques
Whos Buying Lunch Solution
Control Statements While Loops
Solution to the 99 Bottles Challenge
Control Statements For Loops
Introducing the Fibonacci Code Challenge
Fibonacci Solution
Tip from Angela Retrieval is How You Learn

The Document Object Model DOM
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

Boss Level Challenge 1 The Dicee Game
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

Advanced Javascript and DOM Manipulation
What Well Make Drum Kit
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

jQuery
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

Boss Level Challenge 2 The Simon Game
What Youll 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 Users 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

The Unix Command Line
Install Git Bash on Windows
Installing the Hyper Terminal
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
Backend Web Development Explained

Nodejs
What is Nodejs
Install Nodejs on Mac
Install Nodejs on Mac
Install Nodejs on Windows
Install Nodejs 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

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

APIs Application Programming Interfaces
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 Youll Make
Setting Up the Sign Up Page
Posting Data to Mailchimps Servers via their API
Adding Success and Failure Pages
Deploying Your Server with Heroku
Tip from Angela Location Location Location

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

EJS
What Well Make A ToDoList
Linter Errors with EJS
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 PreMade 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

Boss Level Challenge 3 Blog Website
A New Challenge Format and What Well 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
Databases Explained SQL vs NOSQL

SQL
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

MongoDB
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
If You Have Forgotten to Quit the Mongod Server
Tip from Angela Daily Routines

Mongoose
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

Putting Everything Together
Lets 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

Deploying Your Web Application
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

Boss Level Challenge 4 Blog Website Upgrade
Challenge Give your Blog a Database
Step 0 Download the Starting Files
Step 0 Download the Starting Files
Step 1 Save Composed Posts with MongoDB
Step 1 Save Composed Posts with MongoDB
Step 2 Get the Home Page to Render the Posts
Step 2 Get the Home Page to Render the Posts
Step 3 Fix the bug
Step 3 Fix the bug
Step 4 Render the correct blog post based on post id
Completed Blog with Database Solution
Step 4 Render the correct blog post based on post id
Completed Blog with Database Solution
Tip from Angela Dealing with Limitations

Build Your Own RESTful API From Scratch
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
Download the Completed Project Code
Tip from Angela How to Get a Job as Programmer

Authentication Security
Introduction to Authentication
Getting Set Up
Level 1 Register Users with Username and Password
How to Review the Source Code
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 Passportjs to Add Cookies and Sessions
Level 6 OAuth 20 How to Implement Sign In with Google
Finishing Up the App Letting Users Submit Secrets
Download the Completed Project Code
Download the Completed Project Code
Tip from Angela How to Work as a Freelancer

Reactjs
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
Newer Versions of Node Troubleshooting
Keeper App Project Part 1 Challenge
Newer Versions of Node Troubleshooting
Keeper App Part 1 Solution
React Props
React Props Practice
React DevTools
Mapping Data to Components
Mapping Data to Components Practice
Javascript ES6 MapFilterReduce
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 State
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

Web3 Decentralised App DApp Development with the Internet Computer
What is Web3
How does the Blockchain actually work
What are DApps Decentralised Apps and how do you develop them
What is the Internet Computer ICP
Read Me
Mac Users Installation and Setup for Web3 Development
Read Me
Windows Users Installation and Setup for Web3 Development

Build Your First Defi Decentralised Finance DApp DBANK
What Youll Build DBANK Inspired by Compound
Introduction to the Motoko Language
Motoko Functions and the Candid User Interface
Motoko Conditionals and Type Annotations
Query vs Update Methods
Orthogonal Persistance
Tracking Time and Calculating Compound Interest
Adding HTML and CSS to Create the Frontend for DBANK
Connecting the Motoko Backend to our JS Frontend
Where to Get Help and Support for Development on the Internet Computer
Where to Get Help and Support for Development on the Internet Computer

Deploying to the ICP Live Blockchain
What are Cycles and the ICP Token
No Cycles No Problems
How to Claim Free Cycles from Dfinity
No Cycles No Problems
How to Deploy to the ICP Network
How to Convert ICP into Cycles
Optional How to Deploy a Static Website onto the ICP Blockchain for Hosting

Building DApps on ICP with a React Frontend
How to Configure a DFX Created Project to Use React
Storing Data on a Canister
Retrieving Data from a Canister
Deleting and Persistance

Create Your Own Crypto Token
Tokens and Coins What are they and how are they used
Download and Configure the Skeleton Project
Using Motoko Hashmaps to Store Token Balances
Showing the Users Token Balance on the Frontend
Creating the Faucet Functionality Using the Shared Keyword
Creating the Transfer Functionality
Using the Transfer Functionality in the Faucet
Persisting NonStable Types Using the Pre and Postupgrade Methods
What is the Internet Identity
Authenticating with the Internet Identity
Optional Live Deployment to Test Internet Identity Authentication

Minting NFTs and Building an NFT Marketplace like OpenSea
What Youll Build A Website to Mint Buy and Sell NFTs
Minting NFTs
Viewing the NFT on the Frontend
Enabling the Minting Functionality on the Frontend
Displaying Owned NFTs Using the React Router
Listing NFTs for Sale
Styling the Listed NFTs
Creating the Discover Page
Buying NFTs
Join the 6 Million Dollar Supernova Hackathon
Join the 6 Million Dollar Supernova Hackathon

Optional Module Ask Angela Anything
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

Next Steps
Vote for the Next Module
Bonus Lecture
Vote for the Next Module
Bonus Lecture