Ravi Sundram
Dec 24, 2015 · 27 min read

A curated collection of links that have helped me develop my craft as a Front End Developer. Initially started in 2015 and first published as a Christmas gift to Medium readers.

A shout out goes to @ti_asif who gave me the initial inspiration to start this in the first place.

The last update to this page was 4rd July 2019. I plan to push this list to GitHub in the future.

Bookmarklets

BreakpointTester — Test your responsive design by breakpoints, not by device widths.

CSSrefresh — As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.

FFFFallback — A simple tool for bulletproof web typography.

HTML Code Sniffer — Checks HTML source code and detects violations of a defined coding standard.

MIN — Strip out colour and styles from designs, to give you a deeper insight into a design.

Pesticide — Quickly debug CSS layout issues by toggling different coloured outlines on every element.

Revenge.css — A CSS bookmarklet that reports bad html using pseudo content.

RWD Bookmarklet — A handy tool for responsive design testing.

Wirify — Turn any web page into a wireframe.

Cheat Sheets & Checklists

A-Z HTML Codes — The HTML Codes, Hexadecimal Codes and HTML Entities for ASCII characters from A-Z.

Cheetyr — A handy collection of cheatsheets and shortcuts to speed up your work.

Chrome Devtools

CSS3 Animation Cheat Sheet

Easing Functions Cheat Sheet

Emmet Cheat Sheet

HEAD — A free guide to <head> elements.

HTML Entity Lookup — This lookup allows you to quickly find the entity based on how it looks.

HTML 5 JavaScript API Index

jQuery UI Events Cheat Sheet

MDN web docs — Resources for developers by developers.

OverAPI — Collecting all cheat sheets.

OWASP Cheat Sheet Series

The Accessibility Cheatsheet

The Front-End Checklist

The Ultimate Flexbox Cheat Sheet

The Web Platform: Browser Technologies

Typography Cheatsheet — A guide to using proper typographic characters.

Unicode Character Table

WCAG 2.0 Checklists

Web Accessibility Checklist — By The Accessibility Project.

Web Developer Checklist — A checklist for web developers building modern websites.

Web Fundamentals — Google’s opinionated reference for building amazing web experiences.

Content Management Systems

CloudCannon — The Cloud CMS for Jekyll.

Contentful

DatoCMS — A fully customizable administrative area for your static websites.

Forestry.io — A full-featured CMS for your static site with support for Jekyll, Hugo and Git.

Kirby

Perch

Pulse CMS

Sir Trevor

CSS

Flexbox

Frameworks / Libraries / Toolkits

  • Animate.css — Just add water CSS animations.
  • Atomic CSS — CSS for component-based frameworks.
  • Basscss — An atomic class based CSS library.
  • Bulma — A modern CSS framework based on Flexbox.
  • Clank — An open source HTML/CSS framework for prototyping native phone/tablet applications.
  • Corpus — A collection of CSS things.
  • Crayon.css — A list of CSS variables linking colour names to hexadecimal values.
  • csswizardry-grids — A fully responsive, mobile-first, infinitely nestable,
    reversible, reorderable, simple to understand, human-friendly, robust grid system.
  • Flexbox Grid — A grid system based on the flex display property.
  • fractures — Helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.
  • Gutenberg — A modern framework to print correctly.
  • Gutenberg — A web typography starter kit.
  • Jeet — A grid system for humans.
  • Oxygen CSS — Oxygen is an object-oriented approach to CSS.
  • Primer — The CSS toolkit and guidelines that power GitHub.
  • Pure — A set of small, responsive CSS modules that you can use in every web project.
  • Responsive Grid System — A quick and easy way to create a responsive website.
  • Rucksack — A little bag of CSS superpowers.
  • Semantic UI — A development framework that helps create responsive layouts.
  • Tachyons — Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
  • ungrid — A simple responsive CSS grid.

SVG

Caption Hover Effects

CSS Animation — Tutorials and inspiration all about CSS Animation.

CSS Explain

CSS Filters Demo

CSSFX — Beautifully simple click-to-copy CSS effects.

CSS Gradients — New CSS gradient possibilities with the background-blend-mode property.

CSS3 Patterns Gallery

CSS PREprocessors — A project that aims to collect as much information about the popular CSS Preprocessors as possible.

