The Complete 2020 Web Development Bootcamp

The Complete 2020 Web Development Bootcamp
The Complete 2020 Web Development Bootcamp
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 53.5 Hours | 23.7 GB

Become a full-stack web developer with just one course. HTML, CSS, Javascript, Node, React, MongoDB and 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.

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.

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.
Table of Contents

Front-End Web Development
1 What You’ll Get in This Course
2 Syllabus Download
3 Bookmark the Course Resources
4 How to Get the Most Out of the Course
5 Download the 12 Rules to Learn to Code eBook
6 How Does the Internet Actually Work
7 How Do Websites Actually Work
8 What You’ll Need to Get Started – Setup Your Local Web Development Environment
9 How to Get Help When You’re Stuck
10 Pathfinder

Introduction to HTML
11 Introduction to HTML
12 The Anatomy of an HTML Tag
13 What we’re building – HTML Personal Site
14 What is The HTML Boilerplate
15 How to Structure Text in HTML
16 HTML Lists
17 HTML Image Elements
18 HTML Links and Anchor Tags
19 How to Ace this Course
20 Feedback Time!

Intermediate HTML
21 HTML Tables
22 Using HTML Tables for Layout
23 HTML Tables Code Challenge
24 How to Type Emojis
25 HTML Tables Solution Walkthrough
26 HTML Forms
27 Forms in Practice – Create a Contact Me Form
28 Publish Your Website!
29 Tip from Angela – Habit Building with the Calendar Trick
30 Get Monthly Tips and Tools to Level Up as a Developer
31 Feedback Time!

Introduction to CSS
32 Introduction to CSS
33 Inline CSS
34 A Quick Note About the Next Lesson
35 Internal CSS
36 External CSS
37 How to Debug CSS Code
38 The Anatomy of CSS Syntax
39 CSS Selectors
40 Classes vs. Ids
41 Tip from Angela – Dealing with Distractions
42 Join the Student Community
43 Feedback Time!

Intermediate CSS
44 What We’ll Make – Stylised Personal Site
45 What Are Favicons
46 HTML Divs
47 The Box Model of Website Styling
48 CSS Display Property
49 Learn More About Web Design
50 CSS Static and Relative Positioning
51 Absolute positioning
52 The Dark Art of Centering Elements with CSS
53 Font Styling in Our Personal Site
54 Learn More About Typography
55 Adding Content to Our Website
56 CSS Sizing
57 Font Properties Challenge 1 – Change the Font Colour
58 Font Properties Challenge 2 – Change the Font Weight
59 Font Properties Challenge 3 – Change the Line Height
60 CSS Font Property Challenge Solutions
61 CSS Float and Clear
62 CSS Challenge
63 Stylised Personal Site Solution Walkthrough
64 [Optional] Get More Practice HTML and CSS
65 Tip from Angela – Nothing Easy is Worth Doing!
66 Feedback Time!

Introduction to Bootstrap 4
67 What is Bootstrap
68 Installing Bootstrap
69 Web Design 101 – Wireframing
70 The Bootstrap Navigation Bar
71 What We’ll Make TinDog
72 Download the Starting Files
73 Setting Up Our New Project
74 Bootstrap Grid Layout System
75 Getting Montserrat Black and other Font Weights
76 Adding Grid Layouts to Our Website
77 A Note About CSS Link Order
78 Bootstrap Containers
79 Bootstrap Buttons & Font Awesome
80 Styling Our Website Challenges and Solutions
81 Bootstrap Challenge 1
82 Solution to Bootstrap Challenge 1
83 Tip from Angela – How to Deal with Procrastination
84 Feedback Time!

Intermediate Bootstrap
85 The Bootstrap Carousel Part 1
86 The Bootstrap Carousel Part 2
87 Bootstrap Cards
88 The CSS Z-Index and Stacking Order
89 Media Query Breakpoints
90 Bootstrap Challenge 2
91 Bootstrap Challenge 2 Solution
92 How to become a Better Programmer – Code Refactoring
93 Put it into Practice – Refactor our Website Part 1
94 Advanced CSS – Combining Selectors
95 Refactoring our Website Part 2
96 Advanced CSS – Selector Priority
97 Completing the Website
98 Download the Completed Website
99 Tip from Angela – Building a Programming Habit
100 Feedback Time!

