The top 102 coding tools and resources for web designers and developers

CUBE CSS is a CSS methodology that’s orientated towards simplicity, pragmatism and consistency. It’s designed to work with the medium that you’re working...

Code generators to help you with your front-end web projects. CSS, HTML, OpenGraph, JSON, Meta Tags, Twitter Cards and more.

Everything you need to generate awesome CSS for your next project. Customize your options and voila, your CSS code is ready to copy and paste into your project!

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and...

This tool converts SVG code into a Data URI, an encoded URL format that be used as a background-image source. In plain terms, you can place this converted SVG...

Animated website backgrounds in a few lines of code.

Collection of common CSS mistakes, and how to fix them.

A tiny, Sass-powered design-token led utility class generator, with handy helpers, that helps you to power your front-ends with a single source of truth.

Generate CSS stripes using linear-gradient background images.

Get started with JavaScript with this free course containing almost 5 hours of video from Better Dev.

Handy guide to every HTML element there is. Replace your divs with more semantic markup.

Short code snippets ready to use covering CSS, JS, React, Python, Git and more.

Enter a JavaScript operator to learn more about it.

CSS Stats provides analytics and visualizations for your stylesheets. This information can be used to improve consistency in your design, track performance of...

JavaScript Utilities in single line of code, no more!

A simple visual cheat sheet for Flexbox.

A valuable (and fun!) interactive challenge to help learn CSS selectors.

View demos of all cursor styles available to you with CSS.

Handy cheat sheet for writing CSS with Sass.

Modern CSS solutions for old CSS problems by Stephanie Eckles.

Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.

Laravel Playground is a free-to-use service that allows you to try out Laravel code directly in your browser.

Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the...

Cool customisable tooltips made from pure CSS.

Eleventy (11ty) is a simple static site generator for all kinds of websites.

October is a self-hosted CMS platform based on the Laravel PHP Framework.

Popular layouts and patterns made with CSS.

CSS only library to fill your empty background with beautiful patterns.

Beautiful pure CSS background patterns that you can actually use in your projects!

A lightweight TypeScript library for creating particles.

A collection of over 50 HTML & CSS buttons.

CSS shadow generator for a neumorphism effect.

Classless CSS framework to publish great looking pages with just HTML.

Mesh is a simple way to create beautiful, unique gradients using shaders.

BlurHash takes an image and gives you a short string that represents the placeholder for an image for a more seamless loading experience.

A small JavaScript library to create and animate annotations on a web page.

Copy + Paste icons for HTML, CSS or Illustrator.

Free Jamstack courses from Netlify.

A curated collection of beautiful premade gradients using default colors from the Tailwind CSS color palette. Simply copy the code snippets to use within your...

Generate ultra-smooth looking CSS shadows.

Visually create cubic bezier curves in the browser for custom animation timings.

Handy cheat sheet for the short-hand HTML syntax Emmet.

A modern CSS showcase styled by community contributions.

Launch your next web project with complete confidence!

Find open-source alternatives for your favourite apps.

Free themes for Bootstrap.

Blobmaker is a free generative design tool made with 💕 by z creative labs, to help you quickly create random, unique, and organic-looking SVG shapes.

A collective list of APIs.

Open source software is made by people just like you. Learn how to launch and grow your project.

GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software...

Animate CSS gradients.

A gallery of fantastic and unique CSS gradients.

Generate duotone images from your photos with CSS.

Click on the animation to copy.

Sass News is a curated publication full of interesting, relevant links for all things Sass. Subscribe now and never miss an issue.

A once–weekly roundup of the best front-end news, articles and tutorials. HTML, CSS, WebGL, Canvas, browser tech, and more.

The live broadcast podcast all about JavaScript.

A simple and customisable Flexbox grid system.

A dependency manager for PHP.

With GitLab, you get a complete CI/CD toolchain out-of-the-box. One interface. One conversation. One permission model. Thousands of features. You'll be amazed...

Tasty CSS-animated hamburgers.

Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!

Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.

You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

When you use eight values specifying border-radius in CSS, you can build organic looking shapes.

Does what it says on the tin. The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse,...

Mozilla Developer Network. Resources for developers, by developers.

Search worldwide news with code. Get breaking news headlines, and search for articles from over 30,000 news sources and blogs with our news API.

How it's done now. From the basics to advanced topics with simple, but detailed explanations.

Automated code review for Git.

Challenges are fun opportunities for leveling up your skills by building things. Each week, you’ll get a new prompt surrounding a monthly theme to riff on....

Change the way you do web analytics forever with Matomo On-Premise! Get maximum flexibility to do whatever you want and gain powerful insights to grow your...

CSS gradient generator and swatches.

100 days CSS coding challenge.

Hylia is a lightweight Eleventy starter kit with Netlify CMS pre-configured, so that you can one-click install a progressive, accessible blog in minutes. It...

A podcast from the team at Heroku, exploring code, technology, tools, tips, and the life of the developer.

Making the web more beautiful, fast, and open through great typography.

Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic...

Just-add-water CSS animations.

Build 30 things in 30 days using vanilla JavaScript with this free course from Wes Bos. Designed for beginner to Intermediate developers and designers who want...

Carbon lets you create and share beautiful images of your source code.

PHP: The Right Way is an easy-to-read, quick reference for PHP popular coding standards, links to authoritative tutorials around the web and what the...