AMDE 355 – HTML & CSS Refresher (Week 1)

01 / The challenge — make the basics work harder

Advanced web design is not about piling on effects. It starts with a solid structure, a stylesheet you can reason about, and a layout that behaves when the viewport changes. This week, you will revisit familiar tools and use them more deliberately.

02 / Learning objectives

03 / HTML refresher — structure before style

Semantic HTML describes what a piece of content is. Use headings for hierarchy, paragraphs for text blocks, and elements such as <main>, <section>, and <article> when their meaning fits the content.

Example / A compact project feature

<!-- The page's structure -->
<main class="page">
  <header class="intro">
    <p class="eyebrow">Independent creative practice</p>
    <h1>AFTER IMAGE</h1>
    <p class="intro-text">
      An experimental archive of image, sound, and memory.
    </p>
  </header>

  <section class="projects">
    <article class="project-card featured">
      <p class="label">01 / Featured work</p>
      <h2>The Shape of Noise</h2>
      <p>A short description of the project.</p>
    </article>
  </section>
</main>

The code sample is color-coded: blue marks tags, violet marks attributes, green marks string values, and gray marks comments.

04 / CSS refresher — make rules predictable

CSS applies declarations to selected elements. When a style does not behave as expected, inspect the element and determine which rule wins before adding another override.

/* Foundation: make sizing predictable */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  background: #f5f2eb;
  color: #182033;
}

.page {
  width: min(1100px, 92%);
  margin-inline: auto;
}

.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.featured {
  grid-column: span 2;
}

/* Recompose for smaller screens */
@media (max-width: 700px) {
  .projects {
    grid-template-columns: 1fr;
  }
  .featured {
    grid-column: auto;
  }
}

05 / Instructor demo — diagnose, repair, improve

1. Inspect: Open the browser developer tools and select a card. Review its HTML and applied CSS.
2. Repair: Fix a missing class, invalid nesting, conflicting rule, or broken image path.
3. Recompose: Use Grid for the project area and make the featured item span more than one column.
4. Resize: Narrow the viewport. Add a breakpoint only when the content needs a different arrangement.
5. Explain: Identify which change improved structure, which improved styling, and which improved responsiveness.

Optional debugging snippet

// Small debugging habit: inspect a selected element.
const card = document.querySelector(".project-card");

if (card) {
  console.log("Card found:", card);
} else {
  console.log("Check the class name in your HTML.");
}

This tiny script is only a debugging example. The core refresher is HTML and CSS; you do not need JavaScript to complete the main assignment.

Demo goal

Build a small creative portfolio page from a plain HTML structure into a responsive, editorial layout. This revisits the HTML/CSS foundations while giving students an engaging before-and-after transformation.

Suggested timing: 20–30 minutes. In CodePen, place the HTML in the HTML panel and the CSS in the CSS panel. The HTML and CSS below are separate snippets.

Step 1 — Start with the content structure

Paste this into the HTML panel. Preview it before adding CSS. Ask students to identify the main heading, the introductory text, and the three project cards.

<main class="portfolio">
  <header class="intro">
    <p class="eyebrow">SELECTED WORK / 2026</p>
    <h1>Ideas in Motion</h1>
    <p class="intro-copy">
      A small archive of experiments, images, and digital objects.
    </p>
  </header>

  <section class="projects" aria-label="Selected projects">
    <article class="project featured">
      <p class="project-type">01 / IMAGE</p>
      <h2>Afterimage</h2>
      <p>Photographs about memory and movement.</p>
    </article>

    <article class="project">
      <p class="project-type">02 / INTERACTION</p>
      <h2>Soft Machines</h2>
      <p>A playful experiment with digital interfaces.</p>
    </article>

    <article class="project">
      <p class="project-type">03 / MOVING IMAGE</p>
      <h2>Common Weather</h2>
      <p>Short studies of atmosphere and place.</p>
    </article>
  </section>

  <footer class="site-footer">
    <p>Made for the web · 2026</p>
  </footer>
</main>

Explain: main contains the primary content; header introduces the page; section groups related projects; each article is a self-contained project item. The class names connect the HTML to CSS.

Step 2 — Add a reset and readable defaults

Paste this at the top of the CSS panel. Show how the universal selector makes box sizing predictable and how the body rules set the overall tone.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  background: #f2f0e9;
  color: #182033;
}

.portfolio {
  width: min(1100px, 92%);
  margin: 0 auto;
}

Live change: Temporarily remove margin: 0 auto from .portfolio. Ask students to compare the alignment, then restore it.

Step 3 — Establish the typographic hierarchy

Style the intro first. This creates a strong opening before the cards are arranged.

.intro {
  padding: clamp(3rem, 10vw, 7rem) 0 3rem;
  max-width: 850px;
}

.eyebrow, .project-type {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.intro h1 {
  max-width: 800px;
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.06em;
  margin: 1rem 0;
}

.intro-copy {
  max-width: 560px;
  font-size: 1.15rem;
}

Ask: Which property changes the headline’s size as the viewport changes? What does the first and last value inside clamp() control?

Step 4 — Turn the projects into a Grid

Use a three-column grid and make the first project span two columns. This creates a clear focal point without adding images or JavaScript.

.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.project {
  min-height: 220px;
  padding: 1.5rem;
  border: 1px solid #182033;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.featured {
  grid-column: span 2;
  background: #b8f34b;
}

.project h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1;
}

Live changes: Remove grid-column: span 2 to make all cards equal. Restore it, then change the featured card’s background. Discuss how scale and contrast change the reading order.

Step 5 — Add the responsive breakpoint

Resize the preview. When three columns become too narrow, change the layout to two columns and then one column on small screens.

@media (max-width: 760px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .featured {
    grid-column: span 2;
  }
}

@media (max-width: 520px) {
  .projects {
    grid-template-columns: 1fr;
  }
  .featured {
    grid-column: auto;
  }
  .intro {
    padding-bottom: 2rem;
  }
}

Explain: A media query applies rules only when its condition is true. The layout changes because the content needs more room—not because every element should simply become smaller.

Step 6 — Finish the footer and test the page

.site-footer {
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 1px solid #b9b8b0;
  font-size: .85rem;
}

• Check the page at desktop, tablet, and mobile widths.
• Confirm there is no accidental horizontal scrolling.
• Change one color and one spacing value to show how easy it is to adjust the design.
• Use the browser inspector to select a project card and identify its applied CSS rules.
• Ask students to describe the visual hierarchy and name the CSS rules creating it.