Web Design School – Create a Website that People Love
101 Introduction to Web Design
102 Understanding Colour Theory
103 Understanding Typography and How to Choose a Font
104 Manage ATTENTION with effective User Interface (UI) Design
105 User Experience (UX) Design
106 Web Design in Practice – Let’s apply what we’ve learnt!

Introduction to Javascript ES6
107 Introduction to Javascript
108 Javascript Alerts – Adding Behaviour to Websites
109 Data Types
110 Javascript Variables
111 Javascript Variables Exercise Start
112 Javascript Variables Exercise Solution
113 Naming and Naming Conventions for Javascript Variables
114 String Concatenation
115 String Lengths and Retrieving the Number of Characters
116 Slicing and Extracting Parts of a String
117 Challenge Changing Casing in Text
118 Challenge Changing String Casing Solution
119 Basic Arithmetic and the Modulo Operator in Javascript
120 Increment and Decrement Expressions
121 Functions Part 1 Creating and Calling Functions
122 Functions Part 1 Challenge – The Karel Robot
123 The Karel Chess Board Solution
124 A Quick Note About the Next Lesson
125 Functions Part 2 Parameters and Arguments
126 Life in Weeks Solution
127 Functions Part 3 Outputs & Return Values
128 Challenge Create a BMI Calculator
129 Challenge BMI Calculator Solution
130 Tip from Angela – Set Your Expectations
131 Feedback Time!

Intermediate Javascript
132 Random Number Generation in Javascript Building a Love Calculator
133 Control Statements Using If-Else Conditionals & Logic
134 Comparators and Equality
135 Combining Comparators
136 Introducing the Leap Year Code Challenge
137 Leap Year Solution
138 Collections Working with Javascript Arrays
139 Adding Elements and Intermediate Array Techniques
140 Who’s Buying Lunch Solution
141 Control Statements While Loops
142 Solution to the 99 Bottles Challenge
143 Control Statements For Loops
144 Introducing the Fibonacci Code Challenge
145 Fibonacci Solution
146 Tip from Angela – Retrieval is How You Learn
147 Feedback Time!

The Document Object Model (DOM)
148 Adding Javascript to Websites
149 Introduction to the Document Object Model (DOM)
150 Solution to the DOM Challenge
151 Selecting HTML Elements with Javascript
152 Manipulating and Changing Styles of HTML Elements with Javascript
153 The Separation of Concerns Structure vs Style vs Behaviour
154 Text Manipulation and the Text Content Property
155 Manipulating HTML Element Attributes
156 Tip from Angela – The 20 Minute Method
157 Feedback Time!

Boss Level Challenge 1 – The Dicee Game
158 Challenge The Dicee Challenge
159 Dicee Challenge Step 0 – Download the Skeleton Project
160 Dicee Challenge Step 1 – Create an External Javascript File
161 Dicee Challenge Step 2 – Add Dice Images
162 Dicee Challenge Step 3 – Create a Random Number
163 Dicee Challenge Step 4 – Change the img to a Random Dice
164 Dicee Challenge Step 5 – Change both img Elements
165 Dicee Challenge Step 6 – Change the Title to Display a Winner
166 The Solution to the Dicee Challenge
167 Download the Completed Website
168 Tip from Angela – Learning Before you Eat
169 Feedback Time!

Advanced Javascript and DOM Manipulation
170 What We’ll Make Drum Kit
171 Download the Starting Files
172 Adding Event Listeners to a Button
173 Higher Order Functions and Passing Functions as Arguments
174 Higher Order Function Challenge Solution
175 How to Play Sounds on a Website
176 A Deeper Understanding of Javascript Objects
177 How to Use Switch Statements in Javascript
178 Objects, their Methods and the Dot Notation
179 A Quick Note About the Next Lesson
180 Using Keyboard Event Listeners to Check for Key Presses
181 Understanding Callbacks and How to Respond to Events
182 Adding Animation to Websites
183 Download the Completed Website
184 Tip from Angela – Dealing with Lack of Progress
185 Feedback Time!

