Free Resources for Web Designers and Developers


Here is a collection of best free resources for web designers and developers in October 2018.

Negative Grid Lines

Learn about negative grid lines and how they can be useful in building a CSS Grid powered layout. An article by Michelle Barker.

Lazy Loading Images with Vue.js Directives and Intersection Observer

Mateusz Rybczonek shows how to do lazy loading with data attributes, Intersection Observer and custom directives in Vue.js

Dribbble for Sketch

Dribbble launched a suite of new plugins and integrations to allow you to share your work directly from Sketch.

Keyframes App

A web-based application providing a nice GUI to compose CSS animation and visualize the animation with a timeline.

Houdini’s Animation Worklet

Learn how you can supercharge your webapp’s animations using Animation Worklet in this reference by Surma.

Symfony Panther

“Symfony Panther” is a PHP framework from Symfony to perform E2E (End-to-end) test.

GitHub Actions: built by you, run by us

The official GitHub article on GitHub Actions, a new way to automate and customize your workflows.

An nth-letter selector in CSS

Jeremy Keith writes about how the “::nth-letter” selector in CSS is something many would like to see implemented in browsers.


An accessibility tool to help developers understand how colorblind users experience their website.

Favicon Checker

Compare your favicons on all major web browsers, including native dark and light modes.

Experimental Gradient Editor

A fantastic gradient editor made by David Aern


A collection of beautiful color palettes. The collection offers thousands of hand-picked colour palettes.


Eagle.js is a framework to create slides built on top of Vue.js so you can easily re-use custom Vue.js components within the slides.


GrapeJS is an open-source web builder that allows you to build web pages simply by dragging and dropping components.


Vapid is a new CMS built with Node.js with an interesting and unique approach.

A web-based application to compose CSS Grid.


Colorbox is Lyft initiative to generate a color composition that complies with the color Accessiblity standard.


WP CLI Notification

The name says it all. It’s a custom WP-CLI package to display OS notifications when WP-CLI is already done executing. Quite fancy.

Scroll Hint

ScrollHint is a JavaScript library that allows you to create an element over the top to show that a section on your webpage is scrollable.


A JavaScript library to add validation to an input.


Most people probably already familiar on how to select multiple folders or files in their computer; they’ll typically hold their mouse-click and drag it around the files or folders they’d like to select.


Webdash is a tool that can display your project into GUI interface.


A JavaScript framework to build web interface.


A JavaScript library that implements jQuery Core specification for DOM (Document Object Model) and is designed to be used on the server-side.