The Complete 2024 Web Development Bootcamp

Front-End Web Development
1 What You’ll Get in This Course
2 Download the Course Syllabus
3 Download the 12 Rules to Learn to Code eBook [Latest Edition]
4 Download the Required Software
5 How Does the Internet Actually Work
6 How Do Websites Actually Work
7 How to Get the Most Out of the Course
8 How to Get Help When You’re Stuck
9 Pathfinder

Introduction to HTML
10 A Note About 2023 Course Updates
11 What is HTML
12 How to Download the Course Resources
13 HTML Heading Elements
14 HTML Paragraph Elements
15 Self Closing Tags
16 [Project] Movie Ranking
17 How to Ace this Course

Intermediate HTML
18 The List Element
19 Nesting and Indentation
20 Anchor Elements
21 Image Elements
22 [Project] Birthday Invite
23 Tip from Angela – Habit Building with the Calendar Trick
24 Get Access to the Monthly App Brewery Newsletter

Multi-Page Websites
25 Computer File Paths
26 What are Webpages
27 The HTML Boilerplate
28 [Project] Portfolio Website
29 How to Host Your Website for Free with GitHub
30 Introduction to Capstone Projects
31 Instructions for Capstone Project 1 – Online Resume

Introduction to CSS
32 Why do we need CSS
33 How to add CSS
34 CSS Selectors
35 [Project] Colour Vocab Website
36 Tip from Angela – Dealing with Distractions
37 Join the Student Community

CSS Properties
38 CSS Colours
39 Font Properties
40 Inspecting CSS
41 The CSS Box Model – Margin, Padding and Border
42 [Project] Motivational Poster Website

Intermediate CSS
43 The Cascade – Specificity and Inheritance
44 Combining CSS Selectors
45 CSS Positioning
46 [Project] CSS Flag
47 Tip from Angela – Nothing Easy is Worth Doing!

Advanced CSS
48 CSS Display
49 CSS Float
50 How to Create Responsive Websites
51 Media Queries
52 [Project] Web Design Agency Website
53 Tip from Angela – How to Deal with Procrastination

Flexbox
54 Display Flex
55 Flex Direction
56 Flex Layout
57 Flex Sizing
58 [Project] Pricing Table
59 Tip from Angela – Building a Programming Habit

Grid
60 Display Grid
61 Grid Sizing
62 Grid Placement
63 [Project] Mondrian Painting

Bootstrap
64 What is Bootstrap
65 Bootstrap Layout
66 Bootstrap Components
67 [Project] TinDog Startup Website

Web Design School – Create a Website that People Love
68 Introduction to Web Design
69 Understanding Colour Theory
70 Understanding Typography and How to Choose a Font
71 Manage ATTENTION with effective User Interface (UI) Design
72 User Experience (UX) Design
73 Web Design in Practice – Let’s apply what we’ve learnt!

Capstone Project 2 – Personal Site
74 Instructions

Introduction to Javascript ES6
75 Introduction to Javascript
76 Javascript Alerts – Adding Behaviour to Websites
77 Data Types
78 Javascript Variables
79 Javascript Variables Exercise Start
80 Javascript Variables Exercise
81 Javascript Variables Exercise Solution
82 Naming and Naming Conventions for Javascript Variables
83 String Concatenation
84 String Lengths and Retrieving the Number of Characters
85 Slicing and Extracting Parts of a String
86 Challenge Changing Casing in Text
87 Challenge Changing String Casing Solution
88 Basic Arithmetic and the Modulo Operator in Javascript
89 Increment and Decrement Expressions
90 Functions Part 1 Creating and Calling Functions
91 Functions Part 1 Challenge – The Karel Robot
92 The Karel Chess Board Solution
93 A Quick Note About the Next Lesson
94 Functions Part 2 Parameters and Arguments
95 Life in Weeks Coding Exercise
96 Life in Weeks Solution
97 Functions Part 3 Outputs & Return Values
98 Challenge Create a BMI Calculator
99 BMI Calculator Challenge
100 Challenge BMI Calculator Solution
101 Tip from Angela – Set Your Expectations

