Autoplay
Autocomplete
Previous Lecture
Complete and Continue
The Complete Web Development Course
Section 1: Front End Web Development
What You'll Get in This Course (3:08)
Download the Course Syllabus
Download the Course Resources
How Does the Internet Actually Work? (5:42)
How Do Websites Actually Work? (6:20)
What You'll Need to Get Started - Setup Your Local Web Development Environment (4:38)
Setup Packages (2:58)
How to Get Help When You're Stuck (6:44)
Pathfinder
Section 2: Introduction to HTML
Introduction to HTML (10:51)
The Anatomy of an HTML Tag (10:55)
What we're building - HTML Personal Site (2:52)
What is The HTML Boilerplate (17:01)
How to Structure Text in HTML (11:00)
HTML Lists (5:24)
HTML Image Elements (7:32)
HTML Links and Anchor Tags (11:55)
How to Ace this Course (1:24)
Section 3: Intermediate HTML
HTML Tables (12:03)
Using HTML Tables for Layout (2:16)
HTML Tables Code Challenge (1:44)
HTML Tables Solution Walkthrough (6:44)
HTML Forms (9:17)
Forms in Practice - Create a Contact Me Form (7:29)
Publish Your Website! (6:48)
Tip from Angela - Habit Building with the Calendar Trick (2:52)
Get Monthly Tips and Tools to Level Up as a Developer
Section 4: Introduction to CSS
Introduction to CSS (3:04)
Inline CSS (9:56)
Internal CSS (20:22)
External CSS (8:29)
How to Debug CSS Code (13:37)
The Anatomy of CSS Syntax (13:08)
CSS Selectors (6:23)
Classes vs. Ids (11:44)
CSS Quiz
Tip from Angela - Dealing with Distractions (2:28)
Section 5: Intermediate CSS
What We'll Make - Stylised Personal Site (4:57)
What Are Favicons? (3:47)
HTML Divs (13:33)
The Box Model of Website Styling (19:25)
CSS Display Property (15:11)
Learn More About Web Design
CSS Static and Relative Positioning (14:36)
Absolute positioning (12:12)
The Dark Art of Centering Elements with CSS (9:03)
Font Styling in Our Personal Site (13:59)
Learn More About Typography
Adding Content to Our Website (6:52)
CSS Sizing (15:39)
Font Properties Challenge 1 - Change the Font Colour
Font Properties Challenge 2 - Change the Font Weight
Font Properties Challenge 3 - Change the Line Height
CSS Font Property Challenge Solutions (3:57)
CSS Float and Clear (15:13)
CSS Challenge
Stylised Personal Site Solution Walkthrough (21:22)
[Optional] Get More Practice with CSS and HTML
Tip from Angela - Nothing Easy is Worth Doing! (3:35)
Section 6: Introduction to Boostrap 4
What is Bootstrap? (14:36)
Installing Bootstrap (7:55)
Web Design 101 - Wireframing (11:38)
The Bootstrap Navigation Bar (20:40)
What We'll Make: TinDog (0:56)
Download the TinDog Starting Files
Setting Up Our New project (7:41)
Bootstrap Grid Layout System (20:17)
Adding Grid Layouts to Our Website (9:39)
Bootstrap Containers (5:54)
Bootstrap Buttons & Font Awesome (11:30)
Styling Our Website Challenges and Solutions (20:20)
Bootstrap Challenge 1
Solution to Bootstrap Challenge 1 (17:01)
Tip from Angela - How to Deal with Procrastination (4:07)
Section 7: Intermediate Bootstrap
The Bootstrap Carousel Part 1 (9:39)
The Bootstrap Carousel Part 2 (17:20)
Bootstrap Cards (16:31)
CSS Z-Index and Stacking Order (21:28)
Media Query Breakpoints (22:03)
Boostrap Challenge 2
Bootstrap Challenge 2 Solution (11:46)
How to become a Better Programmer - Code Refactoring (7:48)
Put it into Practice - Refactor our Website Part 1 (19:20)
Advanced CSS - Combining Selectors (11:43)
Refactoring our Website Part 2 (5:21)
Advanced CSS - Selector Priority (5:51)
Completing the Website (2:34)
Download the Complete Website
Tip from Angela - Building a Programming Habit (2:46)
Section 8: Web Design School - Create a Website that People Love
🎨 Introduction to Web Design 🖌 (3:55)
Understanding Colour Theory (9:04)
Understanding Typography and How to Choose a Font (10:28)
Manage ATTENTION with effective User Interface (UI) Design (10:27)
User Experience (UX) Design (13:39)
Web Design in Practice - Let's apply what we've learnt! (18:20)
Section 9: Introduction to Javascript ES6
Introduction to Javascript (11:49)
Javascript Alerts - Adding Behaviour to Websites (14:21)
Data Types (4:06)
Javascript Variables (9:35)
Naming and Naming Conventions for Javascript Variables (7:09)
String Concatenation (3:07)
String Lengths and Retrieving the Number of Characters (6:24)
Slicing and Extracting Parts of a String (8:56)
Challenge: Changing Casing in Text (3:39)
Challenge: Changing String Casing Solution (8:59)
Basic Arithmetic and the Modulo Operator in Javascript (6:14)
Increment and Decrement Expressions (2:28)
Functions Part 1: Creating and Calling Functions (10:35)
Functions Part 1 Challenge - The Karel Robot (9:08)
Karel Chess Board Solution
Functions Part 2: Parameters and Arguments (9:52)
Functions Part 3: Outputs & Return Values (11:16)
Challenge: Create a BMI Calculator (3:16)
BMI Calculator Challenge
Challenge: BMI Calculator Solution (6:16)
Tip from Angela - Set Your Expectations (2:35)
Section 10: Intermediate Javascript
Random Number Generation in Javascript: Building a Love Calculator (11:15)
Control Statements: Using If-Else Conditionals & Logic (4:48)
Comparators and Equality (2:51)
Combining Comparators (2:46)
BMI Calculator Advanced (IF/ELSE)
Introducing the Lear Year Code Challenge (4:16)
Lear Year Challenge Exercise
Leap Year Challenge Solution (3:03)
Collections: Working with Javascript Arrays (9:01)
Adding Elements and Intermediate Array Techniques (15:58)
The Who's Buying Lunch? Code Challenge
Who's Buying Lunch Solution (3:43)
Control Statements: While Loops (7:52)
Solution to 99 Bottles of Beer Challenge
Control Statements: For Loops (6:10)
Introducing the Fibonacci Code Challenge (6:37)
The Fibonacci Code Exercise
Fibonacci Solution (8:16)
Tip from Angela - Retrieval is How You Learn (2:52)
Section 11: The Document Object Model (DOM)
Adding Javascript to Websites (10:44)
Introduction to the Document Object Model (DOM) (12:28)
Solution to the DOM Challenge
Selecting HTML Elements with Javascript (14:17)
Manipulating and Changing Styles of HTML Elements with Javascript (5:01)
The Separation of Concerns: Structure vs Style vs Behaviour (5:57)
Text Manipulation and the Text Content Property (2:37)
Manipulating HTML Element Attributes (2:27)
Tip from Angela - The 20 Minute Method (2:39)
Section 12: Boss Level Challenge 1 - The Dicee Game
Challenge: The Dicee Challenge (2:14)
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 4 - Change the img to a Random Dice
Dicee Challenge Step 3 - Create a Random Number
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 (14:43)
Download the Completed Website
Tip from Angela - Learning Before you Eat (2:06)
Section 13: Advanced Javascript and DOM Manipulation
What We'll Make: Drum Kit (1:19)
Download the Starting Files for the Drum Kit
Adding Event Listeners to a Button (14:29)
Higher Order Functions and Passing Functions as Arguments (12:40)
Higher Order Function Challenge Solution
How to Play Sounds on a Website (11:11)
A Deeper Understanding of Javascript Objects (12:04)
Objects, their Methods and the Dot Notation (6:29)
How to Use Switch Statements in Javascript (5:22)
Using Keyboard Event Listeners to Check for Key Presses (7:37)
Understanding Callbacks and How to Respond to Events (11:35)
Adding Animation to Websites (8:31)
Download the Completed Website
Tip from Angela - Dealing with Lack of Progress (3:08)
Section 14: jQuery
What is jQuery? (3:44)
How to Incorporate jQuery into Websites (9:08)
How Minification Works to Reduce File Size (3:58)
Selecting Elements with jQuery (2:01)
Manipulating Styles with jQuery (5:13)
Manipulating Text with jQuery (3:36)
Manipulating Attributes with jQuery (3:44)
Adding Event Listeners with jQuery (7:47)
Adding and Removing Elements with jQuery (2:58)
Website Animations with jQuery (8:13)
Tip from Angela - Mixing Knowledge (2:20)
Section 15: Boss Level Challenge 2 - The Simon Game
What You'll Make: The Simon Game (1:00)
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 (2:31)
Section 16: The Unix Command Line
Command Line Hyper Setup (4:53)
Understanding the Command Line. Long Live the Command Line! (5:55)
Command Line Techniques and Directory Navigation (10:13)
Creating, Opening, and Removing Files through the Command Line (9:09)
Tip from Angela - Sleep is My Secret Weapon (3:48)
Section 17: Backend Web Development
Backend Web Development Explained (8:02)
Section 18: Node.js
What is Node.js? (5:40)
Install Node on Mac
Install Node on Windows
The Power of the Command Line and How to Use Node (6:27)
The Node REPL (Read Evaluation Print Loops) (2:39)
How to Use the Native Node Modules (8:19)
The NPM Package Manager and Installing External Node Modules (13:44)
Tip from Angela - Step Up to the Challenge (1:14)
Section 19: Express.js with Node.js
What is Express? (3:24)
Creating Our First Server with Express (11:29)
Handling Requests and Responses: the GET Request (8:12)
Understanding and Working with Routes (9:23)
What We'll Make: A Calculator (1:52)
Calculator Setup Challenge
Calculator Setup: Challenge Solution (5:43)
Responding to Requests with HTML Files (7:40)
Processing Post Requests with Body Parser (14:19)
BMI Routing Challenge
Solution to the BMI Routing Challenge (6:29)
Tip from Angela - How to Solidify Your Knowledge (2:55)
Section 20: APIs - Application Programming Interfaces
Why Do We Need APIs? (8:50)
API Endpoints, Paths and Parameters. (10:59)
API Authentication and Postman (11:34)
What is JSON? (4:54)
Making GET Requests with the Node HTTPS Module (13:00)
How to Parse JSON (13:05)
Using Express to Render a Website with Live API Data (8:23)
Using Body Parser to Parse POST Requests to the Server (10:05)
The Mailchimp API - What You'll Make (2:41)
Setting Up the Sign Up Page (20:52)
Posting Data to Mailchimp's Servers via their API (18:37)
Adding Success and Failure Pages (8:55)
Deploying Your Server with Heroku (18:38)
Tip from Angela - Location, Location, Location! (2:06)
Section 21: Git, Github and Version Control
Introduction to Version Control and Git (2:35)
Version Control Using Git and the Command Line (15:02)
GitHub and Remote Repositories (11:00)
Gitignore (12:02)
Cloning (5:05)
Branching and Merging (17:25)
Optional Git Challenge
Forking and Pull Requests (17:08)
Tip from Angela - Spaced Repetition (4:01)
Section 22: EJS
What We'll Make: A ToDoList (0:46)
Linter Errors with EJS
Templates? Why Do We Need Templates? (15:10)
Creating Your First EJS Templates (17:53)
Running Code Inside the EJS Template (6:33)
Passing Data from Your Webpage to Your Server (25:05)
The Concept of Scope in the Context of Javascript (8:40)
Adding Pre-Made CSS Stylesheets to Your Website (16:14)
Understanding Templating vs. Layouts (13:35)
Understanding Node Module Exports: How to Pass Functions and Data between Files (21:45)
Tip from Angela - Use Accountability in your Favour (2:56)
Section 23: Boss Level Challenge 3 - Blog Website
A New Challenge Format and What We'll Make: A Blog (6:18)
Setting Up the Blog Project (7:06)
Challenge 1 (4:04)
Challenge 1 Solution (2:37)
Challenge 2 (4:07)
Challenge 2 Solution (2:09)
Challenge 3 (2:37)
Challenge 3 Solution (2:31)
Challenge 4 (2:05)
Challenge 4 Solution (1:52)
Challenge 5 (2:47)
Challenge 5 Solution (4:16)
Challenge 6 (1:24)
Challenge 6 Solution (1:15)
Challenge 7 (0:59)
Challenge 7 Solution (1:54)
Challenge 8 (3:26)
Challenge 8 Solution (3:36)
Challenge 9 (4:42)
Challenge 9 Solution (6:33)
Challenge 10 (2:24)
Challenge 10 Solution (3:13)
Challenge 11 (3:21)
Challenge 11 Solution (3:00)
Challenge 12 (1:55)
Challenge 12 Solution (2:34)
Challenge 13 (2:46)
Challenge 13 Solution (3:37)
Challenge 14 and Solution (6:28)
Challenge 15 (1:41)
Challenge 15 Solution (3:14)
Express Routing Parameters (6:38)
Challenge 16 (1:55)
Challenge 16 Solution (2:32)
Challenge 17 (3:54)
Challenge 17 Solution (5:30)
Challenge 18 (6:04)
Challenge 18 Solution (4:19)
Challenge 19 (2:57)
Challenge 19 Solution (4:54)
Challenge 20 (2:58)
Challenge 20 Solution (3:18)
Challenge 21 (2:15)
Challenge 21 Solution (3:44)
Tip from Angela - When Life Gives You Lemons (6:01)
Section 24: Databases
Databases Explained: SQL vs. NOSQL (19:58)
Section 25: SQL
SQL Commands: CREATE Table and INSERT Data (13:48)
SQL Commands: READ, SELECT, and WHERE (3:10)
Updating Single Values and Adding Columns in SQL (4:42)
SQL Commands: DELETE (1:32)
Understanding SQL Relationships, Foreign Keys and Inner Joins (11:13)
Tip from Angela - Find All the Hard Working People (2:01)
Section 26: MongoDB
Installing MongoDB on Mac (12:34)
Installing MongoDB on Windows (9:20)
MongoDB CRUD Operations in the Shell: Create (9:37)
MongoDB CRUD Operations in the Shell: Reading & Queries (6:22)
MongoDB CRUD Operations in the Shell: Update (4:07)
MongoDB CRUD Operations in the Shell: Delete (1:45)
Relationships in MongoDB (6:12)
Working with The Native MongoDB Driver (19:03)
If You Have Forgotten to Quit the Mongod Server
Tip from Angela - Daily Routines (2:34)
Section 27: Mongoose
Introduction to Mongoose (20:26)
Reading from Your Database with Mongoose (7:28)
Data Validation with Moongoose (7:55)
Updating and Deleting Data Using Mongoose (10:06)
Establishing Relationships and Embedding Documents Using Mongoose (6:45)
Tip from Angela - Deep Work (3:01)
Section 28: Putting Everything Together
Let's take the ToDoList Project to the Next Level and Connect it with Mongoose (16:46)
Rendering Database Items in the ToDoList App (13:25)
Adding New Items to our ToDoList Database (3:56)
Deleting Items from our ToDoList Database (13:48)
Creating Custom Lists using Express Route Parameters (16:12)
Adding New Items to the Custom ToDo Lists (7:31)
Revisiting Lodash and Deleting Items from Custom ToDo Lists (19:10)
Tip from Angela - One Step at a Time (2:54)
Section 29: Deploying Your Web Application
How to Deploy Web Apps with a Database (5:02)
How to Setup MongoDB Atlas (13:41)
Deploying an App with a Database to Heroku (12:13)
Tip from Angela - Discipline Breeds Discipline (2:20)
Section 30: Boss Level Challenge 4 - Blog Website Upgrade
Challenge: Give your Blog a Database (2:31)
Step 0 - Download the Starting Files
Step 1 - Save Composed Posts with MongoDB
Step 2 - Get the Home Page to Render the Posts
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 (5:22)
Section 31: Build Your Own RESTful API
REST Explained (17:08)
Creating a Database with Robo 3T (9:29)
Set Up Server Challenge (2:09)
Set up Server Solution (7:30)
GET All Articles (6:50)
POST a New Article (12:51)
DELETE All Articles (5:11)
Chained Route Handlers Using Express (7:07)
GET a Specific Article (14:02)
PUT a Specific Article (10:32)
PATCH a Specific Article (7:17)
DELETE a Specific Article (4:04)
Download the Completed Project
Tip from Angela - How to Get a Job as Programmer (2:06)
Section 32: Authentication and Security
Introduction to Authentication (5:46)
Getting Set Up (7:26)
New Lecture
Level 1 - Authentication with Username and Password (14:42)
Level 2 - Database Encryption (16:35)
Security and Environment Variables (17:40)
Level 3 - Hashing Passwords (15:25)
Hacking 101 (12:28)
Level 4 - Hashing and Salting with bcrypt (20:41)
Cookies and Sessions (8:19)
Level 5 - Passport.js Local & Sessions (29:30)
Level 6 - OAuth 2.0 and Social Login with Google (47:46)
Finishing the App - Allowing Users to Submit Secrets (13:40)
How to Review the Source Code for Each Lesson
Tip from Angela - How to Work as a Freelancer (1:37)
Section 33: React.js
What is React? (7:28)
What We'll Make (1:34)
Introduction to Code Sandbox and the Structure of the Module (5:50)
Introduction to JSX and Babel (16:12)
JSX Code Practice (7:34)
Javascript Expressions in JSX & ES6 Template Literals (11:42)
Javascript Expressions in JSX Practice (8:34)
JSX Attributes & Styling React Elements (16:58)
Inline Styling for React Elements (8:41)
React Styling Practice (9:59)
React Components (15:47)
React Components Practice (5:01)
Javascript ES6 - Import, Export and Modules (11:10)
Javascript ES6 Import, Export and Modules Practice (4:04)
[Windows]​ Local Environment Setup for React Development (13:52)
[Mac] Local Environment Setup for React Development​ (13:40)
Keeper App Project - Part 1 Challenge (4:57)
Keeper App Part 1 Solution (14:07)
React Props (16:44)
React Props Practice (13:19)
React DevTools (17:19)
Mapping Data to Components (10:20)
Mapping Data to Components​ Practice (17:30)
Javascript ES6 Map/Filter/Reduce (20:21)
Javascript ES6 Arrow functions (9:56)
Keeper App Project - Part 2 (10:23)
React Conditional Rendering with the Ternary Operator & AND Operator (19:24)
Conditional Rendering Practice (6:33)
State in React - Declarative vs. Imperative Programming (9:38)
React Hooks - useState (18:09)
useState Hook Practice (7:24)
Javascript ES6 Object & Array Destructuring (17:44)
Javascript ​ES6 Destructuring Challenge Solution (5:48)
Event Handling in React (11:10)
React Forms (13:40)
Class Components vs. Functional Components (6:24)
Changing Complex State (19:43)
Changing Complex State Practice (7:08)
Javascript ES6 Spread Operator (10:58)
Javascript ES6 Spread Operator Practice (12:20)
Managing a Component Tree (22:37)
Managing a Component Tree Practice (8:27)
Keeper App Project - Part 3 (25:05)
React Dependencies & Styling the Keeper App (16:38)
Tip from Angela - How to Build Your Own Product (2:14)
Section 34: Web3 Decentralised App (DApp) Development with the Internet Computer
What is Web3? (7:38)
How does the Blockchain actually work? (25:45)
What are Apps (Decentralised Apps) and how do you develop them? (9:18)
What is the Internet Computer (ICP)? (9:18)
Read me!
[Mac Users] Installation and Setup for Web3 Development (7:03)
[Windows Users] Installation and Setup for Web3 Development (12:45)
Section 35: Build Your First Defi (Decentralised Finance) DApp - DBANK
What you will build - DBANK (Inspired by Compound) (2:16)
Introduction to the Motoko Language (12:36)
Motoko Functions and the Candid User Interface (16:00)
Motoko Conditionals and Type Annotations (5:34)
Query vs. Update Methods (8:09)
Orthogonal Persistence (8:03)
Tracking Time and Calculating Compound Interest (17:35)
Motoko Language Quiz
Adding HTML and CSS to Create the Frontend for DBANK (7:35)
Connecting the Motoko Backend to our JS Frontend (27:07)
Section 36: Deploying to the ICP Live Blockchain
What are Cycles and the ICP Token? (7:07)
No Cycles, No Problems!
How to Claim Free Cycles from Dfinity (5:21)
How to Deploy to the ICP Network (3:05)
How to Convert ICP into Cycles? (5:57)
[Optional] How to Deploy a Static Website onto the ICP Blockchain for Hosting (7:38)
Section 37: Building DApps on ICP with a React Frontend
How to Configure a DFX Created Project to Use React (11:25)
Storing Data on a Canister (16:04)
Retrieving Data from a Canister (11:58)
Deleting and Persistance (16:35)
Section 38: Create Your Own Crypto Token
Tokens and Coins: What are they and how are they used? (9:17)
Download and Configure the Skeleton Project (6:10)
Using Motoko Hashmaps to Store Token Balances (19:34)
Showing the User's Token Balance on the Frontend (13:58)
Creating the Faucet Functionality Using the Shared Keyword (15:16)
Creating the Transfer Functionality (20:52)
Using the Transfer Functionality in the Faucet (6:39)
Persisting Non-Stable Types Using the Pre- and Postupgrade Methods (15:43)
What is the Internet Identity? (5:30)
Authenticating with the Internet Identity (7:56)
[Optional] Live Deployment to Test Internet Identity Authentication (18:27)
Section 39: Minting NFTs and Building an NFT Marketplace like OpenSea
What You'll Build - A Website to Mint, Buy and Sell NFTs (10:23)
Minting NFTs (16:43)
Viewing the NFT on the Frontend (20:02)
Enabling the Minting Functionality on the Frontend (30:38)
Displaying Owned NFTs Using the React Router (36:39)
Listing NFTs for Sale (33:48)
Styling the Listed NFTs (11:16)
Creating the "Discover" Page (22:37)
Buying NFTs (32:02)
Join the $6 Million Dollar Supernova Hackathon
Section 40: Next Steps
What Modules Do You Want to See?
Bonus Module: Ask Angela Anything
AAA 1 - How to Soak in Programming Concepts and more... (39:42)
AAA 2 - Schedule for Learning to Code and more... (39:08)
AAA 3 - How to Start Freelancing and more... (25:19)
🎨 Introduction to Web Design 🖌
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock