The Ultimate List of Best Free Tools & Resources for Front-End Web Developers

Front-end development is the development of those elements of a website that the customer sees and interacts with directly. It is a combination of programming skills and aesthetics.

The challenges associated with front end developers is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

So I’ve gathered a list of tools and resources for front-end developers which falls into several categories: Colors, CSS Generators, Calculators & Converters, Typography & Fonts, Icons, Analyze Website Style, Editors, Developer Tools, Testing, Performance, Optimization, Feedback, Inspiration, MOOC, Wireframes, Mockups & Prototypes, Design News & Community, Portfolio, Resources.

Colors

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

Material Color Picker

Simple Flat Colour Selector: Select the format in which you wish to copy to your clipboard with the selector at the top. Click the colour you want to copy and it will be added to your clipboard in the chosen format.

ColorDrop: A color matching tool, that lets you save you favourite color combinations.

Palettable: Generate beautiful color palettes with no prior design knowledge.

ColorFavs: It is a great tool where you can easily create a color palette by dragging and dropping your image, inserting a URL or selecting random values.

Color Safe: Beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

COLORS: A simple color palette for the web.

SwatchMatic: A color picker for real world objects. It let’s you quickly build palettes on the fly using seed colors provided by Mother Nature herself. Point your mobile’s camera at a color you like and SwatchMatic tells you the color’s name (in multiple languages) and all the values you need to recreate it, plus it gives you five other colors that nicely match it.

uiGradients: Beautiful coloured gradients.

Web Colour Data: This project aims to answer questions like: What is the most common colour/s or hue/s on the web? Do certain industries prefer certain colours over others? What colours are generally found together?

Material Design Colors: This small web app helps you visualize the material design colors and also easily copy the colors in different formats.

Material UI Colors: Google’s material UI color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.

BADA55.io: BADA55.io is about finding the most badass leet words for your CSS hex colors.

Color Hexa: It is a free color tool providing information about any color. Just type any color values in the search field and it will offer a detailed description and automatically convert it to its equivalent value in Hexadecimal, Binary, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE-LCH, XYZ and xyY.

Contrast Ratio: Easily calculate color contrast ratios

Fifty Shades of Grey For Web Designers:

COLOURlovers: User created & shared color palette inspiration

Colllor: Color palette generator

Paletton: Tool for creating color combinations

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

CSS Generators

CSS3.me: This one is very minimal and stylish, but also very functional. It gives you the ability to change and set the border radius, drop shadow, the gradient, and opacity.

CSS3 Generator: It is both functional and nicely-desined generator. I think this is one of my favorites, because the design and UI is so clean.

CSS3-Tricks Button Maker: This one is almost entirely controllable by a drag and drop slider.

CSS3 Button.net: The design of this one may be lacking, but it offers a lot more choice than the previous one. It offers the ability to add multiple text shadows, inner-shadows, border, and font colors. It may be hard to figure out at first but you will get it if you just play with it for a few minutes.

Ultimate CSS Gradient Generator: CSS gradient generator

CSS3 Button Generator: This one gives you one big button to manipulate shadow, border, color, and on top of that it gives you the ability to edit the hover-over.

Border-Radius: This is a minimal little tool, that is very practical and simple. All you do is simply set how much of a rounded edge you want on each corner. And then you just check off what sort of browser prefix you want included, and that’s it.

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

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

CSS Arrow Please: CSS arrow generator

CSS3 Patterns Gallery: CSS3 patterns gallery

Layout Generator: Create CSS layout

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

Calculators & Converters

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

PXtoEM: Convert pixels to EM

Density Buckets: Screen density converter for Android and iOS

Density Converter: Pixel Density Converter

Is This Retina?: DPI/PPI Display calculator

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

Typography & Fonts

Google Fonts: Open source web fonts

Fontspiration: A building tool for creating fun, animated typographic masterpieces.

Gridlover: The tool to establish a typographic system with modular scale and vertical rhythm.

Type Genius: Find the perfect font combo for your next project.

Type Nugget: Type Nugget is an online typesetting tool that gives you fine control over a robust base for hella fine web type — all via a pleasant user interface.

TypeWonder: Test web fonts on any live website

Fit Text: A jQuery plugin for inflating web type

TypographyEditor: Typography Editor is a free and online tool to make typographic posters and images.

Just My Type:

Typecast: A browser-based app for creating beautiful, realistic and consistent designs based on typography.

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

What Font Is: Identify font from a image

FontStruct: FontStruct is a free font-building tool sponsored by the world’s leading retailer of digital type, FontShop. FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

Flipping Typical: A typography tool, type in the word you want to see and instantly view it set in the typefaces on your computer.

Font Swapper: Preview how websites will look with fonts from Webtype.

tinytype: A compatibility table showing the available default system fonts across different mobile platforms.

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

Tiff: Find out difference between Google fonts

Best Free Fonts 2016: My collection of this year free fonts

Icons

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

Font Awesome: Scalable vector icons that can instantly be customized

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

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

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

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

Editors

CodePen: A showcase of advanced techniques with editable source code

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

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

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

QUnit: A JavaScript Unit Testing framework

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

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

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

Feedback

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

Design Drop: A tool for collecting design feedback

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

Inspiration

CoDrops: CoDrops have an extremely popular weekly (or so) collective, which is essentially a roundup of great resources and inspirational items for web designers and other creatives. Very popular and extremely useful.

Designrfix — Graphic Design Inspiration — Tutorials & Web Design Resources: Another essential graphic and web design blog.

OneXtraPixel — Web Design and Development Online Magazine

An online magazine for designers and developers, OXP shares tips, tutorials, tools, resources and other articles on design and development.

MonsterPost: TemplateMonster are mostly a templates company, but they also have a great blog going on. It’s not just about their own stuff too — they make sure they provide plenty of great web design stuff.

FromUpNorth — High Quality Design inspiration

DesignShack: Once again a wealth of resources is shared with the design community.

Vandelay Design: Lots and lots of excellent resources, freebies, articles, deals, WordPress stuff and lots more.

DesignM.ag: DesignM.ag is a community for designers, web designers and developers.

Reddit Web_design

Not really a blog, it’s a subreddit.

However, the upvoting reddit mechanics ensure that anything which rises to the top is essential reading for web designers. It’s very popular, one of the largest subreddits.

Abduzeedo — Design Inspiration and Tutorials: Abduzeedo is another of those, where you’ll find design inspiration roundups which are a must see for the designer who wants to stay on top of trends and know what’s the latest and greatest stuff around.

tutorialZine — The one place for high quality web development tutorials: It is a tutorial magazine mostly for web development tutorials. The tutorials are well written and easy to follow.

eWebDesign: eWebDesign is another source of the latest and greatest articles from web design experts. Features stories about web design, web development and tutorials. It’s actually a newsletter, so you get stuff directly into your inbox!

WebAppers: Lots of open source and free web resources.

WebNeel — Design Inspiration, Art, Photography and Animation

CSS Mania — CSS Galleries: This one is the most popular CSS showcase site. Again, a very good site to watch out for innovative web designs.

The 9 Most Essential Web Design Blogs You Need To Follow

MOOC

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

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

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

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

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

Resources

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


That’s all for today.

Have a nice day!

Bradley Nice,
Content Manager at ClickHelp.co— best online documentation tool for SaaS vendors