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
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.
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 lets you cycle through the warnings and errors in your code.
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.
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.
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.
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.