Course Contents

Section 1: Front-End Web Development

6 lectures • 36 min
- 1 The Complete Full-Stack Web Development Bootcamp
  
  03:06
- 2 What You'll Get in This Course
  
  03:08
- 3 How Does the Internet Actually Work?
  
  05:27
- 4 How Do Websites Actually Work?
  
  08:22
- 5 How to Get the Most Out of the Course
  
  09:33
- 6 How to Get Help When You're Stuck
  
  06:39
Section 2: Introduction to HTML

7 lectures • 49 min
- 7 What is HTML?
  
  04:18
- 8 How to Download the Course Resources
  
  02:43
- 9 HTML Heading Elements
  
  14:24
- 10 HTML Paragraph Elements
  
  08:40
- 11 Self Closing Tags
  
  11:40
- 12 [Project] Movie Ranking
  
  05:43
- 13 How to Ace this Course
  
  01:24
Section 3: Intermediate HTML

6 lectures • 51 min
- 14 The List Element
  
  10:32
- 15 Nesting and Indentation
  
  14:09
- 16 Anchor Elements
  
  10:45
- 17 Image Elements
  
  08:17
- 18 [Project] Birthday Invite
  
  04:01
- 19 Tip from Angela - Habit Building with the Calendar Trick
  
  02:52
Section 4: Multi-Page Websites

6 lectures • 1.1 hr
- 20 Computer File Paths
  
  19:20
- 21 What are Webpages?
  
  12:55
- 22 The HTML Boilerplate
  
  12:53
- 23 [Project] Portfolio Website
  
  08:34
- 24 How to Host Your Website for Free with GitHub
  
  08:33
- 25 Introduction to Capstone Projects
  
  05:05
Section 5: Introduction to CSS

5 lectures • 59 min
- 26 Why do we need CSS?
  
  08:44
- 27 How to add CSS
  
  15:19
- 28 CSS Selectors
  
  22:56
- 29 [Project] Colour Vocab Website
  
  09:08
- 30 Tip from Angela - Dealing with Distractions
  
  02:28
Section 6: CSS Properties

5 lectures • 1.1 hr
- 31 CSS Colours
  
  07:05
- 32 Font Properties
  
  21:26
- 33 Inspecting CSS
  
  11:52
- 34 The CSS Box Model - Margin, Padding and Border
  
  20:45
- 35 [Project] Motivational Poster Website
  
  07:37
Section 7: Intermediate CSS

5 lectures • 1.5 hr
- 36 The Cascade - Specificity and Inheritance
  
  25:28
- 37 Combining CSS Selectors
  
  23:12
- 38 CSS Positioning
  
  22:50
- 39 [Project] CSS Flag
  
  17:54
- 40 Tip from Angela - Nothing Easy is Worth Doing!
  
  03:35
Section 8: Advanced CSS

6 lectures • 1.1 hr
- 41 CSS Display
  
  11:30
- 42 CSS Float
  
  11:39
- 43 How to Create Responsive Websites
  
  18:44
- 44 Media Queries
  
  10:32
- 45 [Project] Web Design Agency Website
  
  07:06
- 46 Tip from Angela - How to Deal with Procrastination
  
  04:08
Section 9: Flexbox

6 lectures • 1.4 hr
- 47 Display: Flex
  
  14:21
- 48 Flex Direction
  
  13:43
- 49 Flex Layout
  
  19:22
- 50 Flex Sizing
  
  24:27
- 51 [Project] Pricing Table
  
  10:08
- 52 Tip from Angela - Building a Programming Habit
  
  02:46
Section 10: Grid

4 lectures • 1.2 hr
- 53 Display: Grid
  
  14:55
- 54 Grid Sizing
  
  23:32
- 55 Grid Placement
  
  26:17
- 56 [Project] Mondrian Painting
  
  06:45
Section 11: Bootstrap

4 lectures • 1.7 hr
- 57 What is Bootstrap?
  
  15:35
- 58 Bootstrap Layout
  
  21:13
- 59 Bootstrap Components
  
  31:39
- 60 [Project] TinDog Startup Website
  
  31:22
Section 12: Web Design School - Create a Website that People Love

6 lectures • 1.1 hr
- 61 Introduction to Web Design
  
  03:55
