The-Complete-2021-Web-Development-Bootcamp

Become a full-stack web developer with just one course. HTML, CSS, Javascript, Node, React, MongoDB and more!

Certifications

• Certificate

Awknowledgements

Course work and notes from Udemy Course by Dr. Angela Yu.

Web Development Course Resources List

Section 1: Front-End Web Development

• Download the Course Syllabus
• App Brewery Cornell Notes Template
• Submarine Cable Map
• Google Chrome Browser (recommended)
  
• Atom Text Editor (recommended)
• List of Atom Plugins
• VS Code Text Editor (good alternative)
• VS Code Extensions

Section 2: Introduction to HTML

• HTML Cheatsheet by Stanford University
• Experiment with HTML code on codepen.io
• The Adventures of Sherlock Holmes on Gutenberg.org
• MDN documentation on headings
• W3Schools documentation on headings
• Alternative reference devdocs.io
• Use the Wayback Machine to find out what websites used to look like in the olden days
• Professor Thomas H. Cormen's Personal Site (co-author of Introduction to Algorithms)
• Professor John Kleinberg's Personal Site (developed the HITS algorithm for web search)
• Professor Emeritus Donald Knuth's Personal Site (author of the Art of Computer Programming)
• Useful Atom keyboard shortcuts
• See what the emmet package can do on their cheat sheet
• List of UTF-8 characters
• See encoding differences on Windows symbol charts (e.g., Greek vs Arabic )
• See all unicode characters with a map on unicode-table.com
• Joel Spolsky on the absolute minimum any developer needs to know about unicode
• Difference between the HTML5 emphasis vs italicise tags
• Hyperlinks and the Wikigame
• Stanford HTML Cheatsheet
• A beautiful example of an online CV by Pascal Van Gemert

Section 3: Intermediate HTML

• Pascal Van Gemert's Online CV
• MDN Table Documentation
• MDN Form Documentation
• MDN Input Documentation
• Publish your website using Github Pages

Section 4: Introduction to CSS

• Stanford CSS Cheatsheet
• Toasty Technology classic 90s Style Website
• Sean Halpin's beautiful personal website
• MDN documentation on background colour
• Curated colour palettes on colorhunt.co
• Colour palette used in lectures
• Table of named colours on MDN
• Overview of default CSS applied by the browser
• MDN documentation on border-styles
• devdocs.io on CSS height
• W3Schools documentation on CSS Text
• Download the Debugging Problem Starting Files
• Download the Bacon Fan Site Starting Files
• MDN CSS Reference
• Emojipedia broccoli emoji
• CSS Properties and Pseudoclasses Reference (MDN)
• MDN :hover Documentation

Section 5: Intermediate CSS

• Sean Halpin's beautiful personal website
• Create a Favicon with favicon.cc
• My colours from colorhunt
• Markus Vogl Interactive Box Model Demo
• Download the CSS-My Site Images
• Is the img element block level or inline level?
• MDN margin documentation
• W3Schools documentation on Web Safe Fonts
• cssfontstack.com
• Google Fonts
• Download the StubCode.html file
• Lorem Ipsum Generator
• flaticon.com
• giphy.com
• MDN CSS color property documentation
• MDN font-weight documentation
• css3buttongenerator.com
• Completed Personal Site Project

Section 6: Introduction to Bootstrap 4

• Codeply: Use Bootstrap in an Online Editor
• Bootstrap Homepage
• Boostrap Examples
• How to Install Bootstrap
• Submarine Cable Map
• Websites featured on awwwards.com
• Design patterns on ui-patterns.com
• Websites on dribbble.com
• Templates on sneakpeekit.com
• Wireframing with balsamiq
• Bootstrap Navbar
• Bootstrap Colour names
• Bootstrap NavBar Codeply
• Bootstrap Grid Codeply
• TinDog Starting Files
• Bootstrap Layout Grids
• Google Fonts: Montserrat
• Google Fonts: Ubuntu
• Bootstrap Containers
• Bootstrap Buttons
• Apple Icon on Font Awesome
• Hint: CSS Transform Function
• Need sample text? Use a lorem ipsum generator: loremipsum.io

Section 7: Intermediate Bootstrap

