The Complete 2024 Web Development Bootcamp

Chapter 01

• 0001 – 001 What You’ll Get in This Course
• 0008 – 005 How Does the Internet Actually Work
• 0011 – 006 How Do Websites Actually Work
• 0014 – 007 How to Get the Most Out of the Course
• 0016 – 008 How to Get Help When You’re Stuck

Chapter 02

• 0021 – 002 What is HTML
• 0023 – 003 How to Download the Course Resources
• 0028 – 004 HTML Heading Elements
• 0032 – 005 HTML Paragraph Elements
• 0036 – 006 Self Closing Tags
• 0039 – 007 [Project] Movie Ranking
• 0042 – 008 How to Ace this Course

Chapter 03

• 0046 – 001 The List Element
• 0049 – 002 Nesting and Indentation
• 0052 – 003 Anchor Elements
• 0056 – 004 Image Elements
• 0059 – 005 [Project] Birthday Invite
• 0061 – 006 Tip from Angela – Habit Building with the Calendar Trick

Chapter 04

• 0066 – 001 Computer File Paths
• 0069 – 002 What are Webpages
• 0071 – 003 The HTML Boilerplate
• 0074 – 004 [Project] Portfolio Website
• 0077 – 005 How to Host Your Website for Free with GitHub
• 0079 – 006 Introduction to Capstone Projects

Chapter 05

• 0083 – 001 Why do we need CSS
• 0086 – 002 How to add CSS
• 0090 – 004 CSS Selectors
• 0094 – 005 [Project] Colour Vocab Website
• 0096 – 006 Tip from Angela – Dealing with Distractions

Chapter 06

• 0102 – 001 CSS Colours
• 0107 – 002 Font Properties
• 0110 – 003 Inspecting CSS
• 0114 – 004 The CSS Box Model – Margin, Padding and Border
• 0117 – 005 [Project] Motivational Poster Website

Chapter 07

• 0121 – 001 The Cascade – Specificity and Inheritance
• 0124 – 002 Combining CSS Selectors
• 0127 – 003 CSS Positioning
• 0131 – 004 [Project] CSS Flag
• 0133 – 005 Tip from Angela – Nothing Easy is Worth Doing!

Chapter 08

• 0137 – 001 CSS Display
• 0141 – 002 CSS Float
• 0144 – 003 How to Create Responsive Websites
• 0149 – 004 Media Queries
• 0152 – 005 [Project] Web Design Agency Website
• 0154 – 006 Tip from Angela – How to Deal with Procrastination

Chapter 09

• 0159 – 001 Display Flex
• 0162 – 002 Flex Direction
• 0167 – 003 Flex Layout
• 0169 – 004 Flex Sizing
• 0172 – 005 [Project] Pricing Table
• 0174 – 006 Tip from Angela – Building a Programming Habit

Chapter 10

• 0178 – 001 Display Grid
• 0181 – 002 Grid Sizing
• 0184 – 003 Grid Placement
• 0187 – 004 [Project] Mondrian Painting

Chapter 11

• 0190 – 001 What is Bootstrap
• 0192 – 002 Bootstrap Layout
• 0195 – 003 Bootstrap Components
• 0198 – 004 [Project] TinDog Startup Website

Chapter 12

• 0200 – 001 Introduction to Web Design
• 0206 – 002 Understanding Colour Theory
• 0208 – 003 Understanding Typography and How to Choose a Font
• 0211 – 004 Manage ATTENTION with effective User Interface (UI) Design
• 0214 – 005 User Experience (UX) Design
• 0217 – 006 Web Design in Practice – Let’s apply what we’ve learnt!

Chapter 14

• 0222 – 001 Introduction to Javascript
• 0225 – 002 Javascript Alerts – Adding Behaviour to Websites
• 0229 – 003 Data Types
• 0231 – 004 Javascript Variables
• 0233 – 005 Javascript Variables Exercise Start
• 0236 – 007 Javascript Variables Exercise Solution
• 0238 – 008 Naming and Naming Conventions for Javascript Variables
• 0241 – 010 String Concatenation
• 0243 – 011 String Lengths and Retrieving the Number of Characters
• 0245 – 012 Slicing and Extracting Parts of a String
• 0247 – 013 Challenge Changing Casing in Text
• 0249 – 014 Challenge Changing String Casing Solution
• 0251 – 015 Basic Arithmetic and the Modulo Operator in Javascript
• 0253 – 016 Increment and Decrement Expressions
• 0256 – 018 Functions Part 1 Creating and Calling Functions
• 0258 – 019 Functions Part 1 Challenge – The Karel Robot
• 0263 – 022 Functions Part 2 Parameters and Arguments
• 0267 – 024 Life in Weeks Solution
• 0269 – 025 Functions Part 3 Outputs & Return Values
• 0271 – 026 Challenge Create a BMI Calculator
• 0274 – 028 Challenge BMI Calculator Solution
• 0280 – 030 Tip from Angela – Set Your Expectations

