Layout
Viewport Meta Tag: Responsive and Fixed-Width Pages
Learn what each viewport meta value does, how to fit a fixed-width page on phones, why you should never disable zoom, and…
Tag: html
CSS & HTML
Working with SVG: Inline Icons, Animation and Clipping
A practical guide to SVG for designers: choosing inline vs img, currentColor icons, CSS stroke animation, clip paths, accessibility and clean exports.
UI Components
HTML Placeholder Text: Styling, Floating Labels and Accessibility
The placeholder attribute works everywhere now, so drop Modernizr and jQuery. Style it, build a CSS-only floating label, and keep forms accessible.
UI Components
CSS Dropdown Menu: A Modern, Accessible Multi-Level Menu
Build a two-level dropdown menu with modern CSS and about 25 lines of JavaScript, using disclosure buttons, aria-expanded and focus-visible so it…
Typography
HTML Symbol Entities: Characters, Arrows and Quotes the Modern Way
Named and numeric character references, UTF-8, CSS content escapes and when to use SVG instead, with accessible examples for quotes, arrows, breadcrumbs…
CSS & HTML
Coding Clean and Semantic HTML Templates
How to code clean, semantic templates: pick the right element, use landmarks, replace wrapper divs with Grid and gap, and keep markup…
CSS & HTML
JavaScript in Modern Web Design: What the Browser Now Does for You
Lightboxes, accordions, tooltips, carousels and validation no longer need plugins. Here is what replaces each one, with code, and where JavaScript still…
Workflow
SEO Guide for Designers
What designers and front-end developers need to know about SEO: semantic HTML, metadata, Core Web Vitals, structured data and AI search, without…