Skip to content

reorder CSS layout test your skills for consistency #42953

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrisdavidmills merged 18 commits into from
Jan 30, 2026
Merged

reorder CSS layout test your skills for consistency #42953

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
b4de64b
reorder CSS layout test your skills for consistency
chrisdavidmills Jan 28, 2026
ed08090
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
b3d3936
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
648e58c
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
47be243
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
b564896
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
f3bdcbe
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
5ce34dd
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
b0b301e
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
d7c1c55
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
654253b
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
7e1004c
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
7042b39
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
7112e18
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
8407898
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
50c72aa
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
271a24c
Update files/en-us/learn_web_development/core/css_layout/test_your_sk…
chrisdavidmills Jan 30, 2026
b5006f0
Reorder according to Dipika suggestion, plus tweaks
chrisdavidmills Jan 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 26 additions & 18 deletions ...s/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,15 @@ Watch the embedded scrim, and complete all the tasks on the timeline (the little

<mdn-scrim-inline url="https://scrimba.com/frontend-path-c0j/~03a" scrimtitle="Flexbox alignment challenges" survey="true"></scrim-inline>

## Task 1
## Flexbox 1

In this task, we use some list items to create the navigation for a site. To complete the task, use flexbox to lay out the list items as a row, with an equal amount of space between each item.

Your final result should look like this finished rendering:
The starting point of the task looks like this:

{{EmbedLiveSample("flexbox1-finish", "", "100px")}}
{{EmbedLiveSample("flexbox1-start", "", "240px")}}

Here's the underlying code for this starting point:

```html live-sample___flexbox1-start live-sample___flexbox1-finish
<nav>
Expand Down Expand Up @@ -66,9 +68,9 @@ nav ul {
}
```

This is the starting state of the task:
When the task is complete, the items should look like this:

{{EmbedLiveSample("flexbox1-start", "", "240px")}}
{{EmbedLiveSample("flexbox1-finish", "", "100px")}}

<details>
<summary>Click here to show the solution</summary>
Expand All @@ -84,15 +86,17 @@ nav ul {

</details>

## Task 2
## Flexbox 2

In this task, the list items are all different sizes, but we want them to be displayed as three equal-sized columns, no matter what content is in each item.
In this task, the list items are all different sizes, but we want them to be displayed as three equal-sized columns, no matter the content in each item.

Your final result should look like the following rendering:
**Bonus question:** Can you now make the first item twice the size of the other items?

{{EmbedLiveSample("flexbox2-finish", "", "300px")}}
The starting point of the task looks like this:

**Bonus question:** Can you now make the first item twice the size of the other items?
{{EmbedLiveSample("flexbox2-start", "", "240px")}}

Here's the underlying code for this starting point:

```html live-sample___flexbox2-start live-sample___flexbox2-finish
<ul>
Expand Down Expand Up @@ -134,9 +138,9 @@ li {
}
```

This is the starting state of the task:
When the task is complete, the items should look like this:

{{EmbedLiveSample("flexbox2-start", "", "240px")}}
{{EmbedLiveSample("flexbox2-finish", "", "380px")}}

<details>
<summary>Click here to show the solution</summary>
Expand All @@ -155,19 +159,23 @@ li {

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
```css live-sample___flexbox2-finish
li:first-child {
flex: 2;
}
```

</details>

## Task 3
## Flexbox 3

In this task, we'd like you to arrange the list items into rows as shown in the finished rendering below:
In this task, we'd like you to arrange the list items into rows.

{{EmbedLiveSample("flexbox3-finish", "", "260px")}}
The starting point of the task looks like this:

{{EmbedLiveSample("flexbox3-start", "", "260px")}}

Here's the underlying code for this starting point:

```html live-sample___flexbox3-start live-sample___flexbox3-finish
<ul>
Expand Down Expand Up @@ -213,9 +221,9 @@ li {
}
```

This is the starting state of the task:
When the task is complete, the items should look like this:

{{EmbedLiveSample("flexbox3-start", "", "260px")}}
{{EmbedLiveSample("flexbox3-finish", "", "260px")}}

<details>
<summary>Click here to show the solution</summary>
Expand Down
42 changes: 26 additions & 16 deletions files/en-us/learn_web_development/core/css_layout/test_your_skills/floats/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,15 @@ The aim of this skill test is to help you assess whether you understand [floats
> [!NOTE]
> To get help, read our [Test your skills](/en-US/docs/Learn_web_development#test_your_skills) usage guide. You can also reach out to us using one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).

## Task 1
## Floats 1

To complete this task, float the two elements with a class of `float1` and `float2` left and right, respectively. The text should then appear between the two boxes, as shown in this finished rendering:
To complete this task, float the two elements with classes of `float1` and `float2` to the left and right, respectively. The text should then appear between the two elements.

{{EmbedLiveSample("float1-finish", "", "210px")}}
The starting point of the task looks like this:

{{EmbedLiveSample("float1-start", "", "440px")}}

Here's the underlying code for this starting point:

```html live-sample___float1-start live-sample___float1-finish
<div class="box">
Expand Down Expand Up @@ -59,9 +63,9 @@ body {
}
```

This is the starting state of the task:
The layout should look like this once the task is complete:

{{EmbedLiveSample("float1-start", "", "210px")}}
{{EmbedLiveSample("float1-finish", "", "210px")}}

<details>
<summary>Click here to show the solution</summary>
Expand All @@ -80,16 +84,18 @@ You can use `float` for both boxes:

</details>

## Task 2
## Floats 2

To complete this task:

1. Float the element with a class of `float` to the left.
2. Update the code so that the first line of text displays next to that element, but the following line of text (which has a class of `below`) displays underneath it.

Your final result should look like this finished rendering:
The starting point of the task looks like this:

{{EmbedLiveSample("float2-finish", "", "300px")}}
{{EmbedLiveSample("float2-start", "", "300px")}}

Here's the underlying code for this starting point:

```html live-sample___float2-start live-sample___float2-finish
<div class="box">
Expand Down Expand Up @@ -131,9 +137,9 @@ body {
}
```

This is the starting state of the task:
The finished layout should look like this:

{{EmbedLiveSample("float2-start", "", "300px")}}
{{EmbedLiveSample("float2-finish", "", "300px")}}

<details>
<summary>Click here to show the solution</summary>
Expand All @@ -152,13 +158,17 @@ You need to flow the item left, then add `clear: left` to the class for the seco

</details>

## Task 3
## Floats 3

In this task, we have a floated element. The box wrapping the float and text is displaying behind the float.
In this task, we have a floated element. The background box that wraps the float and the text does not currently extend underneath the floated element.

To complete the task, use the most up-to-date method available to cause the box background to extend to below the float, as shown in this finished rendering:
To complete this task, use the most up-to-date method to ensure the background box contains the floated element and extends underneath it.

{{EmbedLiveSample("float3-finish", "", "220px")}}
The starting point of the task looks like this:

{{EmbedLiveSample("float3-start", "", "220px")}}

Here's the underlying code for this starting point:

```html live-sample___float3-start live-sample___float3-finish
<div class="box">
Expand Down Expand Up @@ -205,9 +215,9 @@ body {
}
```

This is the starting state of the task:
When you complete the task, the background box and floated element should look like this:

{{EmbedLiveSample("float3-start", "", "220px")}}
{{EmbedLiveSample("float3-finish", "", "220px")}}

<details>
<summary>Click here to show the solution</summary>
Copy link
Contributor

@dipikabh dipikabh Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should it be "see the solution"?

Copy link
Contributor Author

@chrisdavidmills chrisdavidmills Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No; I don't think it is worth changing all of the solution boxes. The benefit of doing so doesn't seem clear.

Copy link
Contributor

@dipikabh dipikabh Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, it is probably not incorrect semantically, and the difference is subtle.
To me, it reads a bit odd in the flow of the instructions, almost like "show to who?" vs conveying "see" for yourself.

Expand Down
60 changes: 36 additions & 24 deletions files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,15 @@ The aim of this skill test is to help you assess whether you understand how a [g
> [!NOTE]
> To get help, read our [Test your skills](/en-US/docs/Learn_web_development#test_your_skills) usage guide. You can also reach out to us using one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).

## Task 1
## CSS grids 1

In this task, we want you to 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, we want you to create a grid into which the four child elements will be auto-placed. The grid should have three columns that share the available space equally, with a `20px` gap between the column and row tracks. After that, try adding more child elements inside the parent container with the `grid` class and see how they behave by default.

Your final result should look like the following rendering:
The starting point of the task looks like this:

{{EmbedLiveSample("grid1-finish", "", "160px")}}
{{EmbedLiveSample("grid1-start", "", "220px")}}

Here's the underlying code for this starting point:

```html live-sample___grid1-start live-sample___grid1-finish
<div class="grid">
Expand Down Expand Up @@ -48,9 +50,9 @@ body {
}
```

This is the starting state of the task:
The finished layout should look like this:

{{EmbedLiveSample("grid1-start", "", "220px")}}
{{EmbedLiveSample("grid1-finish", "", "160px")}}

<details>
<summary>Click here to show the solution</summary>
Expand All @@ -67,14 +69,18 @@ Create a grid using `display: grid` with three columns using `grid-template-colu

</details>

## Task 2

In this task, we already have a grid defined. We want you to edit the CSS rules for the two child elements, causing them to span over several grid tracks each. The second item should overlay the first as shown in the following rendering:
## CSS grids 2

{{EmbedLiveSample("grid2-finish", "", "340px")}}
In this task, we already have a grid defined. We want you to edit the CSS rules for the two child elements so that each one spans several grid tracks. The second item should overlay the first.

**Bonus question:** Can you now cause the first item to display on top without changing the order of items in the source?

The starting point of the task looks like this:

{{EmbedLiveSample("grid2-start", "", "340px")}}

Here's the underlying code for this starting point:

```html live-sample___grid2-start live-sample___grid2-finish
<div class="grid">
<div class="item1">One</div>
Expand Down Expand Up @@ -118,9 +124,9 @@ body {
}
```

This is the starting state of the task:
The layout should look like this after you complete the task:

{{EmbedLiveSample("grid2-start", "", "340px")}}
{{EmbedLiveSample("grid2-finish", "", "340px")}}

<details>
<summary>Click here to show the solution</summary>
Expand All @@ -142,7 +148,7 @@ One option is to use the shorthands below, however it would be correct to use th

For the bonus question, one way of achieving this is to use `order`, which we've encountered in the flexbox tutorial.

```css
```css live-sample___grid2-finish
.item1 {
order: 1;
}
Expand All @@ -158,13 +164,15 @@ Another valid solution is to use `z-index`:

</details>

## Task 3
## CSS grids 3

In this task, there are four direct children in this grid. The starting point has them displayed using auto-placement.
In this task, the grid contains four direct children. They are currently auto-placed in the grid.

To complete the task, use the `grid-area` and `grid-template-areas` properties to lay the items out as shown in the following rendering:
The starting point of the task looks like this:

{{EmbedLiveSample("grid3-finish", "", "200px")}}
{{EmbedLiveSample("grid3-start", "", "200px")}}

Here's the underlying code for this starting point:

```html live-sample___grid3-start live-sample___grid3-finish
<div class="grid">
Expand Down Expand Up @@ -194,9 +202,9 @@ body {
}
```

This is the starting state of the task:
To complete this task, use the `grid-area` and `grid-template-areas` properties to lay out the items as shown here:

{{EmbedLiveSample("grid3-start", "", "200px")}}
{{EmbedLiveSample("grid3-finish", "", "200px")}}

<details>
<summary>Click here to show the solution</summary>
Expand Down Expand Up @@ -233,11 +241,15 @@ Each part of the layout needs a name using the `grid-area` property and `grid-te

</details>

## Task 4
## CSS grids 4

In this task, you will need to use both grid layout and flexbox to recreate the example as seen in the finished rendering below. The gap between the column and row tracks should be 10px. You do not need to make any changes to the HTML in order to achieve this.
In this task, you will need to use both grid layout and flexbox to recreate the finished layout. The gap between the column and row tracks should be `10px`. You do not need to make any changes to the HTML in order to achieve this.

{{EmbedLiveSample("grid4-finish", "", "400px")}}
The starting point of the task looks like this:

{{EmbedLiveSample("grid4-start", "", "400px")}}

Here's the underlying code for this starting point:

```html live-sample___grid4-start live-sample___grid4-finish
<div class="container">
Expand Down Expand Up @@ -330,9 +342,9 @@ body {
}
```

This is the starting state of the task:
The layout should look like this after you complete the task:

{{EmbedLiveSample("grid4-start", "", "400px")}}
{{EmbedLiveSample("grid4-finish", "", "400px")}}

<details>
<summary>Click here to show the solution</summary>
Expand Down
Loading