Chapter 15

• 0285 – 001 Random Number Generation in Javascript Building a Love Calculator
• 0288 – 002 Control Statements Using If-Else Conditionals & Logic
• 0290 – 003 Comparators and Equality
• 0292 – 004 Combining Comparators
• 0295 – 006 Introducing the Leap Year Code Challenge
• 0298 – 008 Leap Year Solution
• 0300 – 009 Collections Working with Javascript Arrays
• 0302 – 010 Adding Elements and Intermediate Array Techniques
• 0307 – 012 Who’s Buying Lunch Solution
• 0310 – 013 Control Statements While Loops
• 0313 – 015 Control Statements For Loops
• 0316 – 016 Introducing the Fibonacci Code Challenge
• 0320 – 018 Fibonacci Solution
• 0322 – 019 Tip from Angela – Retrieval is How You Learn

Chapter 16

• 0325 – 001 Adding Javascript to Websites
• 0329 – 002 Introduction to the Document Object Model (DOM)
• 0332 – 004 Selecting HTML Elements with Javascript
• 0335 – 005 Manipulating and Changing Styles of HTML Elements with Javascript
• 0337 – 006 The Separation of Concerns Structure vs Style vs Behaviour
• 0339 – 007 Text Manipulation and the Text Content Property
• 0342 – 008 Manipulating HTML Element Attributes
• 0344 – 009 Tip from Angela – The 20 Minute Method

Chapter 17

• 0347 – 001 Challenge The Dicee Challenge
• 0357 – 009 The Solution to the Dicee Challenge
• 0362 – 011 Tip from Angela – Learning Before you Eat

Chapter 18

• 0365 – 001 What We’ll Make Drum Kit
• 0370 – 003 Adding Event Listeners to a Button
• 0373 – 004 Higher Order Functions and Passing Functions as Arguments
• 0377 – 006 How to Play Sounds on a Website
• 0381 – 007 A Deeper Understanding of Javascript Objects
• 0383 – 008 How to Use Switch Statements in Javascript
• 0385 – 009 Objects, their Methods and the Dot Notation
• 0391 – 011 Using Keyboard Event Listeners to Check for Key Presses
• 0394 – 012 Understanding Callbacks and How to Respond to Events
• 0396 – 013 Adding Animation to Websites
• 0403 – 015 Tip from Angela – Dealing with Lack of Progress

Chapter 19

• 0406 – 001 What is jQuery
• 0410 – 002 How to Incorporate jQuery into Websites
• 0412 – 003 How Minification Works to Reduce File Size
• 0416 – 004 Selecting Elements with jQuery
• 0418 – 005 Manipulating Styles with jQuery
• 0420 – 006 Manipulating Text with jQuery
• 0422 – 007 Manipulating Attributes with jQuery
• 0424 – 008 Adding Event Listeners with jQuery
• 0427 – 009 Adding and Removing Elements with jQuery
• 0432 – 010 Website Animations with jQuery
• 0434 – 011 Tip from Angela – Mixing Knowledge

Chapter 20

• 0437 – 001 What You’ll Make The Simon Game
• 0475 – 025 Tip from Angela – Dealing with Frustration

Chapter 21

• 0479 – 001 Install Git Bash on Windows
• 0481 – 002 Understanding the Command Line. Long Live the Command Line!
• 0483 – 003 Command Line Techniques and Directory Navigation
• 0486 – 004 Creating, Opening, and Removing Files through the Command Line
• 0490 – 005 Tip from Angela – Sleep is My Secret Weapon

Chapter 22

• 0493 – 001 Backend Web Development Explained
• 0495 – 002 Backend Tools and Technologies – Which one to learn

Chapter 23

• 0497 – 001 What is Node.js
• 0502 – 004 Using Node.js
• 0505 – 005 How to Use the Native Node Modules
• 0508 – 006 The NPM Package Manager and Installing External Node Modules
• 0511 – 007 [Project] QR Code Generator
• 0513 – 008 Tip from Angela – Step Up to the Challenge

Chapter 24

• 0515 – 001 What is Express
• 0518 – 002 Creating Our First Server with Express
• 0521 – 003 HTTP Requests
• 0524 – 004 Postman
• 0527 – 005 Introduction to Middlewares
• 0530 – 006 Custom Middlewares
• 0533 – 007 Secrets Access Project
• 0535 – 008 Tip from Angela – How to Solidify Your Knowledge

Chapter 25

