HTML &amp; CSS

10 Best Online Code Playgrounds Like CodePen

Compare ten browser-based places to write, test, and share code, from quick HTML experiments to full-stack demos, with practical advice for choosing the right workspace.

12 Best CSS Generators That Save Hours

Create gradients, shadows, layouts, and other CSS faster with twelve practical generators, plus advice on checking the code and adapting it to your own design.

10 Best CSS Frameworks

Compare ten popular CSS frameworks, from utility classes to ready-made components, and find an approach that fits your team's skills, design needs, and project size.

Jonah WeissRead the article

15 Best Free Resources to Learn HTML and CSS

Start learning HTML and CSS with fifteen respected free tutorials, interactive exercises, and reference sites, then choose a next step that suits your schedule and goals.

Inside this article

Quick picks
How we picked
Guided learning paths
Documentation and foundations

Responsive Design Testing Tools and Emulators

Build a risk-based responsive test matrix, combine emulators with real devices, and catch layout, input, and viewport failures before release day.

CSS color-mix() and Relative Color Syntax Explained

Use color-mix() to blend colours and relative syntax to adjust channels, with deliberate colour spaces, safe fallbacks and checks for every derived foreground pair.

Design System With Tailwind: Integrate Without Leaks

Connect a shared component library to Tailwind with clear styling boundaries, stable variants, explicit consumer overrides, and checks for generated class availability.

Jonah WeissRead the article

CSS dvh vs vh (and svh, lvh): Fix Mobile Full Height

Choose modern viewport height units for mobile page shells. Compare dvh, svh, and lvh, preserve scrolling, and avoid clipped content when browser controls change.

Inside this article

Define what full height should mean
Understand the three viewport sizes
Prefer a minimum for document-like pages
Account for nested scrolling and safe areas

CSS :is() vs :where(): How Specificity Changes

Group CSS selectors without accidental specificity spikes. Learn how :is() and :where() differ, calculate their weight, and build defaults that remain easy to override.

CSS Mesh Gradient: Layer Radial Gradients for Backgrounds

Create mesh-style CSS backgrounds with layered radial gradients, tune their overlap and colour balance, and keep foreground content readable across responsive layouts.

CSS Logical Properties for RTL-Ready Layouts

Use logical margins, padding, borders, and sizing to support different writing directions without duplicated stylesheets or fragile left-and-right overrides.