feat(curriculum): add interactive examples to hex code lesson (#62993)

Thank you for your contribution to the page! 👍
We are happy to accept these changes and look forward to future contributions. 🎉

curriculum/challenges/english/blocks/lecture-working-with-colors-in-css/672bc5344330d7bee2f9c2ed.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-are-hex-codes
 ---
 
-# --description--
+# --interactive--
 
 When working with CSS to style a webpage, one of the most common methods for defining colors is by using hex color values. Hexadecimal color values, or hex codes, are a concise way to represent colors in the RGB color model. In this lesson, we'll explore what hex codes are, how they work in CSS, and when to use them.
 
@@ -27,6 +27,14 @@ Here, `#RRGGBB` is a placeholder for the actual hex code. The `RR`, `GG`, and `B
 
 These pairs can range from `00` (the lowest intensity) to `FF` (the highest intensity). The higher the number, the more of that color will be present in the final mix. For example, let's apply some hex colors to a few elements:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<h1>This is a heading.</h1>
+<p>This is a paragraph.</p>
+```
+
 ```css
 h1 {
   color: #FF5733; /* A reddish-orange color */
@@ -36,6 +44,8 @@ p {
 }
 ```
 
+:::
+
 In the first case, `#FF5733` is a reddish-orange color. Here’s the breakdown:
 
 - `FF` is the highest value for red (fully saturated).
@@ -54,26 +64,49 @@ Most design software, such as Adobe Photoshop or Figma, provides hex codes for t
 
 In web development, hex codes are often used for defining text colors, backgrounds, borders, and other visual elements. For example:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<button>Example</button>
+```
+
 ```css
 body {
   background-color: #F0F0F0; /* Light gray background */
 }
+
 button {
   background-color: #007BFF; /* A shade of blue */
   color: #FFFFFF; /* White text */
 }
 ```
 
+:::
+
 This ensures that your colors remain consistent across your entire website or application.
 
 In some cases, you may notice hex codes written in shorthand format, using only three characters instead of six. This is possible when both characters in each color pair are the same. For instance, `#FF5733` cannot be shortened, but `#FFFFFF` (white) can be written as `#FFF`.
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<h2>This is a heading.</h2>
+```
+
 ```css
+body {
+  background-color: #000;
+}
+
 h2 {
   color: #FFF; /* White in shorthand */
 }
 ```
 
+:::
+
 The shorthand `#FFF` is equivalent to `#FFFFFF`. Similarly, `#000` would represent black which is `#000000` in full form.
 
 Hex codes are popular for their precision and compatibility, allowing for over 16 million colors across all browsers. They're ideal when you need specific branding colors, want to control exact shades that aren't easily defined by named colors or HSL, or when you're copying colors from design software that provides hex codes by default.