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 withthe 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
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
© The App Brewery
Terms of Use
Privacy Policy