- 62 Understanding Colour Theory
  
  09:04
- 63 Understanding Typography and How to Choose a Font
  
  10:28
- 64 Manage ATTENTION with effective User Interface (UI) Design
  
  10:27
- 65 User Experience (UX) Design
  
  13:39
- 66 Web Design in Practice - Let's apply what we've learnt!
  
  18:20
Section 13: Capstone Project 2 - Personal Site
Section 14: Introduction to Javascript ES6

22 lectures • 2.5 hr
- 67 Introduction to Javascript
  
  11:49
- 68 Javascript Alerts - Adding Behaviour to Websites
  
  14:20
- 69 Data Types
  
  04:06
- 70 Javascript Variables
  
  09:35
- 71 Javascript Variables Exercise Start
  
  02:48
- 72 Javascript Variables Exercise Solution
  
  03:27
- 73 Naming and Naming Conventions for Javascript Variables
  
  07:09
- 74 String Concatenation
  
  03:07
- 75 String Lengths and Retrieving the Number of Characters
  
  06:24
- 76 Slicing and Extracting Parts of a String
  
  08:56
- 77 Challenge: Changing Casing in Text
  
  03:39
- 78 Challenge: Changing String Casing Solution
  
  08:59
- 79 Basic Arithmetic and the Modulo Operator in Javascript
  
  06:14
- 80 Increment and Decrement Expressions
  
  02:28
- 81 Functions Part 1: Creating and Calling Functions
  
  10:35
- 82 Functions Part 1 Challenge - The Karel Robot
  
  09:08
- 83 Functions Part 2: Parameters and Arguments
  
  09:52
- 84 Life in Weeks Solution
  
  03:44
- 85 Functions Part 3: Outputs & Return Values
  
  11:16
- 86 Challenge: Create a BMI Calculator
  
  01:49
- 87 Challenge: BMI Calculator Solution
  
  05:39
- 88 Tip from Angela - Set Your Expectations
  
  02:35
Section 15: Intermediate Javascript

14 lectures • 1.5 hr
- 89 Random Number Generation in Javascript: Building a Love Calculator
  
  11:15
- 90 Control Statements: Using If-Else Conditionals & Logic
  
  04:48
- 91 Comparators and Equality
  
  02:51
- 92 Combining Comparators
  
  02:46
- 93 Introducing the Leap Year Code Challenge
  
  04:16
- 94 Leap Year Solution
  
  03:03
- 95 Collections: Working with Javascript Arrays
  
  09:01
- 96 Adding Elements and Intermediate Array Techniques
  
  15:58
- 97 Who's Buying Lunch Solution
  
  03:43
- 98 Control Statements: While Loops
  
  07:52
- 99 Control Statements: For Loops
  
  06:10
- 100 Introducing the Fibonacci Code Challenge
  
  06:37
- 101 Fibonacci Solution
  
  08:16
- 102 Tip from Angela - Retrieval is How You Learn
  
  02:52
Section 16: The Document Object Model (DOM)

8 lectures • 56 min
- 103 Adding Javascript to Websites
  
  10:44
- 104 Introduction to the Document Object Model (DOM)
  
  12:28
- 105 Selecting HTML Elements with Javascript
  
  14:17
- 106 Manipulating and Changing Styles of HTML Elements with Javascript
  
  05:01
- 107 The Separation of Concerns: Structure vs Style vs Behaviour
  
  05:57
- 108 Text Manipulation and the Text Content Property
  
  02:37
- 109 Manipulating HTML Element Attributes
  
  02:27
- 110 Tip from Angela - The 20 Minute Method
  
  02:39
Section 17: Boss Level Challenge 1 - The Dicee Game

3 lectures • 19 min
- 111 Challenge: The Dicee Challenge
  
  02:14
- 112 The Solution to the Dicee Challenge
  
  14:43
- 113 Tip from Angela - Learning Before you Eat
  
  02:06
Section 18: Advanced Javascript and DOM Manipulation

11 lectures • 1.6 hr
- 114 What We'll Make: Drum Kit
  
  01:19
- 115 Adding Event Listeners to a Button
  
  14:29
- 116 Higher Order Functions and Passing Functions as Arguments
  
  12:40
- 117 How to Play Sounds on a Website
  
  11:11
- 118 How to Use Switch Statements in Javascript
  
  05:22
- 119 A Deeper Understanding of Javascript Objects
  
  12:04
- 120 Objects, their Methods and the Dot Notation
  
  06:29
- 121 Using Keyboard Event Listeners to Check for Key Presses
  
  07:37
- 122 Understanding Callbacks and How to Respond to Events
  
  11:35
- 123 Adding Animation to Websites
  
  08:31
- 124 Tip from Angela - Dealing with Lack of Progress
  
  03:08
Section 19: jQuery

11 lectures • 53 min
- 125 What is jQuery?
  
  03:44
- 126 How to Incorporate jQuery into Websites
  
  09:08
- 127 How Minification Works to Reduce File Size
  
  03:58
- 128 Selecting Elements with jQuery
  
  02:01
- 129 Manipulating Styles with jQuery
  
  05:13
- 130 Manipulating Text with jQuery
  
  03:36
- 131 Manipulating Attributes with jQuery
  
  03:44
- 132 Adding Event Listeners with jQuery
  
  07:47
- 133 Adding and Removing Elements with jQuery
  
  02:58
- 134 Website Animations with jQuery
  
  08:13
- 135 Tip from Angela - Mixing Knowledge
  
  02:20
Section 20: Boss Level Challenge 2 - The Simon Game

2 lectures • 4 min
- 136 What You'll Make: The Simon Game
  
  01:00
- 137 Tip from Angela - Dealing with Frustration
  
  02:31
Section 21: The Unix Command Line

5 lectures • 30 min
- 138 Install Git Bash on Windows
  
  02:46
- 139 Understanding the Command Line. Long Live the Command Line!
  
  05:25
- 140 Command Line Techniques and Directory Navigation
  
  09:44
- 141 Creating, Opening, and Removing Files through the Command Line
  
  08:38
- 142 Tip from Angela - Sleep is My Secret Weapon
  
  03:48
Section 22: Backend Web Development

2 lectures • 21 min
- 143 Backend Web Development Explained
  
  15:13
- 144 Backend Tools and Technologies - Which one to learn?
  
  05:40
Section 23: Node.js

6 lectures • 1.1 hr
- 145 What is Node.js?
  
  10:39
- 146 Using Node.js
  
  08:23
- 147 How to Use the Native Node Modules
  
  12:12
- 148 The NPM Package Manager and Installing External Node Modules
  
  16:21
- 149 [Project] QR Code Generator
  
  15:49
- 150 Tip from Angela - Step Up to the Challenge
  
  01:14
Section 24: Express.js with Node.js

8 lectures • 2.0 hr
- 151 What is Express?
  
  06:59
- 152 Creating Our First Server with Express
  
  21:35
- 153 HTTP Requests
  
  23:44
- 154 Postman
  
  19:15
- 155 Introduction to Middlewares
  
  18:25
- 156 Custom Middlewares
  
  19:28
- 157 Secrets Access Project
  
  08:21
- 158 Tip from Angela - How to Solidify Your Knowledge
  
  02:55
Section 25: EJS

6 lectures • 1.5 hr
- 159 What is EJS?
  
  22:54
- 160 EJS Tags
  
  17:43
- 161 Passing Data to EJS Templates
  
  16:45
- 162 EJS Partials and Layouts
  
  18:08
- 163 Band Generator Project
  
  12:01
- 164 Tip from Angela - Location, Location, Location!
  
  02:06
Section 26: Capstone Project - Create a Blog web application
Section 27: Git, Github and Version Control

8 lectures • 1.3 hr
- 165 Introduction to Version Control and Git
  
  02:04
- 166 Version Control Using Git and the Command Line
  
  14:18
- 167 GitHub and Remote Repositories
  
  10:22
- 168 Gitignore
  
  10:59
- 169 Cloning
  
  09:28
- 170 Branching and Merging
  
  10:29
- 171 Forking and Pull Requests
  
  15:17
- 172 Tip from Angela - Spaced Repetition
  
  04:01
Section 28: Application Programming Interfaces (APIs)

8 lectures • 2.5 hr
- 173 Introduction to APIs
  
  19:27
