Articles

HTML & CSS

Semantic HTML, grid, flexbox, container queries, cascade layers and the modern CSS that replaces old hacks.

Font Optical Sizing in CSS: Small Text and Headlines

Understand optical size in variable fonts and use font-optical-sizing safely. Compare body and display settings without confusing optical design with font size.

Inside this article

Start with a font that actually supports it
Separate optical design from physical scaling
Enable automatic optical sizing deliberately
Compare body text and headings independently

Jonah WeissRead the article

HTML & CSS

CSS Grid vs Flexbox: When to Use Each for Dashboards

Build responsive dashboards with clear rules for Grid and Flexbox, practical CSS patterns, and overflow tests that keep dense interfaces usable.

Jonah Weiss

HTML & CSS

Change SVG Color With CSS Using currentColor

Make monochrome SVG icons inherit interface colors reliably, with practical fixes for hard-coded fills, outlined paths, external images, and two-tone artwork.

Jonah Weiss

HTML & CSS

Variable Fonts in CSS: Use Font Axes Without Breakage

Use variable font weight, width, and custom axes deliberately. Learn which CSS properties to prefer, how to inspect ranges, and how to test usable instances.

Marcus Bell

HTML & CSS

Native CSS Nesting: Maintainable Selectors Without Sass

Learn native CSS nesting syntax, the nesting selector, specificity pitfalls, and migration checks that keep component styles readable without a preprocessor.

Inside this article

Choose a small component to reorganize
Learn what the nesting selector represents
Avoid Sass-specific concatenation assumptions
Keep specificity and selector lists visible

Jonah WeissRead the article

HTML & CSS

Semantic HTML Landmarks: header, nav, main and footer

Give page regions clear meaning with native HTML elements, distinguish landmarks from articles, and verify navigation without adding redundant ARIA roles.

Jonah Weiss

HTML & CSS

Fluid Typography in Tailwind CSS With clamp()

Calculate fluid type scales, integrate clamp values into Tailwind, and test zoom and wrapping so headings resize smoothly without breaking layouts.

Jonah Weiss

HTML & CSS

CSS Cascade Layers: Control Specificity Without !important

Organize CSS with cascade layers, predictable vendor overrides, and clear priority rules. Learn how layer order interacts with specificity and important declarations.

Marcus Bell

HTML & CSS

CSS :has() Selector: Parent Selectors and Conditional UI

Use CSS :has() to style parents from child states, adjust optional-content layouts, control specificity, and ship readable fallbacks without extra classes.

Inside this article

Start with a relationship worth expressing
Match optional children precisely
Express state without duplicating state
Keep specificity predictable

Jonah WeissRead the article

HTML & CSS

SVG Sprite: Build an Icon Sprite With symbol and use

Create reusable SVG icon sprites with stable viewBoxes, predictable styling, safe identifiers, and clear rules for inline versus external sprite files.

Jonah Weiss

HTML & CSS

Responsive Spacing in CSS With clamp(), min() and max()

Build fluid gutters, section padding, and component gaps with CSS math functions, then test the boundaries without replacing every breakpoint with viewport units.

Jonah Weiss

HTML & CSS

CSS Container Queries Tutorial: Components That Adapt

Build reusable components with CSS container queries, named containers, and reliable fallbacks. Learn where containment belongs and how to avoid sizing traps.

Marcus Bell

Browse another topic