| Semantic HTML |
Using HTML elements that convey meaning, improving accessibility and SEO. |
<header><nav><main><footer> |
Create a well-structured, accessible, and SEO-friendly web page. |
Improving web page structure, accessibility, and SEO. |
| Form Validation |
Using built-in HTML5 form validation attributes to ensure user input is valid. |
<input type="email" required> |
Create a form that validates user input before submission. |
Ensuring user input is valid and improving user experience. |
| Data Attributes |
Using custom attributes to store additional information on HTML elements. |
<div data-id="123"> |
Store additional data on HTML elements for use in JavaScript. |
Storing custom data on HTML elements. |
| Multimedia Elements |
Using HTML5 elements to embed audio, video, and other multimedia content. |
<video><source src="movie.mp4" type="video/mp4"></video> |
Embed multimedia content in a web page. |
Adding audio, video, and other multimedia content to web pages. |
| SVG (Scalable Vector Graphics) |
Using vector-based images that scale without losing quality. |
<svg><circle cx="50" cy="50" r="40"/></svg> |
Create a scalable, resolution-independent graphic. |
Improving image quality and scalability. |
| Responsive Web Design |
Designing web pages that adapt to different screen sizes and devices. |
@media (max-width: 600px) { /*...*/ } |
Create a web page that looks great on various devices and screen sizes. |
Improving user experience on different devices and screen sizes. |
| Web Components |
Creating reusable, encapsulated, and custom HTML elements. |
<template><custom-element> and class CustomElement extends HTMLElement { /*...*/ } |
Create a reusable and encapsulated custom HTML element. |
Improving code reusability and modularity. |
| Canvas API |
Using a drawable region on an HTML page for rendering graphics, charts, and animations. |
<canvas> and const ctx = canvas.getContext('2d'); /*...*/ |
Create a dynamic, interactive, or animated graphic. |
Rendering graphics, charts, and animations. |
| Shadow DOM |
Encapsulating the DOM and CSS of a web component, preventing style leaks and conflicts. |
const shadowRoot = element.attachShadow({ mode: 'open' }); /*...*/ |
Create an encapsulated web component with its own DOM and CSS. |
Improving component encapsulation and preventing style conflicts. |
| HTML Template |
Using a template to store reusable HTML fragments that are not rendered initially. |
<template><p>Hello, <span class="name"></span>!</p></template> |
Create a reusable HTML fragment for use in JavaScript. |
Improving code reusability and modularity. |
| Custom Data Validation |
Using the `pattern` attribute to enforce custom data validation rules. |
<input type="text" pattern="[a-zA-Z0-9]+"> |
Create a form input that accepts only specific patterns. |
Ensuring user input meets specific requirements. |
| Input Types |
Using various input types for better user experience and mobile optimization. |
<input type="date"><input type="color"> |
Create a form with optimized inputs for various data types. |
Improving user experience and mobile optimization. |
| Accessibility (ARIA) |
Using ARIA attributes to improve web accessibility for assistive technologies. |
<button aria-label="Close"> |
Create an accessible web page that works well with assistive technologies. |
Improving web accessibility. |
| HTML5 Drag and Drop |
Using HTML5 Drag and Drop API to create interactive interfaces. |
<div draggable="true"> and element.addEventListener('dragstart', /*...*/) |
Create an interface that allows users to drag and drop elements. |
Improving user interaction and experience. |
| HTML5 Local Storage |
Using the `localStorage` and `sessionStorage` objects to store data on the client-side. |
localStorage.setItem('key', 'value') and sessionStorage.getItem('key') |
Store user preferences or data temporarily on the client-side. |
Improving performance and user experience. |
| HTML5 History API |
Manipulating browser history for single-page applications and smooth navigation. |
history.pushState({}, '', 'new-url') and window.addEventListener('popstate', /*...*/) |
Create a single-page application with smooth navigation. |
Improving user experience and performance. |
| HTML5 Offline Capabilities |
Using the `manifest` attribute and Service Workers for offline web applications. |
<html manifest="cache.manifest"> and navigator.serviceWorker.register('sw.js') |
Create a web application that works offline or with poor network conditions. |
Improving user experience and reliability. |
| HTML5 Geolocation API |
Using the Geolocation API to access the user's location data. |
navigator.geolocation.getCurrentPosition(success, error) |
Create a location-aware web application. |
Improving user experience and providing location-based services. |
| HTML5 Fullscreen API |
Using the Fullscreen API to display web content in fullscreen mode. |
element.requestFullscreen() and document.exitFullscreen() |
Create a web application that can be displayed in fullscreen mode. |
Improving user experience and presentation. |
| HTML5 Web Workers |
Using Web Workers for background processing and multithreading in web applications. |
const worker = new Worker('worker.js') |
Create a web application that performs background processing or multithreading. |
Improving performance and user experience. |
| HTML5 Server-Sent Events |
Using Server-Sent Events (SSE) for real-time updates from the server. |
const eventSource = new EventSource('sse.php') |
Create a web application that receives real-time updates from the server. |
Improving user experience and providing real-time data. |
| HTML5 WebSocket |
Using WebSocket for bidirectional communication between client and server. |
const socket = new WebSocket('ws://example.com/socket') |
Create a web application with real-time, bidirectional communication. |
Improving user experience and enabling real-time interactions. |
| HTML5 WebRTC |
Using WebRTC for real-time communication, such as video conferencing and file sharing. |
const peerConnection = new RTCPeerConnection() |
Create a web application with real-time communication features. |
Improving user experience and enabling real-time communication. |
| HTML5 Canvas Drawing |
Using Canvas API for drawing shapes, lines, and text on the canvas. |
context.fillRect(x, y, width, height) |
Create a web application with custom graphics and animations. |
Improving user experience and enabling custom visualizations. |
| HTML5 Canvas Transformations |
Using Canvas API for transforming the canvas, such as rotation, scaling, and translation. |
context.rotate(angle) |
Create a web application with advanced graphics and animations. |
Improving user experience and enabling advanced visualizations. |
| HTML5 Canvas Gradients |
Using Canvas API for creating linear and radial gradients on the canvas. |
const gradient = context.createLinearGradient(x1, y1, x2, y2) |
Create a web application with custom gradients and visual effects. |
Improving user experience and enabling custom visualizations. |
| HTML5 Canvas Patterns |
Using Canvas API for creating and using patterns on the canvas. |
const pattern = context.createPattern(image, repetition) |
Create a web application with custom patterns and visual effects. |
Improving user experience and enabling custom visualizations. |
| HTML5 Canvas Text |
Using Canvas API for drawing and styling text on the canvas. |
context.font = '24px Arial' and context.fillText('Hello', x, y) |
Create a web application with custom text and visual effects. |
Improving user experience and enabling custom visualizations. |
| HTML5 Canvas Shadows |
Using Canvas API for adding shadows to shapes and text on the canvas. |
context.shadowOffsetX = 5 and context.shadowColor = 'rgba(0, 0, 0, 0.5)' |
Create a web application with custom shadows and visual effects. |
Improving user experience and enabling custom visualizations. |
| HTML5 Canvas Compositing |
Using Canvas API for compositing shapes and text on the canvas. |
context.globalCompositeOperation = 'destination-over' |
Create a web application with advanced compositing and visual effects. |
Improving user experience and enabling advanced visualizations. |
| HTML5 Web Components |
Creating reusable, custom HTML elements with encapsulated functionality and styling. |
class MyComponent extends HTMLElement { /*...*/ } |
Create a web application with custom, reusable components. |
Improving code organization, reusability, and maintainability. |
| HTML5 Shadow DOM |
Encapsulating the DOM and styles of a web component to prevent conflicts. |
const shadowRoot = element.attachShadow({ mode: 'open' }) |
Create a web application with encapsulated components. |
Improving code organization, reusability, and maintainability. |
| HTML5 Custom Elements |
Creating custom HTML elements with custom behavior and functionality. |
customElements.define('my-element', MyElement) |
Create a web application with custom elements and functionality. |
Improving code organization, reusability, and maintainability. |
| HTML5 Microdata |
Adding semantic meaning to HTML content with custom attributes. |
<div itemscope itemtype="http://schema.org/Product"> |
Create a web application with rich, semantic data for better SEO and accessibility. |
Improving search engine optimization and accessibility. |
| HTML5 IndexedDB |
Storing large amounts of structured data on the client-side. |
const request = indexedDB.open('myDatabase', 1) |
Create a web application with offline capabilities and large data storage. |
Improving performance, user experience, and offline capabilities. |
| HTML5 Web Notifications |
Displaying desktop notifications to users even when the browser is minimized. |
Notification.requestPermission() and new Notification('Hello') |
Create a web application with real-time notifications. |
Improving user experience and engagement. |
| HTML5 Web Speech API |
Enabling voice recognition and text-to-speech functionality in web applications. |
const recognition = new webkitSpeechRecognition() |
Create a web application with voice control and text-to-speech features. |
Improving accessibility and user experience. |
| HTML5 Web Animations API |
Creating complex, performant animations in web applications. |
const animation = element.animate([{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }]) |
Create a web application with advanced animations and effects. |
Improving user experience and visual appeal. |
| HTML5 Web Assembly |
Executing near-native performance code in web applications using a binary format. |
const module = await WebAssembly.instantiateStreaming(fetch('module.wasm'), importObject) |
Create a web application with high-performance, near-native code execution. |
Improving performance and enabling complex computations. |
| HTML5 Progressive Web Apps (PWA) |
Creating installable, app-like experiences with web technologies. |
<link rel="manifest" href="manifest.json"> |
Create a web application with an app-like experience that can be installed on users' devices. |
Improving user experience, engagement, and performance. |
| HTML5 Cache API |
Caching resources for offline access and improved performance. |
caches.open('my-cache').then(cache => cache.addAll(['/', '/styles.css', '/script.js'])) |
Create a web application with offline capabilities and improved performance. |
Improving user experience, performance, and offline capabilities. |
| HTML5 Web Locks API |
Coordinating access to shared resources in web applications. |
navigator.locks.request('my-lock', { /*...*/ }) |
Create a web application with coordinated access to shared resources. |
Improving performance and preventing race conditions. |
| HTML5 Web Share API |
Sharing content from web applications to other apps and platforms. |
navigator.share({ title: 'My Web App', url: 'https://example.com' }) |
Create a web application with easy content sharing capabilities. |
Improving user experience and engagement. |
| HTML5 WebXR Device API |
Building immersive, augmented, and virtual reality experiences for web applications. |
navigator.xr.requestSession('immersive-vr') |
Create a web application with immersive, AR, or VR experiences. |
Improving user experience and engagement. |
| HTML5 Web Codecs API |
Encoding and decoding audio and video streams in web applications. |
const codec = new VideoDecoder({ /*...*/ }) |
Create a web application with custom audio and video encoding and decoding. |
Improving performance and enabling advanced media processing. |
| HTML5 WebHID API |
Interacting with human interface devices (HID) in web applications. |
navigator.hid.requestDevice({ /*...*/ }) |
Create a web application with support for custom HID devices. |
Improving user experience and enabling advanced input methods. |
| HTML5 Web NFC API |
Interacting with Near Field Communication (NFC) devices in web applications. |
navigator.nfc.watch(message => { /*...*/ }) |
Create a web application with support for NFC devices and tags. |
Improving user experience and enabling advanced device interactions. |
| HTML5 Web Bluetooth API |
Interacting with Bluetooth Low Energy (BLE) devices in web applications. |
navigator.bluetooth.requestDevice({ /*...*/ }) |
Create a web application with support for BLE devices. |
Improving user experience and enabling advanced device interactions. |
| HTML5 Web Serial API |
Interacting with serial devices in web applications. |
navigator.serial.requestPort({ /*...*/ }) |
Create a web application with support for serial devices. |
Improving user experience and enabling advanced device interactions. |
| HTML5 WebUSB API |
Interacting with USB devices in web applications. |
navigator.usb.requestDevice({ /*...*/ }) |
Create a web application with support for USB devices. |
Improving user experience and enabling advanced device interactions. |
CSS Grid |
Creating complex, responsive layouts with a two-dimensional grid system. |
display: grid; grid-template-columns: repeat(3, 1fr); |
Create a responsive web design with a complex grid layout. |
Improving design flexibility, responsiveness, and alignment. |
| CSS Flexbox |
Creating flexible, responsive layouts with a one-dimensional layout system. |
display: flex; justify-content: space-between; |
Create a responsive web design with a flexible layout. |
Improving design flexibility, responsiveness, and alignment. |
| CSS Variables (Custom Properties) |
Defining and reusing custom CSS properties for easier styling and theming. |
:root { --primary-color: #0077FF; } button { background-color: var(--primary-color); } |
Create a web design with easily customizable styles and themes. |
Improving design consistency, maintainability, and customizability. |
| CSS Calc() |
Performing calculations in CSS for dynamic and responsive sizing. |
width: calc(100% - 30px); |
Create a web design with dynamic and responsive sizing. |
Improving design flexibility and responsiveness. |
| CSS Clip-path |
Creating custom shapes and masks for elements in web designs. |
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); |
Create a visually appealing web design with custom shapes and masks. |
Improving design creativity and visual appeal. |
| CSS Filters |
Applying visual effects to elements in web designs. |
filter: grayscale(100%) brightness(50%); |
Create a visually appealing web design with custom visual effects. |
Improving design creativity and visual appeal. |
| CSS Transitions |
Creating smooth animations between different element states in web designs. |
transition: background-color 0.3s ease-in-out; |
Create a visually appealing web design with smooth animations. |
Improving user experience and visual appeal. |
| CSS Transforms |
Applying 2D and 3D transformations to elements in web designs. |
transform: rotate(45deg) scale(1.2); |
Create a visually appealing web design with custom transformations. |
Improving design creativity and visual appeal. |
| CSS Animations |
Creating complex, custom animations in web designs. |
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
Create a visually appealing web design with custom animations. |
Improving user experience and visual appeal. |
| CSS Shapes |
Creating custom shapes for text wrapping and layout in web designs. |
shape-outside: circle(50%); |
Create a visually appealing web design with custom text wrapping and layout. |
Improving design creativity and visual appeal. |
| CSS Grid Template Areas |
Creating grid layouts with named areas for easier visualization and organization. |
grid-template-areas: "header header" "nav main" "footer footer"; |
Create a responsive web design with a complex grid layout using named areas. |
Improving design flexibility, responsiveness, and organization. |
| CSS Object Fit |
Controlling the size and position of an element within its container. |
object-fit: cover; object-position: center; |
Create a web design with responsive images or videos that fit their containers perfectly. |
Improving design flexibility, responsiveness, and visual appeal. |
| CSS Shapes (Clip Path) |
Creating custom shapes for elements and containers using clip paths. |
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); |
Create a visually appealing web design with custom shapes for elements and containers. |
Improving design creativity and visual appeal. |
| CSS Variables (Custom Properties) for Typography |
Using custom properties for managing typography in web designs. |
:root { --font-base: 16px; --line-height: 1.5; } body { font-size: var(--font-base); line-height: var(--line-height); } |
Create a web design with consistent and easily manageable typography. |
Improving design consistency, maintainability, and readability. |
| CSS Text Shadow |
Applying shadows to text for visual effects. |
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); |
Create a visually appealing web design with custom text shadows. |
Improving design creativity and visual appeal. |
| CSS Gradients |
Creating custom gradients for backgrounds, borders, or text. |
background: linear-gradient(to right, #FF512F, #DD2476); |
Create a visually appealing web design with custom gradients. |
Improving design creativity and visual appeal. |
| CSS Multiple Backgrounds |
Applying multiple background images or colors to an element. |
background: url(image1.png) no-repeat, url(image2.png) no-repeat, #F5F5F5; |
Create a web design with complex backgrounds using multiple images or colors. |
Improving design creativity and visual appeal. |
| CSS Box Shadow |
Applying shadows to elements for depth and visual effects. |
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); |
Create a visually appealing web design with custom box shadows. |
Improving design creativity and visual appeal. |
| CSS Border Radius |
Creating rounded corners for elements. |
border-radius: 4px; border-radius: 50%; |
Create a web design with rounded corners or circular elements. |
Improving design creativity and visual appeal. |
| CSS Flexbox Alignment |
Aligning and distributing space within flex containers for responsive layouts. |
align-items: center; justify-content: space-between; |
Create a responsive web design with flexible and well-aligned layouts. |
Improving design flexibility, responsiveness, and alignment. |