Exercise Thursday

Note: You will complete your first Independent Project tomorrow! For more details regarding this process, check out the Independent Projects and Code Reviews lesson.

Goal: Practice identifying HTML selectors for use in CSS stylesheets by playing a game called CSS Diner.

Warm Up


Go to CSS Diner and with your partner, ping pong through the levels. You will have the keyboard for one level and then switch with your partner for the next.

Note that you'll want to select the bouncing items; not the static ones. If you need a hint, you can hover over the items on the table to see their HTML markup. Note that not all HTML here is "real" (for instance, in the first level plates are represented by <plate></plate> tags, and therefore plate is the appropriate selector).

The purpose of the game is to practice correctly selecting specific elements for use in CSS stylesheets. Understanding how to target specific elements in your HTML will also help you to traverse DOM elements when we get to JavaScript.