CSS Reset — The most popular CSS Reset scripts.

CSS-Tricks Snippets — Little useful bits.

CSS Values — A quick-reference online resource for getting all possible values for every valid CSS property.

Dialog Effects — A collection of dialog effects.

Element Queries for CSS

Enduring CSS — Architect and maintain large-scale CSS codebases.

extractCSS — AJavaScript library and an online tool that lets you extract element ID, class and inline styles from HTML document and output them as CSS stylesheet.

Griddy — Learn the CSS Grid.

Learn CSS Grid — A guide to learning CSS grid.

Learn CSS Grid Layout — A series of short video tutorials showing how Grid works and some of the key features.

MaintainableCSS — An approach to writing modular, scalable, maintainable CSS.

Hover Effect Ideas — An inspirational collection of subtle hover effects.

Off-Canvas Menu Effects — Showing (off-canvas) menus stylishly.

PostCSS Tutorials — By Level Up.

Susy Tutorials

The HTML & CSS Workmanship ManualWrite front-end code that’s durable & reliable.

The Magic of CSS — By Adam Schwartz

CSS Generators

Calculators

  • PXtoEM — PX to EM conversion calculator.
  • REM Calculator — Calculate the rem sizes you need for your CSS.

Filters

Forms

Grids

Optimisation

  • Bear CSS — Helping you build a solid stylesheet foundation based on your markup.
  • CSS Compressor — Compress your CSS to increase loading speed.
  • CSS Optimizer — Optimise your CSS code.
  • CSS Shrink — Shrink your CSS.
  • Stylify Me — Gain an overview of the style guide of a site, including colours, fonts, sizing and spacing.
  • StyleStats — An evaluating tool for writing better CSS.
  • ZorroSVG — The transparency of PNGs for the file size of JPEGs.

Patterns / Gradients

Animista — CSS animations on demand.

Atomize — See how much a website can benefit by adopting Atomic CSS.

Clippy — CSS clip-path maker.

Critical Path CSS Generator — This tool extracts only the CSS needed for the above-the-fold content for the page you specify.

CSSArrow — Allows you to create and export CSS code for a custom box with an arrow extending out from the side.

CSS Keyframes Animation Generator

CSS Ruler — Explore CSS lengths.

CSS Shorthand Generator — Converts CSS properties into shorthand, making shorter and more readable stylesheets.

CSS Triangle Generator

Cursors — All the CSS cursors.

EnjoyCSS — An advanced CSS3 generator that allows you to get rid of routine coding.

Mastering the :nth-child

NTH-Test — Play around and test your nth’s out.

Snazzy Maps —A repository of different styles for Google Maps aimed towards web designers and developers.

The Sprite Generator — Get animations that work across devices, full alpha transparency and control over the timeline.

Transfonter — A modern and simple CSS @font-face generator.

Tridiv — A web-based editor for creating 3D shapes in CSS.

Type Nugget — CSS Typography & Typesetting Tool.

Colours

Converters

  • Color Hex — Information about colors including color models (RGB, HSL, HSV and CMYK), Triadic colors, monochromatic colors and analogous colors.
  • HEX to RGB Converter
  • HTML Color Codes — Get HTML colour codes, Hex colour codes, RGB and HSL values.

Flat UI

Generators

BrandColors — Official colour codes for the worlds biggest brands.

Colours — A list of colour names in CSS.

Colourgorize — Thousands of websites analyzed and searchable by color.

Color Hunt — A curated collection of beautiful colours.

Color Oracle — A free color blindness simulator.

COLOURlovers — A creative community where people from around the world create and share colours, palettes and patterns.

hexcodes — All 4,096 shorthand hexcodes.

Hexwalk — Simple colour inspiration.

Command Line / Terminal

Awesome OS X Command Line — A curated list of shell commands and tools specific to OS X.

EditorConfig — Helps developers define and maintain consistent coding styles between different editors and IDEs.

iTerm 2 — A terminal emulator for Mac OS.

Unix Toolbox — A collection of Unix/Linux/BSD commands and tasks which are useful for IT work.

Email Marketing

CSS Inliners

Guides

Bulletproof background images — Use rock-solid background images in your HTML email with some help from VML and CSS.

Bulletproof email buttons — Design gorgeous buttons using progressively enhanced VML and CSS.

