The Complete 2023 Web Development Bootcamp
Welcome to the Complete Web Development Bootcamp, the only course you need to learn to code and become a full-stack web developer. With over 12,000 ratings and a 4.8 average, my Web Development course is one of the HIGHEST RATED courses in the history of Udemy!
More
At 50+ hours, this Web Development course is without a doubt the most comprehensive web development course available online. Even if you have zero programming experience, this course will take you from beginner to mastery. Here's why:
The course is a taught by the lead instructor at the App Brewery, London's leading in-person programming bootcamp.
The course has been updated to be 2020 ready and you'll be learning the latest tools and technologies used at large companies such as Apple, Google and Netflix.
This course doesn't cut any corners, there are beautiful animated explanation videos and tens of real-world projects which you will get to build.
The curriculum was developed over a period of four years, with comprehensive student testing and feedback.
We've taught over 280,000 students how to code and many have gone on to change their lives by becoming professional developers or start their own tech startup.
You'll save yourself over $12,000 by enrolling, but still get access to the same teaching materials and learn from the same instructor and curriculum as our in-person programming bootcamp.
The course is constantly updated with new content, with new projects and modules determined by students - that's you!
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.
The course includes over 50 hours of HD video tutorials and builds your programming knowledge while making real-world websites and web apps.
Throughout this comprehensive course, we cover a massive amount of tools and technologies, including:
Front-End Web Development
HTML 5
CSS 3
Bootstrap 4
Javascript ES6
DOM Manipulation
jQuery
Bash Command Line
Git, GitHub and Version Control
Backend Web Development
Node.js
NPM
Express.js
EJS
REST
APIs
Databases
SQL
MongoDB
Mongoose
Authentication
Firebase
React.js
React Hooks
Web Design
Deployment with GitHub Pages, Heroku and MongoDB Atlas
By the end of this course, you will be fluently programming and be ready to make any website you can dream of.
You'll also build a portfolio of over 25+ websites that you can show off to any potential employer.
- No programming experience needed - I'll teach you everything you need to know
- A Mac or PC computer with access to the internet
- No paid software required - all websites will be created with Atom (which is free)
- I'll walk you through, step-by-step how to get all the software installed and set up
Who this course is for:
- If you want to learn to code through building fun and useful projects, then take this course.
- If you want to start your own startup by building your own websites and web apps.
- If you are a seasoned programmer, then take this course to to get up to speed quickly with the latest frameworks and NodeJS
- If you want to take ONE COURSE and learn everything you need to know about web development, take this course
What you'll learn:
- Be able to build ANY website you want.
- Craft a portfolio of websites to apply for junior developer jobs.
- Build fully-fledged websites and web apps for your startup or business.
- Work as a freelance web developer.
- Master backend development with Node
- Master frontend development with React
- Learn the latest frameworks and technologies, including Javascript ES6, Bootstrap 4, MongoDB.
- Learn professional developer best practices.
Watch Online The Complete 2023 Web Development Bootcamp
# | Title | Duration |
---|---|---|
1 | What You'll Get in This Course | 03:09 |
2 | How Does the Internet Actually Work? | 05:28 |
3 | How Do Websites Actually Work? | 08:23 |
4 | How to Get the Most Out of the Course | 09:34 |
5 | How to Get Help When You're Stuck | 06:40 |
6 | What is HTML? | 04:19 |
7 | How to Download the Course Resources | 02:44 |
8 | HTML Heading Elements | 14:25 |
9 | HTML Paragraph Elements | 08:42 |
10 | Self Closing Tags | 11:42 |
11 | [Project] Movie Ranking | 05:44 |
12 | How to Ace this Course | 01:25 |
13 | The List Element | 10:33 |
14 | Nesting and Indentation | 14:10 |
15 | Anchor Elements | 10:46 |
16 | Image Elements | 08:18 |
17 | [Project] Birthday Invite | 04:02 |
18 | Tip from Angela - Habit Building with the Calendar Trick | 02:53 |
19 | Computer File Paths | 19:21 |
20 | What are Webpages? | 12:56 |
21 | The HTML Boilerplate | 12:54 |
22 | [Project] Portfolio Website | 08:35 |
23 | How to Host Your Website for Free with GitHub | 08:34 |
24 | Introduction to Capstone Projects | 05:07 |
25 | Why do we need CSS? | 08:45 |
26 | How to add CSS | 15:21 |
27 | CSS Selectors | 22:57 |
28 | [Project] Colour Vocab Website | 09:09 |
29 | Tip from Angela - Dealing with Distractions | 02:29 |
30 | CSS Colours | 07:06 |
31 | Font Properties | 21:27 |
32 | Inspecting CSS | 11:53 |
33 | The CSS Box Model - Margin, Padding and Border | 20:47 |
34 | [Project] Motivational Poster Website | 07:38 |
35 | The Cascade - Specificity and Inheritance | 25:29 |
36 | Combining CSS Selectors | 23:14 |
37 | CSS Positioning | 22:51 |
38 | [Project] CSS Flag | 17:56 |
39 | Tip from Angela - Nothing Easy is Worth Doing! | 03:36 |
40 | CSS Display | 11:31 |
41 | CSS Float | 11:40 |
42 | How to Create Responsive Websites | 18:45 |
43 | Media Queries | 10:33 |
44 | [Project] Web Design Agency Website | 07:08 |
45 | Tip from Angela - How to Deal with Procrastination | 04:09 |
46 | Display: Flex | 14:22 |
47 | Flex Direction | 13:44 |
48 | Flex Layout | 19:23 |
49 | Flex Sizing | 24:28 |
50 | [Project] Pricing Table | 10:09 |
51 | Tip from Angela - Building a Programming Habit | 02:48 |
52 | Display: Grid | 14:56 |
53 | Grid Sizing | 23:33 |
54 | Grid Placement | 26:18 |
55 | [Project] Mondrian Painting | 06:46 |
56 | What is Bootstrap? | 15:36 |
57 | Bootstrap Layout | 21:15 |
58 | Bootstrap Components | 31:40 |
59 | [Project] TinDog Startup Website | 31:23 |
60 | Introduction to Web Design | 03:56 |
61 | Understanding Colour Theory | 09:05 |
62 | Understanding Typography and How to Choose a Font | 10:29 |
63 | Manage ATTENTION with effective User Interface (UI) Design | 10:28 |
64 | User Experience (UX) Design | 13:40 |
65 | Web Design in Practice - Let's apply what we've learnt! | 18:21 |
66 | Introduction to Javascript | 11:50 |
67 | Javascript Alerts - Adding Behaviour to Websites | 14:22 |
68 | Data Types | 04:07 |
69 | Javascript Variables | 09:36 |
70 | Javascript Variables Exercise Start | 02:49 |
71 | Javascript Variables Exercise Solution | 03:29 |
72 | Naming and Naming Conventions for Javascript Variables | 07:11 |
73 | String Concatenation | 03:08 |
74 | String Lengths and Retrieving the Number of Characters | 06:25 |
75 | Slicing and Extracting Parts of a String | 08:58 |
76 | Challenge: Changing Casing in Text | 03:40 |
77 | Challenge: Changing String Casing Solution | 09:01 |
78 | Basic Arithmetic and the Modulo Operator in Javascript | 06:15 |
79 | Increment and Decrement Expressions | 02:29 |
80 | Functions Part 1: Creating and Calling Functions | 10:36 |
81 | Functions Part 1 Challenge - The Karel Robot | 09:09 |
82 | Functions Part 2: Parameters and Arguments | 09:53 |
83 | Life in Weeks Solution | 03:45 |
84 | Functions Part 3: Outputs & Return Values | 11:17 |
85 | Challenge: Create a BMI Calculator | 01:50 |
86 | Challenge: BMI Calculator Solution | 05:40 |
87 | Tip from Angela - Set Your Expectations | 02:36 |
88 | Random Number Generation in Javascript: Building a Love Calculator | 11:16 |
89 | Control Statements: Using If-Else Conditionals & Logic | 04:49 |
90 | Comparators and Equality | 02:52 |
91 | Combining Comparators | 02:47 |
92 | Introducing the Leap Year Code Challenge | 04:17 |
93 | Leap Year Solution | 03:04 |
94 | Collections: Working with Javascript Arrays | 09:03 |
95 | Adding Elements and Intermediate Array Techniques | 15:59 |
96 | Who's Buying Lunch Solution | 03:44 |
97 | Control Statements: While Loops | 07:54 |
98 | Control Statements: For Loops | 06:11 |
99 | Introducing the Fibonacci Code Challenge | 06:38 |
100 | Fibonacci Solution | 08:17 |
101 | Tip from Angela - Retrieval is How You Learn | 02:53 |
102 | Adding Javascript to Websites | 10:45 |
103 | Introduction to the Document Object Model (DOM) | 12:29 |
104 | Selecting HTML Elements with Javascript | 14:18 |
105 | Manipulating and Changing Styles of HTML Elements with Javascript | 05:02 |
106 | The Separation of Concerns: Structure vs Style vs Behaviour | 05:58 |
107 | Text Manipulation and the Text Content Property | 02:38 |
108 | Manipulating HTML Element Attributes | 02:28 |
109 | Tip from Angela - The 20 Minute Method | 02:40 |
110 | Challenge: The Dicee Challenge | 02:15 |
111 | The Solution to the Dicee Challenge | 14:44 |
112 | Tip from Angela - Learning Before you Eat | 02:07 |
113 | What We'll Make: Drum Kit | 01:20 |
114 | Adding Event Listeners to a Button | 14:30 |
115 | Higher Order Functions and Passing Functions as Arguments | 12:41 |
116 | How to Play Sounds on a Website | 11:12 |
117 | A Deeper Understanding of Javascript Objects | 12:05 |
118 | How to Use Switch Statements in Javascript | 05:24 |
119 | Objects, their Methods and the Dot Notation | 06:30 |
120 | Using Keyboard Event Listeners to Check for Key Presses | 07:38 |
121 | Understanding Callbacks and How to Respond to Events | 11:36 |
122 | Adding Animation to Websites | 08:32 |
123 | Tip from Angela - Dealing with Lack of Progress | 03:09 |
124 | What is jQuery? | 03:45 |
125 | How to Incorporate jQuery into Websites | 09:09 |
126 | How Minification Works to Reduce File Size | 04:00 |
127 | Selecting Elements with jQuery | 02:02 |
128 | Manipulating Styles with jQuery | 05:14 |
129 | Manipulating Text with jQuery | 03:37 |
130 | Manipulating Attributes with jQuery | 03:45 |
131 | Adding Event Listeners with jQuery | 07:48 |
132 | Adding and Removing Elements with jQuery | 02:59 |
133 | Website Animations with jQuery | 08:14 |
134 | Tip from Angela - Mixing Knowledge | 02:21 |
135 | What You'll Make: The Simon Game | 01:01 |
136 | Tip from Angela - Dealing with Frustration | 02:32 |
137 | Install Git Bash on Windows | 02:47 |
138 | Understanding the Command Line. Long Live the Command Line! | 05:26 |
139 | Command Line Techniques and Directory Navigation | 09:45 |
140 | Creating, Opening, and Removing Files through the Command Line | 08:39 |
141 | Tip from Angela - Sleep is My Secret Weapon | 03:50 |
142 | Backend Web Development Explained | 15:14 |
143 | Backend Tools and Technologies - Which one to learn? | 05:42 |
144 | What is Node.js? | 10:40 |
145 | Using Node.js | 08:24 |
146 | How to Use the Native Node Modules | 12:13 |
147 | The NPM Package Manager and Installing External Node Modules | 16:22 |
148 | [Project] QR Code Generator | 15:50 |
149 | Tip from Angela - Step Up to the Challenge | 01:15 |
150 | What is Express? | 07:01 |
151 | Creating Our First Server with Express | 21:36 |
152 | HTTP Requests | 23:45 |
153 | Postman | 19:16 |
154 | Introduction to Middlewares | 18:27 |
155 | Custom Middlewares | 19:29 |
156 | Secrets Access Project | 08:23 |
157 | Tip from Angela - How to Solidify Your Knowledge | 02:56 |
158 | What is EJS? | 22:55 |
159 | EJS Tags | 17:45 |
160 | Passing Data to EJS Templates | 16:46 |
161 | EJS Partials and Layouts | 18:10 |
162 | Band Generator Project | 12:02 |
163 | Tip from Angela - Location, Location, Location! | 02:08 |
164 | Introduction to Version Control and Git | 02:05 |
165 | Version Control Using Git and the Command Line | 14:19 |
166 | GitHub and Remote Repositories | 10:23 |
167 | Gitignore | 11:00 |
168 | Cloning | 09:29 |
169 | Branching and Merging | 10:30 |
170 | Forking and Pull Requests | 15:19 |
171 | Tip from Angela - Spaced Repetition | 04:02 |
172 | Introduction to APIs | 19:28 |
173 | Structuring API Requests | 14:23 |
174 | What is JSON? | 17:57 |
175 | Making Server-Side API Requests with Axios | 18:01 |
176 | API Authentication | 37:46 |
177 | REST APIs | 25:18 |
178 | Secrets Project | 12:02 |
179 | Tip from Angela - Use Accountability in your Favour | 02:57 |
180 | Building your own APIs | 17:50 |
181 | Creating GET Routes | 20:59 |
182 | Creating POST, PUT, and PATCH Routes | 14:37 |
183 | Creating the DELETE Route | 06:33 |
184 | Build your own API for a Blog | 14:55 |
185 | Tip from Angela - How to Get a Job as Programmer | 02:07 |
186 | Databases Explained: SQL vs. NOSQL | 19:59 |
187 | Tip from Angela - When Life Gives You Lemons | 06:02 |
188 | SQL Commands: CREATE Table and INSERT Data | 13:49 |
189 | SQL Commands: READ, SELECT, and WHERE | 03:11 |
190 | Updating Single Values and Adding Columns in SQL | 04:43 |
191 | SQL Commands: DELETE | 01:33 |
192 | Understanding SQL Relationships, Foreign Keys and Inner Joins | 11:14 |
193 | Tip from Angela - Find All the Hard Working People | 02:02 |
194 | Installing MongoDB on Mac | 12:35 |
195 | Installing MongoDB on Windows | 09:21 |
196 | MongoDB CRUD Operations in the Shell: Create | 09:38 |
197 | MongoDB CRUD Operations in the Shell: Reading & Queries | 06:23 |
198 | MongoDB CRUD Operations in the Shell: Update | 04:08 |
199 | MongoDB CRUD Operations in the Shell: Delete | 01:46 |
200 | Relationships in MongoDB | 06:13 |
201 | Working with The Native MongoDB Driver | 19:04 |
202 | Tip from Angela - Daily Routines | 02:35 |
203 | Introduction to Mongoose | 20:27 |
204 | Reading from Your Database with Mongoose | 07:29 |
205 | Data Validation with Mongoose | 07:57 |
206 | Updating and Deleting Data Using Mongoose | 10:07 |
207 | Establishing Relationships and Embedding Documents using Mongoose | 06:46 |
208 | Tip from Angela - Deep Work | 03:02 |
209 | Let's take the ToDoList Project to the Next Level and Connect it with Mongoose | 16:47 |
210 | Rendering Database Items in the ToDoList App | 13:26 |
211 | Adding New Items to our ToDoList Database | 03:57 |
212 | Deleting Items from our ToDoList Database | 13:49 |
213 | Creating Custom Lists using Express Route Parameters | 16:13 |
214 | Adding New Items to the Custom ToDo Lists | 07:32 |
215 | Revisiting Lodash and Deleting Items from Custom ToDo Lists | 19:11 |
216 | Tip from Angela - One Step at a Time | 02:55 |
217 | How to Deploy Web Apps with a Database | 05:03 |
218 | How to Setup MongoDB Atlas | 13:42 |
219 | Deploying an App with a Database to Heroku | 12:14 |
220 | Tip from Angela - Discipline Breeds Discipline | 02:21 |
221 | Challenge: Give your Blog a Database | 02:32 |
222 | Tip from Angela - Dealing with Limitations | 05:23 |
223 | Introduction to Authentication | 05:47 |
224 | Getting Set Up | 07:27 |
225 | Level 1 - Register Users with Username and Password | 14:44 |
226 | Level 2 - Database Encryption | 16:36 |
227 | Using Environment Variables to Keep Secrets Safe | 17:41 |
228 | Level 3 - Hashing Passwords | 15:26 |
229 | Hacking 101 ☣️ | 12:29 |
230 | Level 4 - Salting and Hashing Passwords with bcrypt | 20:42 |
231 | What are Cookies and Sessions? | 08:20 |
232 | Using Passport.js to Add Cookies and Sessions | 29:31 |
233 | Level 6 - OAuth 2.0 & How to Implement Sign In with Google | 47:47 |
234 | Finishing Up the App - Letting Users Submit Secrets | 13:41 |
235 | Tip from Angela - How to Work as a Freelancer | 01:38 |
236 | What is React? | 07:29 |
237 | What we will make in this React module | 01:35 |
238 | Introduction to Code Sandbox and the Structure of the Module | 05:51 |
239 | Introduction to JSX and Babel | 16:13 |
240 | JSX Code Practice | 07:35 |
241 | Javascript Expressions in JSX & ES6 Template Literals | 11:43 |
242 | Javascript Expressions in JSX Practice | 08:35 |
243 | JSX Attributes & Styling React Elements | 16:59 |
244 | Inline Styling for React Elements | 08:42 |
245 | React Styling Practice | 10:00 |
246 | React Components | 15:48 |
247 | React Components Practice | 05:02 |
248 | Javascript ES6 - Import, Export and Modules | 11:11 |
249 | Javascript ES6 Import, Export and Modules Practice | 04:05 |
250 | [Windows] Local Environment Setup for React Development | 13:53 |
251 | [Mac] Local Environment Setup for React Development | 13:41 |
252 | Keeper App Project - Part 1 Challenge | 04:59 |
253 | Keeper App Part 1 Solution | 14:08 |
254 | React Props | 16:45 |
255 | React Props Practice | 13:20 |
256 | React DevTools | 17:20 |
257 | Mapping Data to Components | 10:22 |
258 | Mapping Data to Components Practice | 17:31 |
259 | Javascript ES6 Map/Filter/Reduce | 20:22 |
260 | Javascript ES6 Arrow functions | 09:57 |
261 | Keeper App Project - Part 2 | 10:24 |
262 | React Conditional Rendering with the Ternary Operator & AND Operator | 19:25 |
263 | Conditional Rendering Practice | 06:34 |
264 | State in React - Declarative vs. Imperative Programming | 09:39 |
265 | React Hooks - useState | 18:10 |
266 | useState Hook Practice | 07:25 |
267 | Javascript ES6 Object & Array Destructuring | 17:46 |
268 | Javascript ES6 Destructuring Challenge Solution | 05:49 |
269 | Event Handling in React | 11:11 |
270 | React Forms | 13:41 |
271 | Class Components vs. Functional Components | 06:25 |
272 | Changing Complex State | 19:44 |
273 | Changing Complex State Practice | 07:09 |
274 | Javascript ES6 Spread Operator | 10:59 |
275 | Javascript ES6 Spread Operator Practice | 12:21 |
276 | Managing a Component Tree | 22:39 |
277 | Managing a Component Tree Practice | 08:28 |
278 | Keeper App Project - Part 3 | 25:06 |
279 | React Dependencies & Styling the Keeper App | 16:39 |
280 | Tip from Angela - How to Build Your Own Product | 02:15 |
281 | What is Web3? | 07:39 |
282 | How does the Blockchain actually work? | 25:46 |
283 | What are DApps (Decentralised Apps) and how do you develop them? | 09:20 |
284 | What is the Internet Computer (ICP)? | 09:19 |
285 | [Mac Users] Installation and Setup for Web3 Development | 07:04 |
286 | [Windows Users] Installation and Setup for Web3 Development | 12:46 |
287 | What You'll Build - DBANK (Inspired by Compound) | 02:17 |
288 | Introduction to the Motoko Language | 12:37 |
289 | Motoko Functions and the Candid User Interface | 16:01 |
290 | Motoko Conditionals and Type Annotations | 05:35 |
291 | Query vs. Update Methods | 08:10 |
292 | Orthogonal Persistance | 08:04 |
293 | Tracking Time and Calculating Compound Interest | 17:36 |
294 | Adding HTML and CSS to Create the Frontend for DBANK | 07:36 |
295 | Connecting the Motoko Backend to our JS Frontend | 27:08 |
296 | What are Cycles and the ICP Token? | 07:08 |
297 | How to Claim Free Cycles from Dfinity | 05:22 |
298 | How to Deploy to the ICP Network | 03:06 |
299 | How to Convert ICP into Cycles? | 05:58 |
300 | [Optional] How to Deploy a Static Website onto the ICP Blockchain for Hosting | 07:39 |
301 | How to Configure a DFX Created Project to Use React | 11:26 |
302 | Storing Data on a Canister | 16:05 |
303 | Retrieving Data from a Canister | 11:59 |
304 | Deleting and Persistance | 16:36 |
305 | Tokens and Coins: What are they and how are they used? | 09:19 |
306 | Download and Configure the Skeleton Project | 06:11 |
307 | Using Motoko Hashmaps to Store Token Balances | 19:35 |
308 | Showing the User's Token Balance on the Frontend | 13:59 |
309 | Creating the Faucet Functionality Using the Shared Keyword | 15:17 |
310 | Creating the Transfer Functionality | 20:53 |
311 | Using the Transfer Functionality in the Faucet | 06:41 |
312 | Persisting Non-Stable Types Using the Pre- and Postupgrade Methods | 15:44 |
313 | What is the Internet Identity? | 05:31 |
314 | Authenticating with the Internet Identity | 07:57 |
315 | [Optional] Live Deployment to Test Internet Identity Authentication | 18:28 |
316 | What You'll Build - A Website to Mint, Buy and Sell NFTs | 10:24 |
317 | Minting NFTs | 16:45 |
318 | Viewing the NFT on the Frontend | 20:03 |
319 | Enabling the Minting Functionality on the Frontend | 30:39 |
320 | Displaying Owned NFTs Using the React Router | 36:40 |
321 | Listing NFTs for Sale | 33:49 |
322 | Styling the Listed NFTs | 11:18 |
323 | Creating the "Discover" Page | 22:38 |
324 | Buying NFTs | 32:03 |
325 | AAA 1 - How to Soak in Programming Concepts and more... | 39:44 |
326 | AAA 2 - Schedule for Learning to Code and more... | 39:09 |
327 | AAA 3 - How to Start Freelancing and more... | 25:21 |
328 | AAA 4 - The Live AMA | 59:53 |