- 174 Structuring API Requests
  
  14:22
- 175 What is JSON?
  
  17:56
- 176 Making Server-Side API Requests with Axios
  
  18:00
- 177 API Authentication
  
  37:45
- 178 REST APIs
  
  25:17
- 179 Secrets Project
  
  12:01
- 180 Tip from Angela - Use Accountability in your Favour
  
  02:56
Section 29: Capstone Project - Use a Public API
Section 30: Build Your Own API

6 lectures • 1.3 hr
- 181 Building your own APIs
  
  17:49
- 182 Creating GET Routes
  
  20:57
- 183 Creating POST, PUT, and PATCH Routes
  
  14:36
- 184 Creating the DELETE Route
  
  06:32
- 185 Build your own API for a Blog
  
  14:54
- 186 Tip from Angela - How to Get a Job as Programmer
  
  02:06
Section 31: Databases

2 lectures • 22 min
- 187 Databases Explained: SQL vs. NoSQL
  
  15:44
- 188 Tip from Angela - When Life Gives You Lemons
  
  06:01
Section 32: SQL

6 lectures • 36 min
- 189 SQL Commands: CREATE Table and INSERT Data
  
  13:48
- 190 SQL Commands: READ, SELECT, and WHERE
  
  03:10
- 191 Updating Single Values and Adding Columns in SQL
  
  04:42
- 192 SQL Commands: DELETE
  
  01:32
- 193 Understanding SQL Relationships, Foreign Keys and Inner Joins
  
  11:13
- 194 Tip from Angela - Find All the Hard Working People
  
  02:01
Section 33: PostgreSQL

15 lectures • 4.2 hr
- 195 Introduction to Postgres
  
  08:10
- 196 Understand how to use keys, Postgres types and keywords
  
  10:31
- 197 Use pgAdmin to CREATE a TABLE
  
  17:05
- 198 READ data from a Postgres database
  
  23:08
- 199 Query data using SELECT, WHERE, and LIKE
  
  19:18
- 200 UNIQUE and NOT NULL | Travel Tracker Part 1
  
  18:50
- 201 INSERT and add Data | Travel Tracker Part 2
  
  17:12
- 202 Travel Tracker Part 3
  
  11:25
- 203 One to One Relationships & Inner Joins
  
  11:59
- 204 One to Many Relationships
  
  13:23
- 205 Many to Many Relationships & Aliases
  
  12:28
- 206 The Family Travel Tracker
  
  34:49
- 207 How to update and delete data & tables
  
  18:57
- 208 Permalist Project
  
  29:59
- 209 Tip from Angela - Daily Routines
  
  02:34
Section 34: Capstone Project - Book Notes
Section 35: Authentication and Security - Handling Credentials & Designing a Secure Login

10 lectures • 2.9 hr
- 210 Introduction to Authentication
  
  05:41
- 211 Level 1 - Registering Users with Email and Password
  
  22:00
- 212 Level 2 - Encryption and Hashing
  
  16:01
- 213 How to Hack Passwords
  
  12:26
- 214 Level 3 - How to Salt Passwords for Improved Encryption
  
  18:51
- 215 Managing Cookies and Sessions
  
  33:27
- 216 Level 5 - Hide your Secrets with Environment Variables
  
  17:17
- 217 Level 6 - OAuth: Implement "Sign In with Google"
  
  30:56
- 218 Finish the app: let users submit secrets
  
  15:40
- 219 Tip from Angela - How to Work as a Freelancer
  
  01:37
Section 36: React.js

43 lectures • 8.5 hr
- 220 What is React?
  
  07:28
- 221 What we will make in this React module
  
  01:34
- 222 Introduction to Code Sandbox and the Structure of the Module
  
  05:45
- 223 Introduction to JSX and Babel
  
  16:59
- 224 JSX Code Practice
  
  07:30
- 225 Javascript Expressions in JSX & ES6 Template Literals
  
  11:42
- 226 Javascript Expressions in JSX Practice
  
  08:34
- 227 JSX Attributes & Styling React Elements
  
  16:58
- 228 Inline Styling for React Elements
  
  08:41
- 229 React Styling Practice
  
  09:59
- 230 React Components
  
  15:47
- 231 React Components Practice
  
  05:01
- 232 Javascript ES6 - Import, Export and Modules
  
  11:10
- 233 Javascript ES6 Import, Export and Modules Practice
  
  04:04
- 234 Keeper App Project - Part 1 Challenge
  
  04:57
- 235 Keeper App Part 1 Solution
  
  14:07
- 236 React Props
  
  16:44
- 237 React Props Practice
  
  13:19
- 238 React DevTools
  
  17:19
- 239 Mapping Data to Components
  
  10:20
- 240 Mapping Data to Components Practice
  
  17:30
- 241 Javascript ES6 Map/Filter/Reduce
  
  20:21
- 242 Javascript ES6 Arrow functions
  
  09:56
- 243 Keeper App Project - Part 2
  
  10:23
- 244 React Conditional Rendering with the Ternary Operator & AND Operator
  
  19:24
- 245 Conditional Rendering Practice
  
  06:33
- 246 State in React - Declarative vs. Imperative Programming
  
  09:38
- 247 React Hooks - useState
  
  18:09
- 248 useState Hook Practice
  
  07:24
- 249 Javascript ES6 Object & Array Destructuring
  
  17:44
- 250 Javascript ES6 Destructuring Challenge Solution
  
  05:48
- 251 Event Handling in React
  
  11:10
- 252 React Forms
  
  13:40
- 253 Class Components vs. Functional Components
  
  06:24
- 254 Changing Complex State
  
  19:43
- 255 Changing Complex State Practice
  
  07:08
- 256 Javascript ES6 Spread Operator
  
  10:58
- 257 Javascript ES6 Spread Operator Practice
  
  12:20
- 258 Managing a Component Tree
  
  22:37
- 259 Managing a Component Tree Practice
  
  08:27
- 260 Keeper App Project - Part 3
  
  25:05
- 261 React Dependencies & Styling the Keeper App
  
  16:38
- 262 Tip from Angela - How to Build Your Own Product
  
  02:14
Section 37: Web3 Decentralised App (DApp) Development with the Internet Computer

6 lectures • 1.2 hr
- 263 What is Web3?
  
  07:38
- 264 How does the Blockchain actually work?
  
  25:45
- 265 What are DApps (Decentralised Apps) and how do you develop them?
  
  09:18
- 266 What is the Internet Computer (ICP)?
  
  09:18
- 267 [Mac Users] Installation and Setup for Web3 Development
  
  07:03
- 268 [Windows Users] Installation and Setup for Web3 Development
  
  12:45
Section 38: Build Your First Defi (Decentralised Finance) DApp - DBANK

9 lectures • 1.7 hr
- 269 What You'll Build - DBANK (Inspired by Compound)
  
  02:16
- 270 Introduction to the Motoko Language
  
  12:36
- 271 Motoko Functions and the Candid User Interface
  
  16:00
- 272 Motoko Conditionals and Type Annotations
  
  05:34
- 273 Query vs. Update Methods
  
  08:09
- 274 Orthogonal Persistance
  
  08:03
- 275 Tracking Time and Calculating Compound Interest
  
  17:35
- 276 Adding HTML and CSS to Create the Frontend for DBANK
  
  07:35
- 277 Connecting the Motoko Backend to our JS Frontend
  
  27:07
Section 39: Deploying to the ICP Live Blockchain

4 lectures • 24 min
- 278 What are Cycles and the ICP Token?
  
  07:07
- 279 How to Deploy to the ICP Network
  
  03:03
- 280 How to Convert ICP into Cycles?
  
  05:57
- 281 [Optional] How to Deploy a Static Website onto the ICP Blockchain for Hosting
  
  07:37
Section 40: Building DApps on ICP with a React Frontend

4 lectures • 56 min
- 282 How to Configure a DFX Created Project to Use React
  
  11:25
- 283 Storing Data on a Canister
  
  16:04
- 284 Retrieving Data from a Canister
  
  11:58
- 285 Deleting and Persistance
  
  16:35
Section 41: Create Your Own Crypto Token

11 lectures • 2.3 hr
- 286 Tokens and Coins: What are they and how are they used?
  
  09:17
- 287 Download and Configure the Skeleton Project
  
  06:10
