Unit 4 · Stage 7

Sacred vs. Shareable

You have built the whole calendar: four seasons, colors, headings, hover effects, and smooth transitions. This final stage asks a question that matters more than any CSS property. What belongs on a public webpage, and what does not? Then you will add one small, respectful touch to your code. Play in the editor, or press 👀 Type it with me to be guided. (pause on a highlighted word to see what it does)

📦 Quick recap. Your calendar is complete from Stages 1 through 6. In this last stage you add just one new class, .protected, that lets you honor a ceremony without describing it.

1 The most important stage

The technical work is done. This stage is about a choice you already started making in Stage 6: what to include, and what to leave out. That pause you felt is important. It means you understand something many web developers never think about. Not all knowledge belongs on the internet.

Sacred and shareable knowledge

The First Peoples Principle: "Learning involves recognizing that some knowledge is sacred and only shared with permission and in certain situations."
Why it matters online: Indigenous communities across Turtle Island have always separated knowledge that can be shared openly from knowledge that belongs in specific contexts, shared by specific people, at specific times. The internet does not erase that line. It makes honoring it more important.

2 What makes knowledge sacred?

There is no single rule. It varies by community, by nation, and by tradition. Some common patterns:

Ceremonies conducted within the community, for the community
Songs and prayers passed down within a lineage
Medicine knowledge that needs specific training and context to use safely
Clan-specific protocols and practices
Anything Tribal leadership has said is not for public sharing

💬 A practical question. If you are not sure whether something is sacred, ask. Ask an elder, a cultural leader, or a family member: is it okay to put this on a website? That is a question of respect, not weakness. It shows you understand that some knowledge has boundaries.

3 Design a protected indicator

For any season that holds a ceremony or practice that might be sacred or sensitive, add a visual indicator instead of describing the ceremony. Two small pieces do the job: a .protected CSS rule, and one list item that uses it.

What this code means

color: rgba(255, 255, 255, 0.5): Half-opacity white. It makes this item quieter than the others, present but treated with care.
font-style: italic: Italics signal that something here is different by design, the way a quotation or a word from another language stands apart.
The text [Seasonal ceremony, honored in community]: It tells readers that something meaningful happens in this season, that you know about it, and that you are choosing not to share it here. That is a boundary, not a gap.

✍️ Add the .protected rule where the comment marks the spot inside <style>, then swap one sensitive list item for a protected one. Use the examples below, then press ▶ Run.

.protected {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

<li class="protected">[Seasonal ceremony, honored in community]</li>

🤔 Quick check before you go on

Fill in the blank from the First Peoples Principle: some knowledge is ______ and only shared with permission. Type the missing word, then press Submit to unlock the last steps.

4 Skills you earned in Unit 4

Look at everything you learned to use across the seven stages of this unit:

display: grid
grid-template-columns
gap
the :hover pseudo-class
CSS transitions
more than one class per element
transform: translateY
box-shadow
rgba() colors
min-height
cursor: pointer
CSS comments

5 Unit 4 complete

Step back and look at what you have built across all four units:

Unit 1: HTML structure, headings, lists, links, semantic markup
Unit 2: CSS basics, colors, fonts, Flexbox, box shadows
Unit 3: CSS positioning, overlays, newspaper layout
Unit 4: CSS Grid, hover, transitions, and cultural protocols in design

🎉 Well done. You built an interactive seasonal calendar that honors the traditional knowledge of Tribal nations in your region. You used Grid to structure it, hover effects to bring it to life, and transitions to make it smooth. More than that, you thought about what belongs on a page and what does not. That is a human skill. Keep building.

🏁 Finish Unit 4

To finish Unit 4, your calendar needs the .protected rule and one <li class="protected">. Press Check my work when you are ready. This records that you finished the unit for your teacher, and you can press ⬇ in the preview bar to download your calendar as seasonal-calendar.html.

YOUR CODE

PREVIEW