The Complete 2024 Web Development Bootcamp

About Course

Welcome to the Complete Web Development Bootcamp, the only course you need to learn to code and become a full-stack web developer.

We’ll take you step-by-step through engaging video tutorials and teach you everything you need to know to succeed as a web developer.

Throughout this comprehensive course, we cover a massive amount of tools and technologies, including:

Front-End Web Development
HTML 5
CSS 3
Flexbox
Grid
Bootstrap 5
Javascript ES6
DOM Manipulation

By the end of this course, you will be fluently programming and be ready to make any website you can dream of.

Course Content

Section 1: Front-End Web Development

Download the Required Software
How to Download and Install VS Code (Windows 10/11 Tutorial)

02:00
Install VSCode on macOS

08:44
How Does the Internet Actually Work?

05:26
How Do Websites Actually Work?

08:21
How to Get the Most Out of the Course?

09:33
How to Get Help When You’re Stuck?

04:19

Section 2: Introduction To HTML

Section 3: Intermediate HTML

Section 4: Multi-Page Websites

Section 5: Introduction to CSS

Section 6: CSS Properties

Section 7: Intermediate CSS

Section 8: Advanced CSS

Section 9: Flexbox

Section 10: Grid

Section 11: Bootstrap?

Section 12: Web Design School – Create a Website that People Love

Section 13: Capstone Project 2 – Personal Site

Section 14: Introduction to Javascript ES6

Introduction to Javascript

11:49
Javascript Alerts – Adding Behaviour to Websites

14:20
Data Types

04:06
Javascript Variables

09:35
Javascript Variables Exercise Start

02:48
Naming and Naming Conventions for Javascript Variables

07:09
String Concatenation

03:07
String Lengths and Retrieving the Number of Characters

06:24
Slicing and Extracting Parts of a String

08:56
Challenge: Changing Casing in Text

03:39
Challenge: Changing String Casing Solution

08:59
Basic Arithmetic and the Modulo Operator in Javascript

06:14
Increment and Decrement Expressions

02:28
Functions Part 1: Creating and Calling Functions

10:35
Functions Part 1 Challenge – The Karel Robot

09:08
The Karel Chess Board Solution
A Quick Note About the Next Lesson
Functions Part 2: Parameters and Arguments

09:52
Functions Part 3: Outputs & Return Values

11:16
Tip from Angela – Set Your Expectations

02:35

Section 15: Intermediate Javascript

Random Number Generation in Javascript: Building a Love Calculator

11:15
Control Statements: Using If-Else Conditionals & Logic

04:48
Comparators and Equality

02:51
Combining Comparators

02:46
Leap Year Solution

03:03
Collections: Working with Javascript Arrays

09:01
Adding Elements and Intermediate Array Techniques

15:58
Control Statements: While Loops

06:15
Control Statements: For Loops

06:11

Section 16: The Document Object Model (DOM)

Section 17: Boss Level Challenge 1 – The Dicee Game

Challenge: The Dicee Challenge

02: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 3 – Create a Random Number
Dicee Challenge Step 4 – Change the to a Random Dice
Dicee Challenge Step 5 – Change both 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 18: Advanced Javascript and DOM Manipulation

What We’ll Make: Drum Kit

01:19
Download the Starting Files
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
How to Use Switch Statements in Javascript

05:22
A Deeper Understanding of Javascript Objects

12:04
Objects, their Methods and the Dot Notation

12:04
A Quick Note About the Next Lesson
Using Keyboard Event Listeners to Check for Key Presses

07:37
Understanding Callbacks and How to Respond to Events

11:35
Adding Animation to Websites

08:31
Download the Completed Website

Section 19: jQuery

What is jQuery?

03:44
How to Incorporate jQuery into Websites

09:08
How Minification Works to Reduce File Size

03:58
Selecting Elements with jQuery

02:00
Manipulating Styles with jQuery

05:13
Manipulating Text with jQuery

03:36
Manipulating Attributes with jQuery

03:44
Adding Event Listeners with jQuery

07:47
Adding and Removing Elements with jQuery

11:11
Website Animations with jQuery

08:13

Section 20: Boss Level Challenge 2 – The Simon Game

What You’ll Make: The Simon Game

01:00
Play the Game
Step 0 – Download the Starting Files

00:00
Step 1 – Add Javascript and jQuery
Step 1 – Answer

00:00
Step 2 – Create A New Pattern
Step 2 – Answer

00:00
Step 3 – Show the Sequence to the User with Animations and Sounds
Step 3 – Answer

00:00
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
Game Over
Step 9 – Answer
Step 10 – Restart the Game
Step 10 – Answer
Download the Completed Project Code

Section 21: The Unix Command Line

Section 22: Backend Web Development

Section 23: Node.js

Section 24: Express.js with Node.js

Section 25: EJS?

Section 26: Capstone Project – Create a Blog web application

Section 27: Git, Github and Version Control

Section 28: Application Programming Interfaces (APIs)

Section 29: Capstone Project – Use Public API

Section 30: Build Your Own API

Section 31: Databases

Section 32: SQL

Section 33: PostgreSQL

Introduction to Postgres

08:10
How to Install PostgreSQL and pgAdmin
Understand how to use keys, Postgres types and keywords

10:31
Flag Emojis on Windows ?
Use pgAdmin to CREATE a TABLE

17:05
READ data from a Postgres database

23:08
Query data using SELECT, WHERE, and LIKE

19:18
UNIQUE and NOT NULL | Travel Tracker Part 1

18:50
INSERT and add Data | Travel Tracker Part 2