jQuery
186 What is jQuery
187 How to Incorporate jQuery into Websites
188 How Minification Works to Reduce File Size
189 Selecting Elements with jQuery
190 Manipulating Styles with jQuery
191 Manipulating Text with jQuery
192 Manipulating Attributes with jQuery
193 Adding Event Listeners with jQuery
194 Adding and Removing Elements with jQuery
195 Website Animations with jQuery
196 Tip from Angela – Mixing Knowledge
197 Feedback Time!

Boss Level Challenge 2 – The Simon Game
198 What You’ll Make The Simon Game
199 Play the Game
200 Step 0 – Download the Starting Files
201 Step 1 – Add Javascript and jQuery
202 Step 1 – Answer
203 Step 2 – Create A New Pattern
204 Step 2 – Answer
205 Step 3 – Show the Sequence to the User with Animations and Sounds
206 Step 3 – Answer
207 Step 4 – Check Which Button is Pressed
208 Step 4 – Answer
209 Step 5 – Add Sounds to Button Clicks
210 Step 5 – Answer
211 Step 6 – Add Animations to User Clicks
212 Step 6 – Answer
213 Step 7 – Start the Game
214 Step 7 – Answer
215 Step 8 – Check the User’s Answer Against the Game Sequence8
216 Step 8 – Answer
217 Step 9 – Game Over
218 Step 9 – Answer
219 Step 10 – Restart the Game
220 Step 10 – Answer
221 Download the Completed Project Code
222 Tip from Angela – Dealing with Frustration
223 Feedback Time!

The Unix Command Line
224 Installing the Hyper Terminal
225 Command Line Hyper Setup
226 Understanding the Command Line. Long Live the Command Line!
227 Command Line Techniques and Directory Navigation
228 Creating, Opening, and Removing Files through the Command Line
229 Tip from Angela – Sleep is My Secret Weapon
230 Feedback Time!

Backend Web Development
231 Backend Web Development Explained

Node.js
232 What is Node.js
233 Install Node.js on Mac
234 Install Node.js on Windows
235 The Power of the Command Line and How to Use Node
236 The Node REPL (Read Evaluation Print Loops)
237 How to Use the Native Node Modules
238 The NPM Package Manager and Installing External Node Modules
239 Tip from Angela – Step Up to the Challenge
240 Feedback Time!

Express.js with Node.js
241 What is Express
242 Creating Our First Server with Express
243 Handling Requests and Responses the GET Request
244 Nodemon Installation
245 Understanding and Working with Routes
246 What We’ll Make A Calculator
247 Calculator Setup Challenge
248 Calculator Setup Challenge Solution
249 Responding to Requests with HTML Files
250 Processing Post Requests with Body Parser
251 BMI Routing Challenge
252 Solution to the BMI Routing Challenge
253 Tip from Angela – How to Solidify Your Knowledge
254 Feedback Time!

APIs – Application Programming Interfaces
255 Why Do We Need APIs
256 API Endpoints, Paths and Parameters.
257 API Authentication and Postman
258 What is JSON
259 Making GET Requests with the Node HTTPS Module
260 How to Parse JSON
261 Using Express to Render a Website with Live API Data
262 Using Body Parser to Parse POST Requests to the Server
263 The Mailchimp API – What You’ll Make
264 Setting Up the Sign Up Page
265 Posting Data to Mailchimp’s Servers via their API
266 Adding Success and Failure Pages
267 Deploying Your Server with Heroku
268 Tip from Angela – Location, Location, Location!
269 Feedback Time!

