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 | 52 Hours | 21.5 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 Pathfinder
3 Syllabus Download
4 The Giant List of Resources
5 How to Get the Most Out of the Course
6 Download the 12 Rules to Learn to Code eBook
7 How Does the Internet Actually Work
8 How Do Websites Actually Work
9 What You’ll Need to Get Started – Setup Your Local Web Development Environment
10 How to Get Help When You’re Stuck

Introduction to HTML
11 Introduction to HTML
12 Join the Student Community
13 The Anatomy of an HTML Tag
14 What we’re building – HTML Personal Site
15 What is The HTML Boilerplate
16 How to Structure Text in HTML
17 HTML Lists
18 HTML Image Elements
19 The Anchor Tag Download Attribute
20 HTML Links and Anchor Tags

Intermediate HTML
21 HTML Tables
22 Get Monthly Tips and Tools to Level Up as a Developer
23 Using HTML Tables for Layout
24 HTML Tables Code Challenge
25 How to Type Emojis
26 HTML Tables Solution Walkthrough
27 HTML Forms
28 Forms in Practice – Create a Contact Me Form
29 Publish Your Website!

Introduction to CSS
30 Introduction to CSS
31 Inline CSS
32 A Quick Note About the Next Lesson
33 Internal CSS
34 External CSS
35 How to Debug CSS Code
36 The Anatomy of CSS Syntax
37 CSS Selectors
38 Classes vs. Ids

Intermediate CSS
39 What We’ll Make – Stylised Personal Site
40 Font Styling in Our Personal Site
41 Learn More About Typography
42 Adding Content to Our Website
43 CSS Sizing
44 Font Properties Challenge 1 – Change the Font Colour
45 Font Properties Challenge 2 – Change the Font Weight
46 Font Properties Challenge 3 – Change the Line Height
47 CSS Font Property Challenge Solutions
48 CSS Float and Clear
49 CSS Challenge
50 What Are Favicons
51 Stylised Personal Site Solution Walkthrough
52 [Optional] Get More Practice HTML and CSS
53 HTML Divs
54 The Box Model of Website Styling
55 CSS Display Property
56 Learn More About Web Design
57 CSS Static and Relative Positioning
58 Absolute positioning
59 The Dark Art of Centering Elements with CSS

Introduction to Bootstrap 4
60 What is Bootstrap
61 Adding Grid Layouts to Our Website
62 A Note About CSS Link Order
63 Bootstrap Containers
64 Bootstrap Buttons & Font Awesome
65 Styling Our Website Challenges and Solutions
66 Bootstrap Challenge 1
67 Solution to Bootstrap Challenge 1
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

Intermediate Bootstrap
76 The Bootstrap Carousel Part 1
77 Advanced CSS – Combining Selectors
78 Refactoring our Website Part 2
79 Advanced CSS – Selector Priority
80 Completing the Website
81 Download the Completed Website
82 The Bootstrap Carousel Part 2
83 Bootstrap Cards
84 The CSS Z-Index and Stacking Order
85 Media Query Breakpoints
86 Bootstrap Challenge 2
87 Bootstrap Challenge 2 Solution
88 How to become a Better Programmer – Code Refactoring
89 Put it into Practice – Refactor our Website Part 1

Introduction to Javascript ES6
90 Introduction to Javascript
91 Challenge Changing String Casing Solution
92 Basic Arithmetic and the Modulo Operator in Javascript
93 Increment and Decrement Expressions
94 Functions Part 1 Creating and Calling Functions
95 Functions Part 1 Challenge – The Karel Robot
96 The Karel Chess Board Solution
97 A Quick Note About the Next Lesson
98 Functions Part 2 Parameters and Arguments
99 Functions Part 3 Outputs & Return Values
100 Javascript Alerts – Adding Behaviour to Websites
101 Challenge Create a BMI Calculator
102 Challenge BMI Calculator Solution
103 Data Types
104 Javascript Variables
105 Naming and Naming Conventions for Javascript Variables
106 String Concatenation
107 String Lengths and Retrieving the Number of Characters
108 Slicing and Extracting Parts of a String
109 Challenge Changing Casing in Text

