WebsiteLesson 307Free preview

Big Header

This lesson is part of How To · All levels

Summary

A big header or hero header is a large area at the top of a page that immediately attracts attention. It usually contains a headline, a supporting sentence, and an action button above the background or color. To get the message across, make sure that the text is contrasted, the font size is adjusted, and the header height is not excessive.

Key points

Use background images or colors that support the brand's atmosphere
Add a transparent dark layer to keep the text in contrast
Adjust the response title size with a clamp or media query
Limit the length of text so that the main message is easily understood
Set up an action button that is clearly visible above the background

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.