HTML, CSS & JavaScript Examples

Learn web development through interactive tutorials and use copy-paste landing page templates for your SaaS or side project.

Web Development Tutorials

46 tutorials

Browse all tutorials · Interactive examples with copy-paste ready code snippets. Pure HTML, CSS & vanilla JS. No frameworks needed.

CSS Corner Shapes

Learn border-radius, clip-path, and the new corner-shape CSS property.

CSS Position Property

Master relative, absolute, fixed, sticky positioning with visual examples.

CSS Flexbox

Learn flex-direction, justify-content, align-items, and more.

CSS Grid

Master grid-template, auto-fit, minmax, and grid areas.

CSS Animations

Create transitions, @keyframes, and timing functions.

CSS Transforms

Learn translate, rotate, scale, and 3D transforms.

CSS Card Designs

Build hover effects, flip cards, glassmorphism, and gradient borders.

HTML Form Styling

Style inputs, checkboxes, radio buttons, selects, and validation.

CSS Shadows

box-shadow, text-shadow, drop-shadow(), layered shadows & neumorphism.

CSS Gradients

linear-gradient, radial-gradient, conic-gradient, gradient text & borders.

Dark Mode

prefers-color-scheme, CSS variables, JS toggle & localStorage persistence.

CSS Navigation

Navbars, dropdowns, hamburger menus, breadcrumbs & pagination.

CSS Tables

Zebra striping, hover effects, sticky headers & responsive tables.

Pseudo-elements

::before & ::after for badges, tooltips & decorations.

CSS Variables

Custom properties, theming, calc() & design tokens.

Aa Playfair Fira Code

CSS Typography

Master font-size, line-height, clamp(), and modern text decoration.

Scroll Animations

scroll-snap, scroll-driven animations, IntersectionObserver reveals & parallax.

Filters & Blend Modes

filter, backdrop-filter, mix-blend-mode & image effects.

Container Queries

@container, container-type, container units & responsive components.

:not() :where()

Modern Selectors

:has(), :is(), :where(), :not(), combinators & :nth-child.

1rem clamp() vw vh ch

Units and Fluid Sizing

Learn rem, em, viewport units, ch, and clamp() for responsive sizing.

Aspect Ratio and Media Fit

Build stable image and video layouts with aspect-ratio, object-fit, and object-position.

Media Queries & Responsive Design

Learn CSS media queries and mobile-first responsive design. Interactive breakpoint examples, min-width vs max-width, and

How to Center in CSS

Center divs horizontally and vertically with flexbox, grid, margin auto, and transform. Interactive CSS centering exampl

Logical Properties & RTL

Learn CSS logical properties for RTL and LTR layouts. margin-inline, padding-inline, inset, and writing-mode with intera

Accessible CSS Patterns

Build accessible interfaces with CSS: focus-visible rings, skip links, contrast, and prefers-reduced-motion. Copy patter

Text Overflow & Line Clamp

Truncate text with text-overflow ellipsis and -webkit-line-clamp. Fix overflow in cards, tables, and responsive layouts.

CSS Scroll Snap

Learn scroll-snap-type and scroll-snap-align for carousels, galleries, and paginated horizontal lists without JavaScript

Viewport Units for Mobile

Fix mobile 100vh bugs with dvh, svh, and lvh. Learn safe-area-inset for notched phones and full-screen heroes.

Button Hover & Focus States

Style button hover, active press, focus-visible, and disabled states.accessible, consistent CTAs with copy-ready CSS.

Modals & Overlays

Build accessible modals with the dialog element, fixed overlays, backdrop blur, and scroll locking patterns.

Accordion & Tabs

Build accordions with details/summary and accessible tab UIs with CSS-only panel switching patterns.

Sticky Headers

Keep headers visible with position sticky, top offsets, z-index stacking, and scroll-driven shadow effects.

Skeleton Loading UI

Skeleton screens reduce perceived wait time. Build shimmer gradients and pulse placeholders with pure CSS.

OKLCH Color Spaces

Use OKLCH and color-mix for perceptually uniform palettes, safer gradients, and wide-gamut displays.

Cascade Layers & Specificity

Control the cascade with @layer, tame specificity using :where(), and organize resets, tokens, and components.

Semantic HTML

Use semantic HTML for accessibility and SEO: header, nav, main, article, section, aside, and footer landmarks.

<meta name="og:title">

HTML Meta & SEO Tags

Essential meta tags for SEO and social sharing: title, description, canonical, Open Graph, and Twitter cards.

Responsive Images & Lazy Load

Serve correct image sizes with srcset and sizes; defer offscreen images with loading=lazy and fetchpriority.

HTML Form Validation

Client-side validation with HTML5 attributes and style :valid/:invalid. Accessible error messages with setCustomValidity

DOM Basics

Learn DOM manipulation: select elements, change text and classes, create nodes, and append to the tree.

Event Delegation

Handle events on dynamic lists by listening on a parent and inspecting event.target.

Fetch API Basics

Load JSON from APIs with fetch, await response.json(), check response.ok, and handle network errors.

localStorage

Persist UI preferences and small data with localStorage. Serialize JSON safely and handle quota errors.

Clipboard API

Copy text to the clipboard with the async Clipboard API and fallbacks for older browsers.

Progressive Enhancement

Use @supports feature queries and fallbacks to deliver modern CSS safely.

Landing Page Gallery

31 templates

Copy-paste ready, single-file HTML templates. No build tools, no dependencies. just open, copy-paste code, and deploy.

Teal & Slate

Modern SaaS-style landing with hero, social proof, and waitlist CTA. Copy full page HTML.

Retro & Shadow

Warm cream and amber landing with retro shadows and serif typography. Copy full page HTML.

Midnight Violet

Dark glassmorphism with violet accents, dot grid background, and gradient text. Modern & bold.

Elegant Noir

Dark retro elegance with gold accents, serif typography, and ornamental dividers. Refined & tasteful.

Aurora Gradient

Colorful gradient mesh blobs on a pastel background. Playful, modern, and eye-catching.

Brutalist Mono

Raw, bold, black and white with thick borders and monospace type. Zero distractions.

Soft Pastel

Light, airy, and friendly with soft pink tones, rounded cards, and emoji accents.

Neon Cyber

Dark cyberpunk with neon green accents, terminal vibes, grid background, and scan lines.

Warm Terracotta

Earthy warm tones with terracotta accents, serif headings, and an organic, cozy feel.

Glass Light

Light frosted glass panels on a subtle gradient mesh. Clean, minimal, Apple-inspired.

Editorial

Newspaper-inspired with bold serif type, editorial rules, drop caps, and high contrast.

Sunset Horizon

Warm sunset gradient from deep purple to amber with translucent cards and golden accents.

Arctic Frost

Cool icy blues with frosted glass cards, shimmer animation, and a crisp, refreshing feel.

Charcoal & Lime

Dark charcoal with electric lime accents, diagonal line texture, and a bold tech feel.

Friendly Steps

Warm cream tones, playful serif headings, pink numbered steps, and mini UI previews inside cards.

Cobalt Orbit

Bold cobalt landing with mission-control UI, orbit accents, and sharp CTA sections.

Olive Studio

Warm olive editorial layout with studio process, component highlights, and pricing.

Weekline

Focused landing for indie hackers to validate an idea in 7 days with clear daily steps.

Kinetic Poster

Poster style layout with bold typography, sharp sections, and a one week sprint.

Paper Atlas

Scrapbook inspired layout with paper textures, field notes, and a gentle route.

Signal Grid

Modular dashboard layout with signal tiles and data driven validation cues.

CommitPulse

Minimalist maker log with weekly summaries and accountability loops.

OfferMint

Offer and pricing validation with real intent signals before you build.

LaunchRelay

Launch plan, content prompts, and distribution checklist for shipping on time.

Coral Breeze

Warm coral and peach layout for voice and text feedback without feeling stiff.

Navy Beacon

Deep navy and amber accents for monitoring and on-call workflows.

Fieldnote

Split hero with code-style contract block: API and contract-testing devtools.

Parcelledger

Receipt-style ticket: small business and per-SKU money tools.

Reefwindow

Banded poster layout, copy scoped to one use case and one region.

Scopebrief

Bento grid for product handoff and single-link scope tools.

Pantry (Cooklang)

Monospace frame for dev-style and plain-text product stories.

Neural Lattice

AI SaaS landing for ML platforms, deep learning, and data science teams.

Stack Shield

B2B SaaS template for Docker, frontend frameworks, and security platforms.

Quiet Line

Calm minimal layout with product mock, feature cards, and pricing.

Why Learn With Our Examples

Copy-Paste Ready

Every code snippet includes a copy button. Use the code directly in your projects.

Visual Demos

See exactly how HTML, CSS, and JavaScript work together with live examples.

Mobile Friendly

All examples are responsive and work on any device or screen size.

Frequently asked questions

What is the Web Examples Gallery?: Web Examples Gallery (this site) is a curated set of hands-on HTML, CSS, and JavaScript tutorials together with copy-paste landing page templates for SaaS and side projects. Tutorials use live demos and short explanations; templates are single-file pages you can open locally or deploy as static HTML, ideal when you want to validate an idea before investing in a full stack.
Are the code examples and templates free?: Yes. Everything here is built for learning and for shipping small projects quickly. You can copy snippets into your own work; if you republish entire files publicly, follow the same courtesy you would with any open educational resource (attribution where it makes sense, and respect any license noted in the repo).
Do I need a JavaScript framework or a build tool?: No. The tutorials emphasize vanilla JS and modern CSS. Landing templates often rely on the Tailwind CSS CDN, so you do not need npm or a bundler to preview or host them. That keeps the examples easy to read for beginners and fast to fork for a weekend launch.
Which CSS and layout topics are covered?: You will find dedicated pages for Flexbox, CSS Grid, animations, transforms, forms, filters, shadows, navigation, tables, pseudo-elements, CSS variables, scroll animations, dark mode, container queries, and advanced selectors (:has(), :is(), :where()). Together they cover most of what you need for responsive, modern front-end layouts.