# HTML5 Advent

> Independent resource on the modern web platform - HTML, CSS, JavaScript and browser Web APIs -
> plus "Web Platform Advent", a yearly calendar of practical front-end demos and tips.
> First-hand, example-driven, vendor-neutral. Continues the original 2010 HTML5 advent calendar.

## What you'll find here
- Practical guides to Web APIs (Canvas, Web Storage, Geolocation, WebSocket, View Transitions, Intersection Observer…)
- Modern HTML/CSS/JS features and how they ship across browsers
- "Web Platform Advent": 24 short, runnable demos and tips
- Hands-on hosting & deployment guides for web projects (static sites, Node/PHP apps)

## Editorial principles
- Original, tested examples - no fabricated benchmarks or claims.
- Vendor-neutral; affiliate links (hosting) are disclosed and limited to genuinely relevant pages.

## Languages
English (/), Français (/fr), Español (/es), Deutsch (/de), Italiano (/it), Português (/pt).

## Interactive tools (free, in-browser, six languages)
- /tools/flexbox-playground - CSS Flexbox playground: toggle flex properties, see the layout live, copy the CSS.
- /tools/contrast-checker - WCAG color contrast checker: enter text and background colours, get the contrast ratio and AA/AAA pass or fail.

## Full content
- /llms-full.txt - every guide with its description, in all six languages.

## Web APIs
- [The Fetch API in JavaScript](https://html5advent.com/guides/fetch-api-javascript): Make HTTP requests in the browser: GET, JSON, POST, error handling and aborting.
- [Service Workers: caching, offline and updates](https://html5advent.com/guides/service-worker): Registering a service worker, the install/activate lifecycle, the Cache API, offline pages and safe updates.
- [localStorage vs sessionStorage: the Web Storage API](https://html5advent.com/guides/localstorage-vs-sessionstorage): Lifetime and scope differences, size limits, storing JSON safely and the storage event.
- [The IntersectionObserver API: lazy-loading and scroll effects](https://html5advent.com/guides/intersection-observer-api): Lazy-load images, reveal on scroll and build infinite scroll - threshold and rootMargin explained.

## JavaScript
- [JavaScript Promises: a practical guide](https://html5advent.com/guides/javascript-promises): Creating promises, then/catch/finally, chaining, and Promise.all/race/any/allSettled - with the common gotchas.
- [async/await in JavaScript: a practical guide](https://html5advent.com/guides/async-await-javascript): How async/await relate to promises, try/catch, awaiting in loops, and the serial-vs-parallel gotcha.
- [What is the event loop in JavaScript?](https://html5advent.com/guides/what-is-the-event-loop): How single-threaded JavaScript stays responsive: the call stack, the task and microtask queues, and why promises run before setTimeout.

## CSS
- [The CSS :has() Selector: the Parent Selector, Explained](https://html5advent.com/guides/css-has-selector): The :has() relational pseudo-class styles an element based on what it contains or what follows it - the long-awaited CSS parent selector. How it works, real examples, and browser support.
- [Native CSS Nesting: the & selector and Sass differences](https://html5advent.com/guides/css-nesting): Write nested CSS without a preprocessor - how the & selector works and which browsers support it.
- [CSS Grid vs Flexbox: which to use (and when to use both)](https://html5advent.com/guides/css-grid-vs-flexbox): Flexbox is one-dimensional, Grid is two-dimensional. The honest difference, a side-by-side comparison, and why real layouts use both together.
- [CSS Container Queries: style by container, not viewport](https://html5advent.com/guides/css-container-queries): container-type, @container and how container queries differ from media queries.
- [The View Transitions API: smooth page transitions](https://html5advent.com/guides/view-transitions-api): Animate between DOM states with startViewTransition, view-transition-name, same- and cross-document.

## HTML & Web Components
- [The Popover API: native popups, menus and tooltips without a library](https://html5advent.com/guides/popover-api): The HTML popover attribute and the Popover API let you build menus, tooltips and cards that render in the top layer, with light-dismiss and Esc handled for you - no JavaScript library needed.
- [Web Components: Custom Elements, Shadow DOM and templates](https://html5advent.com/guides/web-components): Build reusable HTML elements with Custom Elements, encapsulate styles with the Shadow DOM and clone templates.

## Hosting & deployment
- [Choosing the best VPS for hosting a web project](https://html5advent.com/guides/best-vps-for-web-hosting): The criteria that matter (RAM, CPU, storage, bandwidth, location, price) and when a VPS beats shared hosting.
- [Static website hosting: deploy an Astro, Vite or HTML site](https://html5advent.com/guides/static-website-hosting): What static hosting is, how a CDN serves your build, and deploying with a custom domain and free HTTPS.
- [Web hosting for developers: the criteria that matter](https://html5advent.com/guides/web-hosting-for-developers): SSH access, Git deploys, runtimes, databases and staging - and how shared, VPS and managed compare.
- [How to host a Node.js app: VPS, PaaS and serverless](https://html5advent.com/guides/nodejs-hosting): Deploy a Node.js app via VPS, managed PaaS or serverless - with PM2, a reverse proxy and env vars.
- [PHP hosting explained: shared vs VPS, versions and performance](https://html5advent.com/guides/php-hosting): Shared vs VPS, PHP versions and extensions, deployment, .htaccess and performance with OPcache.
- [VPS hosting explained: what it is and how to choose](https://html5advent.com/guides/vps-hosting): What a VPS is, how it differs from shared and dedicated hosting, the criteria that matter, and who it fits.
- [Cloud hosting explained: when it makes sense for a web project](https://html5advent.com/guides/cloud-hosting): What cloud hosting really means, how it differs from a single VPS or shared hosting, and the projects it suits.
- [Managed WordPress hosting: what it is and who it’s for](https://html5advent.com/guides/managed-wordpress-hosting): What managed WordPress hosting includes, how it compares to shared hosting and a self-managed VPS, and its pros and cons.
- [Web hosting for a small business: what to look for](https://html5advent.com/guides/best-hosting-for-small-business): The criteria that matter for a small business - uptime, support, email, security, room to grow - and how to judge any host.
- [Cheap VPS hosting: how to get value without cutting corners](https://html5advent.com/guides/best-cheap-vps): How to read low-priced VPS plans honestly, which corners are safe to cut, and what separates value from a false bargain.
- [Running WordPress on a VPS: when and how](https://html5advent.com/guides/wordpress-vps): When a VPS beats shared or managed hosting for WordPress, the criteria that matter, and the LEMP stack you need.
- [Hosting for a WooCommerce store: the requirements that matter](https://html5advent.com/guides/best-hosting-for-woocommerce): The performance, resources and scalability a WooCommerce store needs, and how shared, managed and VPS hosting compare.
- [Hosting a Laravel app: VPS, requirements and deployment](https://html5advent.com/guides/best-hosting-for-laravel): Why a VPS fits Laravel, the server requirements that matter, and a real deployment walkthrough (Composer, .env, Nginx, queues).
- [Contabo review: is it a good VPS for web projects?](https://html5advent.com/guides/contabo-review): An honest, no-hype look at Contabo as a VPS host - its resource-for-the-price positioning, the trade-offs, and who it suits.
- [VPS vs cloud hosting: which one fits your project?](https://html5advent.com/guides/vps-vs-cloud-hosting): How VPS and cloud hosting differ on performance, scaling, reliability and price - and how to decide which model fits your web project.
- [VPS vs dedicated server: which one does your project need?](https://html5advent.com/guides/vps-vs-dedicated-server): How a VPS and a dedicated server really differ - on performance, isolation, scaling, control and price - and a clear way to decide which one fits your website or app.
- [How much does a VPS cost? A real price breakdown](https://html5advent.com/guides/how-much-does-a-vps-cost): What a VPS actually costs per month, what drives the price (RAM, vCPU, storage, managed vs unmanaged), the hidden extras, and real dated example prices.
- [How to host an Astro site: static and SSR options](https://html5advent.com/guides/astro-hosting): Static vs server (SSR) output, how adapters work, the build commands, and how to choose a host for each.