200+ Best Free Tools & Resources for Front-End Web Developers

Towhid
Towhid
Mar 16, 2015 · 11 min read
Image for post
Image for post

Colors

COLOURlovers: User created & shared color palette inspiration

ColorPicker: Online Color Picker Tool

Color Hex: A free color tool providing information about any color

Flat UI Colors: Web app helps you to copy the colors from Flat UI

Contrast Ratio: Easily calculate color contrast ratios

Color Safe: Color palettes based on WCAG Guidelines

Color Contrast Checker: Check color contrast by analyzing difference between foreground and a background color.

Colllor: Color palette generator

Paletton: Tool for creating color combinations

Colorpeek: Quickly preview, share and convert one or more CSS colors, including hex, RGB, HSL, RGBA and color keywords.

Colourcode: Online designer tool, which allows you to easily and intuitively combine colours.

Chrome Daltonize!: Daltonization is a technique of exposing details to color-blind users, allowing them to see what they otherwise would have missed.

Flat UI Color Picker: Flat Color Picker which gives you the perfect colors for flat designs.

SassMe: A Tool for Visualizing SASS Color Functions

HEX To RGB: Convert Hex color to RGB.

HSL to RGB: HSL to RGB / RGB to HSL converter.

Colour Scheme Calculator: Choose a starter color to calculate its color wheel including triad, complementary, analogous, and split complementary colours, plus saturation and lightness variations.

Image for post
Image for post

CSS Generators

Ultimate CSS Gradient Generator: CSS gradient generator

Colorful CSS Gradient Background Generator: Generate CSS background

EnjoyCSS: All in one CSS generator

CSS MenuMaker: Create responsive website navigation

On/Off Flip switch: Generate CSS3 On/Off flip switches

CSSmatic: Gradient, border radius, box shadow & noise texture generator

Ajaxload: Ajax loading GIF generator

Ui Parade Live Tool: Button, Form, Icon, Ribbon builder

CSS Table: CSS table generator

CSS Triangle: CSS triangle generator

CSS Arrow Please: CSS arrow generator

Patternify: A CSS Pattern Generator

CSS3 Patterns Gallery: CSS3 patterns gallery

Critical Path CSS Generator: Speed up your page render time

Button Generator: CSS button generator

Layout Generator: Create CSS layout

Tridiv: Web-based editor for creating 3D shapes in CSS

Trianglify: Generate colorful triangle meshes that can be used as SVG images and CSS backgrounds

Delaunay Triangle: Triangle pattern maker that can be used as background

Bear CSS: Generates a CSS template containing all the HTML elements, classes & IDs defined in your markup

Stylie: A fun CSS animation tool

Image for post
Image for post

Calculator & Converter

CSS2Less: Convert old CSS files to LESS files

PXtoEM: Convert pixels to EM

RWD Calculator: Turn your pixel based designs to responsive

DPI Love: Find DPI/PPI of any screen

CSS Inliner: Automatically inline your email’s CSS

Code Beautify: Beautify, Validate, Minify, Analyze and Convert your JSON, XML, JavaScript, CSS, HTML, Excel

Density Buckets: Screen density converter for Android and iOS

Pixel Density Converter: Tells you how to scale graphics between four density groups.

Is This Retina?: DPI/PPI Display calculator

Specificity Calculator: A visual way to understand CSS specificity

NTH-Test: nth-child and nth-of-type Tester

Lessify: A configurable CSS to LESS converter and LESS learning tool.

Image for post
Image for post

Typography & Font

Google Fonts: Open source web fonts

Font Squirrel: Hand picked free web fonts

Dafont: Archive of freely downloadable fonts

Font Space: Download free fonts

Type Genius: Find the perfect font combo

Golden Ratio Typography Calculator: Discover the perfect typography for your website

What Font Is: Identify font from a image

Typetester: Compare Web fonts from Adobe Edge, Google and Typekit

Tiff: Find out difference between Google fonts

Wordmark.it: Preview the output of fonts for a selected word

TypeWonder: Test web fonts on any live website

Fit Text: A jQuery plugin for inflating web type

Image for post
Image for post

Icons

Font Awesome: Scalable vector icons that can instantly be customized

Material Design Icons: 750 glyphs Material Design system icons pack by Google Design

Iconogen: Generate favicons, Windows 8 Tiles, Apple Touch icons, Android and iOS icons

Marka: Beautiful transformable icons

Maki: Icon set for web cartography

Batch: 300+ icons for web and user interface design

Fontello: Icon font generator

Fontastic: Create your own icon font

Icon Melon: SVG icons library for web

Entypo: A suite of 411 carefully crafted premium pictograms by Daniel Bruce

Gemicon: 600+ Free icon set, comes in 3 different sizes (16px, 32px, 64px)

Typicons: Free-to-use vector icons embedded in a webfont for easy use in your user interfaces

Iconmonstr: A large collection of glyph icons from a German artist

Octicons: Icon font launched by GitHub

GlyphSearch: Search for icons from Font Awesome, Glyphicons, IcoMoon, Ionicons, and Octicons

Image for post
Image for post

