Resources

w3 Schools

A huge reference guide for building websites. The HTML and CSS References are helpful as you're learning what the properties and elements are.

MDN Web Docs

Similar to w3 schools, MDN is run by Mozilla (the same people behind Firefox). It also serves as a living reference for HTML, CSS and more.

CSSReference

cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

HTMLReference

htmlreference.io is a free visual guide to HTML. It features all elements and attributes, and explains them with illustrated and animated examples.

CSS Tricks

Helpful tips, tricks and resources for CSS and other aspects of web development.

Practical Typography: Key Rules

If you're new to design and typography, this is a helpful list (and site) to keep in mind when styling text on your site.

Google Fonts

Free to use typefaces and fonts to download and/or use on the web. Dead simple to add and (usually) lightweight.

Adobe Typekit

Another resources of typefaces and fonts to download/or use on the web. Unlike Google Fonts, you need to pay by font or have a Creative Cloud subscription to use them.

Font Squirrel

Free to use but the quality can be hit or miss. A nice alternative if Google doesn't have what you're looking for.

Font Spring

High qualiity, pay to use fonts. Has classics like Mrs. Eaves, DIN, Proxima Nova, Futura, etc.

Full Page Screen Capture - Chrome Extension

Take a screenshot of your entire web page with this handy Chrome extension.

LICEcap

Excuse the weird name, but this is the most straightforward, easy way to record a gif. Just set your FPS, resize the window over the area you want to .gif, choose the save destination, and hit record.

Something Isn't Working!

Google doc full of tips for troubleshooting your HTML & CSS. Print it out, bookmark it, let me know if you have any suggestions!

Meet the Ipsums

Lorem ipsum generators are helpful when you're building websites to populate your page with fake content to get a realistic idea of typography, layout etc.

ImageOptim

Compresses your images without losing quality to make them load faster on the page.

The Noun Project

Huge online database of royalty free/creative commons icons for you to use in your web and design projects.

Unsplash

Free to use stock images. Really. They're all totally free.

New Old Stock

Historic archival photos free from copyright restrictions that are free to use.

Subtle Patterns

Repeating background patterns for your web projects.

Code Academy

Need a refresher on what we went over in class? Want to dig in more or get ahead? Check out Code Academy - they use interactive exercises to teach coding basics for free.