17:12
Travel Tracker Part 3

11:25
One to One Relationships & Inner Joins

11:59
One to Many Relationships

13:23
Many to Many Relationships & Aliases

12:28
The Family Travel Tracker

34:49
How to update and delete data & tables

18:57
Permalist Project

29:59

Section 34: Capstone Project – Book Notes

Section 35: Authentication and Security

Introduction to Authentication

05:41
Level 1 – Registering Users with Email and Password

22:00
Level 2 – Encryption and Hashing

16:01
How to Hack Passwords

12:26
Level 3 – How to Salt Passwords for Improved Encryption

18:51
Managing Cookies and Sessions

33:27
Level 5 – Hide your Secrets with Environment Variables

17:17
Set up your Google OAuth Credentials
Level 6 – OAuth: Implement “Sign In with Google”

30:56
Finish the app: let users submit secrets

15:40

Section 36: ReactJs

What is React?

07:28
What we will make in this React module

01:34
Introduction to Code Sandbox and the Structure of the Module

05:50
Introduction to JSX and Babel

16:12
JSX Code Practice

07:30
Javascript Expressions in JSX & ES6 Template Literals

11:42
Javascript Expressions in JSX Practice

08:34
JSX Attributes & Styling React Elements

16:58
Inline Styling for React Elements

08:41
React Styling Practice

15:47
React Components

09:59
React Components Practice

05:01
Javascript ES6 – Import, Export and Modules

11:10
Javascript ES6 Import, Export and Modules Practice

04:04
Keeper App Project – Part 1 Challenge

04: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

09:56
Keeper App Project – Part 2

10:23
React Conditional Rendering with the Ternary Operator & AND Operator

19:24
Conditional Rendering Practice

06:33
State in React – Declarative vs. Imperative Programming

09:38
React Hooks – useState

18:09
useState Hook Practice

07:24
Javascript ES6 Object & Array Destructuring

17:44
Javascript ES6 Destructuring Challenge Solution

05:48
Event Handling in React

11:10
React Forms

13:40
Class Components vs. Functional Components

06:24
Changing Complex State

19:43
Changing Complex State Practice

07: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

08:27
Keeper App Project – Part 3

25:05
Note about the Next Lesson – Packages and Imports
React Dependencies & Styling the Keeper App

16:38

Section 37: Web3 Decentralised App (DApp) Development with the Internet Computer

Section 38: Build Your First Defi (Decentralised Finance) DApp – DBANK

What You’ll Build – DBANK (Inspired by Compound)

02:16
Introduction to the Motoko Language.mp4

12:36
Motoko Functions and the Candid User Interface

16:00
Motoko Conditionals and Type Annotations

05:34
Query vs. Update Methods

08:09
Orthogonal Persistance

08:03
Tracking Time and Calculating Compound Interest

17:35
Adding HTML and CSS to Create the Frontend for DBANK

07:35
Connecting the Motoko Backend to our JS Frontend

27:07
Where to Get Help and Support for Development on the Internet Computer

Section 39: Deploying to the ICP Live Blockchain

Section 40: Building DApps on ICP with a React Frontend

Section 41: Version control system

Student Ratings & Reviews

4.7

Total 3 Ratings

2 Ratings

1 Rating

0 Rating

Mahesh Babu Pala

12 months ago

this course is very well and trainer teaches understanding manner

6 years ago

The course is extraordinary!!
It explains everything from A to Z regarding Nutrition and also there are some very valuable workout tips.
Great job!

6 years ago

Absolutely fantastic!! Thanks so, so much Felix for your concise, practically useful and well informed course.

About Course

What Will You Learn?

Course Content

Section 1: Front-End Web Development

Download the Required Software

How to Download and Install VS Code (Windows 10/11 Tutorial)

Install VSCode on macOS

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 You’re Stuck?

Section 2: Introduction To HTML

What Is HTML?

How to Download the Course Resources

HTML Heading Elements

HTML Paragraph Elements

Self Closing Tags

[Project] Movie Ranking

Section 3: Intermediate HTML

The List Elements

Nesting & Indentation

Anchor Elements

Image Elements

[Project] Birthday Invite

Section 4: Multi-Page Websites

Computer File Paths

What are Webpages?

The HTML Boilerplate

[Project] Portfolio Website

How to Host Website for Free with GitHub

Introduction to Capstone Projects

Instructions for Capstone Project 1 – Online Resume

Section 5: Introduction to CSS

Why do we need CSS?

How to add CSS?

CSS Selectors

[Project] Colour Vocab Website

Tip from Angela – Dealing with Distractions

Section 6: CSS Properties

CSS Colours

Font Properties

Inspecting CSS

The CSS Box Model – Margin, Padding and Border

[Project] Motivational Poster Website

Section 7: Intermediate CSS

The Cascade – Specificity and Inheritance

Combining CSS Selectors

CSS Positioning

[Project] CSS Flag

Tip from Angela – Nothing Easy is Worth Doing!

Section 8: Advanced CSS

CSS Display

CSS Float

How To Create Responsive Website

Media Queries

[Project] Web Design Agency Website

Tip from Angela – How to Deal with Procrastination

Section 9: Flexbox

Display: Flex

Flex Direction

Flex Layout

Flex Sizing

[Project] Pricing Table

Tip from Angela – Building a Programming Habit

Section 10: Grid

Display Grid

Grid Sizing

Grid Placement

[Project] Mondrian Painting

Section 11: Bootstrap?

What is Bootstrap?

Bootstrap Layout?

Bootstrap Componets

[Project] TigDog Startup Website

Section 12: 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