This week

From a web page to an experience

So far, we have worked with structure, layout, typography, responsive design, reusable components, navigation, and simple interactions. This week brings those ideas together through multimedia and experimentation.

A multimedia interface is not simply a page with lots of media. It is a designed experience in which images, type, sound, video, movement, and interaction work together to communicate an idea. A strong experience might use one large image, a quiet transition, and a clear interaction. More effects do not automatically make a better design.

We will also continue learning JavaScript in small, understandable steps. The goal is not to become a programmer overnight. The goal is to understand how to make a design respond to a visitor, and to be able to explain what the code is doing.

Learning objectives

By the end of this lesson, you should be able to:

• Explain how images, audio, video, animation, and interaction can support a design concept.
• Choose media formats and behaviors that suit the content and the visitor’s context.
• Use HTML to place media and CSS to control its presentation.
• Use a small amount of JavaScript to respond to a user action.
• Explain the JavaScript pattern find → listen → respond in your own words.
• Make a multimedia interface that remains understandable on mobile devices and usable without a mouse.
• Test the experience for readability, accessibility, loading behavior, and unnecessary motion.

Part 1 · Design thinking

Multimedia should have a purpose

Before adding an effect, ask what it contributes. Does it reveal information? Establish mood? Help the visitor understand a process? Create a useful sense of feedback? If the answer is simply “it looks cool,” test whether the effect helps the project or distracts from it.

Design principle: Make the experience intentional, not merely busy. Every media element should have a reason to be present, and every control should make its result understandable.

Part 2 · HTML media

Start with HTML before adding JavaScript

HTML provides the actual media element. CSS determines its appearance and placement. JavaScript is only needed when the page must respond to a custom action or update something dynamically.

Example A: A responsive image

<figure class="feature-image">
  <img
    src="images/studio-process.jpg"
    alt="A close view of a photographic work in progress"
    loading="lazy"
  />
  <figcaption>Studio process, 2026</figcaption>
</figure>

What each part does: figure groups the image and its caption. img loads the image file. src points to the file. alt provides a text alternative for people who cannot see the image or use a screen reader. loading="lazy" lets the browser delay loading an image until it is closer to the visible area.

Write alt text according to the image’s purpose. If the image communicates important content, describe that content briefly. If it is purely decorative and adds no information, an empty alt attribute (alt="") may be appropriate.

Example B: A video with controls

<video
  controls
  playsinline
  poster="images/video-poster.jpg"
>
  <source src="media/studio-film.mp4" type="video/mp4" />
  Your browser does not support this video.
</video>

The controls attribute gives the visitor playback controls. playsinline helps the video play within the page on supported mobile browsers. poster supplies an image to display before playback. The source element identifies the video file and its format.

Do not force visitors to watch a video before they can use the page. Avoid autoplay with sound. If a video contains meaningful speech or sound, provide captions or an appropriate text alternative.

Example C: Optional audio

<audio controls>
  <source src="media/field-recording.mp3" type="audio/mpeg" />
  Your browser does not support this audio.
</audio>

The built-in audio player is often the simplest and most reliable solution. You do not need JavaScript just to play an audio file. Use JavaScript only if you have a clear design reason for a custom control or a changing interface.

Part 3 · CSS presentation

Make media fit the layout

Images and videos often arrive in different sizes. CSS helps them behave consistently within a designed composition.

.feature-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}

.feature-image figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #64748b;
}

In plain English: Select the image inside the feature figure. Make it a block, fill the available width, reserve a 16:9 shape, and crop the image to fill that shape. Then style the caption separately.

• width: 100% means “use the full width of the parent container.”
• aspect-ratio: 16 / 9 creates a widescreen-shaped area.
• object-fit: cover fills the area without stretching the image, cropping some edges if needed.
• If you need to show the entire image, try object-fit: contain instead. This may leave empty space around it.

For a portrait, artwork, or experimental photograph, do not automatically force a widescreen crop. Choose an aspect ratio that supports the work. The code is a starting point, not a rule that every image must follow.