Intermediate Javascript
110 Random Number Generation in Javascript Building a Love Calculator
111 Control Statements For Loops
112 Control Statements Using If-Else Conditionals & Logic
113 Comparators and Equality
114 Combining Comparators
115 Collections Working with Javascript Arrays
116 Adding Elements and Intermediate Array Techniques
117 Control Statements While Loops
118 Solution to the 99 Bottles Challenge

The Document Object Model (DOM)
119 Adding Javascript to Websites
120 Introduction to the Document Object Model (DOM)
121 Solution to the DOM Challenge
122 Selecting HTML Elements with Javascript
123 Manipulating and Changing Styles of HTML Elements with Javascript
124 The Separation of Concerns Structure vs Style vs Behaviour
125 Text Manipulation and the Text Content Property
126 Manipulating HTML Element Attributes

Boss Level Challenge 1 – The Dicee Game
127 Challenge The Dicee Challenge
128 Download the Completed Website
129 Dicee Challenge Step 0 – Download the Skeleton Project
130 Dicee Challenge Step 1 – Create an External Javascript File
131 Dicee Challenge Step 2 – Add Dice Images
132 Dicee Challenge Step 3 – Create a Random Number
133 Dicee Challenge Step 4 – Change the img to a Random Dice
134 Dicee Challenge Step 5 – Change both img Elements
135 Dicee Challenge Step 6 – Change the Title to Display a Winner
136 The Solution to the Dicee Challenge

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

jQuery
151 What is jQuery
152 Website Animations with jQuery
153 How to Incorporate jQuery into Websites
154 How Minification Works to Reduce File Size
155 Selecting Elements with jQuery
156 Manipulating Styles with jQuery
157 Manipulating Text with jQuery
158 Manipulating Attributes with jQuery
159 Adding Event Listeners with jQuery
160 Adding and Removing Elements with jQuery

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

The Unix Command Line
185 Command Line Hyper Setup
186 Hyper not working on Windows Try Git Bash Instead
187 Understanding the Command Line. Long Live the Command Line!
188 Command Line Techniques and Directory Navigation
189 A Quick Note About the Next Lesson
190 Creating, Opening, and Removing Files through the Command Line

Backend Web Development
191 Backend Web Development Explained

Node.js
192 What is Node.js
193 Install Node.js on Mac
194 Install Node.js on Windows
195 The Power of the Command Line and How to Use Node
196 The Node REPL (Read Evaluation Print Loops)
197 How to Use the Native Node Modules
198 The NPM Package Manager and Installing External Node Modules

Express.js with Node.js
199 What is Express
200 Processing Post Requests with Body Parser
201 BMI Routing Challenge
202 Solution to the BMI Routing Challenge
203 Creating Our First Server with Express
204 Handling Requests and Responses the GET Request
205 Nodemon Installation
206 Understanding and Working with Routes
207 What We’ll Make A Calculator
208 Calculator Setup Challenge
209 Calculator Setup Challenge Solution
210 Responding to Requests with HTML Files

Git, Github and Version Control
211 Introduction to Version Control and Git
212 Version Control Using Git and the Command Line
213 GitHub and Remote Repositories
214 GitHub Private Repos are now Free!
215 Gitignore
216 Cloning
217 Branching and Merging
218 Forking and Pull Requests
219 Optional Git Challenge

APIs – Application Programming Interfaces
220 What are APIs Application Programming Interfaces Demystified
221 Using the Request Module to Get Data from an API
222 Understanding the JSON Format and Working with JSON
223 API Calls with Parameters
224 What We’ll Make A MailChimp Newsletter Sign Up Page
225 Setting Up the Newsletter Page
226 Posting Data to MailChimp’s Servers
227 Adding Success and Failure Pages to the Website
228 Deploy the Project to Heroku and Make it Live!

