The Logic Decode blog

Every article, one place

Tutorials, deep-dives, and the trends that actually matter — filter by topic below.

Put HTML and CSS together: build a clean, responsive landing page from scratch, covering layout, type, and polish, live in your browser.

A hands-on CSS project: build a responsive card grid that reflows on any screen using Grid and modern CSS, fully editable in your browser.

Add motion with CSS: transitions, transforms, and keyframe animations done tastefully and accessibly, with a live, editable preview you can edit.

The modern CSS worth knowing now: custom properties, :has(), container queries, and nesting, with practical examples you can edit live.

Understand CSS position (static, relative, absolute, fixed, sticky) and how z-index stacking really works, with editable examples.

Make pages work on any screen: mobile-first CSS, media queries, fluid units, and responsive images, with a live, editable preview.

Master CSS Flexbox: main vs cross axis, justify-content, align-items, and flex-wrap, with an interactive playground to see it move.

Build real layouts with CSS Grid: columns, rows, gaps, and placement, with an interactive grid playground to experiment live.

Style text and color in CSS: hex/rgb/hsl, rem vs px vs %, web fonts, and readable typography, with a live, editable preview.