chore(css): Move CSS examples - Learn area tasks / assessments (mdn#3…

…6688) * chore(css): Move CSS examples - Test your skills: The box model * chore(css): Move CSS examples - Test your skills: The Cascade * chore(css): Move CSS examples - Test your skills: Images and form elements * chore(css): Move CSS examples - Test your skills: Selectors * chore(css): Move CSS examples - Test your skills: Sizing * chore(css): Move CSS examples - Test your skills: Sizing * chore(css): Move CSS examples - Test your skills: Backgrounds and borders * chore(css): Move CSS examples - Test your skills: Values and units * chore(css): Move CSS examples - Test your skills: Writing modes and logical properties * chore(css): Move CSS examples - Test your skills: Flexbox * chore(css): Move CSS examples - Test your skills: Floats * chore(css): Move CSS examples - Test your skills: Grid * chore(css): Move CSS examples - Test your skills: Multicol * chore(css): Move CSS examples - Test your skills: Positioning * chore(css): Move CSS examples - Test your skills: Overflow * chore(css): Move CSS examples - Test your skills: Grid * chore(css): Move CSS examples - fix typos reverted in previous PR * Update files/en-us/learn/css/css_layout/flexbox_skills/index.md Co-authored-by: Chris Mills <[email protected]> * chore(css): Move CSS examples - Test your skills: Selectors - get rid of scrollbar in live sample * chore(css): Move CSS examples - Test your skills: Tables -> improvements for bonus question * chore(css): Move CSS examples - Writing modes, Values and units fixes * chore(css): Move CSS examples - Grid scrollbar in example --------- Co-authored-by: Chris Mills <[email protected]>
OnkarRuikar · Nov 8, 2024 · c507c55 · c507c55
1 parent 3e52572
commit c507c55
Show file tree

Hide file tree

Showing 16 changed files with 2,584 additions and 319 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
@@ -9,8 +9,8 @@ page-type: learn-module-assessment
 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]
-> 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: 1.2em / 1.5 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: 1.2em / 1.5 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: 1.2em / 1.5 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)
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
@@ -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)