38 HTML/CSS resources for web designers and developers
HTML and CSS are the markup and styling languages fundamental to any web page. Sometimes this is generated by a framework or many choose to create both by hand. Keep scrolling for our top HTML/CSS resource picks to educate and inspire.
HTML Elements Reference
Handy guide to every HTML element there is. Replace your divs with more semantic markup.
30 Seconds of Code
Short code snippets ready to use covering CSS, JS, React, Python, Git and more.
CSS Stats
CSS Stats provides analytics and visualizations for your stylesheets. This information can be used to improve consistency in your design, track performance of...
Flexbox Cheatsheet
A simple visual cheat sheet for Flexbox.
CSS Diner
A valuable (and fun!) interactive challenge to help learn CSS selectors.
CSS Cursors
View demos of all cursor styles available to you with CSS.
Sass Cheatsheet
Handy cheat sheet for writing CSS with Sass.
Modern CSS Solutions
Modern CSS solutions for old CSS problems by Stephanie Eckles.
Every Layout
Relearn CSS layout. Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
Cooltipz.css
Cool customisable tooltips made from pure CSS.
CSS Layout
Popular layouts and patterns made with CSS.
New.css
Classless CSS framework to publish great looking pages with just HTML.
Emmet Cheat Sheet
Handy cheat sheet for the short-hand HTML syntax Emmet.
Style Stage
A modern CSS showcase styled by community contributions.
new.css
Write modern websites using only HTML. new.css is a classless CSS framework to write modern websites using only HTML. It's ~4.5kb.
XP.css
A design system for building faithful recreations of old UIs.
Bootswatch
Free themes for Bootstrap.
Blobmaker
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.
CSS Gradient Animator
Animate CSS gradients.
Gradient Magic
A gallery of fantastic and unique CSS gradients.
CSS Duotone
Generate duotone images from your photos with CSS.
Every Layout
If you find yourself wrestling with CSS layout, itâs likely youâre making decisions for browsers they should be making themselves. Through a series of...
CSSeffectsSnippets
Click on the animation to copy.
Sass News
Sass News is a curated publication full of interesting, relevant links for all things Sass. Subscribe now and never miss an issue.
Frontend Focus
A onceâweekly roundup of the best front-end news, articles and tutorials. HTML, CSS, WebGL, Canvas, browser tech, and more.
Pintsize
A simple and customisable Flexbox grid system.
Hamburgers
Tasty CSS-animated hamburgers.
Flexbox Froggy
Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!
Grid Garden
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.
CSS Grid Generator
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.
Fancy Border Radius
When you use eight values specifying border-radius in CSS, you can build organic looking shapes.
CSS clip-path maker
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,...
CSS Gradient
CSS gradient generator and swatches.
100 Days CSS Challenge
100 days CSS coding challenge.
Google Fonts
Making the web more beautiful, fast, and open through great typography.
Typeplate
Typeplate is a âtypographic starter kitâ. We donât make aesthetic design choices, but define proper markup with extensible styling for common typographic...
Animate.css
Just-add-water CSS animations.
Piccalilli
A pickle jar full of curated CSS links to slick websites, animations, illustrations, and algorithms, brought to you by Andy Bell.