General Resources
- How to Get Started in Web Design from CSS-Tricks.com
- How to Redirect a Web Page from CSS-Tricks.com
- CodeCademy.com Web Tracks (HTML & CSS)
- 10 sites developers should have in their bookmarks
- GetHTML Lists in grid format the names and descriptions of all HTML elements in the W3C and WHATWG specs, with examples.
- Pandoc: a universal document converter
- CSS Peeper: This Chrome extension is a CSS viewer tailored for designers. The site says it “inspect[s] styles in a simple, well-organized & beautiful way.”
Creative Commons or Royalty-Free Photo Websites*
*You should verify that you have the permission to use any images you include on your website, even if you find it on these sites:
- Pexels.com: “Best free stock photos in one place”
- Unsplash.com: “Free (do whatever you want) high-resolution photos”
- unsplash.it: Beautiful placeholders using images from unsplash.com
- stockio.com: “Free Photos, Vectors, Icons, Fonts and Videos. Thousands of files for personal and commercial use”
- thestocks.im: “Here, you will find only quality photography that’s fresh, with nothing that duplicates the stock photography you’ll generally find elsewhere. We call our collection “non-stock,” and we add new free images every weekday.”
- imcreator.com/free: “A curated collection of free web design resources, all for commercial use.”
- pixabay.com: “Beautiful Free Images”
- stockvault.net: “A free stock photo community where photographers & artists can share their own photos and artwork with people from all over the world.”
- nos.twnsnd.co: “Vintage photos from the public archives, free of known copyright restrictions”
- splitshire.com: “Free stock photos and image for commercial use.”
- picjumbo.com: “Totally free photos for your commercial and personal works.”
- foter.com: “Premium Royalty-Free Stock Photos From The Foter Community.”
- lifeofpix.com: “Free high resolution photography.”
- pickupimage.com: “Free download high quality premium free stock images, public domain photos.”
More, from r/web_design:
Color Scheme Resources
- Coolrs.co
- SwissColors.net
- ColourLovers.com
- color.adobe.com
- Color Tool from Google’s Material Design resources. Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.
CSS Games
- CSS Diner: Learn CSS selectors by selecting things in the CSS Diner
- Flexbox Froggy: Learn the new flexbox properties by guiding frogs
- Flexbox Zombies: Become a master of flexbox in a ridiculously unforgettable way.
Advanced Resources
- Angular Cheat Sheet
- RegEx101.com: RegEx Tester
- HTTP Security Best Practices
- JavaScripting: The definitive source of the best
JavaScript libraries, frameworks, and plugins. - CSSCursor:This small web app helps you to choose cursor type from the showcase for use in your application.
- The Web Developer’s SEO Cheat Sheet
- Projects by Thomas Park: a collection of useful projects and plugins
- David DeSandro: Creator of MetaFizzy, which makes Masonry, Fizzy, and more fun libraries
Coding Environments
- Plunker: Plunker is an online community for creating, collaborating on and sharing your web development ideas.
- CodePen.io
- JSFiddle.net
Accessibility Resources
- 7 Things Every Designer Needs to Know About Accessibility
- WAVE Web Accessibility Tool: Online tool checks page accessibility, displays page with tags to show good and bad points.
- Notes on Using ARIA in HTML: The five rules of ARIA, checklists, and much, much more
CMS Resources
Drupal Modules & Tutorials
