diff --git a/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md b/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md
index 4355f30b44b..d7e8f987781 100644
--- a/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md
+++ b/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baaa62d4b46667a8ac869.md
@@ -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
+
+
+
+
My Website
+
+
+
+
+
+
+
Welcome
+
This is the welcome section of the homepage.
+
+
+
+
Our Services
+
Here we describe what we offer.
+
+
+
+
Get in Touch
+
Contact us for more information.
+
+
+
+
+```
+
+:::
+
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
+
+
+
Understanding Visual Hierarchy
+
Visual hierarchy helps users navigate and understand content by guiding their attention.
+
+
Heading Tiers
+
Using different font sizes for headings creates structure and makes content scannable.
+
+
Level 3 Heading
+
This smaller heading further breaks down the section without overpowering it.
+
+
+ Tip: Use a callout box like this to highlight important notes or key takeaways.
+
+```
+
+:::
+
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
+
+
+
Ready to Boost Your Productivity?
+
Join thousands of users who are getting more done with our simple and effective tools.
+
+
+ Don’t wait! Start your free trial today and see the difference.
+
+ Start Free Trial
+
+```
+
+:::
Finally, your visual hierarchy can be important for conveying other components, like a navigation bar or a footer.