Build: Tribute Page — NiteAgent — AI Agents & Automation

1990s HTML & CSS — The simplest possible web page: a single HTML document with text, images, and styling. Every web developer's first project. Inspired by freeCodeCamp's Responsive Web Design certification.

Basic HTML Structure

Complete

Why learn this?

Every web page is just HTML — the foundation of the entire web. This step teaches you the semantic building blocks that every site uses: headings, paragraphs, lists, and the document outline. Once you understand this, you can read any web page's source code.

What you built

A single-page tribute to Alan Turing with a bio, timeline, and legacy section. Plain HTML only — no CSS, no JavaScript. The focus is entirely on structure.

Key concepts

Semantic HTML — main, section, h1-h2 tell browsers and screen readers what each part of the page means, not just how it looks
Document outline — Headings create a hierarchy (h1 → h2 → h3) that search engines and accessibility tools use to understand your page
Lists — ul and li for timelines, features, any grouped content
Validation — Browsers forgive bad HTML, but valid HTML is more portable, accessible, and easier to maintain

Next up

Step 2 adds images with figure and figcaption — your first visual element. Step 3 introduces CSS to make it look like a real page.

index.html ▶ Run

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tribute to Alan Turing</title>
</head>
<body>
  <h1>Dr. Alan Turing</h1>
  <p>The father of theoretical
  computer science</p>

  <h2>Timeline</h2>
  <ul>
    <li><strong>1912</strong> — Born in London</li>
    <li><strong>1936</strong> — Turing Machine paper</li>
    <li><strong>1950</strong> — Turing Test proposed</li>
  </ul>

  <h2>Legacy</h2>
  <p>Turing's work laid the
  foundation for modern computing.</p>
</body>
</html>

✅ Done. Step 1 complete. Move to Step 2 below.

Image & Caption

Complete

Why learn this?

Images make pages engaging. The figure + figcaption pattern is the standard way to add self-contained media with a caption — used by news sites, documentation, and portfolios everywhere.

What you'll build

A hero image of Alan Turing at age 16, centered and captioned. The image scales with the viewport and has proper alt text for accessibility.

Key concepts

figure — Groups image + caption into one semantic unit
figcaption — Describes the image, visible to all users
alt attribute — Describes the image for screen readers and when images fail to load
max-width: 100% — Makes images responsive automatically

Approach

Find a public-domain photo of your subject (we used a Wikimedia Commons image)
Wrap it in figure with figcaption
Add CSS: img { max-width: 100%; height: auto; display: block; }
Center with margin: 0 auto on figure
Add rounded corners and a subtle shadow

HTML snippet ▶ Run

<figure>
  <img
    src="turing.jpg"
    alt="Alan Turing at age 16"
    loading="lazy"
  >
  <figcaption>
    Alan Turing at age 16 —
    already showing mathematical
    brilliance
  </figcaption>
</figure>

CSS

figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px
    rgba(0,0,0,0.15);
}

figcaption {
  font-style: italic;
  color: #666;
  margin-top: 0.5em;
}

📸 Tip: Use Unsplash or Wikimedia Commons for free, attribution-friendly images.

Timeline & Styling

Complete

Why learn this?

CSS is what turns raw HTML into something you'd actually publish. You'll learn the core selectors, properties, and the box model that underpin every styled page on the internet.

What you'll build

The page gets a warm paper background, styled timeline with dark year badges, a blockquote with Turing's famous quote, and hover effects on links. It now looks like a real tribute page.

Key concepts

Type selectors — body { }, h1 { } style all elements of that type
Box model — padding, margin, border, width
Styled lists — Removing bullets, using flexbox for layout, badge styling
Blockquote — Styled pull quotes with border accent and citation

Approach

Replace the plain ul with a class-based ul class="timeline"
Wrap each year in a span class="year-badge" for the dark badge style
Add a blockquote with a meaningful quote and cite attribution
Add a footer link section with an external Wikipedia reference
Polish typography: line-height, letter-spacing, font sizes

HTML ▶ Run

<ul class="timeline">
  <li>
    <span class="year-badge">1912</span>
    <span class="event">Born in London</span>
  </li>
</ul>

<blockquote>
  <p>"We can only see a short
  distance ahead..."</p>
  <cite>— Alan Turing</cite>
</blockquote>

CSS

.timeline {
  list-style: none;
  padding: 0;
}
.timeline li {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  padding: 0.5em 0;
  border-bottom: 1px solid #e8e4dd;
}
.year-badge {
  background: #16213e;
  color: #faf8f5;
  padding: 0.15em 0.6em;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 700;
  min-width: 5em;
  text-align: center;
}
blockquote {
  margin: 2em 0;
  padding: 1em 1.5em;
  background: #edeae4;
  border-left: 4px solid #16213e;
  border-radius: 0 8px 8px 0;
}

Responsive & Polish

Complete

Why learn this?

Over 60% of web traffic is mobile. A page that looks good on desktop but breaks on a phone isn't publishable. Media queries are what make layouts adapt to any screen size.

What you built

The page becomes fully responsive: mobile-friendly font sizes, stacked timeline on small screens, smooth scrolling, a skip-to-content link for accessibility, hover effects on timeline rows and images, and a back-to-top link.

Key concepts

@media (max-width: 600px) — Mobile breakpoints that restructure layout
Accessibility — Skip-to-content link, WCAG AA contrast ratios, prefers-reduced-motion
Hover states — :hover on timeline rows and images for interactive feedback
Smooth scrolling — scroll-behavior: smooth for navigation

Approach

Add scroll-behavior: smooth to html
Add a skip-to-content link as the first element in body
Write @media (max-width: 600px) to stack timeline vertically, reduce font sizes
Add prefers-reduced-motion to respect user accessibility settings
Add hover transitions on images and timeline rows
Add a back-to-top link for long pages on mobile

Mobile CSS ▶ Run

/* Stack timeline vertically on mobile */
@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: 1.5em; }
  .timeline li {
    flex-direction: column;
    gap: 0.25em;
    align-items: flex-start;
  }
  .year-badge { min-width: 4em; }
}

/* Accessibility: skip link */
.skip-link {
  position: absolute;
  top: -100%; left: 0;
  background: #16213e;
  color: #fff;
  padding: 0.6em 1.2em;
}
.skip-link:focus { top: 0; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}

♿ Accessibility tip: prefers-reduced-motion is an often-overlooked media query that respects users who set their OS to reduce animation. Always include it when you add transitions or smooth scrolling.

Model

DeepSeek V4 Flash

Total Tokens

~41K

Est. Cost

$0.01

Steps

Tokens measured from actual output files at ~0.28 tok/byte. Input estimated from turns multiplied by system + AGENTS.md context.

✅ Tribute Page Complete

All 4 steps built. Ready to move to the next project:

Survey FormForm fields, validation, labels — collect user input

→