Part 4 · JavaScript, step by step

JavaScript gives the interface a response

JavaScript is a language that can read and change the page while someone is using it. For this lesson, we will work with a very small set of ideas. You can understand these ideas without learning every part of the language.

What is an element?

An element is a piece of the page described by HTML: a button, paragraph, image, video, heading, or container. JavaScript can find an element and then interact with it.

What is a selector?

A selector is a way to identify an element. If the HTML says id="sound-button", JavaScript can find it with document.querySelector("#sound-button"). The hash symbol # means an ID. A dot, as in ".media-card", means a class.

Example 1: Click a button to change a caption

<p id="media-caption">
  This work explores movement and memory.
</p>

<button id="caption-button">
  Reveal another note
</button>

const captionButton = document.querySelector("#caption-button");
const caption = document.querySelector("#media-caption");

captionButton.addEventListener("click", function () {
  caption.textContent = "The image was made using a slow shutter speed.";
});

Read each line:

1. const captionButton = ... finds the button and gives it the name captionButton. const creates a named variable we can refer to later.
2. document.querySelector("#caption-button") means “look through this web page and find the element with this ID.”
3. The second const finds the paragraph and names it caption.
4. captionButton.addEventListener("click", ...) tells the browser to wait for a click on the button.
5. function () { ... } contains the instructions that should run after the click.
6. caption.textContent = ... replaces the paragraph’s text with the new sentence.

Notice that the selector names match the IDs in the HTML exactly. If the HTML ID is caption-button but the JavaScript searches for #caption-btn, the browser will not find the button.

Example 2: Toggle a media note open and closed

Sometimes a visitor should be able to choose whether to see more information. A toggle is an interaction that switches between two states: open and closed.

<button
  id="note-toggle"
  aria-expanded="false"
  aria-controls="media-note"
>
  Show the artist's note
</button>

<div id="media-note" hidden>
  <p>
    This sequence combines still photographs with movement studies.
  </p>
</div>

const noteButton = document.querySelector("#note-toggle");
const mediaNote = document.querySelector("#media-note");

noteButton.addEventListener("click", function () {
  const shouldOpen = mediaNote.hidden;

  mediaNote.hidden = !shouldOpen;
  noteButton.setAttribute("aria-expanded", shouldOpen);

  if (shouldOpen) {
    noteButton.textContent = "Hide the artist's note";
  } else {
    noteButton.textContent = "Show the artist's note";
  }
});

How the toggle works:

1. The button and note panel are found by their IDs.
2. When the button is clicked, the code checks whether the panel is hidden.
3. shouldOpen is a name for the answer to that question: should the panel open now?
4. mediaNote.hidden = !shouldOpen sets the panel’s hidden state to the opposite of shouldOpen. If it should open, hidden becomes false. If it should close, hidden becomes true.
5. setAttribute() updates aria-expanded, which communicates the state to assistive technology.
6. The if statement chooses the correct button label. If the note opened, the button now offers to hide it. Otherwise, it offers to show it.

What does if mean? It means “if this condition is true, do this.” The else part means “otherwise, do this other thing.” You will see this pattern in many interactions.

Example 3: Add a visual state with a CSS class

Sometimes the content does not need to appear or disappear. You may want a button to change a visual state, such as switching a media panel into a focused presentation. CSS defines the look; JavaScript switches the class on or off.

<section id="focus-panel" class="media-panel">
  <h2>Movement Study</h2>
  <p>Explore the relationship between blur and gesture.</p>
</section>

<button id="focus-button">
  Toggle focus mode
</button>

.media-panel {
  padding: 1.5rem;
  background: #f3f4f6;
  transition: background-color 180ms ease;
}

.media-panel.is-focused {
  background: #ecfccb;
  outline: 2px solid #4d7c0f;
}

const focusButton = document.querySelector("#focus-button");
const focusPanel = document.querySelector("#focus-panel");

