Web Development Course Resources List


Section 1: Front-End Web Development

Section 2: Introduction to HTML

Section 3: Intermediate HTML

Section 4: Introduction to CSS

Section 5: Intermediate CSS

Section 6: Introduction to Bootstrap 4

Section 7: Intermediate Bootstrap

Section 8: Javascript

Section 9: Intermediate Javascript

Section 10: The Document Object Model (DOM)

Section 11: Boss Level Challenge 1 - The Dicee Game

Section 12: Advanced Javascript and DOM Manipulation

Section 15: The Unix Command Line

Section 17: Node.js

Section 18: Express.js with Node.js

Section 19: Git, Github and Version Control

Section 20: APIs - Application Programming Interfaces

Section 21: EJS

Section 22: Boss Level Challenge 3 - Blog Website

Section 23: Databases

Section 24: SQL

Section 25: MongoDB

Section 26: Mongoose

Section 27: Putting Everything Together

Section 28: Deploying Your Web Application

Section 29: Boss Level Challenge 4 - Blog Website Upgrade

Section 30: Build Your Own RESTful API from Scratch

Section 31: Authentication & Security

Section 32: React.js

Introduction to Code Sandbox

codesandbox.io

Introduction to JSX

START

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


Section 33: Bonus Module: Design School 101