From 73f628d12e01172bc744699e81413def1935a68e Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 11:26:22 +0100
Subject: [PATCH 01/22] chore(css): Move CSS examples - Test your skills: The
 box model

---
 .../building_blocks/box_model_tasks/index.md  | 146 +++++++++++++++---
 1 file changed, 125 insertions(+), 21 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/box_model_tasks/index.md b/files/en-us/learn/css/building_blocks/box_model_tasks/index.md
index 1e203e3a28d1eb9..5c83dbd4d01692e 100644
--- a/files/en-us/learn/css/building_blocks/box_model_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/box_model_tasks/index.md
@@ -6,11 +6,11 @@ page-type: learn-module-assessment
 
 {{LearnSidebar}}
 
-The aim of this skill test is to assess whether you understand the [CSS box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model).
+The aim of these tasks is to assess whether you understand the [CSS box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model).
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -21,17 +21,51 @@ Your final result should look like the image below:
 
 ![Two boxes of the same size](mdn-box-model1.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}
+```html live-sample___box-models
+<div class="box">I use the standard box model.</div>
+<div class="box alternate">I use the alternate box model.</div>
+```
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/box-models-download.html) to work in your own editor or in an online editor.
+```css live-sample___box-models
+body {
+  font-family: sans-serif;
+}
+.box {
+  border: 5px solid rebeccapurple;
+  background-color: lightgray;
+  padding: 40px;
+  margin: 40px;
+  width: 300px;
+  height: 150px;
+}
+
+.alternate {
+  box-sizing: border-box;
+}
+```
+
+{{EmbedLiveSample("box-models", "", "540px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You will need to increase the height and width of the second block, to add the size of the padding and border:
+
+```css
+.alternate {
+  box-sizing: border-box;
+  width: 390px;
+  height: 240px;
+}
+```
+
+</details>
 
 ## Task 2
 
-In this task, add to the box:
+In this task, add the following things to the box:
 
 - A 5px, black, dotted border.
 - A top margin of 20px.
@@ -44,13 +78,38 @@ Your final result should look like the image below:
 
 ![A box with a dotted border](mdn-box-model2.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
+
+```html live-sample___mbp
+<div class="box">I use the standard box model.</div>
+```
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}
+```css live-sample___mbp
+body {
+  font-family: sans-serif;
+}
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/mbp-download.html) to work in your own editor or in an online editor.
+.box {
+}
+```
+
+{{EmbedLiveSample("mbp")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+This task involves using the margin, border and padding properties correctly.
+You might choose to use the longhand properties ({{cssxref("margin-top")}}, {{cssxref("margin-right")}}, etc.), however when setting a margin and padding on all sides, the shorthand is probably the better choice:
+
+```css
+.box {
+  border: 5px dotted black;
+  margin: 20px 1em 40px 2em;
+  padding: 1em;
+}
+```
+
+</details>
 
 ## Task 3
 
@@ -60,10 +119,55 @@ Your final result should look like the image below:
 
 ![An inline box with space between it and the text around it.](mdn-box-model3.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/inline-block-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___inline-block
+<div class="box">
+  <p>
+    Veggies es bonus vobis, <span>proinde vos postulo</span> essum magis
+    kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
+    garlic.
+  </p>
+
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+    Dandelion cucumber earthnut pea peanut soko zucchini.
+  </p>
+</div>
+```
+
+```css live-sample___inline-block
+body {
+  font-family: sans-serif;
+}
+
+.box span {
+  background-color: pink;
+  border: 5px solid black;
+  padding: 1em;
+}
+```
+
+{{EmbedLiveSample("inline-block")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+Solving this task requires that you understand when to use different {{cssxref("display")}} values.
+After adding `display: inline-block`, the block direction margin, border and padding will cause the other lines to be pushed away from the element:
+
+```css
+.box span {
+  background-color: pink;
+  border: 5px solid black;
+  padding: 1em;
+  display: inline-block;
+}
+```
+
+</details>
+
+## See also
+
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From c66182374433ad8b319f6675f48d9946eeeccf2d Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 11:39:26 +0100
Subject: [PATCH 02/22] chore(css): Move CSS examples - Test your skills: The
 Cascade

---
 .../building_blocks/box_model_tasks/index.md  |   2 +-
 .../building_blocks/cascade_tasks/index.md    | 113 +++++++++++++++---
 2 files changed, 100 insertions(+), 15 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/box_model_tasks/index.md b/files/en-us/learn/css/building_blocks/box_model_tasks/index.md
index 5c83dbd4d01692e..2082efacf1a5181 100644
--- a/files/en-us/learn/css/building_blocks/box_model_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/box_model_tasks/index.md
@@ -6,7 +6,7 @@ page-type: learn-module-assessment
 
 {{LearnSidebar}}
 
-The aim of these tasks is to assess whether you understand the [CSS box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model).
+The aim of this skill test is to assess whether you understand the [CSS box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model).
 
 > [!NOTE]
 > Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
diff --git a/files/en-us/learn/css/building_blocks/cascade_tasks/index.md b/files/en-us/learn/css/building_blocks/cascade_tasks/index.md
index 994556a41efb42b..46b5314e34dbf64 100644
--- a/files/en-us/learn/css/building_blocks/cascade_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/cascade_tasks/index.md
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand universal property values for [controlling inheritance in CSS](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance).
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -21,13 +21,50 @@ Your final result should look like the image below:
 
 ![Barely visible yellow links on a white background.](mdn-cascade.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}
+```html live-sample___cascade
+<div class="container" id="outer">
+  <div class="container" id="inner">
+    <ul>
+      <li class="nav"><a href="#">One</a></li>
+      <li class="nav"><a href="#">Two</a></li>
+    </ul>
+  </div>
+</div>
+```
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/cascade/cascade-download.html) to work in your own editor or in an online editor.
+```css live-sample___cascade
+#outer div ul .nav a {
+  background-color: powderblue;
+  padding: 5px;
+  display: inline-block;
+  margin-bottom: 10px;
+}
+
+div div li a {
+  color: rebeccapurple;
+}
+```
+
+{{EmbedLiveSample("cascade")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+One possible solution is as follows:
+
+```css
+#outer #inner a {
+  background-color: initial;
+}
+```
+
+There are two things you need to do in this task. First, write a selector for the `a` element which is more specific than the selector used to turn the background powderblue. In this solution, this is achieved by using the `id` selector, which has very high specificity.
+
+Then you need to remember there are special keyword values for all properties. In this case, using `inherit` sets the background color back to be the same as its parent element.
+
+</details>
 
 ## Task 2
 
@@ -37,10 +74,58 @@ Your final result should look like the image below:
 
 ![Barely visible yellow links on a white background.](mdn-cascade.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascadelayer.html", '100%', 700)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/cascade/cascadelayer-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___cascade-layer
+<div class="container" id="outer">
+  <div class="container" id="inner">
+    <ul>
+      <li class="nav"><a href="#">One</a></li>
+      <li class="nav"><a href="#">Two</a></li>
+    </ul>
+  </div>
+</div>
+```
+
+```css live-sample___cascade-layer
+@layer yellow, purple, green;
+
+@layer yellow {
+  #outer div ul .nav a {
+    padding: 5px;
+    display: inline-block;
+    margin-bottom: 10px;
+  }
+}
+@layer purple {
+  div div li a {
+    color: rebeccapurple;
+  }
+}
+@layer green {
+  a {
+    color: lightgreen;
+  }
+}
+```
+
+{{EmbedLiveSample("cascade-layer")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+One possible solution is as follows:
+
+```css
+@layer yellow, green, purple;
+```
+
+There is one thing you need to do in this task: change the order of precedence so the declaration for the desired color is in the last declared layer, which is what his solution shows.
+
+You need to remember that unlayered normal styles take precedence over layered normal styles. But, if all styles are within layers — as in the case of this task — styles in later declared layers take precedence over styles declared in earlier layers. Moving the purple layer to the end means it has precedence over the green and yellow layers.
+
+</details>
+
+## See also
+
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From 2ee3252d6ea586cf21f471434a15504e1c129b41 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 12:15:22 +0100
Subject: [PATCH 03/22] chore(css): Move CSS examples - Test your skills:
 Images and form elements

---
 .../css/building_blocks/images_tasks/index.md | 112 +++++++++++++++---
 1 file changed, 96 insertions(+), 16 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/images_tasks/index.md b/files/en-us/learn/css/building_blocks/images_tasks/index.md
index 7b6ae4f9a36e15c..daff81bf1f434b1 100644
--- a/files/en-us/learn/css/building_blocks/images_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/images_tasks/index.md
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand how special elements like [images, media and form elements are treated in CSS](/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements).
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -21,31 +21,111 @@ Your final result should look like the image below:
 
 ![An image in a box](mdn-images-object-fit.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example so that the image doesn't overflow the box:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/images/object-fit.html", '100%', 1000)}}
+```html live-sample___object-fit
+<div class="box">
+  <img
+    alt="Hot air balloons flying in clear sky, and a crowd of people in the foreground"
+    src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
+</div>
+```
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/images/object-fit-download.html) to work in your own editor or in an online editor.
+```css live-sample___object-fit
+.box {
+  border: 5px solid #000;
+  width: 400px;
+  height: 200px;
+}
+
+img {
+  /* Add styles here */
+}
+```
+
+{{EmbedLiveSample("object-fit", "", "400px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+It is ok if some parts of the image are cropped.
+Using `object-fit: cover` is the best choice, you also need to set the width and height to `100%`:
+
+```css
+img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+```
+
+</details>
 
 ## Task 2
 
-In this task, you have a simple form. Your task is to make the following changes:
+In this task, you have a basic form. Your task is to make the following changes:
 
 - Use attribute selectors to target the search field and button inside `.my-form`.
 - Make the form field and button use the same text size as the rest of the form.
-- Give the form field and button 10 px of padding.
+- Give the form field and button 10px of padding.
 - Give the button a background of `rebeccapurple`, white foreground, no border and rounded corners of 5px.
 
 Your final result should look like the image below:
 
 ![A single line form](mdn-images-form.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/images/form.html", '100%', 600)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/images/form-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___form
+<form action="" class="my-form" method="post">
+  <div>
+    <label for="fldSearch">Keywords</label>
+    <input id="fldSearch" name="keywords" type="search" />
+    <input name="btnSubmit" type="submit" value="Search" />
+  </div>
+</form>
+```
+
+```css live-sample___form
+body {
+  font-family: sans-serif;
+}
+.my-form {
+  border: 2px solid #000;
+  padding: 5px;
+}
+```
+
+{{EmbedLiveSample("form")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+Here's an example solution for the task:
+
+```css
+.my-form {
+  border: 2px solid #000;
+  padding: 5px;
+}
+
+.my-form input[type="search"] {
+  padding: 10px;
+  font-size: inherit;
+}
+
+.my-form input[type="submit"] {
+  padding: 10px;
+  font-size: inherit;
+  background-color: rebeccapurple;
+  color: white;
+  border: 0;
+  border-radius: 5px;
+}
+```
+
+</details>
+
+## See also
+
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From 493c3388726c7b8e4f9acad8ce548233edb81d35 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 12:56:49 +0100
Subject: [PATCH 04/22] chore(css): Move CSS examples - Test your skills:
 Selectors

---
 .../selectors/selectors_tasks/index.md        | 373 ++++++++++++++++--
 1 file changed, 333 insertions(+), 40 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md b/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md
index e3bedb7755260c4..7edd652618e1c5d 100644
--- a/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand [CSS selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors).
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -25,13 +25,55 @@ Your final result should look like the image below:
 
 ![Text with the CSS applied for the solution to task 1.](selectors1.jpg)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/type-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___type
+<div class="container">
+  <h1>This is a heading</h1>
+  <p>
+    Veggies es <span>bonus vobis</span>, proinde vos postulo essum magis
+    kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
+    garlic.
+  </p>
+  <h2>A level 2 heading</h2>
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+    Dandelion cucumber earthnut pea peanut soko zucchini.
+  </p>
+</div>
+```
+
+```css live-sample___type
+body {
+  font-family: sans-serif;
+}
+/* Add styles here */
+```
+
+{{EmbedLiveSample("type", "", "260px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You need to target the `h1`, `h2` and `span` selectors to change their color or size.
+
+```css
+h1 {
+  color: blue;
+}
+
+h2 {
+  background-color: blue;
+  color: white;
+}
+
+span {
+  font-size: 200%;
+}
+```
+
+</details>
 
 ## Task 2
 
@@ -46,33 +88,178 @@ Your final result should look like the image below:
 
 ![Text with the CSS applied for the solution to task 2.](selectors2.jpg)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/class-id-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___class-id
+<div class="container">
+  <h1>This is a heading</h1>
+  <p>
+    Veggies es <span class="alert">bonus vobis</span>, proinde vos postulo
+    <span class="alert stop">essum magis</span> kohlrabi welsh onion daikon
+    amaranth tatsoi tomatillo melon azuki bean garlic.
+  </p>
+  <h2 id="special">A level 2 heading</h2>
+  <p>Gumbo beet greens corn soko endive gumbo gourd.</p>
+  <h2>Another level 2 heading</h2>
+  <p>
+    <span class="alert go">Parsley shallot</span> courgette tatsoi pea sprouts
+    fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
+    earthnut pea peanut soko zucchini.
+  </p>
+</div>
+```
+
+```css live-sample___class-id
+body {
+  font-family: sans-serif;
+}
+/* Add styles here */
+```
+
+{{EmbedLiveSample("class-id", "", "320px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+This tests that you understand the difference between class and id selectors and also how to target multiple classes on an item.
+
+```css
+#special {
+  background-color: yellow;
+}
+
+.alert {
+  border: 2px solid grey;
+}
+
+.alert.stop {
+  background-color: red;
+}
+
+.alert.go {
+  background-color: green;
+}
+```
+
+</details>
 
 ## Task 3
 
-In this task, we want you to make the following changes without adding to the HTML:
+In this task, we want you to make the following changes without changing the HTML:
 
 - Style links, making the link-state orange, visited links green, and remove the underline on hover.
-- Make the first element inside the container font-size: 150% and the first line of that element red.
-- Stripe every other row in the table by selecting these rows and giving them a background color of #333 and foreground of white.
+- Make the first element inside the container `font-size: 150%` and the first line of that element red.
+- Stripe every other row in the table by selecting these rows and giving them a background color of `#333` and foreground white.
 
 Your final result should look like the image below:
 
 ![Text with the CSS applied for the solution to task 3.](selectors3.jpg)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/pseudo-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___pseudo
+<div class="container">
+  <p>
+    Veggies es <a href="http://example.com">bonus vobis</a>, proinde vos postulo
+    essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon
+    azuki bean garlic.
+  </p>
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+    Dandelion cucumber earthnut pea peanut soko zucchini.
+  </p>
+  <table>
+    <tbody>
+      <tr>
+        <th>Fruits</th>
+        <th>Vegetables</th>
+      </tr>
+      <tr>
+        <td>Apple</td>
+        <td>Potato</td>
+      </tr>
+      <tr>
+        <td>Orange</td>
+        <td>Carrot</td>
+      </tr>
+      <tr>
+        <td>Tomato</td>
+        <td>Parsnip</td>
+      </tr>
+      <tr>
+        <td>Kiwi</td>
+        <td>Onion</td>
+      </tr>
+      <tr>
+        <td>Banana</td>
+        <td>Beet</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+
+```css hidden live-sample___pseudo
+body {
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+
+table {
+  border-collapse: collapse;
+  width: 300px;
+}
+
+td,
+th {
+  padding: 0.2em;
+  text-align: left;
+}
+```
+
+```css live-sample___pseudo
+/* Add styles here */
+```
+
+{{EmbedLiveSample("pseudo", "", "320px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+Apply a pseudo-class (`:first-child`) and pseudo-element (`::first-line`) to the content.
+Style the `:link`, `:visited`, and `:hover` states of the `a` element, and create striped table rows using the `:nth-child` pseudo-class.
+
+```css
+.container p:first-child {
+  font-size: 150%;
+}
+
+.container p:first-child::first-line {
+  color: red;
+}
+
+a:link {
+  color: orange;
+}
+
+a:visited {
+  color: green;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+tr:nth-child(even) {
+  background-color: #333;
+  color: #fff;
+}
+```
+
+</details>
 
 ## Task 4
 
@@ -85,13 +272,57 @@ Your final result should look like the image below:
 
 ![Text with the CSS applied for the solution to task 4.](selectors4.jpg)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/combinators-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___combinators
+<div class="container">
+  <h2>This is a heading</h2>
+  <p>This paragraph comes after the heading.</p>
+  <p>This is the second paragraph.</p>
+
+  <h2>Another heading</h2>
+  <p>This paragraph comes after the heading.</p>
+  <ul class="list">
+    <li>One</li>
+    <li>
+      Two
+      <ul>
+        <li>2.1</li>
+        <li>2.2</li>
+      </ul>
+    </li>
+    <li>Three</li>
+  </ul>
+</div>
+```
+
+```css live-sample___combinators
+body {
+  font-family: sans-serif;
+}
+/* Add styles here */
+```
+
+{{EmbedLiveSample("combinators", "", "350px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+This task checks that you understand how to use different combinators.
+Here's an appropriate solution:
+
+```css
+h2 + p {
+  color: red;
+}
+
+.list > li {
+  list-style: none;
+  border-bottom: 1px solid #ccc;
+}
+```
+
+</details>
 
 ## Task 5
 
@@ -105,10 +336,72 @@ Your final result should look like the image below:
 
 ![Four links with different color borders.](selectors-attribute.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/attribute-links-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___attribute-links
+<ul>
+  <li><a href="https://example.com">Link 1</a></li>
+  <li><a href="http://example.com" title="Visit example.com">Link 2</a></li>
+  <li><a href="/contact">Link 3</a></li>
+  <li><a href="../contact/index.html">Link 4</a></li>
+</ul>
+```
+
+```css hidden live-sample___attribute-links
+body {
+  font-family: sans-serif;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  margin: 0 0 0.5em 0;
+}
+
+a {
+  display: block;
+  padding: 0.5em;
+}
+```
+
+```css live-sample___attribute-links
+a {
+  border: 5px solid grey;
+}
+/* Add styles here */
+```
+
+{{EmbedLiveSample("attribute-links", "", "250px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+- To select elements with a title attribute we can add title inside the square brackets (`a[title]`), which will select the second link, which is the only one with a title attribute.
+
+- Target the `<a>` element with an `href` attribute which contains the word "contact" anywhere in its value and make the border orange (`border-color: orange`).
+  There are two things we want to match here, the href value `/contact` and also `../contact`. So we need to match the string "contact" anywhere in the value using `*=`. This will select the third and fourth links.
+
+- Target the `<a>` element with an href value starting with `https` and give it a green border (`border-color: green`).
+  Look for an `href` value which starts with "https", so use `^=` to only select the first link.
+
+```css
+a[title] {
+  border-color: pink;
+}
+a[href*="contact"] {
+  border-color: orange;
+}
+a[href^="https"] {
+  border-color: green;
+}
+```
+
+</details>
+
+## See also
+
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From 2e247c4cecb1998fe4a3150c3a3afe496cb57619 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 13:23:46 +0100
Subject: [PATCH 05/22] chore(css): Move CSS examples - Test your skills:
 Sizing

---
 .../building_blocks/box_model_tasks/index.md  |   6 +-
 .../css/building_blocks/images_tasks/index.md |   2 +-
 .../selectors/selectors_tasks/index.md        |  10 +-
 .../css/building_blocks/sizing_tasks/index.md | 192 +++++++++++++++---
 4 files changed, 178 insertions(+), 32 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/box_model_tasks/index.md b/files/en-us/learn/css/building_blocks/box_model_tasks/index.md
index 2082efacf1a5181..015a3fb2ad83081 100644
--- a/files/en-us/learn/css/building_blocks/box_model_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/box_model_tasks/index.md
@@ -30,7 +30,7 @@ Try to update the code below to recreate the finished example:
 
 ```css live-sample___box-models
 body {
-  font-family: sans-serif;
+  font: 1.2em / 1.5 sans-serif;
 }
 .box {
   border: 5px solid rebeccapurple;
@@ -86,7 +86,7 @@ Try to update the code below to recreate the finished example:
 
 ```css live-sample___mbp
 body {
-  font-family: sans-serif;
+  font: 1.2em / 1.5 sans-serif;
 }
 
 .box {
@@ -139,7 +139,7 @@ Try to update the code below to recreate the finished example:
 
 ```css live-sample___inline-block
 body {
-  font-family: sans-serif;
+  font: 1.2em / 1.5 sans-serif;
 }
 
 .box span {
diff --git a/files/en-us/learn/css/building_blocks/images_tasks/index.md b/files/en-us/learn/css/building_blocks/images_tasks/index.md
index daff81bf1f434b1..5ee83fbd334230f 100644
--- a/files/en-us/learn/css/building_blocks/images_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/images_tasks/index.md
@@ -88,7 +88,7 @@ Try to update the code below to recreate the finished example:
 
 ```css live-sample___form
 body {
-  font-family: sans-serif;
+  font: 1.2em / 1.5 sans-serif;
 }
 .my-form {
   border: 2px solid #000;
diff --git a/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md b/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md
index 7edd652618e1c5d..e788ee6d6b9031f 100644
--- a/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md
@@ -46,7 +46,7 @@ Try to update the code below to recreate the finished example:
 
 ```css live-sample___type
 body {
-  font-family: sans-serif;
+  font: 1.2em / 1.5 sans-serif;
 }
 /* Add styles here */
 ```
@@ -111,7 +111,7 @@ Try to update the code below to recreate the finished example:
 
 ```css live-sample___class-id
 body {
-  font-family: sans-serif;
+  font: 1.2em / 1.5 sans-serif;
 }
 /* Add styles here */
 ```
@@ -202,7 +202,7 @@ Try to update the code below to recreate the finished example:
 
 ```css hidden live-sample___pseudo
 body {
-  font-family: sans-serif;
+  font: 1.2em / 1.5 sans-serif;
 }
 * {
   box-sizing: border-box;
@@ -298,7 +298,7 @@ Try to update the code below to recreate the finished example:
 
 ```css live-sample___combinators
 body {
-  font-family: sans-serif;
+  font: 1.2em / 1.5 sans-serif;
 }
 /* Add styles here */
 ```
@@ -349,7 +349,7 @@ Try to update the code below to recreate the finished example:
 
 ```css hidden live-sample___attribute-links
 body {
-  font-family: sans-serif;
+  font: 1.2em / 1.5 sans-serif;
 }
 
 ul {
diff --git a/files/en-us/learn/css/building_blocks/sizing_tasks/index.md b/files/en-us/learn/css/building_blocks/sizing_tasks/index.md
index 4c5bb489bfcb7c1..a92fd4c95bbc160 100644
--- a/files/en-us/learn/css/building_blocks/sizing_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/sizing_tasks/index.md
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand the different ways of [sizing items in CSS](/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS).
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -21,13 +21,67 @@ The second box should be fixed at 100 pixels tall, so that content will overflow
 
 ![Two boxes one with overflowing content](mdn-sizing-height-min-height.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/height-min-height.html", '100%', 1000)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/sizing/height-min-height-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___height-min-height
+<div class="box box1">
+  <p>
+    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
+    corn soko endive gumbo gourd.
+  </p>
+</div>
+
+<div class="box box2">
+  <p>
+    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
+    corn soko endive gumbo gourd.
+  </p>
+</div>
+```
+
+```css hidden live-sample___height-min-height
+body {
+  font: 1.2em / 1.5 sans-serif;
+  padding: 1em;
+}
+
+.box {
+  border: 5px solid #000;
+  width: 400px;
+  margin-bottom: 1em;
+}
+```
+
+```css live-sample___height-min-height
+.box1 {
+  /* Add styles here */
+}
+
+.box2 {
+  /* Add styles here */
+}
+```
+
+{{EmbedLiveSample("height-min-height", "", "500px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+There are two boxes, the first should be given a minimum height, in which case it will expand to take the additional content but if you remove some content, the box will be at least as tall as the `min-height`. The second is given a fixed height which will cause content to overflow.
+
+```css
+.box1 {
+  min-height: 100px;
+}
+
+.box2 {
+  height: 100px;
+}
+```
+
+</details>
 
 ## Task 2
 
@@ -37,13 +91,60 @@ Your final result should look like the image below:
 
 ![A box with another box nested inside](mdn-sizing-percentages.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/percentages.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/sizing/percentages-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___percentages
+<div class="box">
+  <div class="inner">Make me 60% of my parent's width.</div>
+</div>
+```
+
+```css hidden live-sample___percentages
+body {
+  font: 1.2em / 1.5 sans-serif;
+  padding: 1em;
+}
+.box {
+  border: 5px solid #000;
+  width: 400px;
+  margin-bottom: 1em;
+}
+
+.inner {
+  background-color: rebeccapurple;
+  color: white;
+  border-radius: 5px;
+}
+```
+
+```css live-sample___percentages
+* {
+  box-sizing: border-box;
+}
+.inner {
+  /* Add styles here */
+}
+```
+
+{{EmbedLiveSample("percentages", "", "250px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+Make the box 60% of the container and give it 10% of padding on all sides.
+All elements already have `box-sizing: border-box` to save you from worrying about which width you are using:
+
+```css
+* {
+  box-sizing: border-box;
+}
+.inner {
+  width: 60%;
+  padding: 10%;
+}
+```
+
+</details>
 
 ## Task 3
 
@@ -53,10 +154,55 @@ Your final result should look like the images below:
 
 ![Two boxes with images in](mdn-sizing-max-width.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/max-width.html", '100%', 1200)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/sizing/max-width-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___max-width
+<div class="box">
+  <img
+    alt="A pink star"
+    src="https://mdn.github.io/shared-assets/images/examples/star-pink_256x256.png" />
+</div>
+
+<div class="box">
+  <img
+    alt="Hot air balloons flying in clear sky, and a crowd of people in the foreground"
+    src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
+</div>
+```
+
+```css hidden live-sample___max-width
+body {
+  font: 1.2em / 1.5 sans-serif;
+  padding: 1em;
+}
+.box {
+  border: 5px solid #000;
+  margin-bottom: 1em;
+  width: 500px;
+}
+```
+
+```css live-sample___max-width
+img {
+  /* Add styles here */
+}
+```
+
+{{EmbedLiveSample("max-width", "", "700px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+The example has an image which is breaking out of the box and one which is smaller than the box, you need to use `max-width` set to 100% to cause the larger image to grow only as large as the box. If you use `width: 100%`, the small image will stretch.
+
+```css
+img {
+  max-width: 100%;
+}
+```
+
+</details>
+
+## See also
+
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From 469dc797356b063db426086d31822f025693a71c Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 13:23:46 +0100
Subject: [PATCH 06/22] chore(css): Move CSS examples - Test your skills:
 Sizing

---
 .../css/building_blocks/tables_tasks/index.md | 150 ++++++++++++++++--
 1 file changed, 140 insertions(+), 10 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/tables_tasks/index.md b/files/en-us/learn/css/building_blocks/tables_tasks/index.md
index ebdd27a9ab5a042..afd0ee66eeea7a5 100644
--- a/files/en-us/learn/css/building_blocks/tables_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/tables_tasks/index.md
@@ -9,13 +9,13 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand how to [style HTML tables in CSS](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables).
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task
 
-In the lesson on [styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables) we styled up a table in a rather garish manner. In this task, we are going to style the same table, but using some good practices for table design as outlined in the external article [Web Typography: designing tables to be read not looked at](https://alistapart.com/article/web-typography-tables/).
+In the lesson on [styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables), we styled up a table in a rather garish manner. In this task, we are going to style the same table, but using some good practices for table design as outlined in the external article [Web Typography: designing tables to be read not looked at](https://alistapart.com/article/web-typography-tables/).
 
 Our finished table will look like the image below. There are a number of ways that you can achieve this, but we suggest you follow similar patterns as used in the tutorial to do the following things:
 
@@ -31,14 +31,144 @@ Our finished table will look like the image below. There are a number of ways th
 
 ![A table with striped rows.](mdn-table-bands.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/tables/table.html", '100%', 1000)}}
+```html live-sample___table
+<table>
+  <caption>
+    A summary of the UK's most famous punk bands
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">Band</th>
+      <th scope="col">Year formed</th>
+      <th scope="col">No. of Albums</th>
+      <th scope="col">Most famous song</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Buzzcocks</th>
+      <td>1976</td>
+      <td>9</td>
+      <td>Ever fallen in love (with someone you shouldn't've)</td>
+    </tr>
+    <tr>
+      <th scope="row">The Clash</th>
+      <td>1976</td>
+      <td>6</td>
+      <td>London Calling</td>
+    </tr>
+    <tr>
+      <th scope="row">The Damned</th>
+      <td>1976</td>
+      <td>10</td>
+      <td>Smash it up</td>
+    </tr>
+    <tr>
+      <th scope="row">Sex Pistols</th>
+      <td>1975</td>
+      <td>1</td>
+      <td>Anarchy in the UK</td>
+    </tr>
+    <tr>
+      <th scope="row">Sham 69</th>
+      <td>1976</td>
+      <td>13</td>
+      <td>If the kids are united</td>
+    </tr>
+    <tr>
+      <th scope="row">Siouxsie and the Banshees</th>
+      <td>1976</td>
+      <td>11</td>
+      <td>Hong Kong Garden</td>
+    </tr>
+    <tr>
+      <th scope="row">Stiff Little Fingers</th>
+      <td>1977</td>
+      <td>10</td>
+      <td>Suspect Device</td>
+    </tr>
+    <tr>
+      <th scope="row">The Stranglers</th>
+      <td>1974</td>
+      <td>17</td>
+      <td>No More Heroes</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <th colspan="2" scope="row">Total albums</th>
+      <td colspan="2">77</td>
+    </tr>
+  </tfoot>
+</table>
+```
 
-Additional question:
+```css hidden live-sample___table
+body {
+  padding: 1em;
+  font: 1.2em / 1.5 sans-serif;
+  font-size: 80%;
+}
+```
 
-- What can you do to make the table layout behave a bit more predictably? Think of how table columns are sized by default and how we can change this behavior to size the columns according to the width of their headings.
+```css live-sample___table
+/* Add styles here */
+```
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/tables/table-download.html) to work in your own editor or in an online editor.
+{{EmbedLiveSample("table")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+The below is a sample of how the end result could be achieved, using similar techniques to the lesson. However there are a number of ways that would be perfectly correct, perhaps slightly more verbose.
+
+```css
+table {
+  border-top: 1px solid #999;
+  border-bottom: 1px solid #999;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+th,
+td {
+  vertical-align: top;
+  padding: 0.3em;
+}
+
+tr :nth-child(2),
+tr :nth-child(3) {
+  text-align: right;
+}
+
+tr :nth-child(1),
+tr :nth-child(4) {
+  text-align: left;
+}
+
+tbody tr:nth-child(odd) {
+  background-color: #eee;
+}
+
+tfoot {
+  border-top: 1px solid #999;
+}
+
+tfoot tr :nth-child(1) {
+  text-align: right;
+}
+
+tfoot tr :nth-child(2) {
+  text-align: left;
+}
+```
+
+</details>
+
+**Bonus question:** What can you do to make the table layout behave a bit more predictably? Think of how table columns are sized by default and how we can change this behavior to size the columns according to the width of their headings.
+
+## See also
+
+- [Web Typography: Designing Tables to be Read, Not Looked At](https://alistapart.com/article/web-typography-tables) on alistapart.com (2017)

From ba7e5c098b996c88110f2724916919236f9b4e81 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 17:19:08 +0100
Subject: [PATCH 07/22] chore(css): Move CSS examples - Test your skills:
 Backgrounds and borders

---
 .../css/building_blocks/tables_tasks/index.md |   1 +
 .../index.md                                  | 157 +++++++++++++++---
 2 files changed, 136 insertions(+), 22 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/tables_tasks/index.md b/files/en-us/learn/css/building_blocks/tables_tasks/index.md
index afd0ee66eeea7a5..35c3b1ce69feb7c 100644
--- a/files/en-us/learn/css/building_blocks/tables_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/tables_tasks/index.md
@@ -171,4 +171,5 @@ tfoot tr :nth-child(2) {
 
 ## See also
 
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)
 - [Web Typography: Designing Tables to be Read, Not Looked At](https://alistapart.com/article/web-typography-tables) on alistapart.com (2017)
diff --git a/files/en-us/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md
index c0c43a688cb553f..219529265423b8b 100644
--- a/files/en-us/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md
+++ b/files/en-us/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.md
@@ -9,46 +9,159 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand [backgrounds and borders of boxes in CSS](/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders).
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
 
-In this task, we want you to add a background, border, and some simple styling to a page header:
+In this task, we want you to add a background, border, and some basic styles to a page header:
 
 1. Give the box a 5px black solid border, with rounded corners of 10px.
-2. Add a background image (use the URL `balloons.jpg`) and size it so that it covers the box.
-3. Give the `<h2>` a semi-transparent black background color, and make the text white.
+2. Give the `<h2>` a semi-transparent black background color, and make the text white.
+3. Add a background image and size it so that it covers the box. You can use the following image:
+
+   ```plain
+   https://mdn.github.io/shared-assets/images/examples/balloons.jpg
+   ```
 
 Your final result should look like the image below:
 
 ![Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background.](backgrounds-task1.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds1.html", '100%', 700)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/backgrounds/backgrounds1-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___backgrounds1
+<div class="box">
+  <h2>Backgrounds & Borders</h2>
+</div>
+```
+
+```css hidden live-sample___backgrounds1
+body {
+  padding: 1em;
+  font: 1.2em / 1.5 sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+.box {
+  padding: 0.5em;
+}
+```
+
+```css live-sample___backgrounds1
+.box {
+  /* Add styles here */
+}
+
+h2 {
+  /* Add styles here */
+}
+```
+
+{{EmbedLiveSample("backgrounds1", "", "200px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You should use `border`, `border-radius`, `background-image`, and `background-size` and understand how to use RGB colors to make a background color partly transparent:
+
+```css
+.box {
+  border: 5px solid #000;
+  border-radius: 10px;
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
+  background-size: cover;
+}
+
+h2 {
+  background-color: rgb(0 0 0 / 50%);
+  color: #fff;
+}
+```
+
+</details>
 
 ## Task 2
 
 In this task, we want you to add background images, a border, and some other styling to a decorative box:
 
-- Give the box a 5px lightblue border and round the top left corner 20px and the bottom right corner 40px.
-- The heading uses the `star.png` image as a background image, with a single centered star on the left and a repeating pattern of stars on the right.
-- Make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in previous lessons to achieve this.
+1. Give the box a 5px lightblue border and round the top left corner 20px and the bottom right corner 40px.
 
-Your final result should look like the image below:
+2. The heading uses the `star.png` image as a background image, with a single centered star on the left and a repeating pattern of stars on the right.
+   You can use the following image:
 
-![Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars.](backgrounds-task2.png)
+   ```plain
+   https://mdn.github.io/shared-assets/images/examples/star.png
+   ```
+
+3. Make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in previous lessons to achieve this.
 
-Try updating the live code below to recreate the finished example:
+Your final result should look like the image below:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds2.html", '100%', 700)}}
+![Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars.](backgrounds-task2.png)
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/backgrounds/backgrounds2-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___backgrounds2
+<div class="box">
+  <h2>Backgrounds & Borders</h2>
+</div>
+```
+
+```css hidden live-sample___backgrounds2
+body {
+  padding: 1em;
+  font: 1.2em / 1.5 sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+.box {
+  width: 300px;
+  padding: 0.5em;
+}
+```
+
+```css live-sample___backgrounds2
+.box {
+  /* Add styles here */
+}
+
+h2 {
+  /* Add styles here */
+}
+```
+
+{{EmbedLiveSample("backgrounds2", "", "220px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You need to add padding to the heading so that it doesn't overlay the star image - this links back to learning from the earlier [Box Model lesson](/en-US/docs/Learn/CSS/Building_blocks/The_box_model).
+The text should be aligned with the `text-align` property:
+
+```css
+.box {
+  border: 5px solid lightblue;
+  border-top-left-radius: 20px;
+  border-bottom-right-radius: 40px;
+}
+
+h2 {
+  padding: 0 40px;
+  text-align: center;
+  background:
+    url(https://mdn.github.io/shared-assets/images/examples/star.png) no-repeat
+      left center,
+    url(https://mdn.github.io/shared-assets/images/examples/star.png) repeat-y
+      right center;
+}
+```
+
+</details>
+
+## See also
+
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From 2f07e5b80e10e26454d7cb9e1cebe49c2164266b Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 17:56:43 +0100
Subject: [PATCH 08/22] chore(css): Move CSS examples - Test your skills:
 Values and units

---
 .../css/building_blocks/values_tasks/index.md | 178 ++++++++++++++++--
 1 file changed, 160 insertions(+), 18 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/values_tasks/index.md b/files/en-us/learn/css/building_blocks/values_tasks/index.md
index 8491c9c88c05331..79c515a7c0165bd 100644
--- a/files/en-us/learn/css/building_blocks/values_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/values_tasks/index.md
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand different types of [values and units used in CSS properties](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units).
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -21,17 +21,71 @@ In this task, the first list item has been given a background color using a hex
 - The third should use HSL color.
 - The fourth should use RGB color but with the alpha channel set to `0.6`.
 
-You can find conversions for the hex color at [this link](https://convertingcolors.com/hex-color-86DEFA.html). You need to figure out how to use the values in CSS. Your final result should look like the image below:
+You [can convert the hex color at convertingcolors.com](https://convertingcolors.com/hex-color-86DEFA.html). You need to figure out how to use the values in CSS. Your final result should look like the image below:
 
 ![Four list items. The first three with the same background color and the last with a lighter background.](mdn-value-color.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/values/color.html", '100%', 1000)}}
+```html live-sample___color
+<ul>
+  <li class="hex">hex color</li>
+  <li class="rgb">RGB color</li>
+  <li class="hsl">HSL color</li>
+  <li class="transparency">Alpha value 0.6</li>
+</ul>
+```
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/values/color-download.html) to work in your own editor or in an online editor.
+```css hidden live-sample___color
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  margin: 1em;
+  padding: 0.5em;
+}
+```
+
+```css live-sample___color
+.hex {
+  background-color: #86defa;
+}
+
+/* Add styles here */
+```
+
+{{EmbedLiveSample("color", "", "300px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+By using [a color conversion tool](https://convertingcolors.com/hex-color-86DEFA.html), you should be equipped to use different [color functions](/en-US/docs/Web/CSS/color_value#syntax) to define the same color in different ways:
+
+```css
+.hex {
+  background-color: #86defa;
+}
+
+.rgb {
+  background-color: rgb(134 222 250);
+}
+
+.hsl {
+  background-color: hsl(194 92% 75%);
+}
+
+.transparency {
+  background-color: rgb(134 222 250 / 60%);
+}
+```
+
+</details>
 
 ## Task 2
 
@@ -46,13 +100,68 @@ Your final result should look like the image below:
 
 ![Some text at varying sizes.](mdn-value-length.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
+
+```html live-sample___length
+<h1>Level 1 heading</h1>
+<p>
+  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+  daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+</p>
+<h2>Level 2 heading</h2>
+<p>
+  Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+  tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+  Dandelion cucumber earthnut pea peanut soko zucchini.
+</p>
+```
+
+```css hidden live-sample___length
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+```
+
+```css live-sample___length
+h1 {
+}
+
+h2 {
+}
+
+p {
+}
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/values/length.html", '100%', 1000)}}
+h1 + p {
+}
+```
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/values/length-download.html) to work in your own editor or in an online editor.
+{{EmbedLiveSample("length", "", "420px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You can use the following length values:
+
+```css
+h1 {
+  font-size: 50px;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+p {
+  font-size: 16px;
+}
+
+h1 + p {
+  font-size: 120%;
+}
+```
+
+</details>
 
 ## Task 3
 
@@ -62,10 +171,43 @@ Your final result should look like the image below:
 
 ![A stat centered horizontally in a box and a short distance from the top of the box.](mdn-value-position.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
+
+```html live-sample___position
+<div class="box"></div>
+```
+
+```css hidden live-sample___position
+.box {
+  border: 5px solid #000;
+  height: 350px;
+}
+```
+
+```css live-sample___position
+.box {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/star-pink_256x256.png);
+  background-repeat: no-repeat;
+}
+```
+
+{{EmbedLiveSample("position", "", "400px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+Use `background-position` with ther `center` keyword and a percentage:
+
+```css
+.box {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/star-pink_256x256.png);
+  background-repeat: no-repeat;
+  background-position: center 20%;
+}
+```
+
+</details>
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/values/position.html", '100%', 800)}}
+## See also
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/values/position-download.html) to work in your own editor or in an online editor.
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From b32991e6e60ca2d8fa29c4a6779ec29624a1cbfd Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 18:15:47 +0100
Subject: [PATCH 09/22] chore(css): Move CSS examples - Test your skills:
 Writing modes and logical properties

---
 .../writing_modes_tasks/index.md              | 163 +++++++++++++++---
 1 file changed, 142 insertions(+), 21 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md b/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md
index 21c9b0f29a57680..4dd20da14108ed7 100644
--- a/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand how to [handle different text directions using writing modes and logical properties in CSS](/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions).
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -21,13 +21,45 @@ Your final result should look like the image below:
 
 ![A box with a vertical writing mode](mdn-writing-modes1.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/writing-mode.html", '100%', 800)}}
+```html live-sample___writing-mode
+<div class="box">Turn me on my side.</div>
+```
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/writing-modes/writing-mode-download.html) to work in your own editor or in an online editor.
+```css hidden live-sample___writing-mode
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+```
+
+```css live-sample___writing-mode
+.box {
+  border: 5px solid rebeccapurple;
+  background-color: lightgray;
+  padding: 40px;
+  margin: 40px;
+}
+```
+
+{{EmbedLiveSample("writing-mode", "", "400px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You should use the `writing-mode` property with a value of `vertical-rl` for vertical right-to-left script:
+
+```css
+.box {
+  border: 5px solid rebeccapurple;
+  background-color: lightgray;
+  padding: 40px;
+  margin: 40px;
+  writing-mode: vertical-rl;
+}
+```
+
+</details>
 
 ## Task 2
 
@@ -37,13 +69,52 @@ Your final result should look like the image below:
 
 ![Two boxes one horizontal the other vertical](mdn-writing-modes2.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-width-height.html", '100%', 1100)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/writing-modes/logical-width-height-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___logical-width-height
+<div class="box">Horizontal.</div>
+<div class="box vertical">Vertical.</div>
+```
+
+```css hidden live-sample___logical-width-height
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+```
+
+```css live-sample___logical-width-height
+.box {
+  border: 5px solid rebeccapurple;
+  background-color: lightgray;
+  padding: 40px;
+  margin: 40px;
+  width: 200px;
+  height: 100px;
+}
+```
+
+{{EmbedLiveSample("logical-width-height", "", "500px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+As well as setting `writing-mode: vertical-rl` on the `.vertical` box, you need to apply the `inline-size` and `block-size` properties to replace `width` and `height`:
+
+```css
+.box {
+  border: 5px solid rebeccapurple;
+  background-color: lightgray;
+  padding: 40px;
+  margin: 40px;
+  inline-size: 200px;
+  block-size: 100px;
+}
+.vertical {
+  writing-mode: vertical-rl;
+}
+```
+
+</details>
 
 ## Task 3
 
@@ -53,10 +124,60 @@ Your final result should look like the image below:
 
 ![Two boxes one horizontal one vertical with different margin, border and padding](mdn-writing-modes3.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-mbp.html", '100%', 1100)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/writing-modes/logical-mbp-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___logical-mbp
+<div class="box">Horizontal.</div>
+<div class="box vertical">Vertical.</div>
+```
+
+```css hidden live-sample___logical-mbp
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+```
+
+```css hidden live-sample___logical-mbp
+.vertical {
+  writing-mode: vertical-rl;
+}
+```
+
+```css live-sample___logical-mbp
+.box {
+  width: 150px;
+  height: 150px;
+  border-top: 5px solid rebeccapurple;
+  border-right: 5px solid grey;
+  border-bottom: 5px dotted red;
+  border-left: 5px dotted blue;
+  padding-top: 40px;
+  margin-bottom: 30px;
+}
+```
+
+{{EmbedLiveSample("logical-mbp", "", "500px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+To solve this, you need an understanding of the logical, flow relative mappings for margin, border and padding physical properties:
+
+```css
+.box {
+  width: 150px;
+  height: 150px;
+  border-block-start: 5px solid rebeccapurple;
+  border-inline-end: 5px solid grey;
+  border-block-end: 5px dotted red;
+  border-inline-start: 5px dotted blue;
+  padding-block-start: 40px;
+  margin-block-end: 30px;
+}
+```
+
+</details>
+
+## See also
+
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From 88b28fbff7fb4b97d574faa85c0aa16613ddf0e6 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 21:48:43 +0100
Subject: [PATCH 10/22] chore(css): Move CSS examples - Test your skills:
 Flexbox

---
 .../css/css_layout/flexbox_skills/index.md    | 282 +++++++++++++++---
 1 file changed, 247 insertions(+), 35 deletions(-)

diff --git a/files/en-us/learn/css/css_layout/flexbox_skills/index.md b/files/en-us/learn/css/css_layout/flexbox_skills/index.md
index 457f7bb40f88ece..2af8a972ed646af 100644
--- a/files/en-us/learn/css/css_layout/flexbox_skills/index.md
+++ b/files/en-us/learn/css/css_layout/flexbox_skills/index.md
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand how [flexbox and flex items](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) behave. Below are four common design patterns that you might use flexbox to create. Your task is to build them.
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -21,13 +21,61 @@ Your final result should look like the image below:
 
 ![Flex items laid out as a row with space between them.](flex-task1.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox1-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___flexbox1
+<nav>
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="/about">About Us</a></li>
+    <li><a href="/products">Our Products</a></li>
+    <li><a href="/contact">Contact Us</a></li>
+  </ul>
+</nav>
+```
+
+```css hidden live-sample___flexbox1
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+nav ul {
+  max-width: 700px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+nav a:link,
+nav a:visited {
+  background-color: #4d7298;
+  border: 2px solid #77a6b6;
+  border-radius: 0.5em;
+  color: #fff;
+  padding: 0.5em;
+  display: inline-block;
+  text-decoration: none;
+}
+```
+
+```css live-sample___flexbox1
+nav ul {
+}
+```
+
+{{EmbedLiveSample("flexbox1", "", "240px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You can apply `display: flex` and control spacing using the `justify-content` property:
+
+```css
+nav ul {
+  display: flex;
+  justify-content: space-between;
+}
+```
+
+</details>
 
 ## Task 2
 
@@ -37,33 +85,135 @@ Your final result should look like the image below:
 
 ![Flex items laid out as three equal size columns with different amounts of content.](flex-task2.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}
-
-Additional question:
-
-- Can you now make the first item twice the size of the other items?
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox2-download.html) to work in your own editor or in an online editor.
+**Bonus question:** Can you now make the first item twice the size of the other items?
+
+Try to update the code below to recreate the finished example:
+
+```html live-sample___flexbox2
+<ul>
+  <li>I am small</li>
+  <li>I have more content than the very small item.</li>
+  <li>
+    I have lots of content. So much content that I don't know where it is all
+    going to go. I'm glad that CSS is pretty good at dealing with situations
+    where we end up with more words than expected!
+  </li>
+</ul>
+```
+
+```css hidden live-sample___flexbox2
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+ul {
+  max-width: 700px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+li {
+  background-color: #4d7298;
+  border: 2px solid #77a6b6;
+  border-radius: 0.5em;
+  color: #fff;
+  padding: 0.5em;
+}
+```
+
+```css live-sample___flexbox2
+ul {
+}
+
+li {
+}
+```
+
+{{EmbedLiveSample("flexbox2", "", "240px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+It's best to use shorthands, so in this scenario `flex: 1` is probably the best answer, and so the most optimal result would be:
+
+```css
+ul {
+  display: flex;
+}
+
+li {
+  flex: 1;
+}
+```
+
+For the bonus question, add a selector that targets the first element and sets `flex: 2;` (or `flex: 2 0 0;` or `flex-grow: 2`):
+
+```css
+li:first-child {
+  flex: 2;
+}
+```
+
+</details>
 
 ## Task 3
 
-In this task, there are two elements in the HTML below, a `<div>` element with a class of `parent` which contains another `<div>` element with a class of `child`. Use flexbox to center the child inside the parent. Note that there is not just one possible solution here.
+In this task, there are two elements in the HTML below, a `<div>` element with a class of `parent` which contains another `<div>` element with a class of `child`. Use flexbox to center the child inside the parent. There is not just one possible solution here.
 
 Your final result should look like the image below:
 
 ![A box centered inside another box.](flex-task3.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox3-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___flexbox3
+<div class="parent">
+  <div class="child">Center me.</div>
+</div>
+```
+
+```css hidden live-sample___flexbox3
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.parent {
+  border: 2px solid #77a6b6;
+  border-radius: 0.5em;
+  height: 200px;
+}
+
+.child {
+  background-color: #4d7298;
+  color: #fff;
+  padding: 0.5em;
+  width: 150px;
+}
+```
+
+```css hidden live-sample___flexbox3
+.parent {
+}
+
+.child {
+}
+```
+
+{{EmbedLiveSample("flexbox3", "", "210px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+It's only necessary to change the parent styles to center an item horizontally and vertically:
+
+```css
+.parent {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
+</details>
 
 ## Task 4
 
@@ -71,10 +221,72 @@ In this task, we want you to arrange these items into rows as in the image below
 
 ![A set of items displayed as rows.](flex-task4.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 1100)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox4-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___flexbox4
+<ul>
+  <li>Turnip</li>
+  <li>greens</li>
+  <li>yarrow</li>
+  <li>ricebean</li>
+  <li>rutabaga</li>
+  <li>endive</li>
+  <li>cauliflower</li>
+  <li>sea lettuce</li>
+  <li>kohlrabi</li>
+  <li>amaranth</li>
+</ul>
+```
+
+```css hidden live-sample___flexbox4
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+ul {
+  width: 450px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+li {
+  background-color: #4d7298;
+  border: 2px solid #77a6b6;
+  border-radius: 0.5em;
+  color: #fff;
+  padding: 0.5em;
+  margin: 0.5em;
+}
+```
+
+```css live-sample___flexbox4
+ul {
+}
+
+li {
+}
+```
+
+{{EmbedLiveSample("flexbox4", "", "260px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+This task requires an understanding of the `flex-wrap` property to wrap flex lines. In addition, to ensure that you end up with something that looks like the example, you need to set `flex: auto` on the child (or `flex: 1 1 auto;`).
+
+```css
+ul {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+li {
+  flex: auto;
+}
+```
+
+</details>
+
+## See also
+
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From 154d6f89810bcff170309e71608045f7af5185f4 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 22:15:36 +0100
Subject: [PATCH 11/22] chore(css): Move CSS examples - Test your skills:
 Floats

---
 .../css/css_layout/floats_skills/index.md     | 205 ++++++++++++++++--
 1 file changed, 182 insertions(+), 23 deletions(-)

diff --git a/files/en-us/learn/css/css_layout/floats_skills/index.md b/files/en-us/learn/css/css_layout/floats_skills/index.md
index d04d232a0a2ca89..c3640c4c79e595e 100644
--- a/files/en-us/learn/css/css_layout/floats_skills/index.md
+++ b/files/en-us/learn/css/css_layout/floats_skills/index.md
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand [floats in CSS](/en-US/docs/Learn/CSS/CSS_layout/Floats) using the {{CSSxRef("float")}} and {{CSSxRef("clear")}} properties and values as well as other methods for clearing floats. You will be working through three small tasks that use different elements of the material you have just covered.
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -19,13 +19,63 @@ In this task, you need to float the two elements with a class of `float1` and `f
 
 ![Two blocks displaying left and right of some text.](float-task1.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 900)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float1-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___float1
+<div class="box">
+  <div class="float float1">One</div>
+  <div class="float float2">Two</div>
+  <p>The two boxes should float to either side of this text.</p>
+</div>
+```
+
+```css hidden live-sample___float1
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+.box {
+  padding: 0.5em;
+}
+.float {
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rebeccapurple;
+  color: #fff;
+  padding: 1em;
+}
+```
+
+```css live-sample___float1
+.float1 {
+}
+
+.float2 {
+}
+```
+
+{{EmbedLiveSample("float1", "", "210px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You can use `float` for both boxes:
+
+```css
+.float1 {
+  float: left;
+}
+
+.float2 {
+  float: right;
+}
+```
+
+</details>
 
 ## Task 2
 
@@ -35,13 +85,63 @@ Your final result should look like the image below:
 
 ![A box displayed to the left of a line of text, with some more text below.](float-task2.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float2-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___float2
+<div class="box">
+  <div class="float">Float</div>
+  <p>This sentence appears next to the float.</p>
+  <p class="below">Make this sentence appear below the float.</p>
+</div>
+```
+
+```css hidden live-sample___float2
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+.box {
+  padding: 0.5em;
+}
+.float {
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rebeccapurple;
+  color: #fff;
+  padding: 1em;
+}
+```
+
+```css live-sample___float2
+.float {
+}
+
+.below {
+}
+```
+
+{{EmbedLiveSample("float2", "", "300px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You need to flow the item left, then add `clear: left` to the class for the second paragraph:
+
+```css
+.float {
+  float: left;
+}
+
+.below {
+  clear: left;
+}
+```
+
+</details>
 
 ## Task 3
 
@@ -49,10 +149,69 @@ In this task, we have a floated element. The box wrapping the float and text is
 
 ![A block displayed to the right of some text both wrapped by a box with a background color.](float-task3.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float3-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___float3
+<div class="box">
+  <div class="float">Float</div>
+  <p>This sentence appears next to the float.</p>
+</div>
+```
+
+```css hidden live-sample___float3
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+
+.box {
+  padding: 0.5em;
+}
+
+.float {
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207 232 220);
+  padding: 1em;
+  color: #fff;
+}
+
+.box {
+  background-color: rebeccapurple;
+  padding: 10px;
+  color: #fff;
+}
+```
+
+```css live-sample___float3
+.float {
+  float: right;
+}
+
+.box {
+}
+```
+
+{{EmbedLiveSample("float3", "", "300px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+Clear the box underneath the floated item by adding `display: flow-root` to the class for `.box`.
+Other methods might be to use `overflow` or a clearfix hack, however the learning materials detail the `flow-root` method as the modern way to achieve this.
+
+```css
+.box {
+  display: flow-root;
+}
+```
+
+</details>
+
+## See also
+
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From 8960a3adc87882e23c95e585c8ed5101c3fce8b2 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 22:35:19 +0100
Subject: [PATCH 12/22] chore(css): Move CSS examples - Test your skills: Grid

---
 .../learn/css/css_layout/grid_skills/index.md | 336 ++++++++++++++++--
 1 file changed, 311 insertions(+), 25 deletions(-)

diff --git a/files/en-us/learn/css/css_layout/grid_skills/index.md b/files/en-us/learn/css/css_layout/grid_skills/index.md
index 2ee82cc21b9d906..b27a5c171e7e039 100644
--- a/files/en-us/learn/css/css_layout/grid_skills/index.md
+++ b/files/en-us/learn/css/css_layout/grid_skills/index.md
@@ -9,25 +9,63 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand how a [grid and grid items](/en-US/docs/Learn/CSS/CSS_layout/Grids) behave. You will be working through several small tasks that use different elements of the material you have just covered.
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
 
-In this task, you should create a grid into which the four child elements will auto-place. The grid should have three columns sharing the available space equally and a 20-pixel gap between the column and row tracks. After that, try adding more child containers inside the parent container with the class of `grid` and see how they behave by default.
+In this task, you should create a grid into which the four child elements will auto-place. The grid should have three columns sharing the available space equally and a 20 pixel gap between the column and row tracks. After that, try adding more child containers inside the parent container with the class of `grid` and see how they behave by default.
 
 Your final result should look like the image below:
 
 ![A three column grid with four items placed into it.](grid-task1.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}
+```html live-sample___grid1
+<div class="grid">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+</div>
+```
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid1-download.html) to work in your own editor or in an online editor.
+```css hidden live-sample___grid1
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.grid > * {
+  background-color: #4d7298;
+  border: 2px solid #77a6b6;
+  border-radius: 0.5em;
+  color: #fff;
+  padding: 0.5em;
+}
+```
+
+```css live-sample___grid1
+.grid {
+}
+```
+
+{{EmbedLiveSample("grid1", "", "200px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+Create a grid using `display: grid` with three columns using `grid-template-columns` and a `gap` between the items:
+
+```css
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+}
+```
+
+</details>
 
 ## Task 2
 
@@ -35,17 +73,90 @@ In this task, we already have a grid defined. By editing the CSS rules for the t
 
 ![A box with two items inside one overlaying the other.](grid-task2.png)
 
-Try updating the live code below to recreate the finished example:
+**Bonus question:** Can you now cause the first item to display on top without changing the order of items in the source?
+
+Try to update the code below to recreate the finished example:
+
+```html live-sample___grid2
+<div class="grid">
+  <div class="item1">One</div>
+  <div class="item2">Two</div>
+</div>
+```
+
+```css hidden live-sample___grid2
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.grid > * {
+  border-radius: 0.5em;
+  color: #fff;
+  padding: 0.5em;
+}
+
+.item1 {
+  background-color: rgb(74 102 112 / 70%);
+  border: 5px solid rgb(74 102 112 / 100%);
+}
+
+.item2 {
+  background-color: rgb(214 162 173 / 70%);
+  border: 5px solid rgb(214 162 173 / 100%);
+}
+```
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid2.html", '100%', 900)}}
+```css live-sample___grid2
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px 100px;
+  gap: 10px;
+}
 
-Additional question:
+.item1 {
+}
 
-- Can you now cause the first item to display on top without changing the order of items in the source?
+.item2 {
+}
+```
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid2-download.html) to work in your own editor or in an online editor.
+{{EmbedLiveSample("grid2", "", "300px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+It is possible to layer items by way of them occupying the same grid cells.
+One option is to use the shorthands below, however it would be correct to use the longhand `grid-row-start` for example.
+
+```css
+.item1 {
+  grid-column: 1 / 4;
+  grid-row: 1 / 3;
+}
+
+.item2 {
+  grid-column: 2 / 5;
+  grid-row: 2 / 4;
+}
+```
+
+For the bonus question, one way of achieving this would be to use `order`, which we've encountered in the flexbox tutorial.
+
+```css
+.item1 {
+  order: 1;
+}
+```
+
+Another valid solution is to use `z-index`:
+
+```css
+.item1 {
+  z-index: 1;
+}
+```
+
+</details>
 
 ## Task 3
 
@@ -53,13 +164,74 @@ In this task, there are four direct children in this grid. The starting point ha
 
 ![Four items displayed in a grid.](grid-task3.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
+
+```html live-sample___grid3
+<div class="grid">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+</div>
+```
+
+```css hidden live-sample___grid3
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.grid > * {
+  background-color: #4d7298;
+  border: 2px solid #77a6b6;
+  border-radius: 0.5em;
+  color: #fff;
+  padding: 0.5em;
+}
+```
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}}
+```css live-sample___grid3
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 10px;
+}
+```
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid3-download.html) to work in your own editor or in an online editor.
+{{EmbedLiveSample("grid3", "", "200px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+Each part of the layout needs a name using the `grid-area` property and `grid-template-areas` to lay them out. Possible areas of confusion would be not realizing you should place a `.` to leave a cell empty, or that you should repeat the name to cause an element to span more than one track:
+
+```css
+.grid {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: 1fr 2fr;
+  grid-template-areas:
+    "aa aa"
+    "bb cc"
+    ". dd";
+}
+
+.one {
+  grid-area: aa;
+}
+
+.two {
+  grid-area: bb;
+}
+
+.three {
+  grid-area: cc;
+}
+
+.four {
+  grid-area: dd;
+}
+```
+
+</details>
 
 ## Task 4
 
@@ -67,10 +239,124 @@ In this task, you will need to use both grid layout and flexbox to recreate the
 
 ![Two rows of cards, each with an image and a set of tags.](grid-task4.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
+
+```html live-sample___grid4
+<div class="container">
+  <div class="card">
+    <img
+      alt="a single red balloon"
+      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
+    <ul class="tags">
+      <li>balloon</li>
+      <li>red</li>
+      <li>sky</li>
+      <li>blue</li>
+      <li>Hot air balloon</li>
+    </ul>
+  </div>
+  <div class="card">
+    <img
+      alt="balloons over some houses"
+      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
+    <ul class="tags">
+      <li>balloons</li>
+      <li>houses</li>
+      <li>train</li>
+      <li>harborside</li>
+    </ul>
+  </div>
+  <div class="card">
+    <img
+      alt="close-up of balloons inflating"
+      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
+    <ul class="tags">
+      <li>balloons</li>
+      <li>inflating</li>
+      <li>green</li>
+      <li>blue</li>
+    </ul>
+  </div>
+  <div class="card">
+    <img
+      alt="a balloon in the sun"
+      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
+    <ul class="tags">
+      <li>balloon</li>
+      <li>sun</li>
+      <li>sky</li>
+      <li>summer</li>
+      <li>bright</li>
+    </ul>
+  </div>
+</div>
+```
+
+```css hidden live-sample___grid4
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.card {
+  display: grid;
+  grid-template-rows: 200px min-content;
+}
+
+.card > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tags {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tags > * {
+  background-color: #999;
+  color: #fff;
+  padding: 0.2em 0.8em;
+  border-radius: 0.2em;
+  font-size: 80%;
+  margin: 5px;
+}
+```
+
+```css live-sample___grid4
+.container {
+}
+
+.tags {
+}
+```
+
+{{EmbedLiveSample("grid4", "", "400px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+The container will need to be a grid layout, as we have alignment in rows and columns - two-dimensional.
+The `<ul>` needs to be a flex container as tags (`<li>` elements) are not lined up in columns, only in rows and they are centered in the space with the alignment property `justify-content` set to `center`.
+
+You may try to use flexbox on the container and restrict the cards with percentage values. You may also try to make the items into a grid layout in which case, note that the items are not aligned in two dimensions so flexbox isn't the best choice.
+
+```css
+.container {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+```
+
+</details>
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 2000)}}
+## See also
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid4-download.html) to work in your own editor or in an online editor.
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From 0429ad7d781bb35a471ac8bc62582dbdebc8f18d Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 22:45:14 +0100
Subject: [PATCH 13/22] chore(css): Move CSS examples - Test your skills:
 Multicol

---
 .../css/css_layout/multicol_skills/index.md   | 207 ++++++++++++++++--
 1 file changed, 190 insertions(+), 17 deletions(-)

diff --git a/files/en-us/learn/css/css_layout/multicol_skills/index.md b/files/en-us/learn/css/css_layout/multicol_skills/index.md
index 0247c43018b8214..b9ed0ba9c12c093 100644
--- a/files/en-us/learn/css/css_layout/multicol_skills/index.md
+++ b/files/en-us/learn/css/css_layout/multicol_skills/index.md
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand [CSS multiple-column layout](/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout), including the {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} and {{CSSxRef("column-rule")}} properties and values. You will be working through three small tasks that use different elements of the material you have just covered.
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -23,11 +23,52 @@ Your final result should look like the image below:
 
 Try updating the live code below to recreate the finished example:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/multicol/multicol1-download.html) to work in your own editor or in an online editor.
+```html live-sample___multicol1
+<div class="container">
+  <p>
+    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+  </p>
+
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+    Dandelion cucumber earthnut pea peanut soko zucchini.
+  </p>
+
+  <p>
+    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
+    purslane kale. Celery potato scallion desert raisin horseradish spinach
+    carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green
+    bean swiss chard seakale pumpkin onion chickpea gram corn pea.
+  </p>
+</div>
+```
+
+```css live-sample___multicol1
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.container {
+}
+```
+
+{{EmbedLiveSample("multicol1", "", "300px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+For this task, you need to use `column-count` and `column-gap`:
+
+```css
+.container {
+  column-count: 3;
+  column-gap: 50px;
+}
+```
+
+</details>
 
 ## Task 2
 
@@ -39,11 +80,55 @@ Your final result should look like the image below:
 
 Try updating the live code below to recreate the finished example:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/multicol/multicol2-download.html) to work in your own editor or in an online editor.
+```html live-sample___multicol2
+<div class="container">
+  <p>
+    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+  </p>
+
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+    Dandelion cucumber earthnut pea peanut soko zucchini.
+  </p>
+
+  <p>
+    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
+    purslane kale. Celery potato scallion desert raisin horseradish spinach
+    carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green
+    bean swiss chard seakale pumpkin onion chickpea gram corn pea.
+  </p>
+</div>
+```
+
+```css live-sample___multicol2
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.container {
+}
+```
+
+{{EmbedLiveSample("multicol2", "", "300px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You will need to use the `column-width` and `column-rule` properties.
+You could use the longhand `column-rule-*` properties instead of the shorthand, though there is no benefit to doing so.
+The key thing with the use of `column-gap` is that you have understood that the rule does not add 5px of space to the gap. To have 10px either side of the rule they need a 25px gap as the rule is laid over it.
+
+```css
+.container {
+  column-width: 200px;
+  column-rule: 5px solid #ccc;
+  column-gap: 25px;
+}
+```
+
+</details>
 
 ## Task 3
 
@@ -53,8 +138,96 @@ In this task, we want you to cause the element containing the heading and subhea
 
 Try updating the live code below to recreate the finished example:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/multicol/multicol3-download.html) to work in your own editor or in an online editor.
+```html live-sample___multicol3
+<div class="container">
+  <p>
+    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+  </p>
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+    Dandelion cucumber earthnut pea peanut soko zucchini.
+  </p>
+  <div class="box">
+    <h2>I am a level 2 heading</h2>
+    <div class="subhead">Lotus root water spinach fennel</div>
+  </div>
+  <p>
+    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
+    purslane kale. Celery potato scallion desert raisin horseradish spinach
+    carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green
+    bean swiss chard seakale pumpkin onion chickpea gram corn pea.
+  </p>
+</div>
+```
+
+```css hidden live-sample___multicol3
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+
+.box {
+  text-align: center;
+  margin: 1em 0;
+}
+
+.box h2 {
+  margin: 0;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  column-gap: 0.5em;
+  align-items: center;
+}
+
+.box h2::before {
+  content: "";
+  border-bottom: 5px dotted #ccc;
+}
+
+.box h2::after {
+  content: "";
+  border-bottom: 5px dotted #ccc;
+}
+
+.subhead {
+  font-style: italic;
+}
+```
+
+```css live-sample___multicol3
+.container {
+  column-count: 3;
+}
+
+.box {
+}
+
+h2 {
+}
+```
+
+{{EmbedLiveSample("multicol3", "", "400px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+In this task, we test for understanding of the `column-span` property.
+All you need to do is set the element with a class of `.box` to `column-span: all`.
+This is mostly a task of checking that you select the right element.
+
+```css
+.box {
+  column-span: all;
+}
+```
+
+</details>
+
+## See also
+
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From ea65944274ae9582eb6f303177b950824b087c61 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 6 Nov 2024 22:56:51 +0100
Subject: [PATCH 14/22] chore(css): Move CSS examples - Test your skills:
 Positioning

---
 .../css/css_layout/position_skills/index.md   | 185 ++++++++++++++++--
 1 file changed, 164 insertions(+), 21 deletions(-)

diff --git a/files/en-us/learn/css/css_layout/position_skills/index.md b/files/en-us/learn/css/css_layout/position_skills/index.md
index de8a5ec565afe1a..1bedbb21a6dec00 100644
--- a/files/en-us/learn/css/css_layout/position_skills/index.md
+++ b/files/en-us/learn/css/css_layout/position_skills/index.md
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand [positioning in CSS](/en-US/docs/Learn/CSS/CSS_layout/Positioning) using the CSS {{CSSxRef("position")}} property and values. You will be working through two small tasks that use different elements of the material you have just covered.
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -21,28 +21,171 @@ Your final result should look like the image below:
 
 ![The green box is at the top right of a container with a grey border.](position-task1.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}
-
-Additional question:
-
-- As an extra challenge, can you change the target to display underneath the text?
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/position/position1-download.html) to work in your own editor or in an online editor.
+**Bonus question:** Can you change the target to display underneath the text?
+
+Try to update the code below to recreate the finished example:
+
+```html live-sample___position1
+<div class="container">
+  <p>
+    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+  </p>
+  <div class="target">Target</div>
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+    Dandelion cucumber earthnut pea peanut soko zucchini.
+  </p>
+</div>
+```
+
+```css hidden live-sample___position1
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  padding: 0.5em;
+  border: 5px solid #ccc;
+}
+
+.target {
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: #663398;
+  padding: 1em;
+  color: white;
+}
+```
+
+```css live-sample___position1
+.container {
+}
+
+.target {
+}
+```
+
+{{EmbedLiveSample("position1", "", "400px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+This requires `position: relative` and `position: absolute` and understanding how they relate to each other in terms of relative positioning creating a new positioning context.
+A likely issue could be that you add `position: absolute` to the child without applying `position: relative` to the container. In that case, the target will end up being positioned according to the viewport.
+
+```css
+.container {
+  position: relative;
+}
+
+.target {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+```
+
+For the bonus question, you need to add a negative `z-index` to the target, for example `z-index: -2`.
+
+</details>
 
 ## Task 2
 
-In this task, if you scroll the box in the example below, the sidebar scrolls with the content. Change it so that the sidebar stays in place and only the content scrolls.
+In this task, if you scroll the box in the example below, the sidebar scrolls with the content. Change it so that the sidebar (`<div class="sidebar">`) stays in place and only the content scrolls.
 
 ![The content is scrolled but the sidebar has stayed in place.](position-task2.png)
 
-Try updating the live code below to recreate the finished example:
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1300)}}
-
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/position/position2-download.html) to work in your own editor or in an online editor.
+Try to update the code below to recreate the finished example:
+
+```html live-sample___position2
+<div class="container">
+  <div class="sidebar">
+    <p>
+      This is the sidebar. It should remain in position as the content scrolls.
+    </p>
+  </div>
+  <div class="content">
+    <p>
+      Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
+      onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+    </p>
+    <p>
+      Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+      tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+      Dandelion cucumber earthnut pea peanut soko zucchini.
+    </p>
+    <p>
+      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
+      winter purslane kale. Celery potato scallion desert raisin horseradish
+      spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo
+      shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
+      Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi
+      beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki
+      bean chickweed potato bell pepper artichoke.
+    </p>
+  </div>
+</div>
+```
+
+```css hidden live-sample___position2
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  height: 400px;
+  padding: 0.5em;
+  border: 5px solid #ccc;
+  overflow: auto;
+}
+
+.sidebar {
+  color: white;
+  background-color: #663398;
+  padding: 1em;
+  float: left;
+  width: 150px;
+}
+
+.content {
+  padding: 1em;
+  margin-left: 160px;
+}
+```
+
+```css live-sample___position2
+.container {
+}
+
+.sidebar {
+}
+```
+
+{{EmbedLiveSample("position2", "", "400px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+We're testing your understanding of `position: fixed` with a slightly different example to the ones in the learning materials.
+
+```css
+.sidebar {
+  position: fixed;
+}
+```
+
+</details>
+
+## See also
+
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From c7c36e1f63b78767ef906ab725e7180d427c7893 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Thu, 7 Nov 2024 10:26:05 +0100
Subject: [PATCH 15/22] chore(css): Move CSS examples - Test your skills:
 Overflow

---
 .../building_blocks/overflow_tasks/index.md   | 93 ++++++++++++++++---
 1 file changed, 81 insertions(+), 12 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/overflow_tasks/index.md b/files/en-us/learn/css/building_blocks/overflow_tasks/index.md
index c1685aa066b41ae..6b68f9d26ecedff 100644
--- a/files/en-us/learn/css/building_blocks/overflow_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/overflow_tasks/index.md
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 The aim of this skill test is to assess whether you understand [overflow in CSS and how to manage it](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content).
 
 > [!NOTE]
-> You can try solutions in the interactive editors on this page or in an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
->
+> Click **"Play"** in the code blocks below to edit the examples in the MDN Playground.
+> You can also copy the code (click the clipboard icon) and paste it into an online editor such as [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/).
 > If you get stuck, you can reach out to us in one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).
 
 ## Task 1
@@ -19,13 +19,50 @@ In this task, the content is overflowing the box because it has a fixed height.
 
 ![A small box with a border and a vertical scrollbar.](mdn-overflow1.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-scroll.html", '100%', 1000)}}
+```html live-sample___overflow-scroll
+<div class="box">
+  <p>
+    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+  </p>
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/overflow/overflow-scroll-download.html) to work in your own editor or in an online editor.
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+    Dandelion cucumber earthnut pea peanut soko zucchini.
+  </p>
+</div>
+```
+
+```css live-sample___overflow-scroll
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+
+.box {
+  border: 5px solid black;
+  padding: 1em;
+  height: 200px;
+  width: 300px;
+}
+```
+
+{{EmbedLiveSample("overflow-scroll", "", "450px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You should add `overflow: auto` so that the box will only gain scrollbars when the content is too large:
+
+```css
+.box {
+  overflow: auto;
+}
+```
+
+</details>
 
 ## Task 2
 
@@ -35,10 +72,42 @@ Your final result should look like the image below:
 
 ![A box with an image which fills the box but does not spill out the edges.](mdn-overflow2.png)
 
-Try updating the live code below to recreate the finished example:
+Try to update the code below to recreate the finished example:
+
+```html live-sample___overflow-hidden
+<div class="box">
+  <img
+    alt="flowers"
+    src="https://mdn.github.io/shared-assets/images/examples/flowers.jpg" />
+</div>
+```
+
+```css live-sample___overflow-hidden
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.box {
+  border: 5px solid black;
+  height: 200px;
+  width: 300px;
+}
+```
+
+{{EmbedLiveSample("overflow-hidden", "", "300px")}}
+
+<details>
+<summary>Click here to show the solution</summary>
+
+You should add `overflow: hidden` to the `.box` selector:
+
+```css
+.box {
+  overflow: hidden;
+}
+```
+
+</details>
 
-{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.html", '100%', 1200)}}
+## See also
 
-> [!CALLOUT]
->
-> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/overflow/overflow-hidden-download.html) to work in your own editor or in an online editor.
+- [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)

From 8db13347eea1ad838564838c31d584d1c1a918a9 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Thu, 7 Nov 2024 10:29:05 +0100
Subject: [PATCH 16/22] chore(css): Move CSS examples - Test your skills: Grid

---
 files/en-us/learn/css/css_layout/grid_skills/index.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/files/en-us/learn/css/css_layout/grid_skills/index.md b/files/en-us/learn/css/css_layout/grid_skills/index.md
index b27a5c171e7e039..6ae92aea4cbda8b 100644
--- a/files/en-us/learn/css/css_layout/grid_skills/index.md
+++ b/files/en-us/learn/css/css_layout/grid_skills/index.md
@@ -246,7 +246,7 @@ Try to update the code below to recreate the finished example:
   <div class="card">
     <img
       alt="a single red balloon"
-      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
+      src="https://mdn.github.io/shared-assets/images/examples/balloons1.jpg" />
     <ul class="tags">
       <li>balloon</li>
       <li>red</li>
@@ -258,7 +258,7 @@ Try to update the code below to recreate the finished example:
   <div class="card">
     <img
       alt="balloons over some houses"
-      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
+      src="https://mdn.github.io/shared-assets/images/examples/balloons2.jpg" />
     <ul class="tags">
       <li>balloons</li>
       <li>houses</li>
@@ -269,7 +269,7 @@ Try to update the code below to recreate the finished example:
   <div class="card">
     <img
       alt="close-up of balloons inflating"
-      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
+      src="https://mdn.github.io/shared-assets/images/examples/balloons3.jpg" />
     <ul class="tags">
       <li>balloons</li>
       <li>inflating</li>
@@ -280,7 +280,7 @@ Try to update the code below to recreate the finished example:
   <div class="card">
     <img
       alt="a balloon in the sun"
-      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
+      src="https://mdn.github.io/shared-assets/images/examples/balloons4.jpg" />
     <ul class="tags">
       <li>balloon</li>
       <li>sun</li>

From 9aad0db3d27f77408f386737ec68373d802af370 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Thu, 7 Nov 2024 10:47:57 +0100
Subject: [PATCH 17/22] chore(css): Move CSS examples - fix typos reverted in
 previous PR

---
 .../learn/css/first_steps/how_css_is_structured/index.md      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md
index 6d07b1d3ca439be..2783ba97a67e0ed 100644
--- a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md
+++ b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md
@@ -196,8 +196,8 @@ Each CSS rule starts with a selector — or a list of selectors — in order to
 ```css
 h1
 a:link
-.manythings
-#onething
+.many-things
+#one-thing
 *
 .box p
 .box p:first-child

From ab3cb120ba8a6f102fe2886a61c754cbfc454d19 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Thu, 7 Nov 2024 16:09:00 +0100
Subject: [PATCH 18/22] Update
 files/en-us/learn/css/css_layout/flexbox_skills/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 files/en-us/learn/css/css_layout/flexbox_skills/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/learn/css/css_layout/flexbox_skills/index.md b/files/en-us/learn/css/css_layout/flexbox_skills/index.md
index 2af8a972ed646af..a1ec892327e325c 100644
--- a/files/en-us/learn/css/css_layout/flexbox_skills/index.md
+++ b/files/en-us/learn/css/css_layout/flexbox_skills/index.md
@@ -158,7 +158,7 @@ li:first-child {
 
 ## Task 3
 
-In this task, there are two elements in the HTML below, a `<div>` element with a class of `parent` which contains another `<div>` element with a class of `child`. Use flexbox to center the child inside the parent. There is not just one possible solution here.
+In this task, there are two elements in the HTML below, a `<div>` element with a class of `parent` which contains another `<div>` element with a class of `child`. Use flexbox to center the child inside the parent. There is more than one possible solution here.
 
 Your final result should look like the image below:
 

From b20ef682d40b2e2cd1d5d455e8c79972785248ad Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Thu, 7 Nov 2024 16:17:00 +0100
Subject: [PATCH 19/22] chore(css): Move CSS examples - Test your skills:
 Selectors - get rid of scrollbar in live sample

---
 .../css/building_blocks/selectors/selectors_tasks/index.md      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md b/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md
index e788ee6d6b9031f..31144e681d189c6 100644
--- a/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md
@@ -375,7 +375,7 @@ a {
 /* Add styles here */
 ```
 
-{{EmbedLiveSample("attribute-links", "", "250px")}}
+{{EmbedLiveSample("attribute-links", "", "300px")}}
 
 <details>
 <summary>Click here to show the solution</summary>

From 620042cdded96e692bd5a372feec6564cc233fe8 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Thu, 7 Nov 2024 16:26:41 +0100
Subject: [PATCH 20/22] chore(css): Move CSS examples - Test your skills:
 Tables -> improvements for bonus question

---
 .../css/building_blocks/tables_tasks/index.md    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/tables_tasks/index.md b/files/en-us/learn/css/building_blocks/tables_tasks/index.md
index 35c3b1ce69feb7c..4075c7705430a19 100644
--- a/files/en-us/learn/css/building_blocks/tables_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/tables_tasks/index.md
@@ -31,6 +31,8 @@ Our finished table will look like the image below. There are a number of ways th
 
 ![A table with striped rows.](mdn-table-bands.png)
 
+**Bonus question:** What can you do to make the table layout behave a bit more predictably? Think of how table columns are sized by default and how we can change this behavior to size the columns according to the width of their headings.
+
 Try to update the code below to recreate the finished example:
 
 ```html live-sample___table
@@ -117,7 +119,7 @@ body {
 /* Add styles here */
 ```
 
-{{EmbedLiveSample("table")}}
+{{EmbedLiveSample("table", "", "400px")}}
 
 <details>
 <summary>Click here to show the solution</summary>
@@ -129,7 +131,6 @@ table {
   border-top: 1px solid #999;
   border-bottom: 1px solid #999;
   border-collapse: collapse;
-  table-layout: fixed;
 }
 
 th,
@@ -165,9 +166,16 @@ tfoot tr :nth-child(2) {
 }
 ```
 
-</details>
+For the bonus question, you can make the table layout more predictable by adding {{cssxref("table-layout")}} with a value of [`fixed`](/en-US/docs/Web/CSS/table-layout#fixed) and an explicit `width`:
 
-**Bonus question:** What can you do to make the table layout behave a bit more predictably? Think of how table columns are sized by default and how we can change this behavior to size the columns according to the width of their headings.
+```css
+table {
+  table-layout: fixed;
+  width: 100%;
+}
+```
+
+</details>
 
 ## See also
 

From cd8709278f9f50b9c2a74a7f201483c7cc48870c Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Thu, 7 Nov 2024 16:30:17 +0100
Subject: [PATCH 21/22] chore(css): Move CSS examples - Writing modes, Values
 and units fixes

---
 files/en-us/learn/css/building_blocks/values_tasks/index.md   | 4 ++--
 .../learn/css/building_blocks/writing_modes_tasks/index.md    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/values_tasks/index.md b/files/en-us/learn/css/building_blocks/values_tasks/index.md
index 79c515a7c0165bd..6b26188b8d698be 100644
--- a/files/en-us/learn/css/building_blocks/values_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/values_tasks/index.md
@@ -186,7 +186,7 @@ Try to update the code below to recreate the finished example:
 
 ```css live-sample___position
 .box {
-  background-image: url(https://mdn.github.io/shared-assets/images/examples/star-pink_256x256.png);
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/purple-star.png);
   background-repeat: no-repeat;
 }
 ```
@@ -200,7 +200,7 @@ Use `background-position` with ther `center` keyword and a percentage:
 
 ```css
 .box {
-  background-image: url(https://mdn.github.io/shared-assets/images/examples/star-pink_256x256.png);
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/purple-star.png);
   background-repeat: no-repeat;
   background-position: center 20%;
 }
diff --git a/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md b/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md
index 4dd20da14108ed7..ea44799456893b3 100644
--- a/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md
+++ b/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md
@@ -42,7 +42,7 @@ body {
 }
 ```
 
-{{EmbedLiveSample("writing-mode", "", "400px")}}
+{{EmbedLiveSample("writing-mode", "", "250px")}}
 
 <details>
 <summary>Click here to show the solution</summary>

From 31d4d80dfac16927d753ddfdc0f48d42dcc963fb Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Thu, 7 Nov 2024 16:32:46 +0100
Subject: [PATCH 22/22] chore(css): Move CSS examples - Grid scrollbar in
 example

---
 files/en-us/learn/css/css_layout/grid_skills/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/learn/css/css_layout/grid_skills/index.md b/files/en-us/learn/css/css_layout/grid_skills/index.md
index 6ae92aea4cbda8b..fbe7065770b7961 100644
--- a/files/en-us/learn/css/css_layout/grid_skills/index.md
+++ b/files/en-us/learn/css/css_layout/grid_skills/index.md
@@ -120,7 +120,7 @@ body {
 }
 ```
 
-{{EmbedLiveSample("grid2", "", "300px")}}
+{{EmbedLiveSample("grid2", "", "340px")}}
 
 <details>
 <summary>Click here to show the solution</summary>