Git, Github and Version Control
270 Introduction to Version Control and Git
271 Version Control Using Git and the Command Line
272 GitHub and Remote Repositories
273 GitHub Private Repos are now Free!
274 Gitignore
275 Cloning
276 Branching and Merging
277 Optional Git Challenge
278 Forking and Pull Requests
279 Tip from Angela – Spaced Repetition
280 Feedback Time!

EJS
281 What We’ll Make A ToDoList
282 Linter Errors with EJS
283 Templates Why Do We Need Templates
284 Creating Your First EJS Templates
285 Running Code Inside the EJS Template
286 Passing Data from Your Webpage to Your Server
287 The Concept of Scope in the Context of Javascript
288 Adding Pre-Made CSS Stylesheets to Your Website
289 Understanding Templating vs. Layouts
290 Understanding Node Module Exports How to Pass Functions and Data between Files
291 Tip from Angela – Use Accountability in your Favour
292 Feedback Time!

Boss Level Challenge 3 – Blog Website
293 A New Challenge Format and What We’ll Make A Blog
294 Setting Up the Blog Project
295 Challenge 1
296 Challenge 1 Solution
297 Challenge 2
298 Challenge 2 Solution
299 Challenge 3
300 Challenge 3 Solution
301 Challenge 4
302 Challenge 4 Solution
303 Challenge 5
304 Challenge 5 Solution
305 Challenge 6
306 Challenge 6 Solution
307 Challenge 7
308 Challenge 7 Solution
309 Challenge 8
310 Challenge 8 Solution
311 Challenge 9
312 Challenge 9 Solution
313 Challenge 10
314 Challenge 10 Solution
315 Challenge 11
316 Challenge 11 Solution
317 Challenge 12
318 Challenge 12 Solution
319 Challenge 13
320 Challenge 13 Solution
321 Challenge 14 and Solution
322 Challenge 15
323 Challenge 15 Solution
324 Express Routing Parameters
325 Challenge 16
326 Challenge 16 Solution
327 Challenge 17
328 Challenge 17 Solution
329 Challenge 18
330 Challenge 18 Solution
331 Challenge 19
332 Challenge 19 Solution
333 Challenge 20
334 Challenge 20 Solution
335 Challenge 21
336 Challenge 21 Solution
337 Tip from Angela – When Life Gives You Lemons
338 Feedback Time!

Databases
339 Databases Explained SQL vs. NOSQL

SQL
340 SQL Commands CREATE Table and INSERT Data
341 SQL Commands READ, SELECT, and WHERE
342 Updating Single Values and Adding Columns in SQL
343 SQL Commands DELETE
344 Understanding SQL Relationships, Foreign Keys and Inner Joins
345 Tip from Angela – Find All the Hard Working People
346 Feedback Time!

MongoDB
347 Installing MongoDB on Mac
348 Installing MongoDB on Windows
349 MongoDB CRUD Operations in the Shell Create
350 MongoDB CRUD Operations in the Shell Reading & Queries
351 MongoDB CRUD Operations in the Shell Update
352 MongoDB CRUD Operations in the Shell Delete
353 Relationships in MongoDB
354 Working with The Native MongoDB Driver
355 If You Have Forgotten to Quit the Mongod Server
356 Tip from Angela – Daily Routines
357 Feedback Time!

Mongoose
358 Introduction to Mongoose
359 Reading from Your Database with Mongoose
360 Data Validation with Mongoose
361 Updating and Deleting Data Using Mongoose
362 Establishing Relationships and Embedding Documents using Mongoose
363 Tip from Angela – Deep Work
364 Feedback Time!

Putting Everything Together
365 Let’s take the ToDoList Project to the Next Level and Connect it with Mongoose
366 Rendering Database Items in the ToDoList App
367 Adding New Items to our ToDoList Database
368 Deleting Items from our ToDoList Database
369 Creating Custom Lists using Express Route Parameters
370 Adding New Items to the Custom ToDo Lists
371 Revisiting Lodash and Deleting Items from Custom ToDo Lists
372 Tip from Angela – One Step at a Time
373 Feedback Time!

