text editors
FTP programs
Image editing programs
- Pixlr: basic tutorial by me
How this stuff works
- How does the Internet work? by Naked Science Scrapbook
- How Websites Work by Bluehost
- 5 Reasons You Need Private Domain Registration
HTML tutorials
- Learning HTML: Guides and Tutorials at Mozilla Developer Network
- HTML & CSS at Codecademy
- W3C.org: Starting with HTML + CSS
- 30 HTML Best Practices for Beginners
- DevDocs
HTML/CSS templates — no Wix, no SquareSpace!!
free!
$$$$!
tutorials for modifying the Story template
web building resources
- Unsplash.com: great collection of free, copyright-friendly photos
- Graphic Burger: lots of graphic resources, including icons, Photoshop mockups, and other cool stuff
- Unminify.com: to “unminify” code in the templates you download
- HTML validator
- CSS validator
- Lorem Ipsum text generator
- Meet the Ipsums
fonts
- Google Fonts
- The Essential Guide to @font-face, for use with the FontSquirrel webfont kit generator
- 30 Gorgeous Web Safe Fonts
- Futuracha: not for the web, but it’s fabulous
icon resources
Other ways to generate icons:
favicon resources
tiling background images
- Background textures and patterns library: tons of options, plus you can generate stripes or gradients or text backgrounds
- BG Patterns: generate a tiling background out of a small image/icon
responsive design
- Responsive Web Design (Ethan Marcotte)
- Responsive Design (articles at A List Apart)
- HTML Responsive Web Design (w3schools.com)
- Embed Responsively: a handy tool if you’re embedding YouTube or other videos, or anything that comes in an iFrame
accessible design
- Web Accessibility Initiative :lots of resources, but start here, Introduction to Web Accessibility (W3C)
- Accessibility (articles at A List Apart)
- 7 Things every designer needs to know about accessibility (Jesse Hausler @ medium.com)
- WAVE Web Accessibility Tool
- download a free screen reader to hear what your website sounds like on a screen reader
design & coding inspiration & discussion
- The Web’s Grain, by Frank Chimero
- Priority guides: A Content-first alternative to wireframes
- CSS Zen Garden
- A List Apart
- Codeacademy
- Easy steps to create a design portfolio
- TinyJPG: compress your JPG and PNG files so that your site loads quickly
- embedding a PDF in a webpage (not a great idea, but if you’re going to do it this method looks good)
website analytics
- Google Analytics and instructions on setting up Google Analytics
- ClickHeat (free, open source)
- Browser Shots (sign up, submit your URL, and check back later for screenshots in different browsers)