• Bootstrap Carousel
• Bootstrap Card
• Cards Pricing Example
• Bootsnipp.com Examples
• Download Stacking Order Flowchart
• Z-Index Codeply Example
• Mobile Friendly Test
• TinDog Completed Website Files

Section 8: Web Design School - Create a Website that People Love

• Penny Juice's Website
• Penny Juice Rebranded
• Curated colour palettes on Color Hunt
• Adobe Color Wheel
• Design Challenges on Daily UI
• Page inspirations on Collect UI
• Build a design using canva.com

Section 9: Javascript

• The History of Internet Explorer Comic Strip
• Writing Good Javascript Guidelines
• Karel Online IDE

Section 10: Intermediate Javascript

• Randomness -video by Khan Academy
• Why can't programmers program? A blog past from Coding Horror
• Now that's what I call a Hacker. The legendary story retold in English.
• The original story from above link in Russian.
• Fibonacci challenge Flow Chart

Section 11: The Document Object Model (DOM)

• HTML Tree Generator
• Download the Starting Files to the DOM Challenge

Section 12: Boss Level Challenge 1 - The Dicee Game

• Download the Starting Files to the Dicee Challenge
• Download the completed Dicee Challenge
• DOM Style Javascript property names

Section 13: Advanced Javascript and DOM Manipulation

• Download the Starting Files to the Drum Kit
• Download the Completed Files to the Drum Kit

Section 16: The Unix Command Line

• Download Hyper Terminal
• For Windows Users: Download Git
• For Windows Users: Hyper Configurations
• Learn enough command line to be dangerous

Section 18: Node.js

• Download Node.js
• Node API Documentation
• Node Documentation on Exports & the Module Object
• MDN Docs on Javascript Objects
• Katacoda NodeJS Playground

Section 19: Express.js with Node.js

• Express Documentation
• List of HTTP Status Codes

Section 20: APIs - Application Programming Interfaces

• UK Police API Documentation
• murdermap.co.uk uses the Police API to plot crime
• The Kanye Rest API Endpoint
• Parameters and Paths on the SV443 Joke API
• Postman API Tool
• OpenWeatherMap API
• W3Schools JSON vs. XML
• The Rise and Rise of JSON
• Chrome Browser Add-on Json Viewer Pro (Awesome was sold to another owner)
• Node HTTPS Module Docs
• HTTP Status Codes
• HTTP Status Dogs
• Criptii Hexcadecimal Converter
• Bootstrap Sign In Example
• Get the Bootstrap CDN
• Mailchimp Getting Started
• Mailchimp API Reference
• Mailchimp List Documentation
• The Boostrap Jumptron
• Deploy to Heroku
• Heroku Node.js Documentation
• Sign up to our Newsletter (if you like)

Section 21: Git, Github and Version Control

• Download Git for Windows and Mac
• Download the Git Cheatsheet
• Download the Git Quick Reference
• Gitignore and the absence of NPM Modules on GitHub Projects

Section 22: EJS

• app.js Starting File
• EJS documentation (e.g., on tags)
• Documentation on var
• Documentation on let
• Documentation on const
• Download styles.css for Todolist v1 App

Section 23: Boss Level Challenge 3 - Blog Website

• Starting files for the challenge
• Completed Website Final Code

Section 24: Databases

• Kristof Kovacs' database comparison
• A bit of context: Internet Live Stats

Section 25: SQL

• W3Schools on SQL
• SQL Playground on sqliteonline.com
• Data Types in SQL
• Primary Keys in SQL
• Foreign Keys in SQL
• Inner Joins
• Completed SQL demo project

Section 26: MongoDB

• How to install MongoDB on Mac
• How to install MongoDB on Windows
• MongoDB installation documentation for MacOS
• MongoDB Docs on CRUD operations
• MongoDB Query Operators
• MongoDB Update Operations
• MongoDB NodeJS Driver

Section 27: Mongoose

• Mongoose: an alternative to the native MongoDB driver
• Mongoose documentation on the Model
• Mongoose documentation on data validation

Section 28: Putting Everything Together

• Todolist v2 starting files
• Mongoose findByIdAndRemove() method
• MDN on inputs of type "hidden"
• Removing items from an array with the MongoDB $pull operator
• How to capitalise Strings using Lodash
• Todolist v2 completed web app

