Resources
HTML & CSS 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.
Fonts & Web Typography
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.
Tools & Apps
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.
Assets & Resources
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.
Learning More
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.