####A collection of resources for all things web design. I created this list as a failsafe incase I lost my bookmarks.
Test the performance of you site.
Use the cloud to see what you site looks like on other devices and browsers
- browserstack
- browsertap
- saucelabs
- cross browser testing
- can i use - reference
- quirksmode - reference
Minify your code for production, or beautify it for readablity.
Test your script and/or style snippets, include external libraries, save, share, embed and collaborate
- codepen
- jsbin
- jsfiddle
- json editor online - json sandbox
- regexr - ReGex sandbox
- extendsclass - SQLite sandbox
Sites that show you how to do stuff, usually with demos.
websites that showcase other websites.
- awwwards
- css design awards
- the best designs
- web design inspiration
- one page love
- siteInspire
- unmatchedstyle
- web inspiration gallery
- html inspiration
- web creme
- css winner
- web designer wall
Articles and Resources (or links to resources), some graphic design stuff, News and the occasional tutorial.
- css-tricks
- speckyboy
- A list apart
- smashing magazine
- creativebloq
- designmodo
- hongkiat
- line25
- six revisions
- design instruct
- web designer depot
- 1st web designer
- web design ledger
- queness
places to get fonts, some free, some not free.
- google fonts
- adobe typekit
- fontdeck
- webtype
- font squirrel
- my fonts
- font spring
- fonts.com
- dafont
- font space
- typewolf - A great showcase of fonts used in websites.
images you can use for free
- the stocks
- unsplash
- re:splashed
- pixabay
- magdeleine
- gratisography
- rgb stock
- raumrot
- canva - If you didn't find what you were looking for, heres a list of over 70 websites that provide stock photography.
- b64.io - image to base64 conversion.
- ezgif - video to gif conversion.
- PXtoEM - convert your font size between pixels, em, percentages and points.
- colorhexa - rgb, hex, hsv color conversion.
- color thief - color palette generator.
- pictaculous - color palette generator.
- adobe color - color palette generator.
- lipsum - dummy lorem ipsum text generator.
- lorempixel - placeholder images.
- placekitten - placeholder images - just kittens.
- placehold.it - solid color placeholder images with dimensions.
- favicon html generator - generate the html for favicons, apple touch icons, win tiles...
- icomoon - create a custom iconfont by picking from loads of icon sets.
- spritebox - image sprite css generator.
- clippy - clip path generator.
- css3factory - gradient generator (simple interface)
- colorzilla - gradient generator (inc. radial grad.)
- gridpak - css grid system generator.
- webfont-generator - @fontface webfont generator.
people who know more about the web than I.
- Andy Osmani
- Paul Irish
- Nicolas Gallagher
- David Walsh
- Peter-Paul Koch
- Todd Motto
- David DeSandro
- Scott Jehl
- jpeg-optimizer - compress and/or shrink jpegs.
- tinypng - same as above but for .png's
- compressor - .png, .jpg, .svg nd .gif
- compress now - similar to the one above.
- svg-editor - amazing svg editor and compressor.
- html5-boilerplate - the original boilerplate.
- cdnjs - you'll probably find that javascript plugin that you use is also hosted here.
- RawGit - RawGit serves raw files directly from GitHub with proper Content-Type headers.
- nylllon - A collection of useful threads for designers. kinda like this repo.
- web field manual - A curated list of resources - again, kinda like this.
- stack overflow - Stuck? get your questions answered here.
- screen sizes - A list of screen sizes.
- screen queries - a bit like chrome dev tools device emulation.
- webkit-filters - webkit filters playground.
- Redacted font - Keep your wireframes free of distracting lorem ipsum text.
- w3c validator - check to see if your site is valid.
- Evanto - Lots and lots of resources, but you have to pay for them.
- chrome experiments - all kinds of funky stuff.
- muz.li - chrome extension - design inspiration for your home page tab.
- 30 css selectors - Embarrassingly I consult this list at least twice a week!