fix(curriculum) added interactive examples to Lists, Links, Background and Borders Review page (#65371)

Co-authored-by: Muhammad R <muhammad.rizwan@tryhackme.com>

curriculum/challenges/english/blocks/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md

@@ -5,13 +5,64 @@ challengeType: 31
 dashedName: review-css-backgrounds-and-borders
 ---
 
-# --description--
+# --interactive--
 
 ## Styling Lists
 
 - **`line-height` Property**: This property is used to create space between lines of text. The accepted `line-height` values include the keyword `normal`, numbers, percentages and length units like the `em` unit.
 - **`list-style-type` Property**: This property is used to specify the marker for a list item. Acceptable values can include a circle, disc, or decimal.
+
+Here's an example using `list-style-type` to change the bullet style:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+```
+
+```css
+ul {
+  list-style-type: square;
+}
+```
+
+:::
+
 - **`list-style-position` Property**: This property is used to set the position for the list marker. The only two acceptable values are inside and outside.
+
+Here's an example showing the difference between `inside` and `outside`:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<ul class="inside-list">
+  <li>Item with inside position</li>
+  <li>Item with inside position</li>
+</ul>
+<ul class="outside-list">
+  <li>Item with outside position</li>
+  <li>Item with outside position</li>
+</ul>
+```
+
+```css
+.inside-list {
+  list-style-position: inside;
+}
+
+.outside-list {
+  list-style-position: outside;
+}
+```
+
+:::
+
 - **`list-style-image` Property**: This property is used to use an image for the list item marker. A common use case is to use the `url` function with a value set to a valid image location.
 
 ## Spacing list items using `margin`
@@ -20,23 +71,203 @@ dashedName: review-css-backgrounds-and-borders
 - Margins create space outside each `li` element, allowing control over the gap between list items.
 - `margin-bottom` is used to create space below each list item. For example, `margin-bottom: 10px;` will create a 10-pixel gap below each list item.
 
+Here's an example using `margin-bottom` to space list items:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<ul class="list">
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+```
+
+```css
+.list li {
+  margin-bottom: 20px;
+}
+```
+
+:::
+
 ## Styling Links
 
 - **`pseudo-class`**: This is a keyword added to a selector that allows you to select elements based on a particular state. Common states would include the `:hover`, `:visited` and `:focus` states.
 - **`:link pseudo-class`**: This pseudo-class is used to style links that have not been visited by the user.
+
+Here's an example using the `:link` pseudo-class:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<a href="/">Example link</a>
+```
+
+```css
+a:link {
+  color: red;
+}
+```
+
+:::
+
 - **`:visited pseudo-class`**: This pseudo-class is used to style links where a user has already visited.
 - **`:hover pseudo-class`**: This pseudo-class is used to style elements where a user is actively hovering over them.
+
+Here's an example using the `:hover` pseudo-class:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<a href="/">Hover over me!</a>
+```
+
+```css
+a:hover {
+  color: green;
+  text-decoration: underline;
+}
+```
+
+:::
+
 - **`:focus pseudo-class`**: This pseudo-class is used to style an element when it receives focus. Examples would include `input` or `select` elements where the clicks or tabs on the element to focus it.
+
+Here's an example using the `:focus` pseudo-class:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<a href="/">Example link</a>
+```
+
+```css
+a:focus {
+  outline: 2px solid orange;
+}
+```
+
+:::
+
 - **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. A common example would be when the user clicks on a button.
 
+Here's an example using the `:active` pseudo-class:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<a href="/">Click me!</a>
+```
+
+```css
+a:active {
+  color: pink;
+}
+```
+
+:::
+
 ## Working with Backgrounds and Borders
 
 - **`background-size` Property**: This property is used to set the background size for an element. Some common values include `cover` for the background image to cover the entire element and `contain` for the background image to fit within the element.
+
+Here's an example using `background-size: contain`:
+
+:::interactive_editor
+
+```html
+<style>
+  body {
+    background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    min-height: 100px;
+  }
+</style>
+```
+
+:::
+
 - **`background-repeat` Property**: This property is used to determine how background images should be repeated along the horizontal and vertical axes. The default value for `background-repeat` is `repeat` meaning the image will repeat both horizontally and vertically. You can also specify that there should be no repeat by using the `no-repeat` property.
+
+Here's an example using `background-repeat: no-repeat`:
+
+:::interactive_editor
+
+```html
+<style>
+  body {
+    background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    min-height: 100px;
+  }
+</style>
+```
+
+:::
+
 - **`background-position` Property**: This property is used to specify the position of the background image. It can be set to a specific length, percentage, or keyword values like `top`, `bottom`, `left`, `right`, and `center`.
+
+Here's an example using `background-position`:
+
+:::interactive_editor
+
+```html
+<style>
+  body {
+    background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center top;
+    min-height: 100px;
+  }
+</style>
+```
+
+:::
+
 - **`background-attachment` Property**: This property is used to specify whether the background image should scroll with the content or remain fixed in place. The main values are `scroll` (default), where the background image scrolls with the content, and `fixed`, where the background image stays in the same position on the screen.
 - **`background-image` Property**: This property is used to set the background image of an element. You can set multiple background images at the same time and use either the `url`, `radial-gradient` or `linear-gradient` functions as values.
+
+Here's an example using `background-image`:
+
+:::interactive_editor
+
+```html
+<style>
+  body {
+    background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
+    min-height: 100px;
+  }
+</style>
+```
+
+:::
+
 - **`background` Property**: This is the shorthand property for setting all background properties in one declaration. Here is an example of setting the background image and setting it to not repeat: `background: no-repeat url("example-url-goes-here");`
+
+Here's an example using the `background` shorthand property:
+
+:::interactive_editor
+
+```html
+<style>
+  body {
+    background: center top no-repeat url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
+    min-height: 100px;
+  }
+</style>
+```
+
+:::
+
 - **Good Contrast for Background and Foreground Colors**: It is important to ensure that the background and foreground colors have good contrast to make the text readable. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
 
 ## Borders
@@ -45,15 +276,143 @@ dashedName: review-css-backgrounds-and-borders
 - **`border-right` Property**: This property is used to set the styles for the right border of an element. `border-right: 2px solid red;` sets a 2-pixel-wide solid red border on the right side of the element.
 - **`border-bottom` Property**: This property is used to set the styles for the bottom border of an element. `border-bottom: 1px dashed green;` sets a 1-pixel-wide dashed green border on the bottom side of the element.
 - **`border-left` Property**: This property is used to set the styles for the left border of an element. `border-left: 4px dotted orange;` sets a 4-pixel-wide dotted orange border on the left side of the element.
+
+Here's an example using individual border properties:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<div class="bordered-box">Box with different borders</div>
+```
+
+```css
+.bordered-box {
+  border-top: 3px solid blue;
+  border-right: 2px solid red;
+  border-bottom: 1px dashed green;
+  border-left: 4px dotted orange;
+  padding: 20px;
+}
+```
+
+:::
+
 - **`border` Property**: This is the shorthand property for setting the width, style, and color of an element's border. `border: 1px solid black;` sets a 1-pixel-wide solid black border.
+
+Here's an example using the `border` shorthand property:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute cat lying on its back.">
+```
+
+```css
+img {
+  border: 2px solid red;
+}
+```
+
+:::
+
 - **`border-radius` Property**: This property is used to create rounded corners for an element's border.
+
+Here's an example using `border-radius`:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute cat lying on its back.">
+```
+
+```css
+img {
+  border: 2px solid black;
+  border-radius: 10px;
+}
+```
+
+:::
+
 - **`border-style` Property**: This property is used to set the style of an element's border. Some accepted values include `solid`, `dashed`, `dotted`, and `double`.
 
+Here's an example using different `border-style` values:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<div class="solid-border">Solid border</div>
+<div class="dashed-border">Dashed border</div>
+<div class="dotted-border">Dotted border</div>
+```
+
+```css
+.solid-border {
+  border: 3px solid blue;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+.dashed-border {
+  border: 3px dashed red;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+.dotted-border {
+  border: 3px dotted green;
+  padding: 10px;
+}
+```
+
+:::
+
 ## Gradients
 
-- **`linear-gradient()` Function**: This CSS function is used to create a transition between multiple colors along a straight line. 
+- **`linear-gradient()` Function**: This CSS function is used to create a transition between multiple colors along a straight line.
+
+Here's an example using `linear-gradient()`:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<div class="linear-gradient"></div>
+```
+
+```css
+.linear-gradient {
+  background: linear-gradient(to right, red, blue);
+  height: 40vh;
+}
+```
+
+:::
+
 - **`radial-gradient()` Function**: This CSS function creates an image that radiates from a particular point, like a circle or an ellipse, and gradually transitions between multiple colors.
 
+Here's an example using `radial-gradient()`:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<div class="radial-gradient"></div>
+```
+
+```css
+.radial-gradient {
+  background: radial-gradient(circle, red, blue);
+  height: 40vh;
+}
+```
+
+:::
+
 # --assignment--
 
 Review the CSS Backgrounds and Borders topics and concepts.