Skip to content
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.

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

Make Test your skills pages consistent #15579

Merged
merged 34 commits into from
Jun 7, 2022
Merged
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
54dd89b
Make Test your skills pages consistent
glmvc May 1, 2022
d009763
Update files/en-us/learn/css/building_blocks/overflow_tasks/index.md
estelle May 2, 2022
975640f
Update files/en-us/learn/css/building_blocks/sizing_tasks/index.md
glmvc May 4, 2022
29dccd1
Update files/en-us/learn/css/building_blocks/values_tasks/index.md
glmvc May 4, 2022
9ce852d
Update files/en-us/learn/css/building_blocks/selectors/selectors_task…
glmvc May 4, 2022
820e5e5
Update files/en-us/learn/css/building_blocks/tables_tasks/index.md
glmvc May 4, 2022
ea68aaf
Update files/en-us/learn/css/building_blocks/test_your_skills_backgro…
glmvc May 4, 2022
0d5d102
Update files/en-us/learn/css/building_blocks/writing_modes_tasks/inde…
glmvc May 4, 2022
50fda17
Update files/en-us/learn/css/building_blocks/sizing_tasks/index.md
glmvc May 4, 2022
c80cbf9
Update files/en-us/learn/css/css_layout/flexbox_skills/index.md
glmvc May 4, 2022
ff8ffa2
Update files/en-us/learn/css/css_layout/floats_skills/index.md
glmvc May 4, 2022
2a0bb9d
Update files/en-us/learn/css/css_layout/multicol_skills/index.md
glmvc May 4, 2022
80c98eb
Update files/en-us/learn/css/css_layout/position_skills/index.md
glmvc May 4, 2022
7bfd4e6
Update files/en-us/learn/css/building_blocks/tables_tasks/index.md
glmvc May 4, 2022
5d3e7ee
Update files/en-us/learn/css/building_blocks/values_tasks/index.md
glmvc May 4, 2022
ce56c9a
Update files/en-us/learn/html/introduction_to_html/test_your_skills_c…
glmvc May 4, 2022
64cc711
Update files/en-us/learn/css/css_layout/rwd_skills/index.md
glmvc May 4, 2022
bf1444d
Update files/en-us/learn/css/css_layout/position_skills/index.md
glmvc May 4, 2022
847f007
Update files/en-us/learn/css/css_layout/position_skills/index.md
glmvc May 4, 2022
1a515bf
Update files/en-us/learn/html/multimedia_and_embedding/images_in_html…
glmvc May 4, 2022
002ceda
Update files/en-us/learn/html/multimedia_and_embedding/video_and_audi…
glmvc May 4, 2022
d6e03ae
Update files/en-us/learn/css/building_blocks/box_model_tasks/index.md
glmvc May 4, 2022
f81cdad
Apply suggestions from code review
glmvc May 4, 2022
697e1a5
Apdapt and apply suggestions
glmvc May 4, 2022
2605710
Apply suggestions from code review
glmvc May 6, 2022
17625a0
Apdapt and apply suggestions
glmvc May 6, 2022
e96abee
Apdapt and apply suggestions
glmvc May 7, 2022
abd8a1d
Merge branch 'main' into patch-3
glmvc May 7, 2022
51b920a
Improve contrast of interactive examples (change images)
glmvc May 7, 2022
ec2f441
Merge branch 'main' into patch-3
glmvc May 8, 2022
120cdff
Merge branch 'main' into patch-3
glmvc May 14, 2022
e4b97e3
Merge branch 'main' into patch-3
glmvc Jun 3, 2022
e771543
resolve conflict wiht pr test: compress image
glmvc Jun 3, 2022
6800302
Merge branch 'main' into patch-3
glmvc Jun 3, 2022
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
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@ We have set all four corners in the example below and then changed the values fo

## Test your skills!

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Backgrounds and Borders](/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders).
You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Backgrounds and borders](/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders).

## Summary