Convert a static email to a responsive design — By CoffeeCup Software.

EDMdesigner — Responsive email design made simple.

Email Client Support for Interactive and Dynamic CSS

EmailComb — Remove unused CSS from email templates.

Image Carousel for Email — A tool to create an image carousel that will render in many major email clients.

Inkbrush — A web based email design and coding tool.

Look What You Can Do — MailChimp newsletter gallery.

mjml — A markup language designed to reduce the pain of coding a responsive email.

Outline Mail — An email framework with a bunch of fully trusted responsive components.

Really Good Emails — The best email designs in the universe.

Responsive Email Patterns — A collection of patterns & modules for responsive email.

The Drop Calc Method to Create Responsive HTML Emails

The Ultimate Guide to CSS — A complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet.

Google Chrome Extensions

Accessibility Developer Tools — Accessibility audit and element properties.

Alix — Allows you to lint your HTML for Accessibility issues simply by applying a stylesheet that makes use of advanced CSS selectors.

Appspector — Detect web applications and javascript libraries run on browsing website.

Awesome Screenshot — Screen capture for all or part of any web page.

Built With — Find out the technology behind any website.

Bukket — Screen capture and record animated GIFs all within the browser.

Chrome Developer Tools

Clear Cache — Clear your cache and browsing data with a single click of a button.

ColorZilla — Includes a colour picker, eye dropper, gradient generator and other advanced colour tools (available for Firefox too).

Context Menu Search — Use the right-click menu to search for selected text in different search engines.

CSSPeeper — A smart CSS viewer tailored for Designers.

CSS Dig — Collect and analyse CSS.

CSS Shapes Editor — Interactive editor for CSS Shapes.

DevTools Author — A selection of author settings for Chrome Developer Tools.

DevTools Snippets — A collection of helpful tools to use inside of browser devtools.

Dewey — Better bookmarks.

DiagnostiCSS — Helps visually detect any potentially invalid, inaccesible or erroneous HTML markup.

Emmet Re:View — Shows views with all responsive media-query breakpoints for current page.

Form Filler — Fills all form inputs in a page with dummy data.

Ghostery — See who is tracking your web browsing.

Go F#cking Work — Redirect unproductive sites to motivational messages.

Image Size Info — Inserts an option in the image context menu to view image width, height and file size.

Image Tool — Helps you easily read and understand design specs.

JSONView — Validate and view JSON documents.

Linkclump — Lets you open, copy or bookmark multiple links at the same time.

Marmoset — Create code snapshots.

Neo Vision — Syntax-highlights source code files with customisable themes.

OneTab — Save up to 95% memory and reduce tab clutter.

Page Ruler — Draw a rule to get pixel dimensions and positioning, and measure elements on any web page.

Palette Creator — Create a colour palette from any image.

Palette Ninja — An online tool that allows you to create harmonious color schemes.

Panda — Daily news and inspiration for designers, developers & entrepreneurs.

PerfectPixel — Develop websites with per-pixel accuracy.

Performance-Analyser — Get insight into the performance of the website in the current tab — sort of a mini live version of WebPageTest.

Pesticide — Inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.

PHP Console — Display PHP errors & var dumps in Google Chrome console and notification popups, execute PHP code remotely.

Play — Listen to any Medium article.

Portent’s SEO Page Review — Review common SEO elements and issues on the page.

React Developer Tools — Adds React debugging tools to the Chrome Developer Tools.

Rename Email — Rename unclear email subject headlines.

Responsive Web Design Tester — Quickly preview your responsive website designs at the dimensions they will be seen on popular mobile devices.

Search Overflow — Search Stack Overflow answers right from DevTools.

Session Buddy — A session manager for your browser.

simple-debug.css — Debug your layouts.

Show me the React — Highlights React components on the page.

SnappySnippet — Easily extract CSS and HTML from selected element. Then send it to CodePen, jsFiddle or JS Bin with one click.

Toby — Manage and organise tabs and easily find content.

User-Agent Switcher — Switches User-Agent strings to mimic, spoof or fake other browsers or bots.

Web Developer — Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.

Web Developer Checklist — Analyse any web page for violation of best practices.

Wildfire — Record browser actions then replay immediately.

