Prep 4: Tables and Styles

Textbook Reading

• HTML / Web
  • 5.1 HTML Tables
  • 5.2 Styling Tables
• CSS
  • 4.5 The Cascade: How Styles Interact
  • 4.6 The Box Model
  • 4.7 CSS Text Styling
  • 4.8 CSS Variables

MDN Table Challenge

About MDN: “The Mozilla Developer Network (MDN) is an open-source, collaborative project owned by Mozilla Corporation and developed by Mozilla, in partnership with a global community of volunteers and partners.”

The Learn section of MDN’s website “provides a structured set of tutorials teaching the essential skills and practices for being a successful front-end developer.”

Instructions:

1. Read the following sections:
   • HTML table basics
   • HTML table accessibility
2. Complete the challenge activity:
   • Structuring a planet data table
   • Save index.html in a prep04 folder for editing with VS Code.
3. Submit index.html to Gradescope.

Note

Solutions are provided at the end of each MDN activity, but resist the urge to jump straight to them. The goal here isn’t to check a box for 10 points—it’s actually to build understanding you’ll rely on later in the course.

Work through each activity on your own, wrestle with what’s confusing, and use the solution as a guide only when you’re stuck. The effort you put in now will pay off when these concepts reappear on the exam and future assignments.

MOAR Selectors with CSS Diner 🍽️

Complete the remaining levels (15-32) of CSS Diner.

Recommended resource: 🌐 CSS Tricks: CSS Selectors

These levels deal with some advanced attribute and “pseudo-selectors” that were briefly touched on in the selectors reading from last week, so this reference would be useful to look at!

When you’re done, open the menu in the upper-right, scroll down to the bottom, and click “Export Progress”.

Upload the resulting css-diner-progress.json file to Gradescope.