Skip to content
nuggetof joy

Post · October 10, 2026

Week 6 — Images and Art Direction

90-minute class plan

  • 0–10 min — Opening and visual warm-up: Introduce the learning goals, review the previous class, and discuss a relevant website example.
  • 10–25 min — Mini-lesson: Explain the key concepts and show examples. Keep the presentation focused on what students will apply.
  • 25–45 min — Instructor demonstration: Walk through the interactive CodePen or a live example. Pause for predictions and questions.
  • 45–70 min — Guided and independent practice: Students complete the lesson exercise, first following a short demonstration and then making their own decisions.
  • 70–83 min — Apply and critique: Students connect the skill to their website project, compare results with a partner, and make one improvement.
  • 83–90 min — Share-out and exit ticket: Review key takeaways and ask students to identify one thing they learned and one next step.

Course: Introduction to Web Design
Week: 6

Learning objectives

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

  • Explain how crop and aspect ratio influence visual meaning.
  • Choose imagery that supports a page’s purpose and audience.
  • Describe image licensing, optimization, and alternative text considerations.

Key concepts

Images establish context, emotion, and identity. Crop, focal point, aspect ratio, and color treatment can change how an image feels and how it works within a layout.

Use images that support the content rather than choosing them only because they look attractive. Consider where the image will appear, how it will crop on mobile screens, whether you have permission to use it, and whether the file is optimized.

Alternative text should communicate meaningful information conveyed by an image when that information is not already available nearby. Decorative images may need empty alternative text so assistive technology can skip them.

Interactive demonstration

Demo file: 05-image-art-direction.html

Change the aspect ratio, focal point, color treatment, and overlay. Observe how the composition changes as the viewing area changes.

See the Pen 06-css-grid-playground by Nicholas D’Angelo (@ndangelo) on CodePen.

Choose two images for your project. Create desktop and mobile crop plans, write proposed alt text for each image, and document the source or license.

Connection to your website project

Use appropriately licensed, optimized images in your midterm website.

Sublime Text coding lab

Complete this coding task in Sublime Text, save the files using the names below, and open the HTML page in a browser to test it.

Today’s coding focus

Images, asset folders, relative paths, alt text, formats, and file size

Project files and folder structure

Use week-06/index.html, week-06/css/styles.css, and week-06/assets/.

Syntax to practice

<img src="assets/example.jpg" alt="Specific description">, sensible image dimensions, CSS object-fit and object-position.

Build it

Add two appropriately licensed images: one meaningful content image and one decorative or art-directed image. Add useful alt text to meaningful images, style one crop, and use clear lowercase hyphenated filenames.

Code along: Make an image responsive and check its path and alternative text.

Open in Sublime Text: week-06/css/styles.css

Type the example below, save the file, and read the comments and selectors carefully. Use this as a starting point, then modify it for your own project.

/* HTML: <img class="feature-image" src="assets/studio-work.jpg" alt="Printed photographs arranged on a table"> */
.feature-image {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 24px auto;
}

Complete HTML and CSS example

These are matching files. Create the folders shown below, save each code sample using the exact filename, and keep the stylesheet link consistent with your folder structure.

HTML file: week-06/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Image and Asset Example</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main class="content">
    <h1>Images and Art Direction</h1>
    <figure>
      <img src="assets/studio-work.jpg" alt="Printed photographs arranged on a studio table">
      <figcaption>Studio process and source: add your asset credit here.</figcaption>
    </figure>
  </main>
</body>
</html>

CSS file: week-06/css/styles.css

body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; color: #222; }
.content { max-width: 900px; margin: auto; padding: 24px; }
figure { margin: 0; }
img { display: block; width: 100%; height: auto; border-radius: 8px; }
figcaption { margin-top: 8px; color: #555; font-size: .9rem; }

Important: The HTML links to css/styles.css. Keep that path correct relative to the HTML file.

Modify it

Add a second image with meaningful alt text. Record the source or license in asset-credits.txt.

Save and test

  1. Save the file in the exact folder shown above.
  2. Open the HTML file in a browser, or refresh it after saving if it is already open.
  3. Check that linked CSS, images, and navigation work. If something fails, inspect filenames, capitalization, nesting, and relative paths.

Assignment and required deliverables

Submit every item below. Use the specified filenames and folder structure. A screenshot does not replace a required source file.

Required files

  • week-06/index.html, week-06/css/styles.css, and week-06/assets/ containing two image files.
  • week-06/asset-credits.txt — creator/source, original URL, license/usage terms, and local filename for each image.
  • week-06/README.txt — alt-text rationale and why image dimensions/formats are appropriate.

Submission checklist

  • Both images load; meaningful filenames; useful alt text; credits and license details recorded.
  • Keep all HTML, CSS, image, text, and PDF files inside the named weekly or project folder.
  • Open the HTML file in a browser before submitting and confirm linked CSS and images load.

Before you leave (3-minute exit check)

Write down one thing you changed, one thing you learned from the result, and one question you still have.

References

These references support the key concepts and practices covered in this lesson. They are provided for verification and further study.