Window Resizer — Resize browser window to emulate various screen resolutions.

Gulp & Grunt

Automate your tasks easily with Gulp

Building with Gulp

Grulp — Moving from Grunt to Gulp (or vice-versa)? Get the list of ready-to-use grunt/gulp plugins for your next project.

Grunt Devtools — Extends the Developer Tools, adding tools for Grunt.

Grunt Email Workflow — A Grunt workflow for designing and testing responsive HTML email templates with SCSS.

Gulpsetup — A simple starting point for using GulpJS.

Gulp for Beginners

Gulp Plugin Registry

Gulp Recipes

Offroadcode Starter Kit

Icons & Images

Compfight — Locate the visual inspiration you need.

Cool Backgrounds — A collection of tools to create compelling, colourful images for blogs, social media, and websites.

Death to Stock — A quality, unique, stock photo resource for creatives looking to stand out.

Fontastic — Icon font generator.

Fontello — A tool to build custom fonts with icons.

Freepik — Free vector art, illustrations, icons, PSD and photos.

GlyphSearch — Search for icons from Font Awesome, Glyphicons, IcoMoon, Ionicons, Octicons and Foundation.

Gratisography — Free high-resolution pictures you can use on your personal and commercial projects.

Iconfinder — The leading search engine and market place for vector icons in SVG, PNG, CSH and AI format.

IcoMoon — Pixel perfect icon solutions.

iconmonstr — Free simple icons.

Iconogen — Favicon, Windows 8 Tiles, Apple Touch Icon and iOS7 Icon Generator.

IM Free — Free, only high quality, resources for website building &amp; other design projects.

Jam icons — Free 890+ handcrafted, pixel perfect icons to make your website awesome.

Little Visuals — 7 hi-res images zipped up in your inbox every 7 days (sadly discontinued but website still active).

Mazwai — Download free creative commons HD video clips & footages.

Negative Space — Beautiful free images for personal and commercial use.

New Old Stock — Vintage photos from the public archives, free of known copyright restrictions.

Nucleo — A library of 2000 responsive icons and a web application to manage and customize them.

Pexels— Free stock photos you can use everywhere.

Picdrome — A growing public domain digital photography collection.

picjumbo — 1500+ free images in high resolution for every designer, blogger and entrepreneur.

pixabay — Over 1,300,000 free high quality photos, illustrations, and vector graphics.

Reddit Free_images —Free high-resolution photos.

Skitterphoto — a place to find, show and share public domain photos.

StockSnap — The #1 source for beautiful free photos.

SVG Icons — Ready to use SVG icons for the web.

The Stocks — Best royalty free stock photos, videos, mockups, icons and fonts.

Unsplash — Beautiful, free photos for everyone.

Inspiration

AGDA Design Awards

Best About Pages

Codrops Collective Archive — The latest news and resources from the web design & web development community.

codedoodl.es — Creative code sketches.

Design Thinking — Branding insights from Peopledesign.

Inspiring Online — Cool creative things online.

InVision DesignTalks — Discover insight from top minds in design with DesignTalks from InVision.

Media Queries — A collection of inspirational websites using media queries and responsive web design.

Screenings — Watch a range of videos relating to design.

The DO Lectures — Inspirational talks.

The Industry — Covering design focused startups and people.

The Setup — What do people use to get stuff done?

Typeradio — Interviews about design.

Virgin America — Introduction to new website.

Ways We Work — Conversations with people doing the work they love.

JavaScript

