Web Development Course Resources List

 

Intro

• Download the Course Syllabus
• App Brewery Cornell Notes Template
• Google Chrome Browser (recommended)
  
• Atom Text Editor (recommended)
• List of Atom Plugins

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

Personal CV Website

• 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
• MDN Table documentation
• MDN Input documentation

Hosting your Website on Github

• Publish your website using Github Pages

CSS

• CSS Cheatsheet from Stanford University
• Download the Debugging Problem Starting Files
• Download the Bacon Fan Site Starting Files
• Toasty Technology’s 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
• Markus Vogl Interactive Box Model Demo
• Download the CSS-My Site Images
• Download the StubCode.html file
• Is <img> element block level or inline level?
• W3Schools documentation on Web Safe Fonts
• MDN documentation reference on CSS Properties and Pseudoclasses
• Broccoli and other images from emojipedia.org
• Z-Index Documentation on MDN
• Download Stacking Order Flowchart
• Completed Personal Site Project

Bootstrap

• Get Boostrap 4
• Bootstrap Nav Bar CodePly
• Bootstrap Grids Codeply
• TinDog Starting Files
• TinDog Completed Website Files

Javascript

• The History of Internet Explorer Comic Strip
• Writing Good Javascript Guidelines
• Karel Online IDE
• 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.

The Document Object Model (DOM)

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

Advanced Javascript and DOM Manipulation

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

The Command Line

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

Node.js

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

Git, Github and Version Control

• Download the Git Cheatsheet
• Download the Git Quick Reference

Express.js

• Express Documentation
• List of HTTP Status Codes

APIs

• What is cURL?
• When Instagram killed Followgram
• HTTP Status Codes
• Yahoo Weather API
• W3Schools JSON vs. XML
• Chrome Browser Add-on Json Viewer Awesome

EJS Express Challenge

• Gitignore and the absence of NPM Modules on GitHub Projects 
  
• EJS documentation (e.g., on tags)
• MDN Array forEach() loop
• Need sample text? Use a lorem ipsum generator: loremipsum.io
• Katacoda NodeJS Playground
• ExpressJS Route Parameters
• Lodash Utility Library

Deploying Your Server to Heroku

• Heroku
• Heroku Documentation

EJS and Templating

• app.js Starting File
• Documentation on var
• Documentation on let
• Documentation on const
• Download styles.css for Todolist v1 App

EJS Challenge – Blog Website

• Starting files for the challenge
• Completed Website Final Code

Databases

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

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

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

Mongoose

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

Todolist v2

• 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

Deploying Databases with MongoDB Atlas

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

Blog with a Database Challenge

• Download the starting filesDownload the starting files
• Download the Completed Project

Build Your Own RESTful API

• Chained Route Handlers Challenge Solution
• Download the Completed Project

Authentication and 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
• Check if your password is compromised
• Plaintext Offenders
• Password Strength Checker
• Hacker Typer
• Install NVM
• Passport
• Google Developers

Bonus: Design School 101

• Curated colour palettes on Color Hunt
• Popular iOS colours from Flat UI Colors
• Popular Android colours from Material Palette
• Nabbing your favourite colours with Color Zilla
• Create Emotion with Color in UX Design
• Sign up for the App Brewery Newsletter
• 26 Digital Typography Rules for Beginners
• XD Essentials: Typography in Mobile Apps
• Need hints for good fonts? Here’s 14 typographers with their favorite fonts
• What’s The Difference Between A Font And A Typeface?
• Web Design in 4 Minutes
• Searching Dribbble by a Specific Colour
• Translating Client Speak: What Clients Say and What they Mean
• Golden Rules of User Interface Design
• Designing User Interfaces for My Mother
• Teehanlax.com