Analyze Website Style

Stylify Me: Overview of the style guide of a site, including colors, fonts, sizing and spacing

StyleStats: Simple tool to collect CSS statistics of a website

Colours: Find out the most common colour or hue of a website

Type-o-matic: A browser extension that finds all the fonts on a page

SnappySnippet: Easily extract CSS and HTML from selected element

Image for post
Image for post

Editor

CodePen: Show case of advanced techniques with editable source code

JSFiddle: Test and share JavaScript, CSS, HTML or CoffeeScript online

JS Bin: A live pastebin for HTML, CSS & JavaScript and a range of processors

CSSDeck: Collection of Awesome CSS and JS Creations to help out frontend developers and designers

Dabblet: An interactive CSS playground and code sharing tool

Liveweave: Liveweave is a HTML5, CSS3 & JavaScript playground for web designers and developers

Adobe Edge Reflow: Design tool that supplements your design workflow to help you create beautiful responsive designs for all screen sizes

webflow: Drag-and-drop website builder for creating professional responsive websites

Macaw: Provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS

Image for post
Image for post

Developer Tools

Chrome DevTools: Set of web authoring and debugging tools built into Google Chrome

Grunt: The JavaScript Task Runner for automating tasks

LiveReload: CSS edits and image changes apply live without needing to hit refresh button

Bower: Solution to the problem of front-end package management

Yeoman: A generator ecosystem, basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts

Can I Use: Up-to-date browser support tables for support of front-end web technologies

HTML5 Please: Look up HTML5, CSS3 & find out if they are ready for use

CSS Values: CSS Reference, Properties and Values

CSS Triggers: An invaluable reference on how CSS affects performance

Image for post
Image for post

Testing

W3C Markup Validation: Checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML

HTML_CodeSniffer: Checks HTML source code and detects violations of a defined coding standard

W3C CSS Validation: Check (CSS) and (X)HTML documents with style sheets

CSS Lint: Points out problems with your CSS code

JS Lint: JavaScript program that looks for problems in JavaScript programs

Pesticide: CSS layout debugging

PhantomCSS: Visual/CSS regression testing with PhantomJS

CSS Critic: Regression testing of CSS

DiagnostiCSS: Visually detect any potentially invalid or inaccessible HTML markup

QUnit: A JavaScript Unit Testing framework

Dromaeo: JavaScript Performance Testing

Browsershots: Cross platform browser test

Responsinator: Check how your site will look on the most popular devices

Opera Mobile Classic Emulator: Use the profile selector to spawn multiple Opera Mobile Classic instances with a defined resolution, pixel density, user interface

Image for post
Image for post

Performance

Pingdom Website Speed Test: Test & analyze the load time of a live page

WebPagetest: Website speed test from multiple locations around the globe

PageSpeed Insights: Analyzes website and suggest ways to make it load faster

GTmetrix: Grade site’s performance and provides recommendations to fix these issues

YSlow: Analyzes & offers suggestions for improving the page’s performance

Perfmap: A performance heatmap of resources loaded in the browser

Image for post
Image for post

Optimization

CSSCSS: Let you know which rulesets have duplicated declarations

Helium: javascript tool to scan your site and show unused CSS

CSS Tidy: Opensource CSS parser and optimiser

CSS Compressor: Compress your CSS to increase loading speed

CSS Dig: Take a look at all your CSS properties, their frequency and variations

JavaScript Minifier: Minify your JavaScript

FF Subsetter: Reduce the font file size to optimize bandwidth usage

Compressor.io: Reduce the size of your images while maintaining a high quality

Prefix free: add the current browser’s prefix to any CSS code only when it’s needed

Sprite Cow: Generate CSS for sprite sheets

TinyPNG: Advanced lossy compression for PNG images

Adaptive Images: Detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of images

Image for post
Image for post

Feedback

Bounce: Add feedback on a design and share it with other people

Marqueed: Capture, annotate, Share and discuss images

Design Drop: A tool for collecting design feedback

Peek: See and hear a 5-minute video of a real person using your site

Image for post
Image for post

Inspiration

Call To Idea: Examples designs, components, ideas, logins, patterns, tabs, toggles, registers, lists, galleries, comings

Land Book: Cool landing page gallery

UX Archive: Most interesting user flows from iPhone 4S and iPhone 5

UI Parade: Online catalog of inspiration for UI designers

ZURB U: Find UI design inspiration

UX Porn: User Interface Design Patterns and Wireframe Templates

UI Patterns: User Interface Design patterns

Pttrns: A collection of mobile user interface patterns

TabPattern: Tablet UI Patterns

UICloud: User Interface Design Search Engine

Use Your Interface: Library of transitional interface and interaction design patterns

Niice: A search engine for finding design inspiration

Image for post
Image for post

MOOC

Intro to the Design of Everyday Things: Informative for anyone curious about design: everyday people, technical people, designers, and non-designers alike

Delft Design Approach: Introduction to fundamentals and methods of the Delft approach to designing meaningful products and services

Prototyping Interaction: Learn the different methods of prototyping by sketching, building and testing

