web.dev Learn

https://web.dev/learn/
Admin
web.dev Learn is a collection of comprehensive courses on web development topics including HTML,...
Tokens:415,636
Snippets:6,926
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### GET Request URL Example

Source: https://web.dev/learn/forms/form-element

Example of how form data appears in the URL when using the default GET method.

```text
https://example.com/animals?animal=frog
```

--------------------------------

### Display installation instructions using CSS media queries

Source: https://web.dev/learn/pwa/installation-prompt

Use the display-mode media query to ensure installation instructions are only visible when the app is running in browser mode.

```css
#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}
```

--------------------------------

### Handle app installation event

Source: https://web.dev/learn/pwa/detection

Listens for the appinstalled event to trigger UI updates or analytics logging after a user accepts the installation prompt.

```javascript
window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});
```

--------------------------------

### Zero-shot prompting example

Source: https://web.dev/learn/ai/prompt-engineering

A basic prompt requesting information without providing examples or reasoning steps.

```text
"What is the capital of France?"

```

--------------------------------

### HTML Focus Order Example

Source: https://web.dev/learn/accessibility/focus?hl=zh-tw

An example showing how different tabindex values affect the keyboard navigation sequence of elements.

```html
<div>
 <h1>Focus order</h1>
 <p tabindex="0">Focus goes here 4th</p>
 <p tabindex="2">Focus goes here 2nd</p>
 <p tabindex="1">Focus goes here 1st</p>
 <p tabindex="-1">Focus never goes here</p>
 <p tabindex="3">Focus goes here 3rd</p>
 <p tabindex="0">Focus goes here 5th</p>
</div>
<br>
<div>
 <span>Note: this is an example of the power of the tabindex atttribute and what NOT to do with your focus order!</span>
</div>
```

--------------------------------

### HTML Form Structure Example

Source: https://web.dev/learn/forms/design-basics

A basic HTML structure for a form demo.

```html
<main>
 <div class="wrapper">
 <p class="warning"><strong>Disclaimer:</strong> This is a demo showing how you shouldn't do it.
```

--------------------------------

### Basic Component Test Setup

Source: https://web.dev/learn/testing/get-started/component-testing?continue=https%3A%2F%2Fweb.dev%2Flearn%2Ftesting%23article-https%3A%2F%2Fweb.dev%2Flearn%2Ftesting%2Fget-started%2Fcomponent-testing

Initial boilerplate for a component test file using Vitest and React Testing Library.

```typescript
import { vi, test, assert, afterAll } from 'vitest';
import { render } from '@testing-library/react';
import { UserList } from './UserList.tsx';
import React, { ContextType } from 'react';

test('render', async () => {
  const c = render(<UserList />);

  const headingNode = await c.findAllByText(/Users);
  assert.isNotNull(headingNode);
});
```

--------------------------------

### Using CSS Environment Variables

Source: https://web.dev/learn/design/screen-configurations?continue=https%3A%2F%2Fweb.dev%2Flearn%2Fdesign%23article-https%3A%2F%2Fweb.dev%2Flearn%2Fdesign%2Fscreen-configurations

Example of accessing browser-provided environment variables for viewport context.

```css
env(safe-area-inset-top)
```

--------------------------------

### Warm the offline cache during service worker installation

Source: https://web.dev/learn/pwa/workbox

Pre-caches the offline fallback file during the service worker install event to ensure availability.

```javascript
import { setCatchHandler } from 'workbox-routing';

// Warm the cache when the service worker installs
self.addEventListener('install', event => {
  const files = ['/offline.html']; // you can add more resources here
  event.waitUntil(
    self.caches.open('offline-fallbacks')
        .then(cache => cache.addAll(files))
  );
});
```

--------------------------------

### Define Test Lifecycle Methods

Source: https://web.dev/learn/testing/assertions/tools?continue=https%3A%2F%2Fweb.dev%2Flearn%2Ftesting%23article-https%3A%2F%2Fweb.dev%2Flearn%2Ftesting%2Fassertions%2Ftools

Uses suite-level setup and teardown functions to manage test state, such as database population and cleanup.

```javascript
suite('user test', () => {
  beforeEach(() => {
    insertFakeUser('bob@example.com', 'hunter2');
  });
  afterEach(() => {
    clearAllUsers();
  });

  test('bob can login', async () => { … });
  test('alice can message bob', async () => { … });
});
```

--------------------------------

### CSS for Basic Focus Style

Source: https://web.dev/learn/quizzes/accessibility

This CSS example applies a dotted underline with a blue color as a focus indicator, which may have insufficient contrast on some backgrounds.

```css
text-decoration: dotted underline 2px blue;
```

--------------------------------

### Accessible Button Implementation

Source: https://web.dev/learn/quizzes/accessibility

This example shows an accessible button implementation using the `<button>` element, which is semantically correct for interactive controls.

