Your browser (Internet Explorer 7 or lower) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.

X

WEBSITE MENU

Helpful Web Design Links

Learning Web Development

  1. A hub of web standard info WebPlatform.org.
  2. Large selection of video tutorials from Adobe TV and Adobe Video Workshop.
  3. A List Apart
  4. Smashing Magazine
  5. Codrops is cutting edge with their tricks and tips.
  6. Sitepoint
  7. CSS-Tricks
  8. Javascript Playground
  9. Code.org
  10. Code Academy
  11. Bento: Everything you need to know about web development. Neatly packaged
  12. DevDocs is an all-in-one API documentation reader for developers.
  13. Code Cheat Sheets
  14. Hacker News
  15. Teaching Materials: This site hosts a variety of CC-licensed web development curriculum.

Web Accessibility

  1. Web Standards Project
  2. CSS Validator
  3. Lynx Viewer simulates how a search engine sees your webpages. Useful for optimizing your site-recommended by Google.
  4. Usability Checklist
  5. Schema.org: Markup your pages in ways recognized by major search providers. Search engines including Bing, Google, Yahoo! and Yandex rely on this markup to improve the display of search results, making it easier for people to find the right web pages.

Free Web Design Stuff

  1. findicons.com is an icon search engine that helps you find free icons
  2. The Noun Project is constantly being updated with high quality free icons.
  3. Subtle Patterns: has retna ready repeatable patterns all for free!

Web Development

  1. Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.
  2. Pretty Diff Minify or compare your code.
  3. Create CSS3 is great online tool that let's you generate vendor prefixed CSS.
  4. CSS Comb is a tool for sorting CSS properties in a pre-defined order. There is an online tool and extensions for several text editors.
  5. Placeholder images are useful during development. I like either using either http://placehold.it/ or http://fakeimg.pl/
  6. Show off your work with placeit.breezi.com, take screen captures. Alternatively, use Android frame generator with this or that. For a live responsive solution you should check out aarnis.com

Web Fonts

  1. Free Web Fonts from Google Fonts & Adobe Web Fonts.
  2. Free Web Symbols Font that scales and is retina friendly!
  3. Create Free Icon Fonts.
  4. Special Characters reference.
  5. Compare 2 Fonts with this nifty online tool. Supports Google Fonts currently.
  6. Online Type Tool to compare sizing of Google Webfonts

Web Color

  1. Get insight on Color Pallets from any website-seems to not work well little sites-but does a good job on popular websites.
  2. Color Scheme Generator