Line up blocks of the same shape

01 / 05

A listing is the same shape, repeated

A shop's list of goods, a row of news headlines, a wall of photographs — look closely and they are only the same small block, several times over.

The words inside differ; the shape of the tags is identical.

02 / 05

Give every block the same class

Make one of them a div box with a class like item. After that you copy it as it is and change the contents.

As long as they share a class, you write the CSS once and it lands on all of them.

<div class="item">  <h3>Syrup dumplings</h3>  <p>1.20</p></div><div class="item">  <h3>Cherry mochi</h3>  <p>1.50</p></div>

03 / 05

Match the order inside as well

What matters is that the order inside matches too. If the first goes heading then paragraph, the second does the same.

Let one of them differ and that is the one that breaks when the CSS arrives. Being alike is the whole mechanism.

04 / 05

How to find what broke

When one item in a listing looks wrong, the quickest move is to compare its tags against the others.

the class is spelled differently
a closing tag is missing
the tags inside are in a different order

Before suspecting the CSS, get the HTML into the same shape. That is usually where it is.

05 / 05

Later this gets made for you

For now you are copying the same shape out by hand. As the number grows that gets heavy, and fixing something means fixing all of them.

In a real application you write "the same shape" once and have it produced as many times as there are pieces of data. That is where loops in JavaScript come in.

So practise writing them exactly alike here, ready for that. Shapes that do not match cannot be automated. Have a go.