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