```html
<button id="saveChanges" type="button">Go to shop</button>
```

--------------------------------

### Accessible Form Input with Label and Validation

Source: https://web.dev/learn/quizzes/accessibility

This example demonstrates an accessible form input by associating a `<label>` with the input, marking it as required, and providing a validation message linked via `aria-describedby`.

```html
<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>
```

--------------------------------

### ESLint no-unsafe-finally rule example

Source: https://web.dev/learn/testing/get-started/static-analysis

Demonstrates a code pattern that triggers the no-unsafe-finally rule, where a return statement inside a finally block overrides previous exceptions.

```javascript
  try {
    const result = await complexFetchFromNetwork();
    if (!result.ok) {
      throw new Error("failed to fetch");
    }
  } finally {
    // warning - this will 'overrule' the previous exception!
    return false;
  }
```

--------------------------------

### TypeScript Callback Type Mismatch Example

Source: https://web.dev/learn/testing/get-started/static-analysis

Demonstrates a type mismatch where a callback expects a number for age but receives a string.

```typescript
const callback = (name: string, age: string): void => {
  console.info(name, 'is now', age, 'years old!');
};
onBirthday(callback);
```

--------------------------------

### Example of implicit any in TypeScript

Source: https://web.dev/learn/testing/get-started/static-analysis

A function that triggers an implicit any error when the noImplicitAny flag is enabled because the parameter type is not defined.

```typescript
export function fibonacci(n) {
  if (n <= 1) {
    return 0;
  } else if (n === 2) {
    return 1;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}
```

--------------------------------

### CSS for Non-Accessible Focus Style

Source: https://web.dev/learn/quizzes/accessibility

This CSS example removes the default focus outline and text decoration, making it difficult for keyboard users to identify the active element.

```css
outline: none; text-decoration:none; background:none;
```

--------------------------------

### Few-shot prompting for sentiment classification

Source: https://web.dev/learn/ai/prompt-engineering

Provides labeled examples to guide the model's classification behavior.

```text
You classify user messages into one of the following categories:
- "positive"
- "negative"
- "neutral"
Here are examples to guide your classifications:
Input: "I love this product! It works perfectly."
Output: { "label": "positive" }

Input: "This is terrible. I want a refund."
Output: { "label": "negative" }

```

--------------------------------

### Capture the beforeinstallprompt event

Source: https://web.dev/learn/pwa/installation-prompt

Listen for the beforeinstallprompt event and save it to a variable to trigger the installation prompt later.

```javascript
// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});
```

--------------------------------

### Numeric literal example

Source: https://web.dev/learn/javascript/data-types/number

A basic example of a numeric literal.

```javascript
5
```

--------------------------------

### Use the constructor method

Source: https://web.dev/learn/javascript/classes

The constructor method initializes properties and handles setup logic for new instances.

```javascript
class MyClass {
  constructor( myPassedValue ) {
    console.log( myPassedValue );
  }
}

const myClassInstance = new MyClass( "A string." );
> "A string."
```

--------------------------------

### Basic Preconnect Hint

Source: https://web.dev/learn/performance/resource-hints

Establishes a connection to a cross-origin domain to speed up future resource fetching.

```html
<link rel="preconnect" href="https://example.com">
```

--------------------------------

### HTML Blockquote Example

Source: https://web.dev/learn/html/inline-text?continue=https%3A%2F%2Fweb.dev%2Flearn%2Fhtml%23article-https%3A%2F%2Fweb.dev%2Flearn%2Fhtml%2Finline-text

Example of a blockquote element used in the workshop review context.

```html
<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. </blockquote>
```

--------------------------------

### Create a basic web app manifest

Source: https://web.dev/learn/pwa/web-app-manifest

Define the manifest file with at least a name field.

```json
{
   "name": "My First Application"
}
```

--------------------------------

### Live CodePen Example Components

Source: https://web.dev/learn/images/prescriptive?continue=https%3A%2F%2Fweb.dev%2Flearn%2Fimages%23article-https%3A%2F%2Fweb.dev%2Flearn%2Fimages%2Fprescriptive

Individual lines representing the structure of a live CodePen example.

```html
<picture>
```

```html
   <source media="(prefers-color-scheme: dark)" srcset="https://assets.codepen.io/11355/w-dark.svg">
```

```html
   <img srcset="https://assets.codepen.io/11355/w-light.svg">
```

```html
</picture>
```

--------------------------------

### Configure Startup Images for iOS

Source: https://web.dev/learn/html/metadata

Use link tags with media queries to specify different startup images based on device orientation.

```html
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
```

--------------------------------

### Interactive picture element example

Source: https://web.dev/learn/images/prescriptive?continue=https%3A%2F%2Fweb.dev%2Flearn%2Fimages%23article-https%3A%2F%2Fweb.dev%2Flearn%2Fimages%2Fprescriptive

