Stage 7: Responsive Design | Unit 12

STEP 1

Pop Out and Read Your Finished Site

Click the Pop Out button in the Live Preview header to open your site in a new browser tab. Read through every section from top to bottom: Hero, Key Cases, Timeline, U.S. Context, My Research, How This Era Shapes Us Today, Footer.

Read it as a reader, not as a coder. Does the story flow? Does your writing in the My Research and U.S. Connection sections sound like you? Does the timeline tell the era's history in a way that makes sense to someone who did not already know it?

You Just Built a Research Publication

This is not a 10-page paper sitting in a Google Doc. It is a designed, published website that presents historical research with typography, visual hierarchy, interactive elements, and your own voice. It is the kind of thing that goes in a portfolio.

STEP 2

Responsive CSS: Making It Work on Any Screen

Your code now includes a @media block at the bottom of the CSS. This is called a media query. It tells the browser: "when the screen is 768 pixels wide or smaller, apply these different CSS rules."

// Media query: rules inside only apply at small screens @media (max-width: 768px) {
  #hero {
    grid-template-columns: 1fr; /* 1 col instead of 2 */
    padding: 100px 20px 60px;
  }
  .hero-image-area {
    display: none; /* Hide image on mobile */
  }
}

Every grid that was repeat(auto-fill, minmax(280px, 1fr)) already handles small screens automatically because auto-fill collapses to a single column when there is not enough room. The media query handles elements that need explicit overrides: the hero grid, section padding, the flip card height, and the research composer split.

Test It

After popping out your site in a new tab, resize the browser window narrower until it is about phone-width. Watch the hero grid collapse from two columns to one, and the flip cards stack vertically. This is the media query in action.

STEP 3

Make One Customization

Scroll to the :root block at the top of the CSS. This is the design system for the entire site: all colors, defined as CSS custom properties. Change at least one value to make the site feel like yours.

// :root defines the color system. Change one value and watch the site update. :root {
  --gold: #778DA9; /* Try #d4a843 for warmer gold */
  --rust: #415A77; /* Try #a03820 for deeper rust */
  --bg-main: #0D1B2A; /* Try #0f0d0b for darker base */
}

Because every color in the site is defined as a variable in :root and referenced as var(--gold), changing one value here updates every element that uses it simultaneously. This is why design systems are built on variables: one source of truth, infinite consistency.

You can also change the <title> tag to include your name, update the footer copyright line, or change the era badge text to anything you want.

STEP 4

What You Built in Unit 12

Unit 12 Complete: Treaty-Making Era (1778-1871)

Seven stages. Seven sections. One complete historical research website. Here is what you built and what you learned:

Stage 1: Hero section with era badge, Playfair Display typography, resource links, and dual CTA buttons
Stage 2: CSS 3D flip cards using perspective, transform-style: preserve-3d, and backface-visibility. Progressive disclosure as a UX pattern.
Stage 3: Year-anchored timeline with typographic anchor headings and four color-coded event types. Two events from your own research.
Stage 4: U.S. Context section with auto-fill grid and border-top accent cards. Your own paragraph connecting U.S. history to federal Indian policy.
Stage 5: My Research section with a live oninput textarea that renders your Google Docs writing as styled paragraphs in real time.
Stage 6: How This Era Shapes Us Today: your third card connecting this era to the present. Complete footer with sources.
Stage 7: Responsive CSS media queries. One customization. Published.

The history you learned: the Marshall Trilogy, the Indian Removal Act, the Trail of Tears, the Doctrine of Discovery, 370+ treaties, and why the treaty-making era ended in 1871. This is not background knowledge. It is the legal and political foundation that Tribal nations operate within right now.

Up Next: Unit 12: Removal Era (1830-1850)

Unit 12 moves deeper into the removal period with a new UX pattern: CSS accordion / expand-collapse. The same pre-loaded structure, the same design system, but a new era and a new interaction. The Removal Era is where you will meet the Five Civilized Tribes in detail and trace how federal removal policy was designed, contested, and ultimately enforced.

Polish, Responsive CSS & Publish