Libraries / Plugins

  • Adapt.js — A JavaScript file that determines which CSS file to load before the browser renders a page.
  • alertify.js — Browser dialogs never looked so good.
  • anime.js — A flexible JavaScript animation library.
  • Animsition — A jQuery plugin for CSS animated page transitions.
  • DataTables — Add advanced interaction controls to any HTML table.
  • enquire.js — Media queries in JavaScript.
  • FitText — A plugin for inflating web type.
  • FitVids.JS — jQuery plugin for fluid width video embeds.
  • FlowType.JS — Font size based on element width.
  • FormatJS — Internationalize your web apps on the client & server.
  • Formvalidation.io — Validate your form fields.
  • Head.JS — A small library for responsive design, feature detection & resource loading.
  • Intention.js — A light-weight and clear way to dynamically restructure HTML in a responsive manner.
  • JCF (JavaScript Custom Forms) — This library allows crossbrowser customization of form elements using CSS.
  • jQuery Credit Card Validator
  • Paper.js — An open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
  • Polyfill.io — Just the polyfills you need for your site, tailored to each browser.
  • Readmore.js — Collapse and expand long blocks of text with “Read more” and “Close” links.
  • Reframe.js — A javascript plugin that makes unresponsive elements responsive.
  • Response JS — An experimental jQuery plugin that can dynamically swap content based on breakpoints and data attributes.
  • Responsify.js — Helps to make images truly responsive.
  • Restive.js — A jQuery plugin that helps you to add features to your website to enable it to respond and adapt.
  • ScrollWatch — Easily add lazy loading, infinite scrolling, or any other dynamic interaction based on scroll position.
  • simpleWeather — Display current weather data for any location.
  • snabbt.js — A minimalistic animation library.
  • Snap.svg — The JavaScript SVG library for the modern web.
  • Trunk-js — Hide top navigation into a navigation drawer on tablet and mobile phones.
  • WOW.js — Reveal animations when you scroll.

Angular Collection — By Juri Strumpflohner.

Every JavaScript project you should be looking into

Exercism JavaScript — A bunch of great little exercises.

Fixing These jQuery — A Guide to Debugging.

Human JavaScript — By Henrik Joreteg.

JavaScripting.com — A collection of the world’s best client-side JavaScript libraries.

JavaScript basics — Mozilla Developer Network.

JavaScript is Sexy — A list of archived articles.

JSbooks — Free JavaScript Books.

jQuery Rain — Another repository of jQuery plugins.

jQWidgets — A feature complete framework with professional touch-enabled jQuery widgets.

JSLint — The JavaScript code quality tool.

Microjs — Micro-frameworks and Micro-libraries for fun and profit.

Most Important Node.js Modules

plainJS — Vanilla JavaScript for building web applications.

Practical ES6 — A Practical Dive into ES6 and Maintainable JavaScript Modules.

React Native — Learn how to make native apps using React Native.

The Document Object Model (DOM)

The Ultimate jQuery List — A daily updated list of plugins & examples for jQuery.

TodoMVC — Helping you select an MV* framework.

Unheap — A tidy repository of jQuery plugins.

Vanilla List — The Vanilla Javascript Repository.

Vue.js — The progressive JavaScript framework.

Weight Of It — Compare JavaScript libraries by weight.

You might not need jQuery plugins

MAC Software

Atom — A hackable text editor.

Firefox Developer Edition

Fontplop — Takes TTF and OTF files and output a web-font bundle.

GitHub Desktop — Simple collaboration from your desktop.

Google Chrome Canary — The newest of the new Chrome features.

import.io — Instantly turn web pages into data.

MockFlow — Online wireframe tool for software and websites.

Mou — A Markdown editor for developers.

NameChanger — Rename a list of files quickly and easily.

Opera Mobile Emulator — Mobile debugging on your desktop.

Origami — A free tool for designing modern user interfaces.

PixelSnap — The fastest way to measure everything on screen.

Sip — A simple colour picker that instantly samples and encodes any colour on your screen.

Smaller — An HTML, CSS and JavaScript compressor which also has the ability to combine several files into one.

VirtualBox — A general-purpose full virtualizer for x86 hardware. Also see IE 7 8 9 10 11 Testing VM’s.

Performance

A Beginner’s Guide to Website Speed Optimization

Designing for Performance — Weighing Aesthetics and Speed.

Essential Image Optimisation

GTmetrix — Website speed and performance optimisation.

How to lose weight in the browser

intoDNS — Checks the health and configuration and provides a DNS report and mail server reports.

JS Manners — A tool to score scripts that 3rd parties (people or companies outside your dev team) provide for you to put on your page.

Loader — A free load testing service that allows you to stress test your web-apps & apis with thousands of concurrent connections.

netmonitor — A Chrome extension which shows background network activity of web pages after they are loaded.

Optimizilla — Shrink JPEG and PNG images to the minimum possible size while keeping the required level of quality.

PageSpeed Insights — Make your web pages fast on all devices.

PageSpeed Insights Rules

Performance Budget Builder — Lets you lay out your template types, set a size budget for each template type, then plug in the sizes for each asset category that will load in the template.

