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 88d45bcebf22309..84a0bb3a4cc22db 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,21 +1,26 @@ --- -title: 'Test your skills: The Box Model' +title: 'Test your skills: The box model' slug: Learn/CSS/Building_blocks/Box_Model_Tasks tags: - Beginner - CSS + - Learn + - Box model + - test your skills --- {{LearnSidebar}} -The aim of this task is to help you check your understanding of the CSS Box Model. +The aim of this skill test is to assess whether you understand the [CSS box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model). -> **Note:** You can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. +> **Note:** You can try out solutions in the interactive editors below. However, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. > > If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page. -## The Box Model One +## Task 1 -With the two boxes below, one is using the standard box model, the other the alternate box model. Change the width of the second box by adding rules to the .alternate class, so that it matches the visual width of the first box. Your final result will look like the image below. +In this task, there are two boxes below, one is using the standard box model, the other the alternate box model. Change the width of the second box by adding declarations to the `.alternate` class, so that it matches the visual width of the first box. + +Your final result should look like the image below: ![Two boxes of the same size](mdn-box-model1.png) @@ -25,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/box-model/box-models-download.html) to work in your own editor or in an online editor. +> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/box-models-download.html) to work in your own editor or in an online editor. -## The Box Model Two +## Task 2 In this task, add to the box: @@ -38,19 +43,23 @@ In this task, add to the box: - A left margin of 2em. - Padding on all sides of 1em. +Your final result should look like the image below: + ![A box with a dotted border](mdn-box-model2.png) -Try updating the live code below to recreate the 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. + +## Task 3 -## The Box Model Three +In this task, the inline element has a margin, padding and border. However, the lines above and below are overlapping it. What can you add to your CSS to cause the size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline? -In this example the inline element has a margin, padding and border; however, the lines above and below are overlapping it. What can you add to your CSS to cause the size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline? +Your final result should look like the image below: ![An inline box with space between it and the text around it.](mdn-box-model3.png) @@ -60,7 +69,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 +80,7 @@ If you would like your work assessed, or are stuck and want to ask for help: 1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections. 2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include: - - A descriptive title such as "Assessment wanted for Box Model skill test 1". + - A descriptive title such as "Assessment wanted for the box model skill test 1". - 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..45f4da325a77475 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,33 @@ slug: Learn/CSS/Building_blocks/Cascade_tasks tags: - Beginner - CSS + - Learn + - Cascade + - test your skills --- {{LearnSidebar}} -The aim of this task is to help you check your understanding of the universal property values for controlling inheritance that we looked at in the lesson on [The Cascade and Inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance). +The aim of this skill test is to assess whether you understand universal property values for [controlling inheritance in CSS](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance). -> **Note:** You can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. +> **Note:** You can try out solutions in the interactive editors below. However, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. > > If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page. -## Task One +## 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. +In this task, we want you 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. + +Your final result should look like the image below: ![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 +41,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/cascade_tasks/mdn-cascade.png b/files/en-us/learn/css/building_blocks/cascade_tasks/mdn-cascade.png index 1448d3ce5f90944..255ee0fccd33c16 100644 Binary files a/files/en-us/learn/css/building_blocks/cascade_tasks/mdn-cascade.png and b/files/en-us/learn/css/building_blocks/cascade_tasks/mdn-cascade.png differ 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..0a54e3851e05f07 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,58 @@ --- -title: 'Test your skills: Images and Form elements' +title: 'Test your skills: Images and form elements' slug: Learn/CSS/Building_blocks/Images_tasks tags: - Beginner - CSS + - Learn + - Images + - Form + - test your skills --- {{LearnSidebar}} -The aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on [Images, Media and Form elements](/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements). +The aim of this skill test is to assess whether you understand how special elements like [images, media and form elements are treated in CSS](/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements). -> **Note:** You can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. +> **Note:** You can try out solutions in the interactive editors below. However, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. > > If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page. -## Task One +## Task 1 In this task, you have an image that is overflowing the box. We want the image to scale down to fit inside the box without any extra white space, but we do not mind if some part of the image is cropped. +Your final result should look like the image below: + ![An image in a box](mdn-images-object-fit.png) -In the example below see if you can match the image above. +Try updating the live code below to recreate the finished example: {{EmbedGHLiveSample("css-examples/learn/tasks/images/object-fit.html", '100%', 1000)}} > **Callout:** > -> For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/images/object-fit-download.html) to work in your own editor or in an online editor. +> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/images/object-fit-download.html) to work in your own editor or in an online editor. -## Task Two +## Task 2 -In this task, you have a simple form. Your task is to make the following changes to the way this form looks: +In this task, you have a simple form. Your task is to make the following changes: -- Use attribute selectors to target the search field and button inside .myform. +- Use attribute selectors to target the search field and button inside `.myform`. - Make the form field and button use the same text size as the rest of the form. - Give the form field and button 10 px of padding. -- Give the button a purple background (I used `rebeccapurple`), white foreground, no border and rounded corners of 5px. +- Give the button a background of `rebeccapurple`, white foreground, no border and rounded corners of 5px. + +Your final result should look like the image below: ![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 +63,7 @@ If you would like your work assessed, or are stuck and want to ask for help: 1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections. 2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include: - - A descriptive title such as "Assessment wanted for Images skill test 1". + - A descriptive title such as "Assessment wanted for images and form elements skill test 1". - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. - A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. - A link to the actual task or assessment page, so we can find the question you want help with. 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..fff94aca3e46cda 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,18 +4,21 @@ slug: Learn/CSS/Building_blocks/Overflow_Tasks tags: - Beginner - CSS + - Learn + - Overflow + - test your skills --- {{LearnSidebar}} -The aim of these tasks is to help you check your understanding of overflow in CSS. +The aim of this skill test is to assess whether you understand [overflow in CSS and how to manage it](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content). -> **Note:** You can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. +> **Note:** You can try out solutions in the interactive editors below. However, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. > > If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page. -## Task One +## Task 1 -The content is overflowing the box because it has a fixed height. Keep the height but cause the box to have scrollbars only if there is enough text to cause an overflow. Test by removing some of the text from the HTML, that if there is only a small amount of text that does not overflow, no scrollbar appears. +In this task, 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. ![A small box with a border and a vertical scrollbar.](mdn-overflow1.png) @@ -25,21 +28,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/overflow/overflow-scroll-download.html) to work in your own editor or in an online editor. +> [Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/overflow/overflow-scroll-download.html) to work in your own editor or in an online editor. -## Task Two +## Task 2 -In this task an image is in the box, it is bigger than the dimensions of the box so overflows visibly. Change it so that any image outside of the box is hidden. +In this task, there is an image in the box that is bigger than the dimensions of the box so that it overflows visibly. Change it so that any image outside of the box is hidden. + +Your final result should look like the image below: ![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 +55,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 skill test 1". - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. - A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. - A link to the actual task or assessment page, so we can find the question you want help with. 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..5846143a11575d8 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,22 +4,27 @@ 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 understand [CSS selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors). -> **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 +## Task 1 -Without changing the HTML, use CSS to do the following things: +In this task, use CSS to do the following things, without changing the HTML: -- Make h1 headings blue. -- Give h2 headings a blue background and white text. -- Cause text wrapped in a span to have a font-size of 200%. +- Make `