Deploying Your Web Application
374 How to Deploy Web Apps with a Database
375 How to Setup MongoDB Atlas
376 Deploying an App with a Database to Heroku
377 Tip from Angela – Discipline Breeds Discipline
378 Feedback Time!

Boss Level Challenge 4 – Blog Website Upgrade
379 Challenge Give your Blog a Database
380 Step 0 – Download the Starting Files
381 Step 1 – Save Composed Posts with MongoDB
382 Step 2 – Get the Home Page to Render the Posts
383 Step 3 – Fix the bug
384 Step 4 – Render the correct blog post based on post id
385 Completed Blog with Database Solution
386 Tip from Angela – Dealing with Limitations
387 Feedback Time!

Build Your Own RESTful API From Scratch
388 What is REST
389 Creating a Database with Robo 3T
390 Set Up Server Challenge
391 Set Up Server Solution
392 GET All Articles
393 POST a New Article
394 DELTE All Articles
395 Chained Route Handlers Using Express
396 GET a Specific Article
397 PUT a Specific Article
398 PATCH a Specific Article
399 DELETE a Specific Article
400 Download the Completed Project Code
401 Tip from Angela – How to Get a Job as Programmer
402 Feedback Time!

Authentication & Security
403 Introduction to Authentication
404 Getting Set Up
405 Level 1 – Register Users with Username and Password
406 How to Review the Source Code
407 Level 2 – Database Encryption
408 Using Environment Variables to Keep Secrets Safe
409 Level 3 – Hashing Passwords
410 Hacking 101 ☣️
411 Level 4 – Salting and Hashing Passwords with bcrypt
412 What are Cookies and Sessions
413 Using Passport.js to Add Cookies and Sessions
414 Level 6 – OAuth 2.0 & How to Implement Sign In with Google
415 Finishing Up the App – Letting Users Submit Secrets
416 Download the Completed Project Code
417 Tip from Angela – How to Work as a Freelancer
418 Feedback Time!

React.js
419 What is React
420 What we will make in this React module
421 Introduction to Code Sandbox and the Structure of the Module
422 Introduction to JSX and Babel
423 JSX Code Practice
424 Javascript Expressions in JSX & ES6 Template Literals
425 Javascript Expressions in JSX Practice
426 JSX Attributes & Styling React Elements
427 Inline Styling for React Elements
428 React Styling Practice
429 React Components
430 React Components Practice
431 Javascript ES6 – Import, Export and Modules
432 Javascript ES6 Import, Export and Modules Practice
433 [Windows]​ Local Environment Setup for React Development
434 [Mac] Local Environment Setup for React Development​
435 Keeper App Project – Part 1 Challenge
436 Keeper App Part 1 Solution
437 React Props
438 React Props Practice
439 React DevTools
440 Mapping Data to Components
441 Mapping Data to Components​ Practice
442 Javascript ES6 MapFilterReduce
443 Javascript ES6 Arrow functions
444 Keeper App Project – Part 2
445 React Conditional Rendering with the Ternary Operator & AND Operator
446 Conditional Rendering Practice
447 State in React – Declarative vs. Imperative Programming
448 React Hooks – useState
449 useState Hook Practice
450 Javascript ES6 Object & Array Destructuring
451 Javascript ​ES6 Destructuring Challenge Solution
452 Event Handling in React
453 React Forms
454 Class Components vs. Functional Components
455 Changing Complex State
456 Changing Complex State Practice
457 Javascript ES6 Spread Operator
458 Javascript ES6 Spread Operator Practice
459 Managing a Component Tree
460 Managing a Component Tree Practice
461 Keeper App Project – Part 3
462 React Dependencies & Styling the Keeper App
463 Tip from Angela – How to Build Your Own Product
464 Feedback Time!

Bonus Module Ask Angela Anything
465 AAA 1 – How to Soak in Programming Concepts and more…
466 AAA 2 – Schedule for Learning to Code and more…
467 AAA 3 – How to Start Freelancing and more…
468 Feedback Time!

Next Steps
469 Vote for the Next Module!