Intermediate Javascript
102 Random Number Generation in Javascript Building a Love Calculator
103 Control Statements Using If-Else Conditionals & Logic
104 Comparators and Equality
105 Combining Comparators
106 BMI Calculator Advanced (IFELSE)
107 Introducing the Leap Year Code Challenge
108 Leap Year Challenge Exercise
109 Leap Year Solution
110 Collections Working with Javascript Arrays
111 Adding Elements and Intermediate Array Techniques
112 Who’s Buying Lunch Code Challenge
113 Who’s Buying Lunch Solution
114 Control Statements While Loops
115 Solution to the 99 Bottles Challenge
116 Control Statements For Loops
117 Introducing the Fibonacci Code Challenge
118 The Fibonacci Exercise
119 Fibonacci Solution
120 Tip from Angela – Retrieval is How You Learn

The Document Object Model (DOM)
121 Adding Javascript to Websites
122 Introduction to the Document Object Model (DOM)
123 Solution to the DOM Challenge
124 Selecting HTML Elements with Javascript
125 Manipulating and Changing Styles of HTML Elements with Javascript
126 The Separation of Concerns Structure vs Style vs Behaviour
127 Text Manipulation and the Text Content Property
128 Manipulating HTML Element Attributes
129 Tip from Angela – The 20 Minute Method

Boss Level Challenge 1 – The Dicee Game
130 Challenge The Dicee Challenge
131 Dicee Challenge Step 0 – Download the Skeleton Project
132 Dicee Challenge Step 1 – Create an External Javascript File
133 Dicee Challenge Step 2 – Add Dice Images
134 Dicee Challenge Step 3 – Create a Random Number
135 Dicee Challenge Step 4 – Change the img to a Random Dice
136 Dicee Challenge Step 5 – Change both img Elements
137 Dicee Challenge Step 6 – Change the Title to Display a Winner
138 The Solution to the Dicee Challenge
139 Download the Completed Website
140 Tip from Angela – Learning Before you Eat

Advanced Javascript and DOM Manipulation
141 What We’ll Make Drum Kit
142 Download the Starting Files
143 Adding Event Listeners to a Button
144 Higher Order Functions and Passing Functions as Arguments
145 Higher Order Function Challenge Solution
146 How to Play Sounds on a Website
147 A Deeper Understanding of Javascript Objects
148 How to Use Switch Statements in Javascript
149 Objects, their Methods and the Dot Notation
150 A Quick Note About the Next Lesson
151 Using Keyboard Event Listeners to Check for Key Presses
152 Understanding Callbacks and How to Respond to Events
153 Adding Animation to Websites
154 Download the Completed Website
155 Tip from Angela – Dealing with Lack of Progress

jQuery
156 What is jQuery
157 How to Incorporate jQuery into Websites
158 How Minification Works to Reduce File Size
159 Selecting Elements with jQuery
160 Manipulating Styles with jQuery
161 Manipulating Text with jQuery
162 Manipulating Attributes with jQuery
163 Adding Event Listeners with jQuery
164 Adding and Removing Elements with jQuery
165 Website Animations with jQuery
166 Tip from Angela – Mixing Knowledge

Boss Level Challenge 2 – The Simon Game
167 What You’ll Make The Simon Game
168 Play the Game
169 Step 0 – Download the Starting Files
170 Step 1 – Add Javascript and jQuery
171 Step 1 – Answer
172 Step 2 – Create A New Pattern
173 Step 2 – Answer
174 Step 3 – Show the Sequence to the User with Animations and Sounds
175 Step 3 – Answer
176 Step 4 – Check Which Button is Pressed
177 Step 4 – Answer
178 Step 5 – Add Sounds to Button Clicks
179 Step 5 – Answer
180 Step 6 – Add Animations to User Clicks
181 Step 6 – Answer
182 Step 7 – Start the Game
183 Step 7 – Answer
184 Step 8 – Check the User’s Answer Against the Game Sequence8
185 Step 8 – Answer
186 Step 9 – Game Over
187 Step 9 – Answer
188 Step 10 – Restart the Game
189 Step 10 – Answer
190 Download the Completed Project Code
191 Tip from Angela – Dealing with Frustration