` headings blue. +- Give `

` headings a blue background and white text. +- Cause text wrapped in a `` to have a font-size of 200%. + +Your final result should look like the image below: ![Text with the CSS applied for the solution to task 1.](selectors1.jpg) @@ -29,17 +34,19 @@ 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 +## Task 2 -Without changing the HTML, make the following changes to the look of the content in this example: +In this task, we want you to make the following changes to the look of the content in this example, without changing the HTML: - Give the element with an id of `special` a yellow background. - Give the element with a class of `alert` a 1px grey border. - If the element with a class of `alert` also has a class of `stop`, make the background red. - If the element with a class of `alert` also has a class of `go`, make the background green. +Your final result should look like the image below: + ![Text with the CSS applied for the solution to task 2.](selectors2.jpg) Try updating the live code below to recreate the finished example: @@ -48,16 +55,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/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 +## Task 3 -In this example, try making the following changes without adding to the HTML. +In this task, we want you to make the following changes without adding to the HTML: - Style links, making the link-state orange, visited links green, and remove the underline on hover. - Make the first element inside the container font-size: 150% and the first line of that element red. - Stripe every other row in the table by selecting these rows and giving them a background color of #333 and foreground of white. +Your final result should look like the image below: + ![Text with the CSS applied for the solution to task 3.](selectors3.jpg) Try updating the live code below to recreate the finished example: @@ -66,14 +75,16 @@ 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 +## Task 4 -In this task try the following: +In this task, we want you to do the following: -- Make any paragraph that directly follows an h2 element red. -- Remove the bullets and add a 1px grey bottom border only to list items that are a direct child of the ul with a class of list. +- Make any paragraph that directly follows an `

` element red. +- Remove the bullets and add a 1px grey bottom border only to list items that are a direct child of the ul with a class of `list`. + +Your final result should look like the image below: ![Text with the CSS applied for the solution to task 4.](selectors4.jpg) @@ -83,16 +94,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/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 +## Task 5 -In this final task add CSS using attribute selectors to do the following: +In this task, add CSS using attribute selectors to do the following: - Target the `` element with a `title` attribute and make the border pink (`border-color: pink`). - Target the `` element with an `href` attribute that contains the word `contact` somewhere in its value and make the border orange (`border-color: orange`). - Target the `` element with an `href` value starting with `https` and give it a green border (`border-color: green`). +Your final result should look like the image below: + ![Four links with different color borders.](selectors-attribute.png) Try updating the live code below to recreate the finished example: @@ -101,7 +114,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 +125,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 skill test 1". - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. - A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. - A link to the actual task or assessment page, so we can find the question you want help with. - -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 d6fad0e8e58aff8..ffb4dad950babde 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,22 +1,24 @@ --- -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 understand the different ways of [sizing items in CSS](/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS). -> **Note:** You can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. +> **Note:** You can try out solutions in the interactive editors below. However, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. > > If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page. -## Task One +## Task 1 -In this task, you have 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. +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 that 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. The second box should be fixed at 100 pixels tall, so that content will overflow if there is too much. @@ -28,35 +30,39 @@ 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 +## Task 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 `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. +In this task, you have 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. + +Your final result should look like the image below: ![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 +## Task 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. +In this task, you have 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. + +Your final result should look like the images below: ![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 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..af03d2f2a15e829 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,37 +1,47 @@ --- -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 understand how to [style HTML tables in CSS](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables). -> **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 -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/). +In the lesson on [styling tables](/en-US/docs/Learn/CSS/Building_blocks/Styling_tables) 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 we suggest you follow similar patterns as used in the tutorial to do the following things: +- Add padding of `0.3em` to the table headings and data and align them at the top of their cells. - Align headings and data for columns containing numbers right. - Align headings and data for columns containing text left. -- Add a top and bottom border, plus a border above the footer. -- Stripe every odd row of the main table. +- Add a 1px top and bottom solid border with the hex color `#999`, plus a 1px solid border of the same color above the footer. +- Remove the default spacing between the table elements borders to get the expected result. +- Stripe every odd row of the main table with the hex color `#eee`. ![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)}} +Additional question: + +- What can you do to make the table layout behave a bit more predictably? Think of how table columns are sized by default and how we can change this behavior to size the columns according to the width of their headings. + > **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 +52,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 the 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..846b3e63c3c1641 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,29 +1,31 @@ --- -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 understand [backgrounds and borders of boxes in CSS](/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders). + +> **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 +## Task 1 -In this task we want you to add a background, border, and some simple styling to a page header: +In this task, we want you to add a background, border, and some simple styling to a page header: 1. Give the box a 5px black solid border, with rounded corners of 10px. 2. Add a background image (use the URL `balloons.jpg`) and size it so that it covers the box. 3. Give the `

` a semi-transparent black background color, and make the text white. -The finished example should look like the image below. +Your final result should look like the image below: ![Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background.](backgrounds-task1.png) @@ -35,15 +37,15 @@ 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 +## Task 2 -In this task we want you to add background images, a border, and some other styling to a decorative box: +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. -The finished example should look like the image below: +Your final result should look like the image below: ![Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars.](backgrounds-task2.png) @@ -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 skill test 1". + - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. + - A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. - A link to the actual task or assessment page, so we can find the question you want help with. 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 883d5e12d0b7a06..d6ad27c691d67be 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 @@ -79,7 +79,7 @@ We can, however, change the inner display type by using `display` values like `f > **Note:** To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide to [Block and Inline Layout](/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow). -When you move on to learn about CSS Layout in more detail, you will encounter `flex`, and various other inner values that your boxes can have, for example [`grid`](/en-US/docs/Learn/CSS/CSS_layout/Grids). +When you move on to learn about CSS Layout in more detail, you will encounter [`flex`](/en-US/docs/Learn/CSS/CSS_layout/Flexbox), and various other inner values that your boxes can have, for example [`grid`](/en-US/docs/Learn/CSS/CSS_layout/Grids). Block and inline layout, however, is the default way that things on the web behave — as we said above, it is sometimes referred to as _normal flow_, because without any other instruction, our boxes lay out as block or inline boxes. @@ -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_and_units/index.md b/files/en-us/learn/css/building_blocks/values_and_units/index.md index ee7c7cdd9087798..861c9d5f62e308d 100644 --- a/files/en-us/learn/css/building_blocks/values_and_units/index.md +++ b/files/en-us/learn/css/building_blocks/values_and_units/index.md @@ -404,7 +404,7 @@ For example, below we are using `calc()` to make the box `20% + 100px` wide. 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: Values and Units](/en-US/docs/Learn/CSS/Building_blocks/Values_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: Values and units](/en-US/docs/Learn/CSS/Building_blocks/Values_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..e95af28008a541e 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,28 +1,31 @@ --- -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 understand different types of [values and units used in CSS properties](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units). -> **Note:** You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. +> **Note:** You can try out solutions in the interactive editors below. However, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. > > If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page. -## Task One +## Task 1 -In this task, 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 a hex color code. 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.6`. -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. +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. Your final result should look like the image below: ![Four list items. The first three with the same background color and the last with a lighter background.](mdn-value-color.png) @@ -32,40 +35,44 @@ 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 +## Task 2 -In this task you need to set the size of various items of text. +In this task, we want you to set the size of various items of text, as described below: -- The {{HTMLElement("h1")}} should be 50 pixels. -- The {{HTMLElement("h2")}} should be 2em. -- All {{HTMLElement("p")}} elements should be 16 pixels. -- A {{HTMLElement("p")}} element that is directly after an {{HTMLElement("h1")}} should be 120%. +- The `

` element should be 50 pixels. +- The `

` element should be 2em. +- All `

` elements should be 16 pixels. +- A `

` element that is directly after an `

` should be 120%. + +Your final result should look like the image below: ![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 +## Task 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. +In this task, we want you to move the background image so that it is centered horizontally and is 20% from the top of the box. + +Your final result should look like the image below: ![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 diff --git a/files/en-us/learn/css/building_blocks/values_tasks/mdn-value-color.png b/files/en-us/learn/css/building_blocks/values_tasks/mdn-value-color.png index 393f105429f147a..c23611f4fe03e7d 100644 Binary files a/files/en-us/learn/css/building_blocks/values_tasks/mdn-value-color.png and b/files/en-us/learn/css/building_blocks/values_tasks/mdn-value-color.png differ 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..9039f5bea9d1f8c 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,21 +1,27 @@ --- -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 understand how to [handle different text directions using writing modes and logical properties in CSS](/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions). -> **Note:** You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. +> **Note:** You can try out solutions in the interactive editors below. However, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. > > If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page. -## Task One +## Task 1 -The 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. +In this task, the box 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 final result should look like the image below: ![A box with a vertical writing mode](mdn-writing-modes1.png) @@ -25,25 +31,29 @@ 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 2 -## Task Two +In this task, we want you to use logical properties to replace `width` and `height` in order to maintain the aspect ratio of the box as it is turned vertically. -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. +Your final 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 3 -## Task Three +In this task, we want you to 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. -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. +Your final result should look like the image below: ![Two boxes one horizontal one vertical with different margin, border and padding](mdn-writing-modes3.png) @@ -53,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/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 +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 Writing Modes skill test 1". + - A descriptive title such as "Assessment wanted for writing modes and logical properties skill test 1". - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. - - A link to the example you want 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..73b2f9dbcc56622 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,23 +2,26 @@ 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 understand how [flexbox and flex items](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) behave. Below are four common design patterns that 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 +## Task 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. +In this task, the 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. + +Your final result should look like the image below: ![Flex items laid out as a row with space between them.](flex-task1.png) @@ -28,11 +31,13 @@ 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. + +## Task 2 -## Flex Layout Two +In this task, the list items are all different sizes, but we want them to be displayed as three equal sized columns, no matter what content is in each item. -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. +Your final result should look like the image below: ![Flex items laid out as three equal size columns with different amounts of content.](flex-task2.png) @@ -40,17 +45,19 @@ Try updating the live code below to recreate the finished example: {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}} -Additional questions: +Additional question: - Can you now make the first item twice the size of the other items? > **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. + +## Task 3 -## Flex Layout Three +In this task, there are two elements in the HTML below, a `
` element with a class of `parent` which contains another `
` element with a class of `child`. Use flexbox to center the child inside the parent. Note that there is not just one possible solution here. -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. +Your final result should look like the image below: ![A box centered inside another box.](flex-task3.png) @@ -60,11 +67,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/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 +## Task 4 -In this final task arrange these items into rows as in the image. +In this task, we want you to arrange these items into rows as in the image below: ![A set of items displayed as rows.](flex-task4.png) @@ -74,7 +81,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 +92,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 skill test 1". - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. - A link to the example you want 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/float-task1.png b/files/en-us/learn/css/css_layout/floats_skills/float-task1.png index d7df3e44b97b11f..e689c0710617768 100644 Binary files a/files/en-us/learn/css/css_layout/floats_skills/float-task1.png and b/files/en-us/learn/css/css_layout/floats_skills/float-task1.png differ diff --git a/files/en-us/learn/css/css_layout/floats_skills/float-task2.png b/files/en-us/learn/css/css_layout/floats_skills/float-task2.png index d6fa2272133c878..e4ec18ea1d508cc 100644 Binary files a/files/en-us/learn/css/css_layout/floats_skills/float-task2.png and b/files/en-us/learn/css/css_layout/floats_skills/float-task2.png differ diff --git a/files/en-us/learn/css/css_layout/floats_skills/float-task3.png b/files/en-us/learn/css/css_layout/floats_skills/float-task3.png index 8bcb40520184d4c..caf0c1f3a79a2d6 100644 Binary files a/files/en-us/learn/css/css_layout/floats_skills/float-task3.png and b/files/en-us/learn/css/css_layout/floats_skills/float-task3.png differ 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..e1c20db15655fa3 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,25 +1,25 @@ --- -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 understand [floats in CSS](/en-US/docs/Learn/CSS/CSS_layout/Floats) using the the {{CSSxRef("float")}} and {{CSSxRef("clear")}} properties and values as well as other methods for clearing floats. You will be working through three small tasks that 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 +## Task 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. +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: ![Two blocks displaying left and right of some text.](float-task1.png) @@ -29,11 +29,13 @@ 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 +## Task 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. +In this task, 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. + +Your final result should look like the image below: ![A box displayed to the left of a line of text, with some more text below.](float-task2.png) @@ -43,11 +45,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/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 +## Task 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. +In this task, we have a floated element. 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 below: ![A block displayed to the right of some text both wrapped by a box with a background color.](float-task3.png) @@ -57,18 +59,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 skill test 1". - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. - A link to the example you want 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..fd13e84403a45b2 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,23 +1,27 @@ --- -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 understand how a [grid and grid items](/en-US/docs/Learn/CSS/CSS_layout/Grids) behave. You will be working through three small tasks that 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 +## Task 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. +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. After that, try adding more child containers inside the parent container with the class of `grid` and see how they behave by default. + +Your final result should look like the image below: ![A three column grid with four items placed into it.](grid-task1.png) @@ -27,11 +31,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/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 +## Task 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. +In this task, 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: ![A box with two items inside one overlaying the other.](grid-task2.png) @@ -39,17 +43,17 @@ Try updating the live code below to recreate the finished example: {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid2.html", '100%', 900)}} -Additional questions: +Additional question: - Can you now cause the first item to display on top without changing the order of items in the source? > **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 +## Task 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. +In this task, 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 below: ![Four items displayed in a grid.](grid-task3.png) @@ -59,32 +63,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 +## Task 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. +In this task, you will need to use both grid layout and flexbox to recreate the example as seen in the image below. The gap between the column and row tracks should be 10px. You do not need to make any changes to the HTML in order to achieve this. ![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 skill test 1". - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. - A link to the example you want 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..cd416fc48b07627 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,21 +2,27 @@ 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 understand [CSS multiple-column layout](/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout), including the {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} and {{CSSxRef("column-rule")}} properties and values. You will be working through three small tasks that 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 +## Task 1 -In this task you need to create three columns, with a 50px gap between each column. +In this task, we want you to create three columns, with a 50px gap between each column. + +Your final result should look like the image below: ![Three columns of text](multicol-task1.png) @@ -26,13 +32,13 @@ 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 +## Task 2 -Create columns which have a minimum width of 200px. +In this task, we want you to create columns which have a minimum width of 200px. Then, add a 5px grey rule between each column, ensuring there is 10px of space between the edge of the rule and the column content. -Then, add a 5px, grey rule between each column, ensuring there is 10px of space between the edge of the rule and the column content. +Your final result should look like the image below: ![Three columns of text with a grey rule between them.](multicol-task2.png) @@ -42,11 +48,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/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 +## Task 3 -Cause the element containing the heading and subheading to span across all columns so it looks like the image. +In this task, we want you to cause the element containing the heading and subheading to span across all columns so it looks like the image below: ![Three columns of text with a heading and subheading spanning all three in the middle.](multicol-task3.png) @@ -56,7 +62,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 +73,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 skill test 1". - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. - A link to the example you want 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..2c2b8f3fa3dd98a 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,22 +1,27 @@ --- -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 understand [positioning in CSS](/en-US/docs/Learn/CSS/CSS_layout/Positioning) using the CSS {{CSSxRef("position")}} property and values. You will be working through two small tasks that 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 +## Task 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. +In this task, we want you to position the item with a class of `target` to the top and right of the container, which has the 5px grey border. + +Your final result should look like the image below: ![The green box is at the top right of a container with a grey border.](position-task1.png) @@ -24,15 +29,17 @@ Try updating the live code below to recreate the finished example: {{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}} -As an extra challenge, can you change the target to display underneath the text? +Additional question: + +- 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 +## Task 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. +In this taks, if you scroll the box in the example below, the sidebar scrolls with the content. Change it so that the sidebar stays in place and only the content scrolls. ![The content is scrolled but the sidebar has stayed in place.](position-task2.png) @@ -42,7 +49,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 +60,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 skill test 1". - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. - A link to the example you want 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/position_skills/position-task1.png b/files/en-us/learn/css/css_layout/position_skills/position-task1.png index cf4abefe383e3a5..b08e1b09daf7ef9 100644 Binary files a/files/en-us/learn/css/css_layout/position_skills/position-task1.png and b/files/en-us/learn/css/css_layout/position_skills/position-task1.png differ diff --git a/files/en-us/learn/css/css_layout/position_skills/position-task2.png b/files/en-us/learn/css/css_layout/position_skills/position-task2.png index 3d438443d711d9a..612499cbbc10560 100644 Binary files a/files/en-us/learn/css/css_layout/position_skills/position-task2.png and b/files/en-us/learn/css/css_layout/position_skills/position-task2.png differ 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..98b51d25385dfa1 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,24 +1,27 @@ --- -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 assess whether you understand [how to use media queries](/en-US/docs/Learn/CSS/CSS_layout/Media_queries) and get you working with responsive web design with a practical task. Everything you need to know to complete this task is covered in the layout lessons in the [CSS layout module](/en-US/docs/Learn/CSS/CSS_layout). -> **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. -## Your task +## Task -[Download the starting point](https://github.com/mdn/css-examples/blob/main/learn/tasks/rwd/rwd-download.html). Open this in your browser and you will find a wireframed site which will load in a mobile device in a readable manner. You can drag your window smaller or use the responsive design view in Firefox DevTools to view this as if on a phone. +[Download the starting point for this task](https://github.com/mdn/css-examples/blob/main/learn/tasks/rwd/rwd-download.html). Open the downloaded HTML file in your browser and you will find a wireframed site which will load in a mobile device in a readable manner. You can drag your window smaller or use the [responsive design view in Firefox DevTools](https://firefox-source-docs.mozilla.org/devtools-user/index.html#responsive-design-mode) to view this as if on a phone. -Your task is to create a desktop version of this layout which displays when there is enough screen width to accommodate it. You can see the layout you are aiming for in the screenshot below. +Your task is to create a desktop version of this layout which displays when there is enough screen width to accommodate it. Your final result should look like the image below: ![A two column wireframed layout.](rwd-task.png) @@ -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/html_text_fundamentals/index.md b/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md index ad48ccb18690a68..65a50d2c95cf93b 100644 --- a/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md +++ b/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md @@ -32,7 +32,7 @@ One of HTML's main jobs is to give text structure so that a browser can display Objective: Learn how to mark up a basic page of text to give it structure and - meaning—including paragraphs, headings, lists, emphasis, and quotations. + meaning — including paragraphs, headings, lists, emphasis, and quotations. 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..6fceccea7f3f9be 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 @@ -10,15 +10,15 @@ tags: --- {{learnsidebar}} -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. +The aim of this skill test is to assess whether you understand how to use [lesser-known HTML elements to mark up advanced semantic features](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting). -> **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. -## Advanced HTML text 1 +## Task 1 -In this task we want you to turn the provided animals and their definitions into a description list. +In this task, we want you to turn the provided animals and their definitions into a description list. Try updating the live code below to recreate the finished example: @@ -28,14 +28,14 @@ Try updating the live code below to recreate the finished example: > > [Download the starting point for this task](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/advanced-text/advanced-text1-download.html) to work in your own editor or in an online editor. -## Advanced HTML text 2 +## Task 2 -In this task we want you to add some semantics to the provided HTML as follows: +In this task, we want you to add some semantics to the provided HTML as follows: - Turn the second paragraph into a block-level quote, and semantically indicate that the quote is taken from [Accessibility](/en-US/docs/Learn/Accessibility). - Semantically mark up "HTML" and "CSS" as acronyms, providing expansions as tooltips. -- Semantically associate machine-readable dates with the dates in the text. - Use subscript and superscript to provide correct semantics for the chemical formulae and dates, and make them display correctly. +- Semantically associate machine-readable dates with the dates in the text. Try updating the live code below to recreate the finished example: @@ -47,14 +47,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 Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include: - - A descriptive title such as "Assessment wanted for Advanced HTML text 1 skill test". + - A descriptive title such as "Assessment wanted for advanced HTML text skill test 1". - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. - A link to the example you want 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__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..5d74028b989744e 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 @@ -10,15 +10,17 @@ tags: --- {{learnsidebar}} -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. +The aim of this skill test is to assess whether you understand how to [mark up text in HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) to give it structure and meaning. -> **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 +## Task 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)}} @@ -26,11 +28,11 @@ In this task we want you to mark up the provided HTML using semantic heading and > > [Download the starting point for this task](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/basic-text/basic-text1-download.html) to work in your own editor or in an online editor. -## HTML text basics 2 +## Task 2 -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. +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)}} @@ -38,11 +40,11 @@ Try updating the live code below to create the finished example: > > [Download the starting point for this task](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/tasks/basic-text/basic-text2-download.html) to work in your own editor or in an online editor. -## HTML text basics 3 +## Task 3 -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. +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,14 +54,14 @@ 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: 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 HTML text basics 1 skill test". + - A descriptive title such as "Assessment wanted for HTML text basics skill test 1". - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. - A link to the example you want 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__links/index.md b/files/en-us/learn/html/introduction_to_html/test_your_skills_colon__links/index.md index 872b7e649fde0ad..5b6e3466fafe3c1 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 @@ -10,22 +10,22 @@ tags: --- {{learnsidebar}} -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. +The aim of this skill test is to assess whether you understand how to [implement hyperlinks in HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks). -> **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. -## Links 1 +## Task 1 -In this task we want you to help fill in the links on our Whales information page: +In this task, we want you to help fill in the links on our Whales information page: - The first link should be linked to a page called `whales.html`, which is in the same directory as the current page. - We'd also like you to give it a tooltip when moused over that tells the user that the page includes information on Blue Whales and Sperm Whales. - 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 `