Expand Down
29 changes: 16 additions & 13 deletions files/en-us/learn/css/building_blocks/box_model_tasks/index.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
---
title: 'Test your skills: The Box Model'
title: 'Test your skills: The box model'
slug: Learn/CSS/Building_blocks/Box_Model_Tasks
tags:
- Beginner
- CSS
- Learn
- Box model
- test your skills
---
{{LearnSidebar}}

The aim of this task is to help you check your understanding of the CSS 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:** You can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
> **Note:** You can try out solutions in the interactive editors below. However, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
>
> If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page.

## The Box Model One
## Task 1

With the two boxes below, one is using the standard box model, the other the alternate box model. Change the width of the second box by adding rules to the .alternate class, so that it matches the visual width of the first box. Your final result will look like the image below.
With the two boxes below, one is using the standard box model, the other the alternate box model. Change the width of the second box by adding declarations to the `.alternate` class, so that it matches the visual width of the first box. Your final result will look like the image below.

![Two boxes of the same size](mdn-box-model1.png)

Expand All @@ -25,9 +28,9 @@ Try updating the live code below to recreate the finished example:

> **Callout:**
>
> For assessment or further work purposes, [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.
> [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.

## The Box Model Two
## Task 2

In this task, add to the box:

Expand All @@ -40,17 +43,17 @@ In this task, add to the box:

![A box with a dotted border](mdn-box-model2.png)

Try updating the live code below to recreate the example as displayed in the image:
Try updating the live code below to recreate the finished example:

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}

> **Callout:**
>
> For assessment or further work purposes, [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.
> [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.

## The Box Model Three
## Task 3

In this example the inline element has a margin, padding and border however the lines above and below are overlapping it. What can you add to your CSS to cause the size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline?
In this example, the inline element has a margin, padding and border. However, the lines above and below are overlapping it. What can you add to your CSS to cause the size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline?

![An inline box with space between it and the text around it.](mdn-box-model3.png)

Expand All @@ -60,7 +63,7 @@ Try updating the live code below to recreate the finished example:

> **Callout:**
>
> For assessment or further work purposes, [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.
> [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.

## Assessment or further help

Expand All @@ -71,7 +74,7 @@ If you would like your work assessed, or are stuck and want to ask for help:
1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections.
2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include:

- A descriptive title such as "Assessment wanted for Box Model skill test 1".
- A descriptive title such as "Assessment wanted for The box model skill test 1".
glmvc marked this conversation as resolved.
Show resolved Hide resolved
- Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
- A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
- A link to the actual task or assessment page, so we can find the question you want help with.
15 changes: 9 additions & 6 deletions files/en-us/learn/css/building_blocks/cascade_tasks/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,31 @@ slug: Learn/CSS/Building_blocks/Cascade_tasks
tags:
- Beginner
- CSS
- Learn
- Cascade
- test your skills
---
{{LearnSidebar}}

The aim of this task is to help you check your understanding of the universal property values for controlling inheritance that we looked at in the lesson on [The Cascade and Inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance).
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 out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
> **Note:** You can try out solutions in the interactive editors below. However, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
>
> If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page.

## Task One
## Your task

In this task, you need to use one of the special values we looked at in the [Controlling inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#controlling_inheritance) section to write a declaration in a new rule that will reset the background color back to white, without using an actual color value.

![Barely visible yellow links on a white background.](mdn-cascade.png)

In the example below see if you can match the image above.
Try updating the live code below to recreate the finished example:

{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}

> **Callout:**
>
> For assessment or further work purposes, [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.
> [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.

## Assessment or further help

Expand All @@ -36,7 +39,7 @@ If you would like your work assessed, or are stuck and want to ask for help:
1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections.
2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include:

- A descriptive title such as "Assessment wanted for Cascade skill test 1".
- A descriptive title such as "Assessment wanted for The Cascade skill test".
glmvc marked this conversation as resolved.
Show resolved Hide resolved
- Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
glmvc marked this conversation as resolved.
Show resolved Hide resolved
- A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
- A link to the actual task or assessment page, so we can find the question you want help with.
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ The logical properties and values are newer than their physical equivalents, and

## Test your skills!

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Writing Modes and Logical Properties](/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks).
You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Writing modes and logical properties](/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks).

## Summary

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ For further information on styling forms, take a look at the two articles in the

## Test your skills!

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Images and Form elements](/en-US/docs/Learn/CSS/Building_blocks/Images_tasks).
You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Images and form elements](/en-US/docs/Learn/CSS/Building_blocks/Images_tasks).

## Summary

Expand Down
28 changes: 16 additions & 12 deletions files/en-us/learn/css/building_blocks/images_tasks/index.md
Original file line number Diff line number Diff line change
@@ -1,50 +1,54 @@
---
title: 'Test your skills: Images and Form elements'
title: 'Test your skills: Images and form elements'
slug: Learn/CSS/Building_blocks/Images_tasks
tags:
- Beginner
- CSS
- Learn
- Images
- Form
- test your skills
---
{{LearnSidebar}}

The aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on [Images, Media and Form elements](/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements).
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 out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
> **Note:** You can try out solutions in the interactive editors below. However, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
>
> If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page.

## Task One
## Task 1

In this task, you have an image that is overflowing the box. We want the image to scale down to fit inside the box without any extra white space, but we do not mind if some part of the image is cropped.

![An image in a box](mdn-images-object-fit.png)

In the example below see if you can match the image above.
Try updating the live code below to recreate the finished example:

{{EmbedGHLiveSample("css-examples/learn/tasks/images/object-fit.html", '100%', 1000)}}

> **Callout:**
>
> For assessment or further work purposes, [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.
> [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.

## Task Two
## Task 2

In this task, you have a simple form. Your task is to make the following changes to the way this form looks:

- Use attribute selectors to target the search field and button inside .myform.
- Use attribute selectors to target the search field and button inside `.myform`.
- 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 button a purple background (I used `rebeccapurple`), white foreground, no border and rounded corners of 5px.
- Give the button a background of `rebeccapurple`, white foreground, no border and rounded corners of 5px.

![A single line form](mdn-images-form.png)

Try updating the live code below to recreate the example as displayed in the image:
Try updating the live code below to recreate the finished example:

{{EmbedGHLiveSample("css-examples/learn/tasks/images/form.html", '100%', 600)}}

> **Callout:**
>
> For assessment or further work purposes, [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.
> [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.

## Assessment or further help

Expand All @@ -55,7 +59,7 @@ If you would like your work assessed, or are stuck and want to ask for help:
1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections.
2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include:

- A descriptive title such as "Assessment wanted for Images skill test 1".
- A descriptive title such as "Assessment wanted for Images and form elements skill test 1".
- Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
- A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
- A link to the actual task or assessment page, so we can find the question you want help with.
19 changes: 11 additions & 8 deletions files/en-us/learn/css/building_blocks/overflow_tasks/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,19 @@ slug: Learn/CSS/Building_blocks/Overflow_Tasks
tags:
- Beginner
- CSS
- Learn
- Overflow
- test your skills
---
{{LearnSidebar}}

The aim of these tasks is to help you check your understanding of overflow in CSS.
The aim of this skill test is to assess whether you understand [overflow in CSS](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content).

> **Note:** You can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
> **Note:** You can try out solutions in the interactive editors below. However, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
>
> If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page.

## Task One
## Task 1

The content is overflowing the box because it has a fixed height. Keep the height but cause the box to have scrollbars only if there is enough text to cause an overflow. Test by removing some of the text from the HTML, that if there is only a small amount of text that does not overflow, no scrollbar appears.

Expand All @@ -25,21 +28,21 @@ Try updating the live code below to recreate the finished example:

> **Callout:**
>
> For assessment or further work purposes, [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.
> [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.

## Task Two
## Task 2

In this task an image is in the box, it is bigger than the dimensions of the box so overflows visibly. Change it so that any image outside of the box is hidden.
In this task, there is an image in the box that is bigger than the dimensions of the box so that it overflows visibly. Change it so that any image outside of the box is hidden.

![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 example as displayed in the image:
Try updating the live code below to recreate the finished example:

{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.html", '100%', 1200)}}

> **Callout:**
>
> For assessment or further work purposes, [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.
> [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.

## Assessment or further help

Expand Down
Loading