Skip to content
nuggetof joy

Post · October 10, 2026

Week 13 — SEO, Performance, and Clear Content

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: 13

Learning objectives

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

  • Write a descriptive page title and concise meta description.
  • Explain how image file size affects loading performance.
  • Identify content and structural choices that support discoverability.

Key concepts

Search engine optimization begins with useful content and clear structure. Descriptive page titles, meaningful headings, helpful link text, and concise page descriptions help people understand what a page is about.

Performance matters too. Large images can slow down a page, especially on mobile connections. Use appropriately sized assets and compression, avoid unnecessary effects, and test the page in realistic conditions.

No checklist can predict a search ranking. Search systems use many signals, and good optimization should improve the experience rather than encourage misleading content.

Interactive demonstration

Demo file: 10-performance-seo-lab.html

Change the title, meta description, image-weight option, and heading setting in the Performance & SEO Lab. Observe how each choice affects the learning checklist.

See the Pen 10-performance-seo-lab by Nicholas D’Angelo (@ndangelo) on CodePen.

Write a page title and meta description for your project. Optimize one image and document its original and final file size. Review headings and link text for clarity.

Connection to your website project

Use the checklist to improve your final site before publishing or presenting it.

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

SEO basics, metadata, headings, image optimization, performance

Project files and folder structure

Create week-13/index.html, week-13/css/styles.css, week-13/assets/, and week-13/seo-performance-report.txt.

Syntax to practice

<title>, <meta name="description">, descriptive headings, meaningful link text, image alt, optimized dimensions/formats.

Build it

Improve one page for findability and loading performance. Add a unique title and meta description, review heading structure and image alt text, optimize oversized images, and record validation or performance results.

Code along: Add a descriptive page title and meta description.

Open in Sublime Text: week-13/index.html

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.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Student Portfolio | Jordan Lee</title>
  <meta name="description" content="Selected design and web projects by Jordan Lee.">
  <link rel="stylesheet" href="css/styles.css">
</head>

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-13/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Student Portfolio | Jordan Lee</title>
  <meta name="description" content="Selected design, web, and visual communication projects by Jordan Lee.">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body><main><h1>Jordan Lee — Portfolio</h1><p>Selected work in design and visual communication.</p></main></body>
</html>

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

body { margin: 0; font-family: Arial, sans-serif; line-height: 1.7; color: #20242c; }
main { max-width: 760px; margin: auto; padding: 24px; }
h1 { line-height: 1.15; }
p { max-width: 65ch; }

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

Modify it

Write unique titles and descriptions for each page. Check links, image sizes, and alt text.

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-13/index.html — unique title, meta description, logical headings, descriptive alt text.
  • week-13/assets/ — optimized local images used on the page.
  • week-13/seo-performance-report.txt — title, description, test tool/date/results, and two improvements or justified decisions.
  • week-13/README.txt — intended audience and search intent.

Submission checklist

  • Metadata specific; logical headings; image sizes appropriate; test results recorded honestly.
  • 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.