Meet the Cats

Time for another project! This checkpoint puts the last two lessons to work: attributes, links, images, the structure of a page and tables, together with everything you learned before them. As in the first checkpoint, the instructions say what the page should do, and how you write it is up to you: the checks look at the finished page, not at your code.

The project. The Happy Paws shelter looks after cats that need a new home, and its web page needs work. The editor has its first version: a heading, an introduction and three cats, each with its name and a few words about it. Over three exercises, you'll give the cats their pictures, add the visiting hours in a table, and finally give the page its structure and navigation links. In the background, we've added a little CSS, which makes the pictures smaller and gives the table borders.

The task. Each cat gets its picture, right below its name. The pictures are on our website, at these addresses:

• Ginger: /learn/tailwind/cat-orange.svg
• Shadow: /learn/tailwind/cat-black.svg
• Snowball: /learn/tailwind/cat-white.svg

Not everyone who visits the page can see the pictures, so describe each of them in a few words.

On the page, the pictures are small. A visitor who wants to see a cat better clicks its picture, and the picture opens at full size in a new tab, so that the shelter's page stays open in the first one.