A hero and a row of cards

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can build a card from tags and a class, and copy it to make another.
• I can explain why a copied card needs no new CSS.
• I can change every card at once by changing one rule.

Timing

Predict and Run 10 min · Investigate 10 min · Mix it up 5 min · Modify 8 min · Make 12 min

Before class

Do the Make task yourself in the playground (about 6 minutes).

A component here means a chunk of HTML with a class that you copy: a card, or a hero (a big opening section). Nothing new is taught: it is the class, box and flex row from earlier lessons, used on purpose. The idea is that one rule styles every copy, so adding a card is copying HTML.

The usual slip is writing a new class and rule for each copy (card1, card2). It works, but every change has to be made in each rule.

Running the lesson

1. Predict and Run: ask students to count the lines of CSS they would add. Most say about five. Let them copy a card line and see it styled at once.
2. Investigate: the crad typo is silent. Ask what the browser does with a class that no rule matches: it ignores it. The 40-page question shows why the looks live in one place.
3. Mix it up: one card is missing its class and the row cannot wrap. Both are earlier lessons.
4. Make: let students choose a topic. Check the fourth card was made by copying, with no new rule.

In class

On the slides at these points. Students can do the whole lesson on their own; these are for the room. In the deck, the Run, Modify and Make slides have the live playground in them (the tutorial link is the backup), and the notes above are in each slide's speaker notes.

• Count the lines (predict, 3 min)

  With your partner, decide how many lines of CSS you would write for the fourth card. Hold up 0, 1, 5 or 10 fingers for your answer.

  Take the vote before running. Ask a student who said 5 what the new rule would say, and how it differs from .card. The idea to land: it would say the same.

• Copy and check (end, 5 min)

  Swap pages with a partner. Add a card to their page by copying only HTML, without changing any rule. Check that it looks like the others.

  Watch for students who start to type CSS. Ask what the new card has that the others have.

The hard part (on purpose)

Believing each copy needs its own rule. Ask what the new card has in common with the others before they write any CSS.

When students get stuck

Answers to the checks

1. Predict: The club adds a fourth card, Drones. How much CSS must you write for it?
   None. Every card has class="card", so the .card rule already styles a fourth. The wrapping row makes room for it on its own.
2. The card with no style: The Drones card is plain, while the other two have a border and padding, and there is no error. Click the line that causes it.
   line 9
   Line 9 says crad. The class is card, so the .card rule does not match it. A copy only gets the style if its class is spelt exactly the same.
3. Rules for every copy: Mia gave each card its own class and its own rule, and they look right. What goes wrong as the club grows?
   Each new card needs a new rule, and changing the border means changing every rule
   The three rules are identical, so the page repeats itself. With one class, card, and one rule, a new card is only HTML, and a new border colour is one change.
4. Forty pages: A school site has 40 pages that all use the same card class, and the rules sit in one file that every page loads. The school changes its colours. What is the best way to update the cards?
   Change the .card rule once in that file, and all 40 pages follow
   The looks live in the rule, not in the cards. Change the rule once and every copy of the component, on every page that loads the file, follows.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › One change, every card

<style>
  .hero {
    padding: 24px;
    background-color: lightblue;
  }
  .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .card {
    flex: 1;
    min-width: 150px;
    padding: 16px;
    border: 2px solid navy;
  }
</style>
<section class="hero">
  <h1>Robotics Club</h1>
  <p>Build, code and compete every Tuesday.</p>
  <a href="https://example.com/join">Join us</a>
</section>
<div class="cards">
  <section class="card"><h2>Robots</h2><p>Build and test.</p></section>
  <section class="card"><h2>Coding</h2><p>Make games.</p></section>
</div>

Modify › A copy

<style>
  .hero {
    padding: 24px;
    background-color: lightblue;
  }
  .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .card {
    flex: 1;
    min-width: 150px;
    padding: 16px;
    border: 2px solid navy;
  }
</style>
<section class="hero">
  <h1>Robotics Club</h1>
  <p>Build, code and compete every Tuesday.</p>
  <a href="https://example.com/join">Join us</a>
</section>
<div class="cards">
  <section class="card"><h2>Robots</h2><p>Build and test.</p></section>
  <section class="card"><h2>Coding</h2><p>Make games.</p></section>
  <section class="card"><h2>Drones</h2><p>Fly and film.</p></section>
</div>

Make

<style>
  .hero {
    padding: 24px;
    background-color: lightblue;
  }
  .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .card {
    flex: 1;
    min-width: 150px;
    padding: 16px;
    border: 1px solid gray;
  }
</style>
<section class="hero">
  <h1>Robotics Club</h1>
  <p>Build, code and compete every Tuesday.</p>
  <a href="https://example.com/join">Join us</a>
</section>
<div class="cards">
  <section class="card"><h2>Robots</h2><p>Build and test.</p></section>
  <section class="card"><h2>Coding</h2><p>Make games.</p></section>
  <section class="card"><h2>Design</h2><p>Draw a logo.</p></section>
  <section class="card"><h2>Drones</h2><p>Fly and film.</p></section>
</div>

Stretch and support

Stretch: Add a second component, a footer with a class, and use it on two pages worth of text. Or give the cards a third kind, card featured, that changes only the border colour.

Support: Give students the Run page and ask them only to add two cards by copying, and change one colour in the rule.

Exit ticket

A page has ten cards, all class card. How many .card rules does it need, and how do you add an eleventh card?

One rule. Copy the HTML of a card, change its words, and the rule already styles it.

What each step is for

• Predict: Students expect each new card to need its own rule; a shared class styles every copy.
• Run: A component is HTML with a class; the rules for the class are written once and style every copy.
• Investigate: Copies share one class and one rule. A copy with a different spelling is not styled, and rules kept in one place can restyle every page.
• Modify: Changing one rule restyles every card, and copying one card adds another with no new CSS.
• Mix it up: Marking an element with the right class and letting a row wrap use two earlier moves together.

Where it leads

Next is the Course B challenge, which lays out the club page using everything so far. Class idea: look at a shop website and point out the parts that are the same component repeated.