Prep 4: Tables and Forms

Textbook Reading

• HTML / Web
  • 5.1 HTML Tables
  • 5.2 Styling Tables
  • 5.3 Introducing Forms
• CSS
  • 4.5 The Cascade: How Styles Interact
  • 4.6 The Box Model

MDN Challenges

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
   • Rename index.html to planet-data-table.html
3. Read the following sections:
   • Forms and buttons in HTML
   • Test your skills: Forms and buttons
4. Complete the challenge activity:
   • Structuring a feedback form
   • Rename index.html to forms-challenge.html
5. Submit both html files to Gradescope.
   • planet-data-table.html and forms-challenge.html

Note

Solutions are provided at the end of each 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.