A breakdown of the picture element structure used in a live example.

```html
<picture>
```

```html
  <source media="(min-width: 1200px)" srcset="https://assets.codepen.io/11355/honeybee-wide.jpg">
```

```html
  <img src="https://assets.codepen.io/11355/honeybee-close.jpg" alt="…">
```

```html
</picture>
```

--------------------------------

### Infinite while loop example

Source: https://web.dev/learn/javascript/control-flow

Shows an example of an infinite loop caused by a condition that always evaluates to true.

```javascript
console.log( "Pre-loop." );
while( true ) {
console.log( "Loop iteration." );
}
> "Pre-loop."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
…
```

--------------------------------

### Define session behavior with initialPrompts

Source: https://web.dev/learn/ai/prompt-engineering

Configures the model's role, tone, and output format using a system-level prompt during session creation.

```javascript
// Defines stable behavior for the entire session
const session = await LanguageModel.create({
  initialPrompts: [
    {
      role: "system",
      content: `You are a blog-writing assistant.
      Your task is to generate high-quality titles for blog posts.
      Always respond in concise, friendly language.
      Return exactly 3 alternative titles.
      Produce valid JSON with a "titles" array of strings.`
    }
  ]
});
```

--------------------------------

### Invalid Identifier Starting with a Digit

Source: https://web.dev/learn/javascript/data-types/variable

Demonstrates a syntax error caused by starting a variable identifier with a number.

```javascript
let 1a = true;

> Uncaught SyntaxError: Invalid or unexpected token
```

--------------------------------

### Demonstrate container collapse with placeholder content

Source: https://web.dev/learn/css/container-queries

Examples showing how containers without explicit dimensions may collapse.

```text
xxxxxxxxxx
```

```text
xxxxxxxxxx
```

--------------------------------

### Trigger installation and track user choice

Source: https://web.dev/learn/pwa/installation-prompt

Use the saved deferredPrompt to call the prompt() method and handle the user's decision via the userChoice promise.

```javascript
// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});
```

--------------------------------

### CodePen live example components

Source: https://web.dev/learn/images/prescriptive

Individual lines of code representing a CodePen example for color scheme switching.

```html
<picture>
```

```html
   <source media="(prefers-color-scheme: dark)" srcset="https://assets.codepen.io/11355/w-dark.svg">
```

```html
   <img srcset="https://assets.codepen.io/11355/w-light.svg">
```

```html
</picture>
```

```html

```

--------------------------------

### HTML structure for container query example

Source: https://web.dev/learn/css/container-queries?continue=https%3A%2F%2Fweb.dev%2Flearn%2Fcss%23article-https%3A%2F%2Fweb.dev%2Flearn%2Fcss%2Fcontainer-queries&hl=it

The HTML markup containing the containers and buttons used in the CSS example.

```html
<article class="flow">
 <div class="container one">

 <button> Button One </button>
 </div>
 <div class="container two">
 <button> Button Two</button>
 </div>
</article>
```

--------------------------------

### Detect Installed Related Apps

Source: https://web.dev/learn/pwa/detection

Uses the navigator API to check if any related applications are currently installed on the device.

```javascript
const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;
```

--------------------------------

### Implement prefetch resource hint

Source: https://web.dev/learn/performance/resource-hints

Use the link element with rel="prefetch" to initiate a low-priority request for a future resource.

```html
<link rel="prefetch" href="/next-page.css" as="style">
```

--------------------------------

### Populate an array on creation

Source: https://web.dev/learn/javascript/collections/indexed

Shows how to initialize an array with values using literal and constructor syntax.

```javascript
const myArray = [ true, null, "String", false ];

myArray;
> [ true, null, "String", false ]
```

```javascript
const myArray = new Array( true, null, "String", false );

myArray;
> Array(4) [ true, null, "String", false ]
```

--------------------------------

### Inaccessible Landmark and Heading Examples

Source: https://web.dev/learn/accessibility/test-assistive-technology?continue=https%3A%2F%2Fweb.dev%2Flearn%2Faccessibility%23article-https%3A%2F%2Fweb.dev%2Flearn%2Faccessibility%2Ftest-assistive-technology

Examples of non-semantic HTML elements that fail to provide proper structure for screen readers.

```html
<div class="main">...</div>
```

```html
<p class="h1">Join the Club</p>
```

--------------------------------

### Define responsive iOS startup images with media queries

Source: https://web.dev/learn/pwa/enhancements

Use the media attribute to provide different startup images based on device orientation.

```html
<link rel="apple-touch-startup-image" href="ios-startup.png"
      media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
      media="orientation: landscape">
```

--------------------------------

### Run Workbox CLI Wizard

Source: https://web.dev/learn/pwa/workbox

Initializes the Workbox configuration wizard via the command line.

```bash
npx workbox-cli wizard
```
Tokens:
Raw