EJS
229 What We’ll Make A ToDoList
230 Understanding Node Module Exports How to Pass Functions and Data between Files
231 Linter Errors with EJS
232 Templates Why Do We Need Templates
233 Creating Your First EJS Templates
234 Running Code Inside the EJS Template
235 Passing Data from Your Webpage to Your Server
236 The Concept of Scope in the Context of Javascript
237 Adding Pre-Made CSS Stylesheets to Your Website
238 Understanding Templating vs. Layouts

Boss Level Challenge 3 – Blog Website
239 A New Challenge Format and What We’ll Make A Blog
240 Challenge 4 Solution
241 Challenge 5
242 Challenge 5 Solution
243 Challenge 6
244 Challenge 6 Solution
245 Challenge 7
246 Challenge 7 Solution
247 Challenge 8
248 Challenge 8 Solution
249 Challenge 9
250 Setting Up the Blog Project
251 Challenge 9 Solution
252 Challenge 10
253 Challenge 10 Solution
254 Challenge 11
255 Challenge 11 Solution
256 Challenge 12
257 Challenge 12 Solution
258 Challenge 13
259 Challenge 13 Solution
260 Challenge 14 and Solution
261 Challenge 1
262 Challenge 15
263 Challenge 15 Solution
264 Express Routing Parameters
265 Challenge 16
266 Challenge 16 Solution
267 Challenge 17
268 Challenge 17 Solution
269 Challenge 18
270 Challenge 18 Solution
271 Challenge 19
272 Challenge 1 Solution
273 Challenge 19 Solution
274 Challenge 20
275 Challenge 20 Solution
276 Challenge 21
277 Challenge 21 Solution
278 Challenge 2
279 Challenge 2 Solution
280 Challenge 3
281 Challenge 3 Solution
282 Challenge 4

Databases
283 Databases Explained SQL vs. NOSQL

SQL
284 SQL Commands CREATE Table and INSERT Data
285 SQL Commands READ, SELECT, and WHERE
286 Updating Single Values and Adding Columns in SQL
287 SQL Commands DELETE
288 Understanding SQL Relationships, Foreign Keys and Inner Joins

MongoDB
289 Installing MongoDB on Mac
290 Installing MongoDB on Windows
291 MongoDB CRUD Operations in the Shell Create
292 MongoDB CRUD Operations in the Shell Reading & Queries
293 MongoDB CRUD Operations in the Shell Update
294 MongoDB CRUD Operations in the Shell Delete
295 Relationships in MongoDB
296 Working with The Native MongoDB Driver
297 If You Have Forgotten to Quit the Mongod Server

Mongoose
298 Introduction to Mongoose
299 Reading from Your Database with Mongoose
300 Data Validation with Mongoose
301 Updating and Deleting Data Using Mongoose
302 Establishing Relationships and Embedding Documents using Mongoose

Putting Everything Together
303 Let’s take the ToDoList Project to the Next Level and Connect it with Mongoose
304 Rendering Database Items in the ToDoList App
305 Adding New Items to our ToDoList Database
306 Deleting Items from our ToDoList Database
307 Creating Custom Lists using Express Route Parameters
308 Adding New Items to the Custom ToDo Lists
309 Revisiting Lodash and Deleting Items from Custom ToDo Lists

Deploying Your Web Application
310 How to Deploy Web Apps with a Database
311 How to Setup MongoDB Atlas
312 Deploying an App with a Database to Heroku

Boss Level Challenge 4 – Blog Website Upgrade
313 Challenge Give your Blog a Database
314 Step 0 – Download the Starting Files
315 Step 1 – Save Composed Posts with MongoDB
316 Step 2 – Get the Home Page to Render the Posts
317 Step 3 – Fix the bug
318 Step 4 – Render the correct blog post based on post id
319 Completed Blog with Database Solution

