The Header and the Hero

Welcome to the final project of the Tailwind course! You now know enough Tailwind to style a whole website on your own, and that's exactly what you'll do in this lesson: the home page of Whiskers Cat Shelter, from the header to the footer.

In the editor, you'll find the page as plain HTML without a single class. It has a header with the navigation, the hero (the section with id="hero"), the cats' cards, the steps of adoption, the contact form and the footer. At the end of body, there's the little script of the dark mode button from the dark mode lesson. You'll style the page in four exercises, one part at a time. Only add classes and leave the elements as they are: the checks look for them.

In style.css, we've prepared what the page needs besides @import "tailwindcss";: the line that switches dark mode with the class dark, and an @theme with the shelter's own color, brand (almost the same orange as orange-500, in the shades 50, 100, 200 and 400 to 700), and a font for headings, font-display (Baloo 2 from Google Fonts, imported on the first line). So you can write bg-brand-500 or font-display, just as in the lesson on customizing Tailwind. Would you like a different color or font? Change them in style.css, and the whole page changes with them.

Plan the look first. Designers decide a few things before they start, so that the whole page looks consistent:

• Colors. One main color for buttons and highlights (brand), one gray for texts, lines and backgrounds (the warm stone goes well with orange), and white. Use the same few shades everywhere, for example brand-500 for buttons and brand-600 when the mouse is over them.
• Sizes. A big size for the headline, a smaller one for the headings of the sections (for example text-3xl) and the normal size for the rest. The same goes for spacing: a few values from the scale, such as 4, 6 and 12, used again and again.
• Widths. Many visitors will come on a phone. Design for a narrow screen first, and then add what changes on wider ones. Now and then, use the bar above the preview to switch to 375 px (a phone) and 1280 px (a computer).

The checks in this lesson are open: they check that you did what an instruction asks (for example that the header sticks to the top and has a background), not which classes, colors or sizes you chose. The classes in the instructions are only suggestions.

Tip: Your code isn't saved when you leave an exercise, and the next exercise starts with our version of the page. If you want to keep working on your own design, copy your code (both files) before you go on, and paste it over ours in the next exercise.