From d263e487e3d84aece5826c9eb62366a05f0e52a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Giftea=20=E2=98=95?= <Eleojogiftuhiene@gmail.com>
Date: Tue, 14 Oct 2025 23:38:52 +0100
Subject: [PATCH] feat(curriculum): add interactive examples to default styling
 links lesson (#62807)

---
 .../672b952d3a5c603908841971.md               | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/curriculum/challenges/english/blocks/lecture-styling-lists-and-links/672b952d3a5c603908841971.md b/curriculum/challenges/english/blocks/lecture-styling-lists-and-links/672b952d3a5c603908841971.md
index 67f2d4ff0d3..c8ea2852cba 100644
--- a/curriculum/challenges/english/blocks/lecture-styling-lists-and-links/672b952d3a5c603908841971.md
+++ b/curriculum/challenges/english/blocks/lecture-styling-lists-and-links/672b952d3a5c603908841971.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: why-are-default-link-styles-important-for-usability-on-the-web
 ---
 
-# --description--
+# --interactive--
 
 Default link styles play a crucial role in enhancing usability and accessibility on the web.
 
@@ -17,6 +17,14 @@ This distinction is fundamental to creating an intuitive and user-friendly brows
 
 Let's consider the basic default styles for links:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<a href="/">Example link</a>
+```
+
 ```css
 a:link {
   color: blue;
@@ -28,6 +36,8 @@ a:visited {
 }
 ```
 
+:::
+
 These styles serve several important functions.
 
 Firstly, the blue color for unvisited links stands out against most background colors and text, making links easily identifiable. This contrast is crucial for users to quickly scan a page and find navigational elements or important information.
@@ -38,10 +48,14 @@ The change in color for visited links (typically to purple) helps users keep tra
 
 Consider this HTML example:
 
+:::interactive_editor
+
 ```html
 <p>Learn more about <a href="https://www.example.com/cats">cats</a> and <a href="https://www.example.com/dogs">dogs</a>.</p>
 ```
 
+:::
+
 Without any custom CSS, most browsers will render these links in blue with an underline. After clicking on one of the links, its color will change to purple, providing immediate feedback to the user about their browsing history.
 
 While it's common for designers to modify these default styles to match a website's aesthetic, it's crucial to maintain the core principles behind them.
@@ -50,6 +64,14 @@ If you choose to change the default styles, ensure that links are still clearly
 
 For example, you might use a custom style like this:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<a href="/">Example link</a>
+```
+
 ```css
 a:link {
   color: blue;
@@ -63,10 +85,20 @@ a:visited {
 }
 ```
 
+:::
+
 This maintains the blue and purple color scheme while replacing the underline with a bottom border for a more modern look.
 
 It's also important to consider the different states of links. In addition to the default and visited states, links typically have hover and active states:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<a href="/">Example link</a>
+```
+
 ```css
 a:hover {
   color: red;
@@ -77,6 +109,8 @@ a:active {
 }
 ```
 
+:::
+
 These states provide immediate feedback to users as they interact with links, enhancing the overall usability of the site.
 
 In conclusion, while it's possible to customize link styles, the principles behind the default styles should be maintained.