50 free web tools

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 web design tools at our disposal.

Free web tools: quick links

01. HTML CSS and Sass (this page)
02. JavaScript
03. Design tools
04. RWD and mobile
05. SVG and the best of the rest

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, website 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! Use the boxout on the right to jump to a specific area.

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 enables you to 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

This is 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 means you can 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 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.

10. Susy

50 free web tools - Susy

Wake up to Susy, a 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

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

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.

Next page: Discover free JavaScript tools...