The Unix Command Line
192 Install Git Bash on Windows
193 Understanding the Command Line. Long Live the Command Line!
194 Command Line Techniques and Directory Navigation
195 Creating, Opening, and Removing Files through the Command Line
196 Tip from Angela – Sleep is My Secret Weapon

Backend Web Development
197 Backend Web Development Explained
198 Backend Tools and Technologies – Which one to learn

Node.js
199 What is Node.js
200 Install Node.js on Mac
201 Install Node.js on Windows
202 Using Node.js
203 How to Use the Native Node Modules
204 The NPM Package Manager and Installing External Node Modules
205 [Project] QR Code Generator
206 Tip from Angela – Step Up to the Challenge

Express.js with Node.js
207 What is Express
208 Creating Our First Server with Express
209 HTTP Requests
210 Postman
211 Introduction to Middlewares
212 Custom Middlewares
213 Secrets Access Project
214 Tip from Angela – How to Solidify Your Knowledge

EJS
215 What is EJS
216 EJS Tags
217 Passing Data to EJS Templates
218 EJS Partials and Layouts
219 Band Generator Project
220 Tip from Angela – Location, Location, Location!

Capstone Project – Create a Blog web application
221 Instructions

Git, Github and Version Control
222 Introduction to Version Control and Git
223 Version Control Using Git and the Command Line
224 GitHub and Remote Repositories
225 Gitignore
226 Cloning
227 Branching and Merging
228 Optional Git Challenge
229 Forking and Pull Requests
230 Tip from Angela – Spaced Repetition

Application Programming Interfaces (APIs)
231 Introduction to APIs
232 Structuring API Requests
233 What is JSON
234 Making Server-Side API Requests with Axios
235 API Authentication
236 REST APIs
237 Secrets Project
238 Tip from Angela – Use Accountability in your Favour

Capstone Project – Use a Public API
239 Instructions

Build Your Own API
240 Building your own APIs
241 Creating GET Routes
242 Creating POST, PUT, and PATCH Routes
243 Creating the DELETE Route
244 Build your own API for a Blog
245 Tip from Angela – How to Get a Job as Programmer

Databases
246 Databases Explained SQL vs. NoSQL
247 Tip from Angela – When Life Gives You Lemons

SQL
248 SQL Commands CREATE Table and INSERT Data
249 SQL Commands READ, SELECT, and WHERE
250 Updating Single Values and Adding Columns in SQL
251 SQL Commands DELETE
252 Understanding SQL Relationships, Foreign Keys and Inner Joins
253 Tip from Angela – Find All the Hard Working People

PostgreSQL
254 Introduction to Postgres
255 How to Install PostgreSQL and pgAdmin
256 Understand how to use keys, Postgres types and keywords
257 Flag Emojis on Windows
258 Use pgAdmin to CREATE a TABLE
259 READ data from a Postgres database
260 Query data using SELECT, WHERE, and LIKE
261 UNIQUE and NOT NULL Travel Tracker Part 1
262 INSERT and add Data Travel Tracker Part 2
263 Travel Tracker Part 3
264 One to One Relationships & Inner Joins
265 One to Many Relationships
266 Many to Many Relationships & Aliases
267 The Family Travel Tracker
268 How to update and delete data & tables
269 Permalist Project
270 Tip from Angela – Daily Routines

Capstone Project – Book Notes
271 Instructions

Authentication and Security – Handling Credentials & Designing a Secure Login
272 Introduction to Authentication
273 Level 1 – Registering Users with Email and Password
274 Level 2 – Encryption and Hashing
275 How to Hack Passwords
276 Level 3 – How to Salt Passwords for Improved Encryption
277 Managing Cookies and Sessions
278 Level 5 – Hide your Secrets with Environment Variables
279 Set up your Google OAuth Credentials
280 Level 6 – OAuth Implement Sign In with Google
281 Finish the app let users submit secrets
282 Tip from Angela – How to Work as a Freelancer

