01 / THE BIG IDEA

Images are part of the message

Think about the last website that caught your attention. Was it the photography, the illustrations, the colors, or the way images were arranged? Visual content can influence how we understand a subject before we read a single paragraph.

As designers, we need to consider more than whether an image looks good. We also need to think about its purpose, quality, file size, accessibility, and relationship to the surrounding content.

02 / YOUR FIRST IMAGE

Meet the image element

HTML uses the <img> element to display an image. Unlike a paragraph or heading, it does not have a separate closing tag.

<img
  src="https://example.com/my-image.jpg"
  alt="A red bicycle leaning against a brick wall"
>

Two attributes are especially important:

• src specifies the image source—the location of the image file.
• alt provides a text alternative describing the image’s relevant content or purpose.

03 / TRY IT IN CODEPEN

Add a real image to your page

For this activity, you can use an image hosted online or upload an image through CodePen’s supported asset features. Make sure you have permission to use the image and that the source is accessible.

<h1>A Place That Inspires Me</h1>

<p>This place inspires my creative work.</p>

<img
  src="PASTE-YOUR-IMAGE-URL-HERE"
  alt="Describe the important details of your image"
>

Follow these steps

1. Choose an image related to your page topic.
2. Find a usable image URL or use an image asset feature available to you.
3. Replace the placeholder in the src attribute.
4. Replace the sample alt text with an accurate description of your image.
5. Check the CodePen preview to confirm that the image appears.

04 / ALTERNATIVE TEXT

Write useful alt text

Alternative text helps people who use screen readers understand an image’s relevant information. It can also appear when an image cannot load.

The best alt text depends on the image’s purpose and context. Describe what matters to the surrounding content instead of listing every visible detail.

Practice: Improve the alt text

Imagine your page features a photograph of a person painting a large blue mural on a brick wall.

alt="photo"

alt="An artist painting a blue mural on a brick wall"

05 / IMAGES WITH CAPTIONS

Give the image context

A caption is visible text that appears alongside an image. It can identify the artist, explain what is happening, provide a date, or add context that is not included in the image itself.

HTML provides <figure> and <figcaption> to group an image with its caption.

<figure>
  <img
    src="artwork.jpg"
    alt="A layered abstract painting in blue and orange"
  >

  <figcaption>
    Abstract study, acrylic and mixed media, 2025.
  </figcaption>
</figure>

This structure is especially useful for art portfolios, photography projects, editorial layouts, and visual research pages.

06 / CONTROL IMAGE SIZE

Let CSS handle presentation

HTML describes the content. CSS controls how that content is displayed. For now, we can use a small CSS rule to help images fit their containers.

img {
  max-width: 100%;
  height: auto;
}

This rule prevents an image from becoming wider than its available container while allowing its height to scale proportionally.

Try changing the image width

Once the image is working, try this additional rule:

img {
  width: 70%;
  height: auto;
}

Change 70% to 50% and then 100%. Observe how the image changes size. We will explore more precise control over layout and spacing in future lessons.

07 / IMAGE QUALITY & RESPONSIBLE USE

Choose images thoughtfully

Large images can slow down a page. Small images can look blurry when enlarged. The goal is to select an appropriate image and prepare it for the way it will be displayed.

08 / SYNCHRONOUS CLASS ACTIVITY

Build a visual story

During our live session, we will turn a simple text page into a small visual story. You will choose a subject, add an image, write alt text, and create a caption.

In class

1. Open your existing CodePen project from Week 3 or start a new pen.
2. Choose an image related to your subject.
3. Add the image using <img>, including both src and alt.
4. Wrap the image in a <figure> element.
5. Add a caption using <figcaption>.
6. Add the responsive image CSS rule.
7. Test the image and check the page at different browser widths.

09 / INDEPENDENT PROJECT

Turn your mini-site into a visual experience

Continue developing the page you started in Week 3. Add visual content that supports your subject and gives visitors more information about your chosen topic.

Project requirements

• Continue using the HTML page from Week 3.
• Include at least two relevant images.
• Provide appropriate alt text for each meaningful image.
• Include at least one image with a caption using <figure> and <figcaption>.
• Keep your existing headings, sections, and navigation links working.
• Use the responsive image CSS rule provided in the lesson.
• Use images responsibly and follow any applicable licensing or attribution requirements.
• Submit your working CodePen link through D2L.

10 / SUBMISSION & REFLECTION

Look at your page from a visitor’s perspective

Before submitting, check that your images load, your links still work, and your captions make sense. Then consider the experience of someone visiting your page for the first time.

Reflection questions

1. How did your image choices change the way your page communicates its subject?
2. What is the difference between alt text and a visible caption?
3. What did you learn about choosing and displaying images on the web?

11 / QUICK REFERENCE

Tags and CSS from this week

12 / LOOKING AHEAD

Next week: Color, CSS & visual identity

We have built structure, connected sections, and introduced images. Next week, we will begin exploring CSS as a design tool, using color and basic styling to establish a visual identity.

As you browse websites this week, notice how images are cropped, positioned, captioned, and combined with text. Consider what those choices communicate about the brand, artist, or organization behind the site.