focusButton.addEventListener("click", function () {
  focusPanel.classList.toggle("is-focused");
});

What does classList.toggle() do? It checks for the named class. If the class is missing, it adds it. If the class is already there, it removes it. In this example, CSS notices the class and changes the panel’s appearance.

Think of it this way: JavaScript does not need to know what the color should be. JavaScript only adds or removes the class. CSS is responsible for the visual design. Keeping those jobs separate makes the code easier to change and maintain.

Part 5 · Motion with care

Animation should communicate, not compete

Motion can direct attention, suggest a change, or give an interface a sense of rhythm. But constant movement can distract visitors, make text harder to follow, and cause discomfort for people who are sensitive to motion.

.media-card {
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.media-card:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .media-card {
    transition: none;
  }
}

This example gives a card a small lift when a mouse pointer hovers over it. The reduced-motion media query removes the transition for visitors who have asked their device to reduce motion.

Do not rely on hover alone. Touchscreen users do not hover in the same way, and keyboard users need visible focus states. If an effect communicates important information, make that information available in another way too.

JavaScript note: You do not need JavaScript for every animation. CSS is often the simplest tool for visual transitions. Use JavaScript when the page needs to respond to an action or manage a state that CSS alone cannot conveniently handle.

Part 6 · Troubleshooting

When your JavaScript does not work

1. Check the IDs. The HTML id and the JavaScript selector must match exactly, including hyphens and spelling.
2. Check the selector symbol. Use #name for an ID and .name for a class.
3. Check script placement. If the script runs before the HTML element exists, JavaScript may not find it. Put the script near the end of the body, or load an external script with defer.
4. Check the browser console. Right-click the page, choose Inspect, and select Console. Red error messages can point to a spelling mistake or a missing element.
5. Check for missing punctuation. Parentheses, quotation marks, curly braces, and semicolons must be in the right places. JavaScript examples are sensitive to syntax.
6. Test one small step at a time. First confirm the button appears. Then confirm the selector matches. Then add the click listener. Finally add the response.

Studio assignment

Build a multimedia experiment

Create a single-page multimedia experience based on one visual idea, mood, process, or theme. You may use photography, illustration, video, audio, typography, or a combination of media. Keep the layout intentional and the interaction easy to understand.

Required components

• A clear title and a short introduction that establish the concept.
• At least two media elements, such as images, a video, or an audio player.
• Captions or supporting text where they help explain the work.
• One purposeful interaction built with JavaScript: for example, reveal a note, change a caption, or toggle a visual state.
• Responsive layout behavior for desktop and mobile.
• Controls with clear labels and a usable keyboard focus state.
• A short explanation of why the media and interaction support the concept.

Suggested workflow

1. Write one sentence describing the idea of your experience.
2. Select media that supports the idea; avoid adding assets just to meet a count.
3. Sketch the layout before writing code.
4. Build the HTML structure and confirm that the media loads.
5. Style the layout with CSS and check it at a narrow viewport.
6. Add one small JavaScript interaction using find → listen → respond.
7. Test the interaction, keyboard access, captions, image alternatives, and reduced-motion behavior.
8. Ask a classmate to use the page without verbal instructions. Watch where they hesitate.
9. Make at least one revision based on the test.

Reflection + submission checklist

Before you submit

• The design communicates one clear idea.
• Media choices feel intentional and do not overwhelm the content.
• Images have appropriate alt text; meaningful video has captions or an equivalent alternative.
• Video and audio do not unexpectedly start with sound.
• The page works at desktop and mobile widths.
• The JavaScript interaction works more than once and can be understood from its label.
• The button or control can be reached and used with a keyboard.
• Motion is restrained and reduced-motion preferences are considered.
• The browser console has been checked for errors.
• You can explain what each line of your JavaScript example does in plain English.

Reflection prompt: What did multimedia allow you to communicate that a static layout could not? What did you remove or simplify during testing, and why?