• 0538 – 001 What is EJS
• 0541 – 002 EJS Tags
• 0544 – 003 Passing Data to EJS Templates
• 0547 – 004 EJS Partials and Layouts
• 0550 – 005 Band Generator Project
• 0552 – 006 Tip from Angela – Location, Location, Location!

Chapter 27

• 0555 – 001 Introduction to Version Control and Git
• 0557 – 002 Version Control Using Git and the Command Line
• 0559 – 003 GitHub and Remote Repositories
• 0561 – 004 Gitignore
• 0566 – 005 Cloning
• 0569 – 006 Branching and Merging
• 0573 – 008 Forking and Pull Requests
• 0575 – 009 Tip from Angela – Spaced Repetition

Chapter 28

• 0578 – 001 Introduction to APIs
• 0580 – 002 Structuring API Requests
• 0583 – 003 What is JSON
• 0586 – 004 Making Server-Side API Requests with Axios
• 0589 – 005 API Authentication
• 0592 – 006 REST APIs
• 0595 – 007 Secrets Project
• 0597 – 008 Tip from Angela – Use Accountability in your Favour

Chapter 30

• 0600 – 001 Building your own APIs
• 0605 – 002 Creating GET Routes
• 0608 – 003 Creating POST, PUT, and PATCH Routes
• 0610 – 004 Creating the DELETE Route
• 0613 – 005 Build your own API for a Blog
• 0615 – 006 Tip from Angela – How to Get a Job as Programmer

Chapter 31

• 0618 – 001 Databases Explained SQL vs. NoSQL
• 0620 – 002 Tip from Angela – When Life Gives You Lemons

Chapter 32

• 0625 – 001 SQL Commands CREATE Table and INSERT Data
• 0628 – 002 SQL Commands READ, SELECT, and WHERE
• 0630 – 003 Updating Single Values and Adding Columns in SQL
• 0632 – 004 SQL Commands DELETE
• 0638 – 005 Understanding SQL Relationships, Foreign Keys and Inner Joins
• 0640 – 006 Tip from Angela – Find All the Hard Working People

Chapter 33

• 0643 – 001 Introduction to Postgres
• 0646 – 003 Understand how to use keys, Postgres types and keywords
• 0651 – 005 Use pgAdmin to CREATE a TABLE
• 0654 – 006 READ data from a Postgres database
• 0657 – 007 Query data using SELECT, WHERE, and LIKE
• 0661 – 008 UNIQUE and NOT NULL Travel Tracker Part 1
• 0664 – 009 INSERT and add Data Travel Tracker Part 2
• 0666 – 010 Travel Tracker Part 3
• 0669 – 011 One to One Relationships & Inner Joins
• 0671 – 012 One to Many Relationships
• 0673 – 013 Many to Many Relationships & Aliases
• 0676 – 014 The Family Travel Tracker
• 0678 – 015 How to update and delete data & tables
• 0681 – 016 Permalist Project
• 0683 – 017 Tip from Angela – Daily Routines

Chapter 35

• 0686 – 001 Introduction to Authentication
• 0689 – 002 Level 1 – Registering Users with Email and Password
• 0693 – 003 Level 2 – Encryption and Hashing
• 0697 – 004 How to Hack Passwords
• 0703 – 005 Level 3 – How to Salt Passwords for Improved Encryption
• 0706 – 006 Managing Cookies and Sessions
• 0712 – 007 Level 5 – Hide your Secrets with Environment Variables
• 0717 – 009 Level 6 – OAuth Implement Sign In with Google
• 0720 – 010 Finish the app let users submit secrets
• 0722 – 011 Tip from Angela – How to Work as a Freelancer

Chapter 36

