Stage 7: Your Complete Newspaper

UNIT

STEP 1

You Built a Newspaper!

Think about what you've assembled across seven stages: a custom masthead, a full-width hero image, text overlaid using CSS positioning, three article cards in a Flexbox row, styled images and typography throughout, and a clean footer. That's a lot of code - and it all works together.

🗞️ This Is Your Publication

Every design choice was yours. The color, the stories, the name of the newspaper. You're not just a student - you're a publisher.

STEP 2

Add CSS Comments Throughout

Use CSS comments to label each section of your stylesheet. This is professional practice - it helps you (and others) read your code later. Your newspaper stylesheet now has more than a dozen rules. Without comments, scanning it to find the footer rule means reading every line. With comments, you jump straight to /* === FOOTER === */ in seconds. That time savings compounds when a stylesheet has hundreds of rules - which is normal on real professional projects.

👉 Add section comments to your <style> block: /* === PAGE BASE === */
body { ... }

/* === MASTHEAD === */
header { ... }
h1 { ... }
.header-info { ... }
.header-info h4 { ... }

/* === HERO IMAGE === */
.main-article { ... }
.image-wrapper { ... }
.main-image { ... }
.main-text { ... }
.photo-credit { ... }

/* === ARTICLE CARDS === */
.article-container { ... }
.article { ... }
.article img { ... }

/* === TYPOGRAPHY === */
h2 { ... }
p { ... }
a { ... }

/* === FOOTER === */
footer { ... }
footer p, footer h4 { ... }

STEP 3

Final Checklist

Check every item before you call it done:

✅ Newspaper name is real - not placeholder text
✅ Date and issue number are set
✅ Hero image loads and fills the frame correctly
✅ Overlay text box is visible and positioned on the image
✅ Photo credit is updated with a real name or source
✅ All three articles have real headlines and written stories
✅ All three article images load properly
✅ All links have a real href (or # is intentional)
✅ Footer shows your website and your name
✅ No unclosed } braces or missing ; semicolons

STEP 4

CSS Skills You've Earned in Unit 3

✓ position: relative

✓ position: absolute

✓ top / right / left

✓ transform: translateY

✓ rgba() colors

✓ max-width + margin auto

✓ border-top / border-bottom

✓ descendant selectors

✓ <article> semantic HTML

✓ justify-content: space-between

✓ object-fit: cover

✓ CSS comments

STEP 5

Save Your Work

Copy all your code from the editor
Save it as my-newspaper.html and open it in a browser
Share it - your teacher, your family, your community
This file is a real webpage that you built from scratch

📰 Your Stories Matter

The stories you chose to write and the design you chose to build aren't just assignments. They're a form of media sovereignty - Native people telling Native stories in a medium built by Native hands. That is exactly what Relentless Feather is about.

STEP 6

Three Units Down!

Look at what you've learned across all three units:

Unit 1 - HTML: headings, lists, links, attributes, and semantic structure
Unit 2 - CSS basics: colors, fonts, Flexbox, images, box shadows
Unit 3 - CSS positioning: relative, absolute, overlays, and newspaper layout

🌟 Unit 3 - Complete!

You've built three real projects: an 11 MN Tribes reference page, a personal profile, and an online newspaper. You know HTML and CSS. You are a developer. Keep going.

Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>[Your Newspaper Name]</title>
  <style>

/* === PAGE BASE === */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #FCF6F5;
      text-align: center;
    }

/* === MASTHEAD === */
    header {
      padding: 30px;
      border-bottom: 3px solid black;
      background-color: #D6ED17;
    }
    h1 {
      font-size: 72px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .header-info {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
    }
    .header-info h4 {
      font-size: 16px;
      font-weight: normal;
    }

/* === HERO IMAGE === */
    .main-article {
      max-width: 1000px;
      margin: 20px auto;
    }
    .image-wrapper {
      position: relative;
      width: 100%;
    }
    .main-image {
      width: 100%;
      height: 350px;
      object-fit: cover;
      border: 2px solid #ccc;
      display: block;
    }
    .main-text {
      position: absolute;
      top: 50%;
      right: 20px;
      width: 35%;
      background: rgba(249, 248, 248, 0.85);
      color: #222;
      padding: 15px;
      border-radius: 8px;
      transform: translateY(-50%);
      text-align: left;
      font-size: 14px;
    }
    .photo-credit {
      font-size: 13px;
      color: #666;
      text-align: left;
      max-width: 1000px;
      margin: 5px auto;
      padding-left: 5px;
    }

/* === ARTICLE CARDS === */
    .article-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      padding: 20px;
      max-width: 1000px;
      margin: 0 auto;
    }
    .article {
      background: white;
      padding: 20px;
      width: 30%;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      text-align: left;
    }
    .article img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border: 2px solid #ccc;
      border-radius: 5px;
      margin-bottom: 10px;
    }

/* === TYPOGRAPHY === */
    h2 {
      font-size: 20px;
      color: #222;
      margin-bottom: 10px;
    }
    p {
      font-size: 14px;
      color: #444;
      line-height: 1.5;
    }
    a {
      color: #2563EB;
      text-decoration: none;
      font-weight: bold;
    }

/* === FOOTER === */
    footer {
      margin-top: 20px;
      border-top: 1px solid black;
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
    }
    footer p, footer h4 {
      font-size: 14px;
      margin: 0;
    }

</style>
</head>
<body>

<header>
    <h1>[Your Newspaper Name]</h1>
    <div class="header-info">
      <h4>April 28, 2026</h4>
      <h4>Issue #1</h4>
    </div>
  </header>

<main>
    <section class="main-article">
      <div class="image-wrapper">
        <img src="https://picsum.photos/seed/native/1000/350"
             alt="Main article image"
             class="main-image">
        <div class="main-text">
          <p>Write your front-page headline caption here. Tell the most important story on your newspaper's front page.</p>
        </div>
      </div>
      <p class="photo-credit"><em>Photo credit: Your Name</em></p>
    </section>

<section class="article-container">
      <article class="article">
        <img src="https://picsum.photos/seed/event/320/220" alt="Community event">
        <h2>Community Event Headline</h2>
        <p>Write your first article story here. What happened in your community recently? <a href="#">Read more.</a></p>
      </article>

<article class="article">
        <img src="https://picsum.photos/seed/buffalo/320/220" alt="Tribal nation news">
        <h2>Tribal Nation News</h2>
        <p>Write your second story here. What is your Tribal nation working on? <a href="#">Read more.</a></p>
      </article>

<article class="article">
        <img src="https://picsum.photos/seed/land/320/220" alt="Indian country">
        <h2>Indian Country Update</h2>
        <p>Write your third story here. What is happening across Indian Country? <a href="#">Read more.</a></p>
      </article>
    </section>
  </main>

<footer>
    <p>www.[yournewspaper].com</p>
    <h4>By [Your Name]</h4>
  </footer>

</body>
</html>

Live Preview