Creating a Visual Hierarchy in HTML/CSS

In this post, we will explore the concept of visual hierarchy and how you can use your coding skills to recreate a specific visual layout. By the end of this challenge, you will have a better understanding of how to draw the reader’s attention to specific sections of a webpage using HTML and CSS. But first, let’s start with a short experiment. Check the picture below and check if it worked.

Did it work? In other words, did you read the text in the order mentioned on the picture?

Understanding the Concept of Visual Hierarchy

Visual hierarchy is a design principle that guides the viewer’s eye through different elements on a graphic or on a page, emphasising some over others. It is crucial in both print and digital media to ensure that the most important information stands out. For example, on a book cover, the title or the author’s name might be emphasised using larger fonts, bold colours, or strategic placement.

In web design, visual hierarchy helps users navigate and understand the content quickly. By using different sizes, colours, and placements, you can guide the user’s attention to the most critical parts of your webpage.

Coding Challenge: Recreate the Visual Hierarchy

Your task is to recreate the visual hierarchy similar to the one shown in the above image, using HTML and CSS. This layout uses text elements of varying sizes and positions to create a clear hierarchy.

To achieve this layout, you will need to use several CSS properties that control text formatting, positioning, and spacing. Here are some of the main properties you’ll use:

CSS Properties to Format Text:

• font-family: Changes the font type used for the text. (e.g. Arial, Times New Roman, Verdana, etc.)
• font-size: Controls the size of the text. Larger sizes draw more attention.
• font-weight: Makes text bold or normal. Bold text stands out more.
• font-style: Makes text italic or normal.
• color: Sets the colour of the text. Contrasting colours can highlight important information.
• text-align: Aligns text to the left, right, center, or justified.

Positioning and Alignment:

• position: Allows you to position elements using values like static, relative, absolute, fixed, or sticky.
• top, bottom, left, right: Used with position to specify the exact placement.
• display: Controls the display behavior (e.g., block, inline, flex).

Spacing:
To understand the concepts of margin, padding and borders you may want to do some quick research on understanding the “CSS Box Model”.

• margin: Adds space outside an element, pushing other elements away.
• padding: Adds space inside an element, increasing the area between the content and the border.
• border: Adds a border around an element, which can be used to separate or highlight sections.

HTML/CSS Code

Here is a basic example to get you started. You will need to apply more CSS properties to the different elements of the page to create your own visual hierarchy.

See the Pen
Creating a Visual Hierarchy by 101 Computing (@101Computing)
on CodePen.

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area