How To Guides
Copy-paste How To guides for CSS and JavaScript. Center a div, build a modal, make a navbar sticky, filter a table, each with code you can run.
Layout
- How to Center a Div in CSSThis recipe shows how to center any element horizontally and vertically using flexbox as the modern default, plus grid and absolute-positioning alternatives for specific cases..
- How to Make a Full Screen Section in CSSThis recipe covers how to build sections that reliably fill the full height and width of the viewport or their parent, and explains the height quirks that trip beginners up..
- How to Make Equal Height Columns in CSSThis recipe explains how flexbox makes columns equal height automatically by default, solving a problem that used to require table layouts or JavaScript measuring..
Navigation
- How to Create a Responsive Navbar in CSSThis recipe builds a navbar that shows a horizontal menu on wide screens and collapses into a toggleable hamburger menu on small screens, using flexbox and a media query..
- How to Make a Sticky Navbar in CSSThis recipe pins a navbar to the top of the viewport as the page scrolls, using position: sticky and top: 0 instead of position: fixed..
- How to Create a Dropdown Menu in CSSThis recipe builds a click-toggle dropdown menu with a minimal, accessible JavaScript pattern, and shows the CSS-only hover version for comparison..
Interactive Components
- How to Create a Modal Popup in CSSThis recipe builds an accessible modal dialog that opens on a button click and can be closed with a close button, the Escape key, or a click on the overlay..
- How to Create Tabs in HTML and CSSThis recipe builds a tabbed interface where clicking a tab swaps the visible panel, using a small vanilla JavaScript toggle and ARIA tab roles..
- How to Create an Accordion in CSSBuild a collapsible accordion that reveals one panel of content at a time when its header is clicked..
Feedback and Overlays
- How to Create a Tooltip in CSSBuild an accessible tooltip that displays a short helper message next to an element on hover and on keyboard focus..
- How to Create a Progress Bar in CSSBuild a progress bar that visually communicates how far along a task or value is, using either the native <progress> element or a styled div..
- How to Create a Loading Spinner in CSSBuild a spinning loader animation with pure CSS to show that content is loading in the background..
Content Display
- How to Create an Image Slideshow in JavaScriptBuild an image slideshow that displays one image at a time with next/prev buttons that wrap around the set..
- How to Create a Card in CSSBuild a reusable card component that groups an image, heading, description, and action into one visually distinct block..
- How to Create an Alert Message in CSSBuild a dismissible alert/banner that communicates a status message (success, warning, error, or info) with an appropriate color and an optional close button..
Forms
- How to Create a Login Form in HTML and CSSThis recipe builds an accessible, centered login card with a properly labeled email/username field, a masked password field, and a submit button, all validated by native HTML5 attributes before any server ever sees the request..
- How to Create a Signup Form in HTML and CSSThis recipe builds a signup form with name, email, password, and confirm-password fields, plus a small JavaScript check that gives instant feedback when the two password fields don't match..
- How to Create a Contact Form in HTMLThis recipe builds a contact form with name and email inputs plus a resizable message textarea, including a live character counter and layout that adapts from a single column to a two-column row on wider screens..
Buttons
- How to Create Icon Buttons in CSSThis recipe builds a button that pairs an inline SVG icon with accessible text, so the action reads clearly to sighted users and screen reader users alike..
- How to Create a Loading Button in CSSThis recipe builds a button that disables itself and shows a spinner while an async action runs, then restores its normal state once the action finishes..
- How to Create Animated Buttons in CSSThis recipe builds a button with a smooth hover and click transition driven by transform and opacity, and explains why those two properties animate more smoothly than most others..
Filters
- How to Filter a List with JavaScriptThis recipe builds a search box that live-filters a list of <li> items by hiding the ones that don't match as the user types..
- How to Filter a Table with JavaScriptThis recipe applies the same live-filtering technique to a table, checking each row's relevant cell instead of an entire list item..
Frequently Asked Questions
- Can I copy these How To examples into my own project?
- Yes. Each guide is a small, self-contained snippet meant to be pasted and adjusted. Change the class names and colours to match your project, and check that any IDs used do not collide with elements already on your page.
- Do these guides need a framework or library?
- No. Everything here is plain HTML, CSS and JavaScript, so the code runs in any project regardless of framework. Where a technique has a CSS-only and a JavaScript version, the CSS one is usually the better default.
- Will these examples work on mobile?
- The layouts are written to adapt to small screens, but always test your own version. Fixed widths, hover-only interactions and small tap targets are the three things that most often break a working desktop example on a phone.
