In order to make your life as a web designer and developer a lot easier! I found all of these tools and resources over a period of years, spending days of my precious time looking for things that I needed. So I decided to pack all of them into this so that you don't have to go through the same hassle!
Codepen has become an essential tool for me to quickly test out some ideas or do some tests.
The text editor I used in my HTML/CSS and JavaScript coding
You don't need to know every HTML5 element. I just use this excellent reference all the time.
Super useful reference, gives you HTML entitiy name, numeric code, hex code and ISO code.
A very handy printable HTML5 cheat sheet that can save you a ton of time
As with HTML5, you don't need to know every CSS3 property. Use this reference instead.
Another excellent CSS3 reference, this time from Codrops. Make sure to check this one out, too.
Up-to-date browser support tables for front-end technologies on desktop and mobile browsers.
I find myself using this handy list of the 30 most important CSS selectors from Tutplus all the time.
Just-add-water CSS animations. A simple CSS library that lates you add animations with ease.
Excellent guide on how to write better, cleaner and more reusable CSS code.
A small tool to help you using the new and powerful clip-path property.
A tool for visually generating timing animation functions to use in CSS transitions and animations.
An amazing collection of easing functions bo be used in CSS transitions and animations.
Another reference by MDN, this one is for JavaScript. This is pretty advanced stuff.
Handy reference list of all DOM events with explanations, nicely categorized.
Very handy cheatsheet to determine which JavaScript operators are evaluated first.
Called "You Might Not Need jQuery", but I use this as a complete DOM manipulation reference.
Get keyboard codes, unicodes and keycodes. Vital reference for keypress event handling.
While I don't follow this 100%, it's good to have a style guide to write better code.
For more advanced developers: learn all common JavaScript design patterns. Perfect reference.
Check out all the new ES2015/ES6 features supported by the most popular browsers.
The #1 resource for free and easy-to-use webfonts. Has a huge library of fonts.
The best, 100% free fonts for commercial use. Another well-known huge font library.
List of free fonts, from vintage-inspired typefaces to slab serifs, for a range of projects.
Web application for testing and comparing more than 2200 typefaces.
Amazing resource to learn about typography. Learn typography basics in less than 30 minutes.
A good starting point for choosing a flat design color for your next project.
Another great set of colors, inspired in material design. Generate and download your palette
Don't know what colors to use for your website? Colorhunt helps you with beautiful color palettes.
Curated color palettes inspiration. Another source for great color palettes.
Collection of beautiful color gradients for you to choose from and export to your project.
A very popular tool which allows you to create color combinations that play well together.
A simple tool that helps you find variations of any color. Perfect for hovers, borders and gradients
My #1 resource for free high-resolution photos. 10 new photos every 10 days.
The best royalty free stock photos from multiple resources, all in one place.
Free and premium stock photos for your website. Easily searchable by topic.
Over 620,000 free stock photos, vectors and art illustrations you can use anywhere.
High quality resource of tilable textured patterns, completely free to use.
Generate random user data, including photos. Like Lorem Ipsum, but for people.
Best resource for beautiful and free videos for your website. 7 new videos added every monday.
Instant iPhone and Macbook mockups. Just place your screenshot on a device, no Photoshop.
Easily create beautiful designs with drag-and-drop features and professional layouts.
My personal favorite #1 icon font, 100% free even for commercial usage.
Another highly popular icon font, consisting of 628 icons spread across several categories.
The largest database of free icons available in PNG, SVG, EPS and PSD. It's even searchable.
Create a customized icon font from your icons. Choose from 9000 icons or import your own.
The ultimate design inspiration resource, not just for web design. The show and tell for designers.
Product landing page gallery. My #1 inspiration resource when I build a landing page.
The ultimate showcase of delicious One Page websites.
A showcase of the finest web and interactive design. Currently over 4900 websites.
Get quick inspiration for common website elements such as forms, sliders, navigations, etc.
A collection of responsively designed websites for inspiration.
Great overview of the web design process: from project brief to launching the final version.
Check if your HTML markup is valid and contains no errors. Official W3C tool.
Check if your CSS code is valid and contains no errors. Official W3C tool.
Compress up to 20 JPEG and PNG images while keeping a good level of quality.
Just upload an image and this tool creates favicons for your website for all platforms.
Catch common usability problems of your website before you deploy it. Very useful.
Test if your webpage has a mobile-friendly design, according to Google's ranking factors.
Quick tool to test your webpage for performance on all devices.
Website testing tool for 10 key areas including accessibility, SEO, social media and technology.
Get a review of your website to address issues and identify opportunities to get ahead of competition.
Get free insights about traffic, visitors and conversions. A must for every website.
An excellent guide to optimize your webpage speed. This is something many devs overlook!