Build Your Own RESTful API From Scratch
320 What is REST
321 PUT a Specific Article
322 PATCH a Specific Article
323 DELETE a Specific Article
324 Download the Completed Project Code
325 Creating a Database with Robo 3T
326 Set Up Server Challenge
327 Set Up Server Solution
328 GET All Articles
329 POST a New Article
330 DELTE All Articles
331 Chained Route Handlers Using Express
332 GET a Specific Article

Authentication & Security
333 Introduction to Authentication
334 What are Cookies and Sessions
335 Using Passport.js to Add Cookies and Sessions
336 Level 6 – OAuth 2.0 & How to Implement Sign In with Google
337 Finishing Up the App – Letting Users Submit Secrets
338 Download the Completed Project Code
339 Getting Set Up
340 Level 1 – Register Users with Username and Password
341 How to Review the Source Code
342 Level 2 – Database Encryption
343 Using Environment Variables to Keep Secrets Safe
344 Level 3 – Hashing Passwords
345 Hacking 101 ☣️
346 Level 4 – Salting and Hashing Passwords with bcrypt

React.js
347 What is React
348 React Styling Practice
349 React Components
350 React Components Practice
351 Javascript ES6 – Import, Export and Modules
352 Javascript ES6 Import, Export and Modules Practice
353 [Windows]​ Local Environment Setup for React Development
354 [Mac] Local Environment Setup for React Development​
355 Keeper App Project – Part 1 Challenge
356 Keeper App Part 1 Solution
357 React Props
358 What we will make in this React module
359 React Props Practice
360 React DevTools
361 Mapping Data to Components
362 Mapping Data to Components​ Practice
363 Javascript ES6 MapFilterReduce
364 Javascript ES6 Arrow functions
365 Keeper App Project – Part 2
366 React Conditional Rendering with the Ternary Operator & AND Operator
367 Conditional Rendering Practice
368 State in React – Declarative vs. Imperative Programming
369 Introduction to Code Sandbox and the Structure of the Module
370 React Hooks – useState
371 useState Hook Practice
372 Javascript ES6 Object & Array Destructuring
373 Javascript ​ES6 Destructuring Challenge Solution
374 Event Handling in React
375 React Forms
376 Class Components vs. Functional Components
377 Changing Complex State
378 Changing Complex State Practice
379 Javascript ES6 Spread Operator
380 Introduction to JSX and Babel
381 Javascript ES6 Spread Operator Practice
382 Managing a Component Tree
383 Managing a Component Tree Practice
384 Keeper App Project – Part 3
385 React Dependencies & Styling the Keeper App
386 JSX Code Practice
387 Javascript Expressions in JSX & ES6 Template Literals
388 Javascript Expressions in JSX Practice
389 JSX Attributes & Styling React Elements
390 Inline Styling for React Elements

Bonus Module Design School 101
391 Designer vs. Non-Designer Thinking
392 What is User Interface (UI) Design
393 The Tour Guide Approach to UI Design
394 The Importance of Alignment
395 What is Good Practice in Interaction Design
396 Colour in User Interface Design
397 The Many Ways of Designing Text Overlays
398 How to Be an Attention Architect
399 Understanding the Mood of Your Colour Palette
400 How to Combine Colours to Create Colour Palettes
401 Tools for Designing with Colour
402 Introduction to Typography
403 The Serif Type Family – Origin and Use
404 The Sans-Serif Type Family – Origin and Use
405 How Typography Determines Readability
406 How to Combine Fonts Like a Pro

Bonus Module Ask Angela Anything
407 AAA 1 – How to Soak in Programming Concepts and more…
408 AAA 2 – Schedule for Learning to Code and more…
409 AAA 3 – How to Start Freelancing and more…

Next Steps
410 Vote for the Next Module!