feat(curriculum): add interactive examples to width and height lesson (freeCodeCamp#62771)

arizfaiyaz · web-flow · commit 2d574da6e640 · 2025-10-13T12:32:30.000-07:00
diff --git a/curriculum/challenges/english/blocks/lecture-what-is-css/672acc03c257524d6a5151e8.md b/curriculum/challenges/english/blocks/lecture-what-is-css/672acc03c257524d6a5151e8.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-do-width-and-height-work
 ---
 
-# --description--
+# --interactive--
 
 In CSS, the `width` and `height` properties are used to control the dimensions of elements on a webpage.
 
@@ -17,6 +17,8 @@ The `height` property specifies the height of an element. Similarly, the height
 
 Here's an example using the `width` and `height` properties:
 
+:::interactive_editor
+
 ```html
 <head>
   <style>
@@ -32,6 +34,8 @@ Here's an example using the `width` and `height` properties:
 </body>
 ```
 
+:::
+
 In this example, we have a `div` element with class named `box`. This element will be occupying `100px` in height and width, whereas the background color will be `skyblue`.
 
 Pixels are a fixed-size unit of measurement in CSS, providing precise control over dimensions. 
@@ -42,6 +46,8 @@ The `min-height` specifies the minimum height an element can be. It ensures that
 
 Here is an example:
 
+:::interactive_editor
+
 ```html
 <head>
   <style>
@@ -59,6 +65,8 @@ Here is an example:
 </body>
 ```
 
+:::
+
 The above example demonstrates how `min-width` and `min-height` work.
 
 Even though the box has its `width` and `height` set to 50px, it will actually be `100px` by `100px`. This is because the `min-width` and `min-height` are set to `100px`, which are larger than the specified `width` and `height`.
@@ -71,6 +79,8 @@ The `max-height` specifies the maximum height an element can grow to, regardless
 
 Here is an example:
 
+:::interactive_editor
+
 ```html
 <head>
   <style>
@@ -88,6 +98,8 @@ Here is an example:
 </body>
 ```
 
+:::
+
 The above example demonstrates how `max-width` and `max-height` override `width` and `height`. Even though the box is set to `200px` by `200px`, it will actually be `150px` by `150px`. This is because the `max-width` and `max-height` are set to `150px`, which is smaller.
 
 Remember, when `max-width` or `max-height` are smaller than `width` or `height`, they take precedence. This is important for controlling the maximum size of elements in your layouts.
