With so many new web design tools emerging, it`s difficult to evaluate all of the available options. So in this post we`re helping you to find the best tools to meet your needs with list of 40 free tools for web designers and developers to help you with various coding and design tasks in 2018.

Cheatsheets

It`s rather impossible to remember all the APIs by heart. This is when cheatsheets jump in!

Docusaurus

Easy to maintain open source documentation websites.

Prettier

It is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

ECharts

This is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products.

lit

A ridiculously small responsive css framework.

PELL

The simplest and smallest WYSIWYG text editor for web, with no dependencies

Draggable

The JavaScript Drag & Drop library your grandparents warned you about.

src2png

Turn your source code into beautiful syntax-highlighted images.

stacks-cli

Analyze website stack from the terminal.

multi.js

It is a user-friendly replacement for select boxes with the multiple attribute.

SmartPhoto

The most easy to use responsive image viwer especially for mobile devices.

Uppy

It is a sleek, modular file uploader that integrates seamlessly with any application. It’s fast, easy to use and lets you worry about more important problems than building a file uploader.

Super Tiny Icons

Under 1KB each! They are miniscule SVG versions of your favourite website and app logos

Nerd Fonts

It is a project that patches developer targeted fonts with a high number of glyphs (icons).

Nord

Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax highlighting and UI. It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful ambiance.

PaperCSS

The less formal CSS framework, with a quick and easy integration.

Shards

This is a modern design system based on Bootstrap 4 that comes packed with 10 extra custom components and two pre-built landing pages. It’s also lightweight with its stylesheet weighting only ~12kb minified and gzipped.

QuickBill

Free and Simple invoicing for freelancers and businesses.

Coolors

Create, save and share beautiful palettes in seconds!

Micromodal

Tiny, dependency-free javascript library for creating accessible modal dialogs.

Checkbox

A huge library of CSS Checkboxes for every taste.

flubber

Tools for smoother shape animations.

Sizzy

A tool for testing responsive websites crazy-fast.

js2flowchart

A visualization library to convert any JavaScript code into beautiful SVG flowchart.

AR.js

Efficient Augmented Reality for the Web – 60fps on mobile!

Bottender

Make Bots in Your Way, Fast and Flexibly.

Webpack Monitor

A tool for monitoring webpack optimization metrics through the development process.

Speedracer

Collect performance metrics for your library/application.

Typefont

It is a library that detects the font of a text in a image.

bubbly-bg

Beautiful bubbly backgrounds in less than 1kB.

Sticky Sidebar

Pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it`s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed.

Eruda

Console for mobile browsers.

Algolia Places

It provides a fast, distributed and easy way to use an address search autocomplete JavaScript library on your website.

tlapse

Create a timelapse of your web development or just automatically take screenshots of your hard work

Miaow

A set of plugins for Sketch include drawing links & marks, UI Kit & Color sync, font & text replacing.

Auto-Layout

Plugin for Sketch that enables designers to design fully responsive artboards.

Cao Mei

A Free and Open Source Iconic Font Library for Developers.

MegaType

Execute typographic structure with ease.

Bulksplash

A simple command line tool that lets you bulk download images from Unsplash.

Awesome Mac

This repo is a collection of awesome Mac applications and tools for developers and designers.