🔎 No guides matched your search.
CSS Techniques
Modern CSS patterns and layout recipes
How to Make a Sticky Header
Use position: sticky to keep your nav visible on scroll without JavaScript. Includes z-index and backdrop-filter tips.
Read guide →
How to Add Dark Mode with CSS
Implement dark mode using prefers-color-scheme and CSS custom properties. No JavaScript needed for basic dark mode.
Read guide →
How to Center Anything in CSS
Every method for centering elements — horizontally, vertically, and both — using flexbox, grid, and positioning.
Read guide →
How to Style a Custom Scrollbar
Style the scrollbar with ::-webkit-scrollbar CSS and the scrollbar-color/scrollbar-width standard properties.
Read guide →
How to Create a Glassmorphism Effect
Build the frosted glass UI effect using backdrop-filter: blur(), background with transparency, and border styling.
Read guide →
How to Make Gradient Text
Apply a CSS gradient to text using background-clip: text and -webkit-text-fill-color: transparent.
Read guide →
JavaScript Patterns
Common JS techniques and browser APIs
How to Copy Text to Clipboard
Use navigator.clipboard.writeText() to copy text with a button click. Includes fallback for older browsers.
Read guide →
How to Debounce a Function
Delay function execution until after a user stops typing. Essential for search inputs and resize event handlers.
Read guide →
How to Use localStorage
Save, read, update, and delete data in the browser's localStorage. Persist user preferences without a backend.
Read guide →
How to Use the Fetch API
Make HTTP GET and POST requests with fetch(). Handle JSON responses, errors, loading states, and async/await.
Read guide →
How to Use IntersectionObserver
Detect when elements enter the viewport without scroll event listeners. Perfect for lazy loading and scroll animations.
Read guide →
How to Build a Dark Mode Toggle
Toggle dark mode with a button. Save preference to localStorage and respect prefers-color-scheme on first load.
Read guide →
HTML & SEO Setup
Structure, meta tags, and best practices
How to Write Semantic HTML
Use header, nav, main, article, section, aside, and footer correctly. Semantic HTML improves SEO and accessibility.
Read guide →
How to Add Open Graph Tags
Add og:title, og:description, og:image, and og:url meta tags so your pages look great when shared on social media.
Read guide →
How to Add a Favicon
Add favicons for browsers, mobile home screens, and PWAs. Which sizes you need and the correct link tags.
Read guide →
How to Add Schema Markup
Add JSON-LD structured data to your HTML pages to enable Google rich results. Step-by-step with examples.
Read guide →
How to Use Responsive Images
Use srcset, sizes, and the picture element to serve the right image size on every device and screen resolution.
Read guide →
Web Performance Basics
The highest-impact steps for improving page speed: image optimisation, font loading, critical CSS, and lazy loading.
Read guide →