Skip to content

CSS in the Wild!

CSS is all around you, even when you're nowhere near a screen. In this challenge, you'll explore how a single physical location reflects web design concepts through layout, spacing, and visual hierarchy.

You’ll capture one real-world space (like a study corner, kitchen shelf, bookstore, park bench, or coffee shop table) and analyze it through a CSS lens, identifying and explaining as many CSS properties as you can spot.

Instructions

  1. Choose One Location

Find a space that feels structured or intentionally designed—this could be at home, school, work, or out in the world.

  1. Take 3–5 Photos

Capture different angles or zoom levels of that one location. These can highlight details (like shadows or spacing) or broader layout features.

  1. Label and Identify CSS Concepts

Place the photos in a document of your choosing and complete the following:

  • Use callouts, arrows, or captions to identify specific elements
  • Label them with a CSS property (e.g., padding, border, box-shadow, text-align)

  • Try to spot at least 5–7 different properties total across your photos

  • Explain Your Thinking

For each label, write a 1–2 sentence explanation that connects the photo to the CSS concept: “The space between the bookshelves mimics margin-right: 2em; because it creates breathing room between stacked sections.”

Academic Integrity

All writing and photo labeling must be your own. Do not use AI to generate analysis or explanations. Submissions that appear copied or AI-written will receive no credit.

How to Submit

Upload your document with your pictures, labels, and explanations to Brightspace under Challenges > CSS in the Wild