Display
In this lesson, you'll lay out the top of the shelter's home page: a header with the navigation, a big welcome section at the top (web designers call it the hero) and the cards of our four cats. You know the CSS for it from the CSS course: display, flexbox, grid and position. Now you'll learn the Tailwind classes that write it for you.
The page in the editor already has the classes from the previous lessons: colors, text, spacing, rounded corners and shadows. Its layout, though, is still plain normal flow, with everything one below another. The links in the navigation are stacked, and the cards are as wide as the page (scroll down in the preview to see them).
Let's start with the property display. In Tailwind, each of its values has a class of its own, named after the value:
| Class | CSS |
|---|---|
block | display: block; |
inline-block | display: inline-block; |
inline | display: inline; |
hidden | display: none; |
Only hidden isn't named after its value. It hides the element: the element isn't shown and takes up no space, but it stays in the HTML. Don't mix it up with invisible (visibility: hidden) or opacity-0: with those, you can't see the element either, but an empty gap stays where it was. (The classes for display: flex and display: grid come in the next exercises.)
Remember from the CSS course that an inline element, such as a link, sits in a line of text like a word. Its padding at the top and bottom doesn't push the other elements away, and its top and bottom margins don't work at all. Look at the "Meet our cats" link in the hero: its orange background reaches into the text above it, and its class mt-4 does nothing. (The Donate button in the navigation has the same problem; flexbox will take care of that one soon.)
Instructions
Add the class inline-block to the "Meet our cats" link. Its padding and margin now take up space, so the link moves below the text. (With block, it would move too, but it would also stretch across the whole width of the hero, like a paragraph.)
At the end of the navigation, there's a Menu button. It's meant for phones, where the links won't fit in a row. You'll learn to show an element only on some screens in the lesson on responsive design. Until then, add the class hidden to the button, so that it isn't shown at all.
Start programming for free
1/11