50 free web tools

The web tools movement is as hot as ever and there are plenty of free, high-quality options available. Louis Lazaris runs down 50 useful finds.

50 free web tools

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 and repeat many micro-tasks. 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 tools at our disposal.

In my ongoing research into web tools, I come across dozens of new options every week – scripts, plugins, WordPress themes, browser extensions, native apps, web services, libraries, frameworks, web templates, graphic packs and so much more.

After wading through the mountains of possibilities, I've put together a categorised list of 50 amazing web tools that can benefit web designers or frontend developers. And the best part? These web tools are all absolutely free!

Divided into categories, here you'll find a selection of top web tools in the following areas:

HTML, CSS & Sass 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. PostCSS

The community around PostCSS is gaining momentum and growing steadily. It's a toolkit of JavaScript plugins that helps you take advantage of the latest standards and conveniences in CSS development, and it’s well worth looking into.

03. 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.

04. UIkit

50 free web tools Uikit

UIkit's a plucky young competitor in the frameworks hood

While Bootstrap and Foundation are the clear winners in terms of popularity in the framework space, UIkit is worth checking out. Its core features and interface components are right up there with the big kids on the block.

05. AniCollection

AniCollection is a library of CSS animations. It sports an interface that lets you easily add animations to your collection and quickly grab the necessary HTML, CSS or JavaScript code to implement them in your project. You can even submit your own.

06. Brick

Mozilla's UI library, based on the new Web Components standard. It includes a calendar, a form that can be hooked into an IndexedDB component, a tabbar and lots more.

07. HTML_CodeSniffer

You're probably familiar with basic HTML and CSS validation. This tool is specifically for accessibility testing, and you can use it directly through the site or as a bookmarklet. It will test your HTML against WCAG 2.0 Level A, AA, AAA, and Section 508 compliance.

08. HTMLHint

50 free web tools HTMLHint

HTMLHint is a static code analysis tool for HTML

Linting has slowly overtaken validation in importance. This tool has multiple options and lets you cycle through the warnings and errors in your code.

09. DomFlags

50 free web tools DomFlags

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

A Chrome extension that lets you 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.

10. Susy

50 free web tools Susy

Wake up to Susy, popular layout toolkit based on Sass

A Sass-based layout toolkit that's gained steam over the past year or so. It has a strong community and offers lots of customisable features to suit the needs of just about any project.

11. Critical

Did you get the memo? 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.

12. 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.

13. Sass Lint

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 practices.

Next page: free JavaScript tools...