feat(curriculum): Add interactive examples to styling link states lesson (#62809)

curriculum/challenges/english/blocks/lecture-styling-lists-and-links/672b9538c25634394ceb7b8f.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-do-you-style-the-different-link-states
 ---
 
-# --description--
+# --interactive--
 
 There are different states of a link, including `link`, `visited`, `hover`, `focus`, and `active`. These states are important for helping users recognize links and providing clear feedback after interactions, which improves both usability and accessibility.
 
@@ -37,6 +37,14 @@ The `:link` pseudo-class styles unvisited links, indicating that they are clicka
 
 Here is an example of targeting an anchor element and using the `:link` pseudo-class:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<a href="/">Example link</a>
+```
+
 ```css
 /* Normal state (unvisited link) */
 a:link { 
@@ -44,10 +52,20 @@ a:link {
 }
 ```
 
+:::
+
 The above example will change the link's default blue color to `red` when it is unvisited.
 
 `:visited` styles links that have already been visited or clicked, helping users track which links they have clicked before. Here’s an example usage of `:visited` pseudo-class:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<a href="https://www.freecodecamp.org/learn/" target="_blank">freeCodeCamp</a>
+```
+
 ```css
 /* Visited link */
 a:visited {
@@ -55,23 +73,43 @@ a:visited {
 }
 ```
 
+:::
+
 This code will color the link to `green` when it is clicked.
 
 `:hover` changes the link's style when the user hovers over it, providing a visual cue that the link is interactive. Here’s an example usage of `:hover` pseudo-class:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<a href="/">Example link</a>
+```
+
 ```css
 /* Hover state */
 a:hover {
-  color: yellow;
+  color: green;
 }
 ```
 
-This code will color the links to `yellow` when mouse is hovered over it.
+:::
+
+This code will color the links to `green` when mouse is hovered over it.
 
 `:focus` adds styles around the link when it is focused, such as when navigating with a keyboard, or enhancing accessibility.
 
 Here is an example using the `outline` property to apply a solid orange outline when the link is focused.
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<a href="/">Example link</a>
+```
+
 ```css
 /* Focus state */
 a:focus {
@@ -79,8 +117,18 @@ a:focus {
 }
 ```
 
+:::
+
 `:active` changes the link's styles while the link is being clicked, providing immediate feedback to the user that their action is being registered. Here’s an example usage of `:active` pseudo-class:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<a href="/">Example link</a>
+```
+
 ```css
 /* Active state */
 a:active {
@@ -88,6 +136,8 @@ a:active {
 }
 ```
 
+:::
+
 This code example will make the link to `pink` color immediately when the link is clicked.
 
 # --questions--