- 288 Using Motoko Hashmaps to Store Token Balances
  
  19:34
- 289 Showing the User's Token Balance on the Frontend
  
  13:58
- 290 Creating the Faucet Functionality Using the Shared Keyword
  
  15:16
- 291 Creating the Transfer Functionality
  
  20:52
- 292 Using the Transfer Functionality in the Faucet
  
  06:39
- 293 Persisting Non-Stable Types Using the Pre- and Postupgrade Methods
  
  15:43
- 294 What is the Internet Identity?
  
  05:30
- 295 Authenticating with the Internet Identity
  
  07:56
- 296 [Optional] Live Deployment to Test Internet Identity Authentication
  
  18:27
Section 42: Minting NFTs and Building an NFT Marketplace like OpenSea

9 lectures • 3.6 hr
- 297 What You'll Build - A Website to Mint, Buy and Sell NFTs
  
  10:23
- 298 Minting NFTs
  
  16:43
- 299 Viewing the NFT on the Frontend
  
  20:02
- 300 Enabling the Minting Functionality on the Frontend
  
  30:38
- 301 Displaying Owned NFTs Using the React Router
  
  36:39
- 302 Listing NFTs for Sale
  
  33:48
- 303 Styling the Listed NFTs
  
  11:16
- 304 Creating the "Discover" Page
  
  22:37
- 305 Buying NFTs
  
  32:02
Section 43: Optional Module: Ask Angela Anything

4 lectures • 2.7 hr
- 306 AAA 1 - How to Soak in Programming Concepts and more...
  
  39:42
- 307 AAA 2 - Schedule for Learning to Code and more...
  
  39:08
- 308 AAA 3 - How to Start Freelancing and more...
  
  25:19
- 309 AAA 4 - The Live AMA
  
  59:52
Section 44: Next Steps

The Complete 2024 Web Development Bootcamp

Become a Full-Stack Web Developer with just ONE course. HTML, CSS, Javascript, Node, React, PostgreSQL, Web3 and DApps

61h 2m 50s

English

August 27, 2024

Dr. Angela

This comprehensive course aims to equip you with the skills necessary to become a full-stack web developer. By covering technologies like HTML, CSS, JavaScript, Node.js, React, PostgreSQL, and Web3 concepts, this course offers a complete package for aspiring developers. You’ll learn to build both the front-end and back-end of modern web applications from scratch, including decentralized applications.

This course was originally published on Udemy and is being provided here for free streaming. If you find the content valuable and want support the creator, why not buy the original course?

Course Details

Instructor: Dr. Angela Yu, Developer and Lead Instructor
Total Sections: 44
Total Lectures: 373
Original Content URL: https://udemy.com/course/the-complete-web-development-bootcamp/
Contributor: Jarin Tasnim

A big thanks to Jarin Tasnim for sharing this course!

By the end of the course, you'll be able to:

Build responsive and interactive user interfaces using HTML and CSS.
Implement dynamic functionality using JavaScript for front-end development.
Master Node.js to create server-side applications.
Work with Express.js to build robust APIs.
Integrate databases like PostgreSQL for persistent data.
Understand and use version control with Git and GitHub.
Learn about APIs and how to interface with them using different methods.
Develop decentralized applications using Web3 concepts and the Internet Computer.
Use React.js to build modern and complex interfaces.
Implement Authentication and Security in your web applications.

The Complete 2024 Web Development Bootcamp provides a full stack learning experience, taking you from the basics of HTML to mastering cutting edge technologies. It covers fundamental concepts to advanced techniques in web development, ensuring a holistic learning experience. This comprehensive course begins with front-end technologies such as HTML, CSS, and JavaScript. It then progresses to back-end development using Node.js and Express.js. The course also touches on important databases using PostgreSQL and other database concepts in SQL. Furthermore, this course introduces contemporary trends and includes the development of decentralized Web3 applications, providing a detailed view of these innovative technologies.

The course incorporates practical learning through projects, which allow you to apply these concepts. You’ll participate in mini projects and complete several capstone projects to help in your learning. Each module builds upon the previous one, making learning a step-by-step process. This holistic approach means you'll gain a practical understanding of how different technologies work together in a real project.

Happy learning!