Performance Budget Calculator — Calculate your website performance budget.

Pingdom Website speed test — Enter a URL to test the load time of that page, analyse it and find bottlenecks.

PNG Crush

Speedtest — Broadband testing and analysis tools.

testmy.net — Website independent speed test (note that the measurements are to/from the TestMyNet Server).

WebPagetest — Test a website’s performance.

Website Speed Test Image Analysis Tool — This tool provides measurable and actionable information about how to go beyond simple compression.

Web Tracing Framework — Rich tools for instrumenting, analyzing, and visualizing web apps.

Yellow Lab Tools — An open source test to help speeding up heavy web pages.

YSlow — Analyse web pages and why they are slow based on Yahoo’s rules for high performance web sites.

Photoshop

Compressor.io — Compress and optimise your images.

Craft — A suite of plugins to let you design with real data in mind.

Export your vector layers from PS to SVG

Fontea — 800 Google Fonts in your Photoshop.

Ghoster — Helpful if you have a greyscale picture you want to transform to transparent.

Photoshop Etiquette — A guide to discernible web design in Photoshop.

PluginMate — Useful tools for designers.

Psddd — Beautiful Dribble freebies.

PSD Repo — Free PSDs available for download.

Oven — Bake your Photoshop layers.

Skala Preview — Sends lossless, colour accurate image previews to any iOS or Android device.

Style Tiles — A visual web design process.

Subtle Patterns — Free textures for your next web project.

SVG Layers — Import SVG files as editable vector layers.

UberPlugins — Photoshop Extensions, Tools & Resources.

Unsplash It — Beautiful placeholder images.

Project Management

Best Practices, Tips, and Resources for Project Management

Design Sprint Kit — Resources for planning and running a Google design sprint.

Kickass PM — A sense of community for Digital Project Managers.

Project and Service Communication Articles

Project management for non-project managers

Project Management Practices for Technology Teams

Project management, tools, process, plans and project planning tips

The Answer To Your Project Management Process Headaches

The Project Management Learning Center

The Ultimate Introduction to Project Management Fundamentals

The Ultimate Project Management Guide

References

Browserhacks — An extensive list of browser specific CSS and JavaScript hacks.

Can I use — Web browser compatibility reference.

Code Beautify — Free online tools to beautify, validate, minify, analyse and convert JSON, XML, JavaScript, CSS & HTML.

Codrops CSS Reference — An extensive CSS reference with all the important properties and info.

Cross Browser Handbook Knowledgebase

CSS Reference — An Alphabetical list of CSS Properties.

cssreference.io — A free visual guide to CSS.

DevDocs — Combines multiple API documentations in a fast, organised, and searchable interface.

Digital Services Standard — The Digital Service Standard ensures digital teams build government services that are simpler, clearer and faster for all users.

DPI love — Easily find the DPI/PPI of any screen.

Facebook Open Source

FireFox Site Compatibility — Browse all documents related to Firefox site compatibility.

getAwesomeness() — Retrieve all the amazing awesomeness from Github.

Gethtml — All the HTML elements.

Google Advanced Search Operators Tips and Tricks

HTML5 Please — Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them.

HTML Reference — A free guide to HTML.

HTTP Archive — Periodically crawls the top sites on the web and record detailed information about fetched resources, used web platform APIs and features, and execution traces of each page.

Is It Maintained? — Check the activity of open source projects.

Online regex tester and debugger

Public APIs — A curated list of APIs from round the web.

Responsive Resources — A collection of resources about the various aspects of responsive web design.

searchcode — Search over 20 billion lines of code.

The Agile Coach — Atlassian’s no-nonsense guide to agile development.

The Grid System — The ultimate resource in grid systems.

The Web platform: Browser technologies

What Web Can Do Today — An overview of the device integration HTML5 APIs.

Responsive

Adaptive Images — Detect your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images.

Designmodo Responsive Web Design Test Tool — Test while you build your responsive design.

deviceponsive — Show a quick preview of your website’s responsive to different device resolutions like Macbook, iPad, or iPhone. share this preview with your client.

Embed Responsively — Helps build responsive embed codes for embedding rich third-party media (i.e. YouTube, Vimeo) into responsive web pages.

