I've spent years helping new and old, skilled and unskilled, newbie and veteran alike. In doing so, sometimes with the help of great friends, I've amassed a pretty decent trove of useful, helpful sites, books, tools and toys. Perhaps this can help you, or someone you know.
So, without further ado:
Links on the blogs, people, and the communities you should keep up with as a webdev.
Completely non scientific listing of the things people from #reddit-webdesign actually use.
Sites, bookmarklets, tools, resources, and repos.
Useful Books & Hardcopy Resources
Where can I hire a [...]?
I want to be a better designer, where do I start?
Practice, practice, practice. You don't get better wishing you were better.
- Learn the fundamentals
- Follow the community, learn from other designers
- Get serious. Challenge yourself. Reinvent the wheel.
Where can I go to learn [...]?
HTML / CSS / JS
- 30 Days to learn HTML and CSS
- 30 Days to learn jQuery
- Mozilla Developer Network
- Don't Fear the Internet - HTML CSS Videos
New CSS3 properties
Blogs / People to Follow
Some of these are great, some of these are not so great. All of them produce stellar content every once in a while and are great places to keep an eye on for the latest and greatest in Web 4.0 internet machine technology.
Blogs to Follow
Web Development / Design Communities
Frameworks I Recommend
Be aware this is not a scientific listing of any sort, frameworks are sorted by personal experience / opinion, popularity, and usefulness. Usually in that order.
HTML / CSS
Very Useful™ Sites
- 50 Totally Free Lessons in Graphic Design Theory
- A Look into Color Theory
- Choosing Good Text Type
- Design Informer
- Method of Action
- The Elements of Typography
- The Laws of Simplicity
- The Lost Principles of Design
- TypeGenius // Font pairings
- Google Web Fonts
- The League of Moveable Type
- The Lost Type Co-Op
- What The Font // Font lookup
- Fontello // Icon Fonts Generator
Live Code Editors
|* DOM Monster||// Examines DOM for errors, efficiency, and size|
|* Edit Page||// Makes all text on a page editable|
|* Font Dragr||// Test fonts in-browser|
|* Kern.js||// Kern text with your mouse|
|* Live.js||// Detects changes in HTML / CSS and refreshes your site automatically.|
|* Min||// Eliminates all styling on a page to examine balance / layout.|
|* Prettify||// Replaces keyboard shorthand ("", '', --, and ---) with proper Unicode characters (“”, ‘’, –, and —).|
|* WhatFont||// Immediately find out what fonts are being used on a page.|
UI / UX Inspiration
|* Blitz.io||// Load testing|
|* Browserlab||// Automated Browser testing|
|* Colllor||// Palette generator|
|* Hailpixel Color||// Pallette Picker|
|* Color Code||// Advanced Pallete Generator|
|* CSS3 Generator||// CSS3 Gradient Generator|
|* Discuss.io||// Feedback tool|
|* Mixpanel||// User data, analytics|
|* Screenfly||// Test your website at different resolutions.|
|* Support Details||// "Alright, what OS and Browser are you using?"|
|* Tinypng||// PNG Compression tool|
|* WebDev Checklist||// Production benchmarking checklist|
|* Retinajs||// Retina Graphics|
Patterns / Textures
- Creative Commons Hipster Lomography
- High Resolution Placement Templates
- MockupsJar - Free Stock Photo Mockup Generator
- Unsplash - Completely free high resolution photography.
- Death to Stock - Free photos sent to your inbox every month
Lists of Lists of Lists of Collections of Lists
Online Education Websites
Useful Books and Hardcopy Resources
- Don't make me think! A Common Sense Approach to Web Usability.
- Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems