From 54dd89ba43631c8639bb377307fa0f58ba1665df Mon Sep 17 00:00:00 2001 From: glmvc Date: Sun, 1 May 2022 12:24:03 +0200 Subject: [PATCH 01/29] Make Test your skills pages consistent --- .../backgrounds_and_borders/index.md | 2 +- .../building_blocks/box_model_tasks/index.md | 25 +++++++------ .../building_blocks/cascade_tasks/index.md | 15 ++++---- .../index.md | 2 +- .../images_media_form_elements/index.md | 2 +- .../css/building_blocks/images_tasks/index.md | 26 ++++++++------ .../building_blocks/overflow_tasks/index.md | 19 +++++----- .../selectors/selectors_tasks/index.md | 31 ++++++++-------- .../css/building_blocks/sizing_tasks/index.md | 30 ++++++++-------- .../css/building_blocks/tables_tasks/index.md | 20 ++++++----- .../index.md | 28 ++++++++------- .../building_blocks/the_box_model/index.md | 2 +- .../css/building_blocks/values_tasks/index.md | 35 ++++++++++--------- .../writing_modes_tasks/index.md | 28 ++++++++------- .../css/css_layout/flexbox_skills/index.md | 29 +++++++-------- .../css/css_layout/floats_skills/index.md | 24 ++++++------- .../learn/css/css_layout/grid_skills/index.md | 32 +++++++++-------- .../en-us/learn/css/css_layout/grids/index.md | 2 +- .../css/css_layout/media_queries/index.md | 2 +- .../css/css_layout/multicol_skills/index.md | 26 ++++++++------ .../multiple-column_layout/index.md | 2 +- .../css/css_layout/position_skills/index.md | 23 ++++++------ .../learn/css/css_layout/rwd_skills/index.md | 13 ++++--- .../index.md | 4 +-- .../index.md | 12 ++++--- .../test_your_skills_colon__links/index.md | 6 ++-- .../index.md | 8 ++--- .../index.md | 8 ++--- 28 files changed, 250 insertions(+), 206 deletions(-) diff --git a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md index 91aa412fac19ad0..af88c3c27b17431 100644 --- a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -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 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 516591a3debb37c..5561330bf7d10f7 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 @@ -1,19 +1,22 @@ --- -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've understood our [CSS box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) article. -> **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 +## The box model 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. @@ -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 +## The box model 2 In this task, add to the box: @@ -40,15 +43,15 @@ 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 +## The box model 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? @@ -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 @@ -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 1 skill test". - 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. 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 a5ac5e5419fbca2..2d80fa2ee23f941 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 @@ -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've understood universal property values for controlling inheritance covered in our [Cascade and inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) article. -> **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 @@ -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". - 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. diff --git a/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md b/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md index 7cbca3bbea93e56..24ba510504df317 100644 --- a/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md +++ b/files/en-us/learn/css/building_blocks/handling_different_text_directions/index.md @@ -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 diff --git a/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md b/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md index 0f745608825716d..ab346d56b45641b 100644 --- a/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md +++ b/files/en-us/learn/css/building_blocks/images_media_form_elements/index.md @@ -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 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 fcc8e213494d4d0..49e64450cf1164d 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 @@ -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've understood our [Images, media and form elements](/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements) article. -> **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 +## Images and form elements 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 +## Images and form elements 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. ![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 @@ -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 1 skill test". - 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. 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 993438deb2aafa4..7e1491c98c4cbec 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 @@ -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've understood overflow in CSS covered in our [Overflowing content](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content) article. -> **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 +## Overflow 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. @@ -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 +## Overflow 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. ![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 @@ -50,7 +53,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 Overflow skill test 1". + - A descriptive title such as "Assessment wanted for Overflow 1 skill test". - 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. 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 3aa5416a70279fd..f118484a7a06c69 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 @@ -4,16 +4,19 @@ slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks tags: - Beginner - CSS + - Learn + - Selectors + - test your skills --- {{LearnSidebar}} -The aim of this task is to help you check your understanding of selectors in CSS. +The aim of this skill test is to assess whether you've understood our [CSS selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors) article. -> **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. -## Selectors One +## Selectors 1 Without changing the HTML, use CSS to do the following things: @@ -29,9 +32,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/selectors/type-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/selectors/type-download.html) to work in your own editor or in an online editor. -## Selectors Two +## Selectors 2 Without changing the HTML, make the following changes to the look of the content in this example: @@ -48,9 +51,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/selectors/class-id-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/selectors/class-id-download.html) to work in your own editor or in an online editor. -## Selectors Three +## Selectors 3 In this example, try making the following changes without adding to the HTML. @@ -66,9 +69,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/selectors/pseudo-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/selectors/pseudo-download.html) to work in your own editor or in an online editor. -## Selectors Four +## Selectors 4 In this task try the following: @@ -83,9 +86,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/selectors/combinators-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/selectors/combinators-download.html) to work in your own editor or in an online editor. -## Selectors Five +## Selectors 5 In this final task add CSS using attribute selectors to do the following: @@ -101,7 +104,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/selectors/attribute-links-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/selectors/attribute-links-download.html) to work in your own editor or in an online editor. ## Assessment or further help @@ -112,9 +115,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 Selectors skill test 1". + - A descriptive title such as "Assessment wanted for Selectors 1 skill test". - 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. - -3. You Can find all the answers in [CodePen Collection](https://codepen.io/collection/DxBgky?grid_type=grid) 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 05c55a6be5ed30d..fa7d39308444f0e 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 @@ -1,20 +1,22 @@ --- -title: 'Test your skills: sizing' +title: 'Test your skills: Sizing' slug: Learn/CSS/Building_blocks/Sizing_tasks tags: - Beginner - CSS - - Example + - Learn + - Sizing + - 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 [Sizing items in CSS](/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS). +The aim of this skill test is to assess whether you've understood our [Sizing items in CSS](/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS) article. -> **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 +## Sizing 1 In this task, you have two boxes. The first should be sized so that the height will be at least 100 pixels tall, even if there is less content than would cause it to grow to that height, however, the content should not overflow if there is more content than fits in 100 pixels. Test this box by removing the content from the HTML to make sure you still get a 100 pixel tall box even with no content. @@ -28,35 +30,35 @@ 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/sizing/height-min-height-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/sizing/height-min-height-download.html) to work in your own editor or in an online editor. -## Task Two +## Sizing 2 -This task has a box, which contains another box. Your task is to make the inner box 60% of the width of the outer box. The value of the {{cssxref("box-sizing")}} property is set to {{cssxref("border-box")}}, which means that the total width includes any padding and border. You should also give the inner box padding of 10% using the width (or inline size) as the size from which that percentage is calculated. +This task has a box, which contains another box. Your task is to make the inner box 60% of the width of the outer box. The value of the {{cssxref("box-sizing")}} property is set to ```border-box```, which means that the total width includes any padding and border. You should also give the inner box padding of 10% using the width (or inline size) as the size from which that percentage is calculated. ![A box with another box nested inside](mdn-sizing-percentages.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/sizing/percentages.html", '100%', 800)}} > **Callout:** > -> For assessment or further work purposes, [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. +> [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. -## Task Three +## Sizing 3 This task has two images in boxes. One image is smaller than the box, the other is larger and breaking out of the box. If you imagine that the box is responsive and therefore could grow and shrink, which property would you apply to the image so that the large image shrinks down into the box but the small image does not stretch. ![Two boxes with images in](mdn-sizing-max-width.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/sizing/max-width.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/sizing/max-width-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/sizing/max-width-download.html) to work in your own editor or in an online editor. ## Assessment or further help @@ -67,7 +69,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 sizing skill test 1". + - A descriptive title such as "Assessment wanted for Sizing 1 skill test". - 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 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. 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 867d5d5e6d79d64..1a71e27ad8adada 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 @@ -1,24 +1,26 @@ --- -title: 'Test your skills: tables' +title: 'Test your skills: Tables' slug: Learn/CSS/Building_blocks/Tables_tasks tags: - Beginner - CSS - - Example + - Learn + - Tables + - test your skills --- {{LearnSidebar}} -The aim of this task is to help you check your understanding of the skills you studied in the lesson on [styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables). +The aim of this skill test is to assess whether you've understood our [Styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables) article. -> **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 +## Your task In the lesson 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 I suggest following similar patterns as used in the tutorial to do the following things. +Our finished table will look like the image below. There are a number of ways that you can achieve this, but I suggest following similar patterns as used in the tutorial to do the following things: - Align headings and data for columns containing numbers right. - Align headings and data for columns containing text left. @@ -27,11 +29,13 @@ 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: + {{EmbedGHLiveSample("css-examples/learn/tasks/tables/table.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/tables/table-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/tables/table-download.html) to work in your own editor or in an online editor. ## Assessment or further help @@ -42,7 +46,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 tables skill test". + - A descriptive title such as "Assessment wanted for Tables skill test". - 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 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. 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 acd8c540f6a9885..0ad46dc5daacc50 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 @@ -1,21 +1,23 @@ --- -title: 'Test your skills: backgrounds and borders' +title: 'Test your skills: Backgrounds and borders' slug: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders tags: - - Assessment - Beginner + - CSS - Learn - - Skill test - backgrounds - borders + - test your skills --- -The aim of this skill test is to get you working with CSS backgrounds and borders using the skills you have learned in the previous lesson. +{{learnsidebar}} -> **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. +The aim of this skill test is to assess whether you've understood our [Backgrounds and borders](/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) article. + +> **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. -## Backgrounds and Borders 1 +## Backgrounds and borders 1 In this task we want you to add a background, border, and some simple styling to a page header: @@ -35,11 +37,11 @@ Try updating the live code below to recreate the finished example: > > [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. -## Backgrounds and Borders 2 +## Backgrounds and borders 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 +- 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. @@ -57,14 +59,14 @@ Try updating the live code below to recreate the finished example: ## Assessment or further help -You can practice these examples in the Interactive Editors above. +You can practice these examples in the Interactive Editors mentioned above. 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](https://discourse.mozilla.org/c/mdn/236). Add the "learning" tag to your post so we are able to more easily find it. Your post should include: +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 Flexbox layout 1 skill test". - - Details of what you would like us to do — for example what you have already tried, if you are stuck and need help. - - A link to the example you want assessed or need help with, in an online editor. 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 descriptive title such as "Assessment wanted for Backgrounds and borders 1 skill test". + - 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. diff --git a/files/en-us/learn/css/building_blocks/the_box_model/index.md b/files/en-us/learn/css/building_blocks/the_box_model/index.md index 713189246b8720a..61684db52e940f8 100644 --- a/files/en-us/learn/css/building_blocks/the_box_model/index.md +++ b/files/en-us/learn/css/building_blocks/the_box_model/index.md @@ -312,7 +312,7 @@ You see this fairly frequently in navigation bars. The navigation below is displ ## 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: The Box Model](/en-US/docs/Learn/CSS/Building_blocks/Box_Model_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: The box model](/en-US/docs/Learn/CSS/Building_blocks/Box_Model_Tasks). ## Summary 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 732dc36bf76f9a6..d6454abb52364ea 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 @@ -1,26 +1,29 @@ --- -title: 'Test your skills: values and units' +title: 'Test your skills: Values and units' slug: Learn/CSS/Building_blocks/Values_tasks tags: - Beginner - CSS - - Example + - Learn + - Values + - Units + - 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 [CSS Values and Units](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units). +The aim of this skill test is to assess whether you've understood some of the CSS values and units covered in our [CSS Values and Units](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) article. -> **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 +## Values and units 1 -In this task, the first list item has been given a background color using hex color codes. Your task is to complete the CSS using the same color in different formats, plus a final list item where you should make the background semi-opaque. +In this task, the first list item has been given a background color using hex color codes. Your task is to complete the CSS using the same color in different formats, plus a final list item where you should make the background semi-opaque: - The second list item should use RGB color. - The third should use HSL color. -- The fourth should use RGB color but with the alpha channel set to .2. +- The fourth should use RGB color but with the alpha channel set to ```0.2```. 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. @@ -32,11 +35,11 @@ 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/values/color-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/values/color-download.html) to work in your own editor or in an online editor. -## Task Two +## Values and units 2 -In this task you need to set the size of various items of text. +In this task you need to set the size of various items of text: - The {{HTMLElement("h1")}} should be 50 pixels. - The {{HTMLElement("h2")}} should be 2em. @@ -45,27 +48,27 @@ In this task you need to set the size of various items of text. ![Some text at varying sizes.](mdn-value-length.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/values/length.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/values/length-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/values/length-download.html) to work in your own editor or in an online editor. -## Task Three +## Values and units 3 In this task you need to move the background image so that it is centered horizontally, and 20% from the top of the box. ![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 example as displayed in the image: +Try updating the live code below to recreate the finished example: {{EmbedGHLiveSample("css-examples/learn/tasks/values/position.html", '100%', 800)}} > **Callout:** > -> For assessment or further work purposes, [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. +> [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. ## Assessment or further help @@ -76,7 +79,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 values and units skill test 1". + - A descriptive title such as "Assessment wanted for Values and units 1 skill test". - 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 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. 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 c4f6120cfed2d05..b80dfc17c7a1232 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 @@ -1,19 +1,23 @@ --- -title: 'Test your skills: Writing Modes and Logical Properties' +title: 'Test your skills: Writing modes and logical properties' slug: Learn/CSS/Building_blocks/Writing_Modes_Tasks tags: - Beginner - CSS + - Learn + - Writing modes + - logical properties + - test your skills --- {{LearnSidebar}} -The aim of this task is to help you check your understanding of Writing Modes and Logical Properties. The things you need to know to complete these tasks are covered in the lesson on [Handling different text directions](/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions). +The aim of this skill test is to assess whether you've understood writing modes and logical properties covered in our [Handling different text directions](/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) article. -> **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 +## Writing modes and logical properties 1 The box in the example is displayed with a horizontal writing mode. Can you add a line of CSS to change it so it uses a vertical writing mode with right to left text? Your example should look like the image below. @@ -25,23 +29,23 @@ 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/writing-modes/writing-mode-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/writing-modes/writing-mode-download.html) to work in your own editor or in an online editor. -## Task Two +## Writing modes and logical properties 2 In the example below use logical properties to replace `width` and `height` in order to maintain the aspect ratio of the box as it is turned vertically. Your end 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 example as displayed in the image: +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:** > -> For assessment or further work purposes, [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. +> [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. -## Task Three +## Writing modes and logical properties 3 Use logical versions of the margin, border, and padding properties so that the edges of the box relate to the text rather than following top, left, bottom and right. You can see how this should look in the image below. @@ -53,7 +57,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/writing-modes/logical-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/writing-modes/logical-mbp-download.html) to work in your own editor or in an online editor. ## Assessment or further help @@ -64,7 +68,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 Writing Modes skill test 1". + - A descriptive title such as "Assessment wanted for Writing modes and logical properties 1 skill test". - 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 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 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. 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 9c1d64849b90760..a2dda95c37476ae 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 @@ -2,21 +2,22 @@ title: 'Test your skills: Flexbox' slug: Learn/CSS/CSS_layout/Flexbox_skills tags: - - Assessment - Beginner + - CSS - Learn - - Skill test - - flexbox + - Flexbox + - Layout + - test your skills --- {{LearnSidebar}} -The aim of this task is to get you working with Flexbox and demonstrate your understanding of how flex items behave. Below are four common design patterns which you might use Flexbox to create, your task is to build them. +The aim of this skill test is to assess whether you've understood how flex items behave covered in our [Flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) article. Below are four common design patterns which you might use Flexbox to create, your task is to build them. -> **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. -## Flex Layout One +## Flexbox 1 These list items are the navigation for a site. They should be laid out as a row, with an equal amount of space between each item. The finished example should look like the image below. @@ -28,9 +29,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/flexbox/flexbox1-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/flexbox/flexbox1-download.html) to work in your own editor or in an online editor. -## Flex Layout Two +## Flexbox 2 These 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. @@ -46,9 +47,9 @@ Additional questions: > **Callout:** > -> For assessment or further work purposes, [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. +> [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. -## Flex Layout Three +## Flexbox 3 There are two elements in the HTML below, a div with a class of `.parent` which contains another div with a class of `.child`. Use Flexbox to center the child inside the parent. @@ -60,9 +61,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/flexbox/flexbox3-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/flexbox/flexbox3-download.html) to work in your own editor or in an online editor. -## Flex Layout Four +## Flexbox 4 In this final task arrange these items into rows as in the image. @@ -74,7 +75,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/flexbox/flexbox4-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/flexbox/flexbox4-download.html) to work in your own editor or in an online editor. ## Assessment or further help @@ -85,7 +86,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 Flexbox layout 1 skill test". + - A descriptive title such as "Assessment wanted for Flexbox 1 skill test". - 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 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. 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 0969c9780f1bfd1..82dd5e50fc635ff 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 @@ -1,23 +1,23 @@ --- -title: 'Test your skills: floats' +title: 'Test your skills: Floats' slug: Learn/CSS/CSS_layout/Floats_skills tags: - Beginner - CSS - - Example + - Learn - Floats - - Guide - Layout + - test your skills --- {{LearnSidebar}} -The aim of this task is to get you working with the CSS {{CSSxRef("float")}} and {{CSSxRef("clear")}} properties covered in our lesson on [Floats](/en-US/docs/Learn/CSS/CSS_layout/Floats). You will be working through three small tasks which use different elements of the material you have just covered. +The aim of this skill test is to assess whether you've understood the CSS {{CSSxRef("float")}} and {{CSSxRef("clear")}} properties covered in our [Floats](/en-US/docs/Learn/CSS/CSS_layout/Floats) article. You will be working through three small tasks which use different elements of the material you have just covered. > **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. -## Float one +## Floats 1 In this task, you need to 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 in the image below. @@ -29,9 +29,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/float/float1-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/float/float1-download.html) to work in your own editor or in an online editor. -## Float two +## Floats 2 In this example, the element with a class of `float` should be floated left. Then we want the first line of text to display next to that element, but the following line of text (which has a class of `.below`) to display underneath it. You can see the desired result in this image. @@ -43,9 +43,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/float/float2-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/float/float2-download.html) to work in your own editor or in an online editor. -## Float three +## Floats 3 Finally, we have a floated element in this example. The box wrapping the float and text is displaying behind the float. Use the most up-to-date method available to cause the box background to extend to below the float, as in the image. @@ -57,18 +57,18 @@ 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/float/float3-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/float/float3-download.html) to work in your own editor or in an online editor. ## Assessment or further help -You can practice these examples in the interactive editors mentioned above. +You can practice these examples in the Interactive Editors mentioned above. 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 Float skill test". + - A descriptive title such as "Assessment wanted for Floats 1 skill test". - 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 assessed or need help with, in an online shareable editor (as mentioned in [step 1](#learn_sidebar) 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. 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 40658d17b265faa..269fdd1f8ea509e 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 @@ -1,21 +1,23 @@ --- -title: 'Test your skills: Grid Layout' +title: 'Test your skills: Grid' slug: Learn/CSS/CSS_layout/Grid_skills tags: - Beginner - CSS - - Guide - Learn + - Grid + - Layout + - test your skills --- {{LearnSidebar}} -The aim of this task is to get you working with CSS Grid Layout, and test that you understand how a grid and grid items behave. You will be working through three small tasks which use different elements of the material you have just covered. +The aim of this skill test is to assess whether you've understood how a grid and grid items behave covered in our [Grids](/en-US/docs/Learn/CSS/CSS_layout/Grids) article. You will be working through three small tasks which use different elements of the material you have just covered. -> **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. -## Grid Layout One +## Grid 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. @@ -27,9 +29,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/grid/grid1-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/grid/grid1-download.html) to work in your own editor or in an online editor. -## Grid Layout Two +## Grid 2 In this example we already have a grid defined. By editing the CSS rules for the two child elements, cause them to span over several grid tracks each; the second item should overlay the first as in the image below. @@ -45,9 +47,9 @@ Additional questions: > **Callout:** > -> For assessment or further work purposes, [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. +> [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. -## Grid Layout Three +## Grid 3 There are four direct children in this grid; the starting point has them displayed using auto-placement. Use the grid-area and grid-template-areas properties to lay the items out as shown in the image. @@ -59,32 +61,32 @@ 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/grid/grid3-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/grid/grid3-download.html) to work in your own editor or in an online editor. -## Grid and Flex Layout 4 +## Grid and Flexbox 4 You will need to use both Grid Layout and Flexbox to recreate the example as seen in the image. You do not need to make any changes to the HTML in order to do this. ![Two rows of cards, each with an image and a set of tags.](grid-task4.png) -Try updating the code below to create your example: +Try updating the live code below to recreate the finished example: {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 2000)}} > **Callout:** > -> For assessment or further work purposes, [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. +> [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. ## Assessment or further help You can practice these examples in the Interactive Editors mentioned above. -If you'd like your work assessed, or are stuck and want to ask for help: +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 Grid layout 1 skill test". + - A descriptive title such as "Assessment wanted for Grid 1 skill test". - 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 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. diff --git a/files/en-us/learn/css/css_layout/grids/index.md b/files/en-us/learn/css/css_layout/grids/index.md index 98525c6dc34825e..ad62c98efff31b4 100644 --- a/files/en-us/learn/css/css_layout/grids/index.md +++ b/files/en-us/learn/css/css_layout/grids/index.md @@ -606,7 +606,7 @@ If you use the [Firefox Grid Inspector](https://firefox-source-docs.mozilla.org/ ## 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: Grids](/en-US/docs/Learn/CSS/CSS_layout/Grid_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: Grid](/en-US/docs/Learn/CSS/CSS_layout/Grid_skills). ## Summary diff --git a/files/en-us/learn/css/css_layout/media_queries/index.md b/files/en-us/learn/css/css_layout/media_queries/index.md index 2673fdb831ba259..228e13ebd221a43 100644 --- a/files/en-us/learn/css/css_layout/media_queries/index.md +++ b/files/en-us/learn/css/css_layout/media_queries/index.md @@ -442,7 +442,7 @@ With the example open in your browser, make the screen wider and narrower to see ## Test your skills! -You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see [Test your skills: Responsive Web Design](/en-US/docs/Learn/CSS/CSS_layout/rwd_skills). +You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see [Test your skills: Responsive web design and media queries](/en-US/docs/Learn/CSS/CSS_layout/rwd_skills). ## Summary 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 e899d87f478791a..9daf1f3f97d9bd5 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 @@ -2,19 +2,23 @@ title: 'Test your skills: Multicol' slug: Learn/CSS/CSS_layout/Multicol_skills tags: + - Beginner - CSS - - Example - - Guide + - Learn + - Multicol + - Multiple-column + - Layout + - test your skills --- {{LearnSidebar}} -The aim of this task is to get you working with the CSS {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} and {{CSSxRef("column-rule")}} properties and values covered in our lesson on [Multiple-column Layout](/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout). You will be working through three small tasks which use different elements of the material you have just covered. +The aim of this skill test is to assess whether you've understood the CSS {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} and {{CSSxRef("column-rule")}} properties and values covered in our [Multiple-column layout](/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) article. You will be working through three small tasks which use different elements of the material you have just covered. -> **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. -## Multicol One +## Multicol 1 In this task you need to create three columns, with a 50px gap between each column. @@ -26,9 +30,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/multicol/multicol1-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/multicol/multicol1-download.html) to work in your own editor or in an online editor. -## Multicol Two +## Multicol 2 Create columns which have a minimum width of 200px. @@ -42,9 +46,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/multicol/multicol2-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/multicol/multicol2-download.html) to work in your own editor or in an online editor. -## Multicol Three +## Multicol 3 Cause the element containing the heading and subheading to span across all columns so it looks like the image. @@ -56,7 +60,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/multicol/multicol3-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/multicol/multicol3-download.html) to work in your own editor or in an online editor. ## Assessment or further help @@ -67,7 +71,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 Multicol skill test 1". + - A descriptive title such as "Assessment wanted for Multicol 1 skill test". - 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 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. diff --git a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md index c0c602570415910..050c4e269875db4 100644 --- a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md @@ -412,7 +412,7 @@ body { ## 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: Multiple-column Layout](/en-US/docs/Learn/CSS/CSS_layout/Multicol_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: Multicol](/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills). ## Summary 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 889704c525ff4bf..5fcdabfd2e359e4 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 @@ -1,20 +1,23 @@ --- -title: 'Test your skills: position' +title: 'Test your skills: Positioning' slug: Learn/CSS/CSS_layout/Position_skills tags: + - Beginner - CSS - - Example - - Guide + - Learn + - Positioning + - Layout + - test your skills --- {{LearnSidebar}} -The aim of this task is to get you working with the CSS {{CSSxRef("position")}} property and values covered in our lesson on [Position](/en-US/docs/Learn/CSS/CSS_layout/Positioning). You will be working through two small tasks which use different elements of the material you have just covered. +The aim of this skill test is to assess whether you've understood the CSS {{CSSxRef("position")}} property and values covered in our [Positioning](/en-US/docs/Learn/CSS/CSS_layout/Positioning) article. You will be working through two small tasks which use different elements of the material you have just covered. -> **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. -## Positioning One +## Positioning 1 In this task you need to position the item with a class of target to the top and right of the container, which has the 5px grey border. @@ -28,9 +31,9 @@ As an extra challenge, can you change the target to display underneath the text? > **Callout:** > -> For assessment or further work purposes, [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. +> [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. -## Position Two +## Positioning 2 In the below example if you scroll the box the sidebar scrolls with the content. Change it so that the sidebar stays in place and only the content scrolls. @@ -42,7 +45,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/position/position2-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/position/position2-download.html) to work in your own editor or in an online editor. ## Assessment or further help @@ -53,7 +56,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 Position skill test 1". + - A descriptive title such as "Assessment wanted for Positioning 1 skill test". - 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 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. diff --git a/files/en-us/learn/css/css_layout/rwd_skills/index.md b/files/en-us/learn/css/css_layout/rwd_skills/index.md index 481f3c5a0597dbf..11542dcf9680ef5 100644 --- a/files/en-us/learn/css/css_layout/rwd_skills/index.md +++ b/files/en-us/learn/css/css_layout/rwd_skills/index.md @@ -1,16 +1,19 @@ --- -title: 'Test your skills: Media Queries and Responsive Design' +title: 'Test your skills: Responsive web design and media queries' slug: Learn/CSS/CSS_layout/rwd_skills tags: - Beginner - CSS - - Guide + - Learn + - Responsive Web Design + - Media Queries + - test your skills --- {{LearnSidebar}} -This aim of this task is to get you working with responsive web design with a practical task. Everything you need to know to complete this task was covered in the [guide to Media Queries](/en-US/docs/Learn/CSS/CSS_layout/Media_queries), and the other layout lessons in this section. +The aim of this skill test is to get you working with responsive web design with a practical task. Everything you need to know to complete this task is covered in the [Beginner's guide to media queries](/en-US/docs/Learn/CSS/CSS_layout/Media_queries) and the other layout lessons in this section. -> **Note:** Due to the need to test your design in multiple screen sizes we do not have an interactive editor for this task. Download the code and work locally, or 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:** Due to the need to test your design in multiple screen sizes we do not have an Interactive Editor for this task. Download the code and work locally, or 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. @@ -33,7 +36,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 Responsive Web Design assessment". + - A descriptive title such as "Assessment wanted for Responsive web design and media queries skill test". - 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 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. diff --git a/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md b/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md index 4a77b3c3632f83a..473d7986d594d48 100644 --- a/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md +++ b/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.md @@ -12,7 +12,7 @@ tags: The aim of this skill test is to assess whether you've understood our [Advanced text formatting](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) article. -> **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. @@ -47,7 +47,7 @@ Try updating the live code below to recreate the finished example: ## Assessment or further help -You can practice these examples in the Interactive Editors above. +You can practice these examples in the Interactive Editors mentioned above. If you would like your work assessed, or are stuck and want to ask for help: diff --git a/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md b/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md index fadd726b90cbde5..a334b48dbc48bf9 100644 --- a/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md +++ b/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md @@ -12,13 +12,15 @@ tags: The aim of this skill test is to assess whether you've understood our [HTML text fundamentals](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) article. -> **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. ## HTML text basics 1 -In this task we want you to mark up the provided HTML using semantic heading and paragraph elements. Try updating the live code below to create the finished example: +In this task we want you to mark up the provided HTML using semantic heading and paragraph elements. + +Try updating the live code below to recreate the finished example: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}} @@ -30,7 +32,7 @@ In this task we want you to mark up the provided HTML using semantic heading and In this task we want you to turn the first un-marked up list into an unordered list, and the second one into an ordered list. -Try updating the live code below to create the finished example: +Try updating the live code below to recreate the finished example: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}} @@ -42,7 +44,7 @@ Try updating the live code below to create the finished example: In this task you are provided with a paragraph, and your aim is to use some inline elements to mark up a couple of appropriate words with strong importance, and a couple with emphasis. -Try updating the live code below to create the finished example: +Try updating the live code below to recreate the finished example: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}} @@ -52,7 +54,7 @@ Try updating the live code below to create the finished example: ## Assessment or further help -You can practice these examples in the Interactive Editors above. +You can practice these examples in the Interactive Editors mentioned above. If you would like your work assessed, or are stuck and want to ask for help: diff --git a/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__links/index.md b/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__links/index.md index 872b7e649fde0ad..33ca7fbd9b8c4f5 100644 --- a/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__links/index.md +++ b/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__links/index.md @@ -12,7 +12,7 @@ tags: The aim of this skill test is to assess whether you've understood our [Creating hyperlinks](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) article. -> **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. @@ -25,7 +25,7 @@ In this task we want you to help fill in the links on our Whales information pag - The second link should be turned into a link you can click to open up an email in the user's default mail application, with the recipient set as "whales\@example.com". - You'll get a bonus point if you also set it so that the subject line of the email is automatically filled in as "Question about Whales". -> **Note:** The first link in the example has the `target="_blank"` attribute set on it, so that when you click on it, it opens the page in a new tab. This is not strictly best practice, but we've done it here so that the page doesn't open in the embedded `