Flexible Math — A quick way to get pixel widths in percentages.

Gridpak — A responsive grid generator.

Interchange — Interchange uses media queries to dynamically load responsive content that is appropriate for different users’ browsers.

Modularscale — Calculate, visualize, and learn about modular scales.

mydevice.io — Common smartphones and tablets devices values.

NavNav — A ton of CSS, jQuery, and JavaScript responsive navigation examples, demos, and tutorials from all over the web.

responsivepx — Find that tricky breakpoint.

Responsiver — Responsive design testing.

Responsive.is — Display and present responsive web designs.

Responsive Image Breakpoints Generator — Easily generate the optimal responsive image dimensions.

Responsive Image Hotspots Creator

Responsive Navigation — Popular methods of dealing with responsive navigation.

Responsive Patterns — A series of patterns that are useful when putting together your website designs.

Responsive Web Page Layouts — Layout your pages in minutes.

RQRWD —A tool which allows you to work out the elements width in % from px.

Screenfly — Test your website at different screen resolutions.

Screen Sizes — Quickly find the screen specifications of the most popular devices and monitors currently on the market.

Sizzy — Preview changes on multiple devices instantly.

The W3C Mobile Checker

Viewport Resizer — Build your own bookmarklet to test any website’s responsiveness.

Viewport Sizes — A large collection of device viewport sizes to assist with responsive design and mobile web sites/apps.

Sass

A comprehensive guide to Sass

A Visual Guide to Sass & Compass Color Functions

Atomic Docs — A style guide generator and component manager.

Buttons — A CSS button library built with SASS & Compass.

css2sass — Convert CSS Snippets to SASS code.

css2scss — This converter takes (valid) CSS and generates compass (scss) code, SASS or cleaned css for it.

Koala — A GUI application for Less, Sass, Compass and CoffeeScript compilation.

Sache — Find the perfect tool for your next Sass or Compass project.

Sass.js — An online Playground for Sass.js.

Sass Break — An ongoing list of Sass resources.

Sass Compatibility — Reporting incompatibilities between different Sass engines.

SassDoc — A documentation system.

SassMe — Visualise SASS color functions without compiling.

sassify — A configurable CSS to SCSS converter.

Sass Guidelines — An opinionated style guide for writing maintainable and scalable Sass.

Sassisfaction — A place to share Sass resources.

Sassquatch — Live Sass previews for OS X.

SassMeister — A playground for Sass, Compass, and LibSass. Add some Sass and SassMeister will show you the rendered CSS.

Sass Reference — SitePoint Sass Reference.

Scout-App — Sass without hassle.

The Ultimate SASS Resources & Tools

Mixins

Style Guides

50 Meticulous Style Guides Every Startup Should See Before Launching

Bits — The front-end component library for 24 ways.

Buffer

BuzzFeed

Code For America

Crew’s App Style Guide

Disqus

Envato Market Styleguide

Find Guidelines — The fastest way to find brand assets.

Griffith University — Web style guide.

Lonely Planet

Material UI

MailChimp UX

Mozilla Sandstone

Nachos — Trello’s design system.

Poor Man’s Styleguide — A quick-and-dirty frontend styleguide, designed to be copied and pasted into your CMS.

Primer

Pure

Starbuck’s Style Guide

Style Guide Guide — A boilerplate for creating superb style guides.

Thumbprint

Uber Brand Guide

Website Style Guide Resources

Yelp

Testing

Browsersync — Synchronised browser testing.

Browser Shots — Check browser compatibility.

Building a Device Lab

Can I use — Tells you which browsers support what and from which version.

Clean Code Linters

Detergent.io — Clean and convert the text from the client brief (PSD, Sketch, Illustrator, Word, Excel, etc), so you can paste it straight into the HTML code.

Dirty Markup — Tidy up your HTML, CSS, and JavaScript code.

Firefox Developer Tools — Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.

Fold Tester — Uses data from millions of website visits to visualize how likely a visitor is to see your content.

HTML5 Please — Look up HTML5 & CSS3 features, know if they are ready to use, and if so find out how you should use them.

IE NetRenderer — Allows you to check how a website is rendered by an older version of Internet Explorer.

JavaScript Performance Playground — An easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

Microsoft Edge Developer Tools

