← Week 5

wk 5 - CSS Selectors Quest - Tribute Page Prep

DESN 368

wk 5 - CSS Selectors Quest - Tribute Page Prep

Important

Completing this assignment with AI is an automatic failure and does not help you learn.

Instructions

  1. Log in to [CodePen.io](https://codepen.io/).
  2. Open the **CSS Selector Quest: The Selector Guild** activity.
  3. Read the story chapters in the left panel.
  4. Complete all **6 selector missions** by adding CSS in the embedded CodePen.
  5. Use the help links when you get stuck.
  6. Test each selector in the preview before moving to the next chapter.
  7. When finished, click **Fork** in CodePen to save your work.
  8. Rename your forked Pen:
    `CSS Selector Quest LastName FirstName - f25`
  9. Submit the URL of your forked CodePen.

What You'll Practice

You will practice selecting HTML elements with:

- type selectors: `h1`, `h2`, `section`, `header`, `main`
- class selectors: `.bio`, `.timeline`
- descendant selectors: `.bio p`, `.timeline li`, `figure img`, `blockquote cite`
- pseudo-classes: `a:link`, `a:visited`, `a:hover`, `a:active`, `a:focus`
- semantic HTML elements: `figure`, `figcaption`, `blockquote`, `cite`

You will also practice typography, responsive images, links, lists, pull quotes, and the CSS box model.

Submission

Submit the URL of your forked CodePen.