Week 5: CSS Selector Quest Current

Spring 2026 · Week 5

Practice the selectors that make CSS precise: type selectors, class selectors, descendant selectors, pseudo-classes, and semantic layout targets.

Activity This Week

CSS Selector Quest: The Selector Guild
A full-screen two-panel activity with story chapters, MDN references, and a live CodePen workspace for practicing CSS selectors.

Assignment Practice

Important: You may use AI as a reference or tutor, but you may not use AI to generate your completed CSS. This assignment is about making your own CSS decisions, testing them, and understanding how selectors affect the page.

Instructions

  1. Log in to CodePen.
  2. Open CSS Selector Quest: The Selector Guild.
  3. Read each chapter in the left panel.
  4. In the CSS panel, complete the empty selector blocks.
  5. Use the comments to know which CSS properties to practice.
  6. Choose your own values and test them in the preview.
  7. Work one chapter at a time.
  8. When finished, click Fork.
  9. Rename your Pen: CSS Selector Quest LastName FirstName - f25
  10. Submit the URL of your forked CodePen.

What You'll Practice

  • type selectors
  • class selectors
  • descendant selectors
  • link pseudo-classes
  • semantic HTML elements
  • typography
  • responsive images
  • lists
  • blockquotes
  • the CSS box model

Submission

Submit your forked CodePen URL.