feat(curriculum): add interactive examples to percentages lesson (#62956)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb7d659f0089377a91eab.md

@@ -5,33 +5,129 @@ challengeType: 19
 dashedName: what-are-percentages-in-css
 ---
 
-# --description--
+# --interactive--
 
 Percentages in CSS are relative units that allow you to define sizes, dimensions, and other properties as a proportion of their parent element. When you use a percentage value, you're essentially saying, "Make this X% of its container."
 
 For example, if you set `width: 50%` on an element, it will occupy half the width of its parent container. This makes percentages incredibly useful for creating responsive designs that adapt to different screen sizes.
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div class="container">
+  <div class="box"></div>
+</div>
+```
+
+```css
+.container {
+  width: 400px;
+  height: 200px;
+  background-color: lightgray;
+}
+
+.box {
+  width: 50%;
+  height: 100%;
+  background-color: red;
+}
+```
+
+:::
+
 Percentages are ideal for creating fluid layouts that adjust to various screen sizes. For instance, setting a container to `width: 80%` ensures it takes up 80% of its parent's width, regardless of the device.
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div class="parent">
+  <div class="child"></div>
+</div>
+```
+
+```css
+.parent {
+  width: 100%;
+  height: 300px;
+  background-color: lightblue;
+}
+
+.child {
+  width: 80%;
+  height: 100%;
+  background-color: red;
+}
+```
+
+:::
+
 Using percentages for flexible images is another common practice. By applying `max-width: 100%` to images, you allow them to scale down on smaller screens while maintaining their aspect ratio.
 
-While less common, percentages can also be used for font sizes to create scalable typography. For example, `font-size: 120%` would make the text 20% larger than its parent's font size.
+:::interactive_editor
 
-Percentages can be particularly handy for vertical centering. Here's an example of how you might use percentages with the transform property to center an element vertically:
+```html
+<link rel="stylesheet" href="styles.css" />
+<img src="https://placehold.co/150x150" alt="Example Product Image" />
+```
 
 ```css
-.center-me {
+img {
+  max-width: 100%;
+  height: auto;
+}
+```
+
+:::
+
+While less common, percentages can also be used for font sizes to create scalable typography. For example, `font-size: 120%` would make the text 20% larger than its parent's font size.
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div class="text-container">
+  Parent text.
+  <p class="text">This is some example text.</p>
+</div>
+```
+
+```css
+.text-container {
+  font-size: 16px;
+}
+
+.text {
+  font-size: 120%;
+}
+```
+
+:::
+
+Percentages can be particularly handy for vertical centering. Here's an example of how you might use percentages with the `transform` property to center an element vertically.
+
+This example positions the element 50% from the top of its container, then uses `transform` to move it back up by half its own height, effectively centering it vertically.
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div class="centered"></div>
+```
+
+```css
+.centered {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-
   width: 300px;
   height: 300px;
   background-color: red;
 }
 ```
 
-This code positions the element 50% from the top of its container, then uses transform to move it back up by half its own height, effectively centering it vertically.
+:::
 
 You will learn more about how absolute positioning and the transform properties work in more detail in future lessons.