NTH-TEST — A quick and easy way to test your nth-child and nth-of-type.

Paragrabbr — A tool for prototyping the paragraph content of your website.

Peek — See and hear a 5-minute video of a real person using your site or app.

Perfmap — A heatmap of resources loaded in the browser.

Qaid — Helps you replicate your design in the browser.

Quality Assurance Tools — A curated list of tools and applications specifically focused on improving the quality of your software.

SSL Check — Scan your website for non-secure content.

TogetherJS — Add real time collaboration features to your website.

Visual Regression Testing — A free 6-day email course on WebdriverCSS.

W3C Developer Tools — Lead your code to its full potential
with great and open source tools.

Your Browser — Can be given to clients to determine their browser, operating system & screen resolution.

User Interface

AlloyUI — Robust UI tools at your fingertips.

BackgroundCheck — Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

Building a ubiquitous design language with components

CALL to IDEA — Components, Layouts & Utilities.

Daily UI Design Challenge — Become a better designer in 100 days.

Designing for iOS

Eager — Improve your website for free with apps you can install in seconds.

Laws of UX — A collection of the maxims and principles that designers can consider when building user interfaces.

Mapbox — A mapping platform for developers.

Natasha Hockey Pattern Library — The purpose of this pattern library is to showcase and display the components used in a portfolio website.

OS X Human Interface Guidelines

Picksum Ipsum — A badass text generator will give you the best lines from some of the hardest Hollywood legends.

Random Thing Generator — For when you really need to come up with random names, places and businesses and just can’t.

Random User Generator — Like Lorem Ipsum, but for people.

TabPatterns — Tablet UI Patterns.

The Pattern Library — A compilation of free patterns.

UI Talks — Find talks on anything related to User Experience design.

UX Crash Course: 31 Fundamentals

UX Recorder — Mobile web site testing for iOS.

UX, Usability and User-Interface Design — By Userbrain.

Web Accessibility

90 examples of A11y compliant colour combinations

A11y — Web accessibility audits powered by the Chrome Accessibility Developer Tools.

A11Y Style Guide

Assets Framework — The Section 508 Compliant Responsive Framework for Front-End Development.

ChromeLens — A set of developer tools that allow developers to code websites better suited for the visually impaired.

Color Safe — Explore accessible colour palettes for your website based on Web Content Accessibility Guidelines (WCAG).

Hex Naw — A color accessibility tool for designers and developers.

Input Type Sandbox — Test onscreen keyboards, input types, patterns and attributes.

Swiffy — A Flash to HTML5 converter that helps makes SWF files available to a larger audience.

tota11y — An accessibility visualisation toolkit.

WAVE — Web accessibility evaluation tool.

Web Accessibility Evaluation Tools List — Software programs or online services that help you determine if web content meets accessibility guidelines.

WebAIM Color Contrast Checker

Web Components — Discuss & share web components.

Web Fonts / Typography

About Web Fonts — Examples of Google web fonts in action.

Dummy HTML snippets for Web Designers

FFFFallback — Makes it easy to find fallback fonts, so that your designs degrade gracefully.

FontFont Subsetter — Customise your web fonts by dropping what you don’t need.

Font Family Reunion — Compatibility tables for default local fonts.

Font Flame — Like Tinder for font pairing.

Font Squirrel Webfont Generator

Gridlover — Establish a typographic system with modular scale & vertical rhythm.

Golden Ratio Typography Calculator

Just My Type — A collection of font pairings from Typekit and H&FJ.

Online Font Converter

Tiff — A type diff tool that visually contrasts the differences between two fonts.

The Elements of Typographic Style Applied to the Web

The Font Matcherator — Upload an image with type and identify the fonts that match.

The State of Web Type — Up-to-date data on support for type and typographic features on the web.

The Ultimate Guide to Font Pairing

Typetester — Test and compare more than typefaces.

Typefaces for Source Code Beautification

Type resources for designers and brand owners — By Monotype.

TypeWonder — Test web fonts on any web site on the fly.

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

Type Scale — Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

Web-Typography Tool — CSS-Typeset Matrix and code generator.

wordmark — Quickly display previews of any text with the fonts installed on your computer.

More Information

Follow this link to read about other web development tools to use.

Ravi Sundram

Written by

An unbiased Front End Developer

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