mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-18 07:03:01 -04:00
feat(curriculum): Add interactive examples to visual hierarchy lesson (#62836)
This commit is contained in:
Giftea ☕
@@ -5,7 +5,9 @@ challengeType: 19
|
||||
dashedName: what-is-the-importance-of-good-visual-hierarchy-in-design
|
||||
---
|
||||
|
||||
# --description--
|
||||
# --interactive--
|
||||
|
||||
**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work.
|
||||
|
||||
Visual hierarchy refers to the way you layout and display the content of your page to guide the viewer's attention.
|
||||
|
||||
@@ -13,13 +15,196 @@ A strong hierarchy can provide a clear path for the eye to follow, ensuring that
|
||||
|
||||
Let's consider a basic page layout in which the HTML for the page is semantically correct, but the styling applied does not create a strong visual hierarchy.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
header, nav, main, section, footer {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<h1>My Website</h1>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<a href="#">Home</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Services</a>
|
||||
<a href="#">Contact</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h2>Welcome</h2>
|
||||
<p>This is the welcome section of the homepage.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Our Services</h2>
|
||||
<p>Here we describe what we offer.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Get in Touch</h2>
|
||||
<p>Contact us for more information.</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 My Website</p>
|
||||
</footer>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
If the font size isn't distinct, there is no visible indication of the document flow, although things are separated by headings.
|
||||
|
||||
To create a visual hierarchy, you should apply different font sizes to the heading tiers. You could also use something like a "callout box" to highlight a specific section.
|
||||
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.6;
|
||||
padding: 20px;
|
||||
background: #f9f9f9;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.callout {
|
||||
background-color: #fff3cd;
|
||||
border-left: 5px solid #ffc107;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Understanding Visual Hierarchy</h1>
|
||||
<p>Visual hierarchy helps users navigate and understand content by guiding their attention.</p>
|
||||
|
||||
<h2>Heading Tiers</h2>
|
||||
<p>Using different font sizes for headings creates structure and makes content scannable.</p>
|
||||
|
||||
<h3>Level 3 Heading</h3>
|
||||
<p>This smaller heading further breaks down the section without overpowering it.</p>
|
||||
|
||||
<div class="callout">
|
||||
<strong>Tip:</strong> Use a callout box like this to highlight important notes or key takeaways.
|
||||
</div>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Visual hierarchy can also help increase your user conversion. For example, you can take advantage of the callout box to further draw attention to a Call to Action (CTA) button.
|
||||
|
||||
With the CTA button being visually tied to the work history section, it guides the user to the vital information and the action you want them to take based on that information.
|
||||
:::interactive_editor
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.callout {
|
||||
background-color: #e0f7fa;
|
||||
border-left: 5px solid #00acc1;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background-color: #00acc1;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: #008b9a;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2>Ready to Boost Your Productivity?</h2>
|
||||
<p>Join thousands of users who are getting more done with our simple and effective tools.</p>
|
||||
|
||||
<div class="callout">
|
||||
<strong>Don’t wait!</strong> Start your free trial today and see the difference.
|
||||
<br>
|
||||
<a href="#" class="cta-button">Start Free Trial</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Finally, your visual hierarchy can be important for conveying other components, like a navigation bar or a footer.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user