React.js
283 What is React
284 What we will make in this React module
285 Introduction to Code Sandbox and the Structure of the Module
286 Introduction to JSX and Babel
287 JSX Code Practice
288 Javascript Expressions in JSX & ES6 Template Literals
289 Javascript Expressions in JSX Practice
290 JSX Attributes & Styling React Elements
291 Inline Styling for React Elements
292 React Styling Practice
293 React Components
294 React Components Practice
295 Javascript ES6 – Import, Export and Modules
296 Javascript ES6 Import, Export and Modules Practice
297 [Windows]​ Local Environment Setup for React Development
298 [Mac] Local Environment Setup for React Development​
299 Newer Versions of Node Troubleshooting
300 Keeper App Project – Part 1 Challenge
301 Keeper App Part 1 Solution
302 React Props
303 React Props Practice
304 React DevTools
305 Mapping Data to Components
306 Mapping Data to Components​ Practice
307 Javascript ES6 MapFilterReduce
308 Javascript ES6 Arrow functions
309 Keeper App Project – Part 2
310 React Conditional Rendering with the Ternary Operator & AND Operator
311 Conditional Rendering Practice
312 State in React – Declarative vs. Imperative Programming
313 React Hooks – useState
314 useState Hook Practice
315 Javascript ES6 Object & Array Destructuring
316 Javascript ​ES6 Destructuring Challenge Solution
317 Event Handling in React
318 React Forms
319 Class Components vs. Functional Components
320 Changing Complex State
321 Changing Complex State Practice
322 Javascript ES6 Spread Operator
323 Javascript ES6 Spread Operator Practice
324 Managing a Component Tree
325 Managing a Component Tree Practice
326 Keeper App Project – Part 3
327 React Dependencies & Styling the Keeper App
328 Tip from Angela – How to Build Your Own Product

Web3 Decentralised App (DApp) Development with the Internet Computer
329 What is Web3
330 How does the Blockchain actually work
331 What are DApps (Decentralised Apps) and how do you develop them
332 What is the Internet Computer (ICP)
333 Read Me!
334 [Mac Users] Installation and Setup for Web3 Development
335 [Windows Users] Installation and Setup for Web3 Development

Build Your First Defi (Decentralised Finance) DApp – DBANK
336 What You’ll Build – DBANK (Inspired by Compound)
337 Introduction to the Motoko Language
338 Motoko Functions and the Candid User Interface
339 Motoko Conditionals and Type Annotations
340 Query vs. Update Methods
341 Orthogonal Persistance
342 Tracking Time and Calculating Compound Interest
343 Adding HTML and CSS to Create the Frontend for DBANK
344 Connecting the Motoko Backend to our JS Frontend
345 Where to Get Help and Support for Development on the Internet Computer

Deploying to the ICP Live Blockchain
346 What are Cycles and the ICP Token
347 No Cycles, No Problems!
348 How to Claim Free Cycles from Dfinity
349 How to Deploy to the ICP Network
350 How to Convert ICP into Cycles
351 [Optional] How to Deploy a Static Website onto the ICP Blockchain for Hosting

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

Create Your Own Crypto Token
356 Tokens and Coins What are they and how are they used
357 Download and Configure the Skeleton Project
358 Using Motoko Hashmaps to Store Token Balances
359 Showing the User’s Token Balance on the Frontend
360 Creating the Faucet Functionality Using the Shared Keyword
361 Creating the Transfer Functionality
362 Using the Transfer Functionality in the Faucet
363 Persisting Non-Stable Types Using the Pre- and Postupgrade Methods
364 What is the Internet Identity
365 Authenticating with the Internet Identity
366 [Optional] Live Deployment to Test Internet Identity Authentication

Minting NFTs and Building an NFT Marketplace like OpenSea
367 What You’ll Build – A Website to Mint, Buy and Sell NFTs
368 Minting NFTs
369 Viewing the NFT on the Frontend
370 Enabling the Minting Functionality on the Frontend
371 Displaying Owned NFTs Using the React Router
372 Listing NFTs for Sale
373 Styling the Listed NFTs
374 Creating the Discover Page
375 Buying NFTs
376 Join the $6 Million Dollar Supernova Hackathon

Optional Module Ask Angela Anything
377 AAA 1 – How to Soak in Programming Concepts and more
378 AAA 2 – Schedule for Learning to Code and more
379 AAA 3 – How to Start Freelancing and more
380 AAA 4 – The Live AMA

Next Steps
381 Vote for the Next Module!
382 Bonus Lecture