Skip to content

Reorder HTML test your skills for consistency #42949

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

Open
chrisdavidmills wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Reorder HTML test your skills for consistency #42949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bedbf8c
Reorder HTML test your skills for consistency
chrisdavidmills Jan 28, 2026
c53b96e
example -> task
chrisdavidmills Jan 28, 2026
3a72936
Merge branch 'main' into reorder-test-your-skills
chrisdavidmills Jan 28, 2026
edc0005
revert package-lock changes
chrisdavidmills Jan 28, 2026
7ae5128
Merge branch 'main' into reorder-test-your-skills
chrisdavidmills Jan 30, 2026
8daad83
Update structure 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
12 changes: 8 additions & 4 deletions ...velopment/core/structuring_content/test_your_skills/advanced_html_text/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The aim of this skill test is to help you assess whether you understand how to u
> [!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
## Advanced text 1

In this task, we want you to add some semantics to the provided HTML.

Expand All @@ -24,9 +24,11 @@ To complete this task:
3. Use subscript and superscript to provide correct semantics for the chemical formulae and dates, and make them display correctly.
4. Semantically associate machine-readable dates with the dates in the text.

The finished example should look like this:
The starting point of the task looks like this:

{{EmbedLiveSample('advanced-text-solution', "", 260)}}
{{ EmbedLiveSample('advanced-text', "100%", 260) }}

Here's the underlying code for this starting point:

```html live-sample___advanced-text
<h1>Advanced text semantics</h1>
Expand Down Expand Up @@ -76,7 +78,9 @@ time {
}
```

{{ EmbedLiveSample('advanced-text', "100%", 260) }}
The finished content should look like this:

{{EmbedLiveSample('advanced-text-solution', "", 260)}}

<details>
<summary>Click here to show the solution</summary>
Expand Down
30 changes: 23 additions & 7 deletions ..._development/core/structuring_content/test_your_skills/audio_and_video/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The aim of this skill test is to help you assess whether you understand how to [
> [!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
## Audio and video 1

In this task, we want you to embed an audio file onto the page.

Expand All @@ -22,6 +22,12 @@ To complete this task:
1. Add the path to the audio file to an appropriate attribute to embed it on the page. The audio is called `audio.mp3`, and it available at a path of `https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/audio.mp3`.
2. Add an attribute to make browsers display some default controls.

The starting point of the task looks like this:

{{ EmbedLiveSample('audio-1', "100%", 150) }}

Here's the underlying code for this starting point:

```html live-sample___audio-1
<h1>Basic audio embed</h1>

Expand All @@ -30,7 +36,7 @@ To complete this task:

<!-- Shared styles -->

```css hidden live-sample___video-1 live-sample___audio-1
```css hidden live-sample___video-1 live-sample___audio-1 live-sample___video-1-finished live-sample___audio-1-finished
body {
background-color: white;
color: #333333;
Expand All @@ -53,14 +59,16 @@ video {
}
```

{{ EmbedLiveSample('audio-1', "100%", 150) }}
The finished content should look like this:

{{ EmbedLiveSample('audio-1-finished', "100%", 180) }}

<details>
<summary>Click here to show the solution</summary>

Your finished HTML should look like this:

```html
```html live-sample___audio-1-finished
<h1>Basic audio embed</h1>

<audio
Expand All @@ -70,7 +78,7 @@ Your finished HTML should look like this:

</details>

## Task 2
## Audio and video 2

In this task, we want you to mark up a slightly more complex video player, with multiple sources, subtitles, and other features besides.

Expand All @@ -86,20 +94,28 @@ To complete this task:
6. Display the text tracks contained in the `media` folder, in a file called `https://raw.githubusercontent.com/mdn/learning-area/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/subtitles_en.vtt`, when the video is playing. You must explicitly set the type as subtitles, and the subtitle language to English.
7. Make sure the readers can identify the subtitle language when they use the default controls.

The starting point of the task looks like this:

{{EmbedLiveSample('video-1', "100%", 300)}}

Here's the underlying code for this starting point:

```html live-sample___video-1
<h1>Video embed</h1>

<video></video>
```

{{EmbedLiveSample('video-1', "100%", 300)}}
The finished task should look like this:

{{EmbedLiveSample('video-1-finished', "100%", 380)}}

<details>
<summary>Click here to show the solution</summary>

Your finished HTML should look like this:

```html
```html live-sample___video-1-finished
<h1>Video embed</h1>

<video controls width="320" height="240" muted>
Expand Down
72 changes: 59 additions & 13 deletions ...evelopment/core/structuring_content/test_your_skills/forms_and_buttons/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ To complete the task:

<!-- Code shared across examples -->

```css hidden live-sample___forms-buttons-1 live-sample___forms-buttons-2 live-sample___forms-buttons-3 live-sample___forms-buttons-4 live-sample___forms-buttons-5 live-sample___forms-buttons-6
```css hidden live-sample___forms-buttons-1 live-sample___forms-buttons-2 live-sample___forms-buttons-3 live-sample___forms-buttons-4 live-sample___forms-buttons-5 live-sample___forms-buttons-6 live-sample___forms-buttons-1-finished live-sample___forms-buttons-2-finished live-sample___forms-buttons-3-finished live-sample___forms-buttons-4-finished live-sample___forms-buttons-5-finished live-sample___forms-buttons-6-finished
body {
background-color: white;
color: #333333;
Expand All @@ -45,6 +45,12 @@ body {

<!-- Example-specific code -->

The starting point of the task looks like this:

{{ EmbedLiveSample("forms-buttons-1", "100%", 150) }}

Here's the underlying code for this starting point:

```html live-sample___forms-buttons-1
<form>
<ul>
Expand All @@ -55,14 +61,16 @@ body {
</form>
```

{{ EmbedLiveSample("forms-buttons-1", "100%", 150) }}
The finished form should look like this:

{{ EmbedLiveSample("forms-buttons-1-finished", "100%", 150) }}

<details>
<summary>Click here to show the solution</summary>

Your finished HTML should look something like this:

```html
```html live-sample___forms-buttons-1-finished
<form>
<ul>
<li>
Expand Down Expand Up @@ -93,6 +101,12 @@ To complete the task:
3. Turn the second `<fieldset>`'s content into a set of checkboxes.
4. Add a couple more hotdog choices of your own.

The starting point of the task looks like this:

{{ EmbedLiveSample("forms-buttons-2", "100%", 350) }}

Here's the underlying code for this starting point:

```html live-sample___forms-buttons-2
<form>
<fieldset>
Expand Down Expand Up @@ -124,14 +138,16 @@ To complete the task:
</form>
```

{{ EmbedLiveSample("forms-buttons-2", "100%", 350) }}
The finished form should look like this:

{{ EmbedLiveSample("forms-buttons-2-finished", "100%", 360) }}

<details>
<summary>Click here to show the solution</summary>

Your finished HTML should look something like this:

```html
```html live-sample___forms-buttons-2-finished
<form>
<fieldset>
<legend>Who is your favorite pony?</legend>
Expand Down Expand Up @@ -187,6 +203,12 @@ In this task you'll explore some more specific input types. We want you to creat
3. Phone number
4. Favorite color

The starting point of the task looks like this:

{{ EmbedLiveSample("forms-buttons-3", "100%", 250) }}

Here's the underlying code for this starting point:

```html live-sample___forms-buttons-3
<form>
<h2>Edit your preferences</h2>
Expand All @@ -210,14 +232,16 @@ In this task you'll explore some more specific input types. We want you to creat
</form>
```

{{ EmbedLiveSample("forms-buttons-3", "100%", 250) }}
The finished form should look like this:

{{ EmbedLiveSample("forms-buttons-3-finished", "100%", 250) }}

<details>
<summary>Click here to show the solution</summary>

Your finished HTML should look something like this:

```html
```html live-sample___forms-buttons-3-finished
<form>
<h2>Edit your preferences</h2>
<ul>
Expand Down Expand Up @@ -256,6 +280,12 @@ To complete the task:
2. Associate it semantically with the provided "food" label.
3. Inside the list, split the choices up into 2 subgroups — "mains" and "snacks".

The starting point of the task looks like this:

{{ EmbedLiveSample("forms-buttons-4", "100%", 120) }}

Here's the underlying code for this starting point:

```html live-sample___forms-buttons-4
<form>
<ul>
Expand All @@ -271,14 +301,16 @@ To complete the task:
</form>
```

{{ EmbedLiveSample("forms-buttons-4", "100%", 250) }}
The finished form should look like this:

{{ EmbedLiveSample("forms-buttons-4-finished", "100%", 120) }}

<details>
<summary>Click here to show the solution</summary>

Your finished HTML should look something like this:

```html
```html live-sample___forms-buttons-4-finished
<form>
<ul>
<li>
Expand Down Expand Up @@ -317,6 +349,12 @@ To complete the task:
2. Mark up each text label with an appropriate element so that it is semantically associated with its respective form field.
3. Add a suitable set of structural elements around the label/field pairs to separate them out.

The starting point of the task looks like this:

{{ EmbedLiveSample("forms-buttons-5", "100%", 120) }}

Here's the underlying code for this starting point:

```html live-sample___forms-buttons-5
<form>
Name:
Expand All @@ -333,14 +371,16 @@ To complete the task:
</form>
```

{{ EmbedLiveSample("forms-buttons-5", "100%", 250) }}
The finished form should look like this:

{{ EmbedLiveSample("forms-buttons-5-finished", "100%", 300) }}

<details>
<summary>Click here to show the solution</summary>

Your finished HTML should look something like this:

```html
```html live-sample___forms-buttons-5-finished
<form>
<fieldset>
<legend>Personal details</legend>
Expand Down Expand Up @@ -385,6 +425,12 @@ To complete the task:

Try submitting your form — it should refuse to submit until the above constraints are followed, and give suitable error messages.

The starting point of the task looks like this:

{{ EmbedLiveSample("forms-buttons-6", "100%", 300) }}

Here's the underlying code for this starting point:

```html live-sample___forms-buttons-6
<form>
<h2>Enter your support query</h2>
Expand Down Expand Up @@ -412,14 +458,14 @@ Try submitting your form — it should refuse to submit until the above constrai
</form>
```

{{ EmbedLiveSample("forms-buttons-6", "100%", 300) }}
We've not shown the finished content rendered, as it doesn't look any different to the starting state.

<details>
<summary>Click here to show the solution</summary>

Your finished HTML should look something like this:

```html
```html live-sample___forms-buttons-6-finished
<form>
<h2>Enter your support query</h2>
<ul>
Expand Down
Loading