69 fantastic free web tools

null
Free web tools: quick links

01. HTML and CSS (this page)
02. JavaScript
03. Design
04. Animation
05. Testing and build
06. Best of the rest

In many occupations, solving problems and finding ways to be more productive are top priorities. This is especially true for web designers and frontend developers who perform many micro-tasks many times over. The fact we work with open web technologies that are often used to build free and open source software means we have a plethora of web design tools at our disposal.

That also means there are mountains of tools to choose from, from scripts and plugins to WordPress themes, browser extensions, native apps, web services, libraries, frameworks, website templates, graphic packs and so much more.

We've sifted through the hundreds of options available to find the best tools to try – and the best part is, all of these are free. Use the boxout on the right (or the drop-down menu above) to jump to a specific area.

HTML and CSS tools

01. ai2html

50 free web tools - ai2html

Now you can design in Illustrator and create instant HTML and CSS

This is an open-source script that converts your Ilustrator documents to HTML and CSS, from the developers at the New York Times. It looks like a really powerful and useful tool for designers who work in Adobe Illustrator. The script is a JavaScript file that you download and drop into the scripts folder of your Illustrator install.

02. Autoprefixer

You're not still writing CSS vendor prefixes by hand, are you? Keep your development files clean and let Autoprefixer (now a PostCSS plugin) do the hard work for you as part of your build process.

03. Susy

A Sass-based layout toolkit that has been steadily gaining steam since its launch. It has a strong community and offers lots of customisable features to suit the needs of just about any project.

04. Critical

Inline CSS is a requirement for good performance. Addy Osmani's Critical is available as a Grunt plugin, and along with Filament Group’s loadCSS script, it is a great option for extracting and loading your above-the-fold styles.

05. Shoelace

Shoelace is an easy-to-use Bootstrap 3 visual grid builder. Amongst its features are responsive media query views and a fully functional preview.

06. DomFlags

50 free web tools - DomFlags

DomFlags makes it easier to navigate deeply-nested HTML elements in the DevTools

A Chrome extension that enables you to flag elements in the DOM using a domflags attribute. When the DevTools are opened, the first flagged element will be auto-inspected, and keyboard shortcuts can be used to navigate through the flags. This tool is handy for tackling a messy DOM that’s hard to navigate.

07. Sass Lint

Sass Lint is a node-based code quality tool for Sass/SCSS code, available as a Grunt or gulp plugin. Sass Lint is especially great for beginners who aren't too familiar with Sass best practice.

08. SMACSS

SMACSS is a scalable and modular architecture for CSS. There is nothing to download or install here, just a whole host of ideas for structuring projects both large and small. The website includes a free ebook for you to download, read and study.

09. BEM

BEM is a CSS methodology that is widely used throughout the industry. The simplicity of its naming convention helps to tackle specificity problems in CSS – enabling elements to be scoped to a block name using a double underscore and modified using a double dash.

10. Object Oriented CSS

OOCSS was born out of the backend development methodology. The core principle is around the reuse of code and Don’t Repeat Yourself (DRY) programming, the results of which are easier to maintain, with smaller CSS in your project.

Next page: Free JavaScript tools...