Section 28: Deploying Your Web Application

• Sign up and deploy a free cluster with MongoDB Atlas
• Heroku documentation on getting started with NodeJS
• Deploying an existing application on Heroku

Section 30: Boss Level Challenge 4 - Blog Website Upgrade

• Download the starting files
• Download the Completed Project

Section 31: Build Your Own RESTful API from Scratch

• ExpressJS Route Parameters
• Lodash Utility Library
• Chained Route Handlers Challenge Solution
• Download the Completed Project

Section 32: Authentication & Security

• Download the Starting Files
• cryptii.com
• Numberphile Video on Enigma Part 1 and Part 2
• What are Rainbow Tables
• How do Rainbow Tables Work?
• Bad Things Happen When You Don't Secure Your API Keys
• Developer AWS gets used by Litecoin miners
• gitignore and directories
• MDN Array forEach() loop
• Check if your password is compromised
• Plaintext Offenders
• Password Strength Checker
• Hacker Typer
• Install NVM
• Passport
• Google Developers

Section 33: React.js

Introduction to Code Sandbox

codesandbox.io

Introduction to JSX

[START](https://codesandbox.io/s/introduction-to-jsx-h8ub1?fontsize=14&module=%2Fpublic%2Findex.html babeljs.io)

END

JSX Code Practice

START

END

Javascript Expressions in JSX & ES6 Template Literals

START

END

Statements vs. Expressions

Javascript Expressions in JSX Practice

START

END

JSX Attributes & Styling React Elements

START

Standard HTML attributes

Lorem Picsum

END

Inline Styling for React Elements

START

CSS Property List

END

React Styling Practice

START

END

React Components

START

Airbnb Style Guide for React

END

React Components Practice

START

END

Javascript ES6 - Import, Export and Modules

START

Node require() vs ES6 import/export

END

Javascript ES6 Import, Export and Modules Practice

START

END

[ Windows] Local Environment Setup for React Development

Nodejs.org

VS Code

Babel syntax highlighting for code editors

Sublime Babel by Josh Peng - VSCode

Create a new react app

Where to get support if you get stuck

[ Mac] Local Environment Setup for React Development

Nodejs.org

VS Code

Babel syntax highlighting for code editors

Sublime Babel by Josh Peng - VSCode

Create a new react app

Where to get support if you get stuck

Keeper App Part 1 Challenge

START

Keeper App Part 1 Solution

END

React Props

START

END

React Props Practice

START

END

React DevTools

START

Chrome React Dev Tools

Firefox React Dev Tools

END

Mapping Data to Components

START

END

Mapping Data to Components Practice

START

Emojimeanings.net

The Description List Element

END

Javascript ES6 Map/Filter/Reduce

START

Filter

Map

Reduce

Find

FindIndex

Substring

END

Javascript ES6 Arrow functions

START

Arrow Functions

END

Keeper App Project - Part 2

START

END

React Conditional Rendering with the Ternary Operator & AND Operator

START

Single Responsibility Principle

Ternary Operator Docs

Using the Logical && in React

END

Conditional Rendering Practice

START

END

State in React - Declarative vs. Imperative Programming

Demo END

React Hooks - useState

START

useState() Docs

END

useState Hook Practice

START

END

Javascript ES6 Object & Array Destructuring

START

Javascript Destructuring

Javascript ES6 Destructuring Challenge Solution

**END
**

Event Handling in React

START

HTML Event Attributes

END

React Forms

START

Controlled Components in Forms

END

Class Components vs. Functional Components

State and Lifecycle

Intro to Hooks

Should I use Hooks, classes, or a mix of both?

Demo END

Changing Complex State

START

Synthetic Events

END

Changing Complex State Practice

START

END

Javascript ES6 Spread Operator

START

Spread Syntax

JS ES6

END

Javascript ES6 Spread Operator Practice

START

END

Managing a Component Tree

START

Line Through CSS Property

Generating unique ids with the UUID Package

END

Managing a Component Tree Practice

START

END

Keeper App Project - Part 3

START

END

React Dependencies & Styling the Keeper App

START

Material UI Icons

Material UI Core

Material UI Icons Documentation

Material UI Floating Action Buttons

Zoom Component Docs

Transparent Textures

END