• 0725 – 001 What is React
• 0727 – 002 What we will make in this React module
• 0730 – 003 Introduction to Code Sandbox and the Structure of the Module
• 0735 – 004 Introduction to JSX and Babel
• 0739 – 005 JSX Code Practice
• 0743 – 006 Javascript Expressions in JSX & ES6 Template Literals
• 0748 – 007 Javascript Expressions in JSX Practice
• 0752 – 008 JSX Attributes & Styling React Elements
• 0760 – 009 Inline Styling for React Elements
• 0764 – 010 React Styling Practice
• 0769 – 011 React Components
• 0773 – 012 React Components Practice
• 0777 – 013 Javascript ES6 – Import, Export and Modules
• 0782 – 014 Javascript ES6 Import, Export and Modules Practice
• 0784 – 015 [Windows]​ Local Environment Setup for React Development
• 0792 – 016 [Mac] Local Environment Setup for React Development​
• 0802 – 018 Keeper App Project – Part 1 Challenge
• 0805 – 019 Keeper App Part 1 Solution
• 0809 – 020 React Props
• 0813 – 021 React Props Practice
• 0819 – 022 React DevTools
• 0823 – 023 Mapping Data to Components
• 0828 – 024 Mapping Data to Components​ Practice
• 0836 – 025 Javascript ES6 MapFilterReduce
• 0844 – 026 Javascript ES6 Arrow functions
• 0848 – 027 Keeper App Project – Part 2
• 0852 – 028 React Conditional Rendering with the Ternary Operator & AND Operator
• 0859 – 029 Conditional Rendering Practice
• 0862 – 030 State in React – Declarative vs. Imperative Programming
• 0866 – 031 React Hooks – useState
• 0871 – 032 useState Hook Practice
• 0875 – 033 Javascript ES6 Object & Array Destructuring
• 0878 – 034 Javascript ​ES6 Destructuring Challenge Solution
• 0882 – 035 Event Handling in React
• 0888 – 036 React Forms
• 0891 – 037 Class Components vs. Functional Components
• 0898 – 038 Changing Complex State
• 0903 – 039 Changing Complex State Practice
• 0907 – 040 Javascript ES6 Spread Operator
• 0913 – 041 Javascript ES6 Spread Operator Practice
• 0918 – 042 Managing a Component Tree
• 0923 – 043 Managing a Component Tree Practice
• 0927 – 044 Keeper App Project – Part 3
• 0937 – 045 React Dependencies & Styling the Keeper App
• 0941 – 046 Tip from Angela – How to Build Your Own Product

Chapter 37

• 0946 – 001 What is Web3
• 0951 – 002 How does the Blockchain actually work
• 0954 – 003 What are DApps (Decentralised Apps) and how do you develop them
• 0958 – 004 What is the Internet Computer (ICP)
• 0961 – 006 [Mac Users] Installation and Setup for Web3 Development
• 0965 – 007 [Windows Users] Installation and Setup for Web3 Development

Chapter 38

• 0971 – 001 What You’ll Build – DBANK (Inspired by Compound)
• 0974 – 002 Introduction to the Motoko Language
• 0980 – 003 Motoko Functions and the Candid User Interface
• 0982 – 004 Motoko Conditionals and Type Annotations
• 0985 – 005 Query vs. Update Methods
• 0987 – 006 Orthogonal Persistance
• 0990 – 007 Tracking Time and Calculating Compound Interest
• 0993 – 009 Adding HTML and CSS to Create the Frontend for DBANK
• 0999 – 010 Connecting the Motoko Backend to our JS Frontend

Chapter 39

• 1005 – 001 What are Cycles and the ICP Token
• 1010 – 003 How to Claim Free Cycles from Dfinity
• 1012 – 004 How to Deploy to the ICP Network
• 1016 – 005 How to Convert ICP into Cycles
• 1018 – 006 [Optional] How to Deploy a Static Website onto the ICP Blockchain for Hosting

Chapter 40

• 1023 – 001 How to Configure a DFX Created Project to Use React
• 1028 – 002 Storing Data on a Canister
• 1031 – 003 Retrieving Data from a Canister
• 1034 – 004 Deleting and Persistance

Chapter 41

• 1039 – 001 Tokens and Coins What are they and how are they used
• 1042 – 002 Download and Configure the Skeleton Project
• 1048 – 003 Using Motoko Hashmaps to Store Token Balances
• 1050 – 004 Showing the User’s Token Balance on the Frontend
• 1053 – 005 Creating the Faucet Functionality Using the Shared Keyword
• 1056 – 006 Creating the Transfer Functionality
• 1058 – 007 Using the Transfer Functionality in the Faucet
• 1063 – 008 Persisting Non-Stable Types Using the Pre- and Postupgrade Methods
• 1067 – 009 What is the Internet Identity
• 1069 – 010 Authenticating with the Internet Identity
• 1071 – 011 [Optional] Live Deployment to Test Internet Identity Authentication

Chapter 42

• 1079 – 001 What You’ll Build – A Website to Mint, Buy and Sell NFTs
• 1082 – 002 Minting NFTs
• 1090 – 003 Viewing the NFT on the Frontend
• 1095 – 004 Enabling the Minting Functionality on the Frontend
• 1100 – 005 Displaying Owned NFTs Using the React Router
• 1105 – 006 Listing NFTs for Sale
• 1111 – 007 Styling the Listed NFTs
• 1113 – 008 Creating the Discover Page
• 1116 – 009 Buying NFTs

Chapter 43

• 1125 – 001 AAA 1 – How to Soak in Programming Concepts and more
• 1127 – 002 AAA 2 – Schedule for Learning to Code and more
• 1129 – 003 AAA 3 – How to Start Freelancing and more
• 1131 – 004 AAA 4 – The Live AMA