MoreLesson 196Free preview

Tag Cloud

This lesson is part of How To · All levels

Summary

Cloud tags are a collection of keywords or labels of different sizes to indicate the level of interest or frequency. More popular topics usually appear larger, so visitors can quickly capture a picture of the site's content. With flexbox and flex-wrap, cloud tags stayed smooth across screen sizes.

Key points

Font size and thickness can differentiate the level of importance of each tag
Use the flex-wrap to get the tag down to the next line when the space runs out.
Adjust the gap to keep the distance between tags consistent
Pack tags in semantic elements such as nav or ul for navigation

Full lesson

Code examples and quizzes

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