Adding the hero section

After implementing our header, we can now go the next step, which is the hero Section. The hero section is, in web design, usually composed with a big image, a title, a description, and a Call to Action (CTA). It serves as an overview of the website because it's the first thing the visitor will see.

In our design, we have the following:

It's quite simple. It's composed of a background image, with a gradient overlay and some text with a button on the left. If we try to mark out the outline of each block, we could have something like this:

Maybe this can help you visualize what we're trying to do in HTML/CSS. Let's start ...

Get Practical Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.