HTML, CSS and JavaScript

Articles

• Accessibility basics: what HTML, CSS and JS can fix

  Reference guide

  Website accessibility basics for HTML CSS and JS: contrast 4.5, keyboard navigation, focus visible, reduced motion, headings.

• Accessible forms: labels, focus and feedback

  Reference guide

  Build accessible forms that humans and screen readers can use: label for, fieldset legend, autocomplete and clear errors.

• ARIA accessibility basics

  Reference guide

  ARIA accessibility basics: what ARIA does, roles, states and properties, common patterns (tabs, modal, live regions), and what not to add.

• Caret color and focus visibility for accessibility

  Tutorial

  Caret color and focus styling: the caret-color property, never removing focus outlines, and contrast-safe focus indicators.

• content-visibility for faster long pages

  Reference guide

  content-visibility CSS explained, browser support, and how to apply it to long pages without layout shift.

• CSS aspect-ratio sizing

  Reference guide

  CSS aspect-ratio property explained: intrinsic ratio, images and iframes, CLS prevention, and how it differs from aspect-box.

• The CSS box model

  Reference guide

  The CSS box model explained: content, padding, border and margin, border-box sizing, and why margins collapse.

• CSS cascade layers and how to use them

  Reference guide

  CSS cascade layers explained: @layer order, cascade layer rules, default layers, and how to adopt them to tame specificity.

• clamp() for fluid typography

  Tutorial

  Understand clamp() fluid typography: the clamp() syntax, viewport units, safe fallbacks, and the no-unit-on-bounds trap.

• CSS container queries explained

  Tutorial

  Learn how CSS container queries style components by their own containers size and when they beat media queries.

• CSS custom properties

  Reference guide

  CSS custom properties explained, including how they cascade, how they differ from Sass variables, and where they fix real theming problems.

• Reusable CSS Grid layout patterns

  Reference guide

  Reusable CSS Grid patterns: page frame, card grid, and responsive gallery, with explicit tracks, placement, and flow control.

• CSS layout techniques compared

  Reference guide

  CSS layout techniques compared: Flexbox versus Grid versus positioning versus floats, when each fits, and the modern default.

• CSS logical properties for LTR and RTL

  Tutorial

  How CSS logical properties replace physical margins and padding so layouts adapt to LTR and RTL automatically.

• Native CSS nesting explained

  Reference guide

  Learn native CSS nesting, the ampersand rules and specificity behavior, and how it compares to preprocessor nesting in Sass.

• Scoping styles with the CSS @scope rule

  Reference guide

  Use CSS @scope to limit where rules apply, avoid selector leakage between components, and simplify cascade reasoning.

• Smooth scroll behavior and scroll snapping

  Reference guide

  Control smooth scrolling with scroll-behavior and snap points with scroll-snap-type and scroll-snap-align, with browser and accessibility notes.

• Styling scrollbars with standard CSS

  Reference guide

  Style scrollbars with CSS scrollbar-color and scrollbar-width instead of WebKit pseudo-elements, with browser support and accessibility notes.

• CSS specificity: which rule wins

  Reference guide

  CSS specificity explained: inline styles, IDs, classes and elements, the cascade, and the cost of using !important.

• Why CSS rules beat inline styles

  Reference guide

  CSS rules vs inline styles: maintainability, specificity, caching and media queries, plus when inline style attributes are fine.

• em vs rem units

  Reference guide

  em vs rem CSS units: how em inherits the element size, how rem inherits the root, and the safe sizing baseline.

• The CSS :has() selector guide

  Reference guide

  Use the CSS :has() selector to style a parent from its children and cut JavaScript class toggling, without hurting performance.

• CSS color-mix and OKLCH

  Reference guide

  color-mix and OKLCH let you mix and define colors in a perceptually uniform space. Learn the syntax and wide-gamut handling.

• CSS subgrid explained

  Tutorial

  CSS subgrid makes a nested grid reuse its parent's tracks, aligning boxes across nesting levels. See how it works and when to use it.

• The order that fixes broken HTML, CSS and JS

  Troubleshooting guide

  Debug broken HTML CSS JS in a set order: validate HTML, confirm the stylesheet loads, check specificity, read the console.

• CSS text-wrap balance and pretty

  Tutorial

  Use CSS text-wrap balance for headings and pretty for paragraphs to fix ragged lines and orphan words.

• JavaScript defer and async

  Reference guide

  JavaScript defer vs async: execution order explained, when to use each, and how they interact with module scripts.

• The HTML dialog element

  Reference guide

  The HTML dialog element: show versus showModal, the form method, focus management, accessibility, and browser support.

• The HTML head: the tags that matter

  Reference guide

  HTML head tags in order: doctype, charset, viewport, title, meta description, canonical, OG, favicon, preload and script placement.

• Making elements non-interactive with the HTML inert attribute

  Reference guide

  Disable interaction on a subtree with the HTML inert attribute, and compare it with disabled and aria-hidden for modals and paused UI.

• Semantic HTML elements and why they matter

  Reference guide

  Use semantic HTML elements: header, nav, main, section, article, aside, footer, for screen readers, SEO and maintainable CSS.

• Import maps for JavaScript module resolution

  Reference guide

  Use an HTML import map to resolve bare JavaScript module specifiers natively. Import npm-style packages and aliases without a bundler.

• IntersectionObserver API for scroll-triggered effects

  Tutorial

  Use the IntersectionObserver API to detect elements entering or leaving the viewport for lazy loading, animations and analytics.

• Event delegation in JavaScript

  Tutorial

  Event delegation tutorial: use event bubbling to handle clicks on dynamic content with one listener instead of many.

• The picture element: choosing formats and density

  Tutorial

  The picture element explained: format fallbacks, media queries, width and height, and how it composes with srcset and AVIF/WebP.

• HTML Popover API guide

  Reference guide

  Learn the HTML Popover API to build menus, tooltips and panels with popover and popovertarget. See browser support and accessibility notes.

• position sticky not working

  Troubleshooting guide

  Troubleshoot position sticky not working: overflow ancestors, height constraints, transform, and z-index in a checklist order.

• The PRPL pattern for faster initial page loads

  Reference guide

  PRPL pattern (push, render, pre-cache, lazy-load) to speed up first meaningful paint in JavaScript-heavy sites.

• Reducing JavaScript bundle size

  Reference guide

  Reduce JavaScript bundle size: measure, code split, tree shake, remove dead code, ship production builds and inspect source maps.

• Choosing CSS breakpoints for responsive design

  Reference guide

  CSS breakpoints: content driven selection, min-width order, container queries, and practical breakpoint workflows for responsive sites.

• Responsive HTML: viewport, media queries and fluid grids

  Reference guide

  Responsive HTML basics: viewport meta, media queries by layout need, breakpoint choice and fluid flex and grid layouts.

• How sites define structure in HTML

  Reference guide

  Site structure in HTML: how pages, internal links, nav and landmarks form information architecture for users and crawlers.

• View Transitions API for smooth page transitions

  Tutorial

  Use the View Transitions API to animate between page states and cross-document navigations. Cross-document support is Chromium and Safari only.

• SEO for web components and shadow DOM

  Reference guide

  Web components and SEO: how open shadow DOM is indexed, why content in light DOM and declarative shadow DOM is most reliable, and how to prevent empty nodes.