Introduction to Graphic Design: Learn foundational graphic design principles (fonts, colors, images, backgrounds, and layouts) and how to apply them.

Intro to HTML and CSS: Learn how to convert digital design mockups into static web pages

Web Development: Learn core web development concepts from Reddit & Hipmunk co-founder Steve Huffman.

Responsive Web Design Fundamentals: Learn the fundamentals of responsive web design with Google’s Pete LePage

Responsive Images: Learn how to work with images on the modern web, so that your images look great and load quickly on any device

HTML5 Canvas: Learn how to use the canvas; how to make compositions using shapes, images, and text; how to create effects and filters on images and how to create animations.

Developing Android Apps: Learn how to build an Android app

JavaScript Basics: Learn the JavaScript programming fundamentals

Object-Oriented JavaScript: Learn how to utilize the various object-oriented programming features within JavaScript, and more importantly, how to write reusable and maintainable libraries.

JavaScript Design Patterns: Learn the importance of separating concerns when writing JavaScript, gaining hands-on experience along the way

JavaScript Testing: Learn how to write JavaScript applications with confidence, using the red-green-refactor workflow

Building Mobile Web Experiences: Learn how to create great cross-device mobile web experiences.

UX Design for Mobile Developers: Dive into the techniques that great designers use to plan and prototype amazing apps before any code is written

UIKit Fundamentals: Build a series of simple apps to become more comfortable with the UIKit framework and master its most widely used components

Intro to jQuery: Learn how to read and make sense of jQuery’s documentation.

Intro to AJAX: Learn how to make asynchronous requests with JavaScript (using jQuery’s AJAX functionality), and gain a better understanding of what’s actually happening when you do so

Website Performance Optimization: Learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.

Gamification Design: Learn the basics of Gamification with a highly practical approach

Image for post
Image for post

Wireframes, Mockups & Prototypes

Origami: Free tool for designing modern user interfaces created by Facebook

Cacoo: Create a diagrams, site map, flowchart, mind map, wire frame, UML diagram and network diagram

Marvel: Turn your Dropbox or desktop images into web and mobile app prototypes for any device and get feedback

Placeit: Create iPhone mockups and iPad mockups

MockFlow: Online services to Plan, Build and Share work for designers

Justinmind: Interactive wireframes for web and mobile

Wireframe.cc: Free minimal wireframing tool

Image for post
Image for post

Design News & Community

/r/web_design: Web design subreddit

/r/design: Design subreddit

/r/usability: User experience, Interface design, or Human Factors subreddit

/r/userexperience: User experience design subreddit

Stack Exchange: Graphic Design: Q&A for Graphic Design professionals, students, and enthusiasts

Stack Exchange: User Experience: Q&A for user experience researchers and experts

Front-end Front: A place where front-end developers can ask questions, share interesting links, and show their work to the rest of the community

Pineapple: Hub of Tutorials, Tools and Assets for developers and designers

Lockerdome: An interest-based social network

Designer News: A community of people in design and technology

DesignFloat: Web design news & tips

The Web Blend: A community for designers, developers and tech junkies

Design News: A site that features news articles, resources and tutorials written by designers and developers

Image for post
Image for post

Portfolio

Behance: The leading online platform to showcase & discover creative work

Dribbble: A place to show and tell, promote, discover, and explore design

Cargo: Personal publishing platform aimed at creating accessible tools and a networked context to enhance the exposure of talented individuals on the Internet

DeviantArt: An online community, showcasing various forms of user-made artwork

Image for post
Image for post

WordPress Themes

Optimizer: An easy to customize multipurpose theme for people who don’t like to mess with code.

Customizr: Customizable responsive theme with flat design. Well documented and easily extendable with hooks.

Asteria: A clean responsive theme with a beautiful slider, Narrow and Wide Layout Option.

Storefront: Designed and developed by WooThemes for WooCommerce projects.

Bellini: A blazing fast WordPress theme built for creating eCommerce website.

Image for post
Image for post

Resources

Microjs: Discover Micro-Frameworks and Micro-Libraries

Vector Open Stock: Free vector graphics

Buttons: A CSS button library built with Sass & Compass

Bootflat: Open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

Animate.css: A cross-browser library of CSS animations

CSS Shake: CSS shake graphics and icons for your page or app

Subtle Patterns: Free tilable textured patterns

Placehold.it: image placeholders

Holder.js: Client side image placeholders

Hammer.js: Add multi-touch gestures to your webpage

Textillate: A simple plugin for CSS3 text animations

Timeline JS: Beautifully crafted timelines that are easy and intuitive to use

Modernizr: JavaScript library that detects HTML5 and CSS3 features in the user’s browser

Isotope: Create a filterable portfolio for your website

Polymer: Makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond

CodyHouse: A free library of HTML, CSS, JS nuggets

Cheetyr: Collection of cheat sheets and shortcuts for designers and developers

Leaflet: An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

Modest Maps: Free library for interactive maps

Templated: A collection of 846 free CSS and HTML5 site templates, designed & built by Cherry + AJ

GraphicBurger: Design resources offered for free to the community

Please share this post if you liked it!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store