Autoplay
Autocomplete
HTML5
Flash
Player
Speed
Previous Lecture
Complete and continue
The Complete Web Development Course
Section 1: Front End Web Development
What You'll Get in This Course (3:09)
Bookmark the Course Resources
How Does the Internet Actually Work? (5:43)
How Do Websites Actually Work? (6:32)
What You'll Need to Get Started - Setup Your Local Web Development Environment (6:59)
How to Get Help When You're Stuck (6:44)
Section 2: Introduction to HTML
Introduction to HTML (10:53)
The Anatomy of an HTML Tag (10:53)
What we're building - HTML Personal Site (2:53)
What is The HTML Boilerplate (16:54)
How to Structure Text in HTML (11:00)
HTML Lists (5:24)
HTML Image Elements (7:34)
HTML Links and Anchor Tags (11:57)
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)
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
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)
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)
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
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)
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
Section 8: 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)
Section 9: Intermediate Javascript
Random Number Generation in Javascript: Building a Love Calculator (11:15)
Control Statements: Using If-Else Conditionals & Logic (4:48)
BMI Calculator Advanced (IF/ELSE)
Comparators and Equality (2:51)
Combining Comparators (2:46)
Collections: Working with Javascript Arrays (9:01)
Adding Elements and Intermediate Array Techniques (15:58)
Control Statements: While Loops (7:52)
Solution to 99 Bottles of Beer Challenge
Control Statements: For Loops (6:10)
Fibonacci Challenge
Section 10: 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)
Section 11: 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
Section 12: Advanced Javascript and DOM Manipulation
Drum Kit: What We'll Make (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
Section 13: 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)
Section 14: Boss Level Challenge 2 - The Simon Game
The Simon Game: What You'll Make (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
Section 15: 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)
Section 16: Backend Web Development
Backend Web Development Explained (8:02)
Section 17: 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)
Section 18: 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)
Section 19: APIs - Application Programming Interfaces
What are APIs? Application Programming Interfaces Demystified (29:33)
Using the Request Module to Get Data from an API (17:39)
Understanding the JSON Format and Working with JSON (22:20)
API Calls with Parameters (14:53)
What We'll Make: A MailChimp Newsletter Sign Up Page (2:41)
Setting Up the Newsletter Page (21:08)
Posting Data to MailChimp's Servers (26:45)
Adding Success and Failure Pages to the Website (10:20)
Deploy the Project to Heroku and Make it Live! (19:28)
Section 20: 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)
Forking and Pull Requests (17:08)
Optional Git Challenge
Section 21: 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)
Section 22: 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)
Section 23: Databases
Databases Explained: SQL vs. NOSQL (19:58)
Section 24: 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)
Section 25: 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
Section 26: 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)
Section 27: 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)
Section 28: 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)
Section 29: 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
Section 30: 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
Section 31: 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 (35:20)
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
Section 32: 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)
Section 33: Next Steps
What Modules Do You Want to See?
Bonus Module: Design School 101
Designer vs. Non-Designer Thinking (3:33)
Understanding the Mood of Your Colour Palette (6:02)
How to Combine Colours to Create Colour Palettes (4:08)
Tools for Designing with Colour (2:47)
Introduction to Typography (0:44)
The Serif Type Family - Origin and Use (4:40)
The Sans-Serif Type Family - Origin and Use (1:38)
How Typography Determines Readability (2:39)
How to Combine Fonts Like a Pro (6:00)
What is User Interface (UI) Design? (0:42)
The Tour Guide Appraoch to UI Design (3:11)
The Importance of Alignment (2:50)
Colour in User Interface Design (2:16)
What is Good Practice in Interaction Design (8:25)
The Many Ways of Designing Text Overlays (3:22)
How to Be an Attention Architect (4:46)
Challenge 16
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock