Advanced
Window functions, optimization, security, triggers, partitioning, and real-world SQL patterns.
Progress: 0 / 30 topics completed
Advanced Interactive Elements
The <dialog> Element
Build native modal and non-modal dialogs with the HTML dialog element, focus management, and the showModal/show/close API.
Popover API
Use the native HTML popover attribute to build tooltips, dropdowns, and flyouts that live in the top layer without JavaScript.
Details & Summary Elements
Build native disclosure widgets, accordions, and expandable sections with <details> and <summary> no JavaScript required.
Datalist & Combobox Patterns
Use <datalist> to add native autocomplete suggestions to text inputs, range sliders, and color pickers without JavaScript.
HTML Image Maps & Object Element
Create clickable regions on images using <map> and <area> elements, and embed non-HTML content using the <object> element.
Advanced Forms
FormData API & requestSubmit
Intercept, inspect, and manipulate HTML form submissions using the FormData API and trigger programmatic submissions with requestSubmit.
Constraint Validation API
Use the browser's built-in Constraint Validation API to read validity state, set custom error messages, and build accessible form validation UIs.
File API & FileReader
Read user-selected files in the browser using the File API and FileReader preview images, parse text files, and handle binary data before uploading.
Drag & Drop File Upload
Build drag-and-drop file upload areas using the HTML Drag and Drop API handle dragover, drop events, and access files via DataTransfer.
Clipboard API
Copy text and rich content to and from the clipboard using the modern async Clipboard API and handle paste events for custom input behavior.
Progressive Web Apps
Web App Manifest
Create a Web App Manifest to make your site installable as a PWA with a custom name, icon, colors, and display mode.
Service Worker Registration
Register a Service Worker from HTML, understand its lifecycle, and use it to enable offline capability and background sync.
Security
Subresource Integrity (SRI)
Protect your site from compromised CDN resources by using SRI hashes on <script> and <link> tags to verify file integrity before execution.
Permissions Policy
Control which browser features (camera, geolocation, autoplay) are available to your page and embedded iframes using Permissions Policy.
Advanced iframe: Sandbox & Security
Master the sandbox attribute, allow attribute, and security considerations for embedding third-party content safely in iframes.
Trusted Types & HTML Sanitization
Prevent DOM-based XSS by enforcing Trusted Types policies for innerHTML and dangerous DOM sinks, and use the HTML Sanitizer API for safe HTML insertion.
Performance & Loading
Priority Hints (fetchpriority)
Use the fetchpriority attribute to tell the browser which resources to load first, optimizing LCP and reducing render-blocking delays.
Speculation Rules API
Prefetch and prerender entire pages before the user navigates using the Speculation Rules API making navigations feel instant.
Real-Time Communication
Server-Sent Events (EventSource)
Receive real-time server-to-client push updates using the EventSource API simpler than WebSockets for one-way data streams.
Broadcast Channel API
Communicate in real time between multiple browser tabs, windows, or workers from the same origin using the BroadcastChannel API.
Web Share API
Invoke the native OS share sheet from a web page using navigator.share() to share URLs, text, and files to any app on the device.
Browser Observers
Intersection Observer API
Efficiently detect when elements enter or leave the viewport using IntersectionObserver enabling lazy loading, infinite scroll, and scroll animations.
MutationObserver API
Watch for DOM changes added/removed nodes, attribute changes, and text mutations using the MutationObserver API.
ResizeObserver API
React to element size changes not just window resize using the ResizeObserver API for responsive components and dynamic layouts.
Document Output
HTML for Print
Optimize your HTML pages for printing using print media queries, @page rules, and semantic HTML structure that produces clean print layouts.
HTML Email Fundamentals
Build cross-client HTML emails using table-based layouts, inline styles, and defensive CSS patterns that work in Gmail, Outlook, and Apple Mail.
HTML Internals
HTML Parsing & Quirks Mode
Understand how browsers parse HTML, why quirks mode exists, the error-recovery algorithm, and how malformed HTML is handled.
Progressive Enhancement Strategy
Build resilient web experiences using progressive enhancement HTML-first foundations that gracefully upgrade with CSS and JavaScript.