From 7a58019754d5b649b6e63b4433caf82e46d709ca Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Wed, 20 Aug 2025 14:50:23 +0100 Subject: [PATCH] Restructure the HTML test your skills navigation --- .../advanced_text_features/index.md | 12 +++++------- .../structuring_content/creating_links/index.md | 10 +++------- .../structuring_content/debugging_html/index.md | 4 ++-- .../core/structuring_content/html_forms/index.md | 10 +++------- .../structuring_content/html_images/index.md | 12 +++++------- .../html_video_and_audio/index.md | 10 +++------- .../core/structuring_content/index.md | 6 ++++-- .../core/structuring_content/lists/index.md | 10 +++------- .../marking_up_a_letter/index.md | 4 ++-- .../mozilla_splash_page/index.md | 4 ++-- .../structuring_documents/index.md | 4 ++-- .../test_your_skills/advanced_html_text/index.md | 6 +++++- .../test_your_skills/audio_and_video/index.md | 6 +++++- .../test_your_skills/forms_and_buttons/index.md | 6 +++++- .../test_your_skills/html_text_basics/index.md | 6 +++++- .../test_your_skills/images/index.md | 6 +++++- .../test_your_skills/index.md | 2 +- .../test_your_skills/links/index.md | 6 +++++- files/sidebars/learnsidebar.yaml | 16 +++++++--------- 19 files changed, 72 insertions(+), 68 deletions(-) diff --git a/files/en-us/learn_web_development/core/structuring_content/advanced_text_features/index.md b/files/en-us/learn_web_development/core/structuring_content/advanced_text_features/index.md index 26561b288a31d43..75c9bc2fdd768e7 100644 --- a/files/en-us/learn_web_development/core/structuring_content/advanced_text_features/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/advanced_text_features/index.md @@ -5,7 +5,7 @@ page-type: tutorial-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text", "Learn_web_development/Core/Structuring_content")}} There are many other elements in HTML for defining text semantics, which we didn't get to in the [Emphasis and importance](/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) article. The elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). Here you'll learn about marking up quotations, computer code and other related text, subscript and superscript, contact information, and more. @@ -395,12 +395,10 @@ The basic example above just provides a simple machine readable date, but there ``` -## 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: Advanced HTML text](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text). - ## Summary -That marks the end of our study of less-common HTML text semantics. What you have seen during this course is not an exhaustive list of HTML text elements — we wanted to try to cover the essentials, and some of the more common ones you will see in the wild. Next up, we'll look at links, one of the most important features of the web. +That marks the end of our study of less-common HTML text semantics. What you have seen during this course is not an exhaustive list of HTML text elements — we wanted to try to cover the essentials, and some of the more common ones you will see in the wild. + +Next up, we'll give you some tests that you can use to check how well you've understood and retained the information we've provided on less-common HTML text features. -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md b/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md index 3e64c6923d73316..468898ffd60c6ac 100644 --- a/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md @@ -5,7 +5,7 @@ page-type: tutorial-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text", "Learn_web_development/Core/Structuring_content/Test_your_skills/Links", "Learn_web_development/Core/Structuring_content")}} Links (also known as hyperlinks) are really important — they are what makes the Web _a web_. This article shows the syntax required to make a link, and discusses link best practices. @@ -466,12 +466,8 @@ Here are a few other sample `mailto` URLs: - - -## 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: Links](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links). - ## Summary -That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, you're going to work through a couple of challenges that will test your comprehension of the topics you've covered so far. +That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up, we'll give you some tests that you can use to check how well you've understood and retained the information we've provided on links. -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text", "Learn_web_development/Core/Structuring_content/Test_your_skills/Links", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md b/files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md index ddda1a98fc1de67..76e7754fcd39f97 100644 --- a/files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md @@ -5,7 +5,7 @@ page-type: learn-module-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_forms", "Learn_web_development/Core/Styling_basics", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons", "Learn_web_development/Core/Styling_basics", "Learn_web_development/Core/Structuring_content")}} Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help you find and fix errors in HTML. @@ -229,4 +229,4 @@ You will know when all your errors are fixed when you see a nice little green ba So there we have it, an introduction to debugging HTML, which should give you some useful skills to count on when debugging HTML, but also CSS and JavaScript code later on in the course. This also marks the end of the _Structuring content with HTML_ module. -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_forms", "Learn_web_development/Core/Styling_basics", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons", "Learn_web_development/Core/Styling_basics", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/html_forms/index.md b/files/en-us/learn_web_development/core/structuring_content/html_forms/index.md index 4e72547c04061e8..f1c7ab4668f4c81 100644 --- a/files/en-us/learn_web_development/core/structuring_content/html_forms/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/html_forms/index.md @@ -6,7 +6,7 @@ page-type: tutorial-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Planet_data_table", "Learn_web_development/Core/Structuring_content/Debugging_HTML", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Planet_data_table", "Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons", "Learn_web_development/Core/Structuring_content")}} HTML forms and buttons are powerful tools for interacting with a website's users. Most commonly, they provide users with controls to manipulate a user interface (UI) or input data when required. @@ -488,18 +488,14 @@ Form validation is a huge topic that is beyond scope for this article, so we wil In short, don't decide between using either client-side or server-side validation - you will need both. You need client-side validation to give users feedback on their input and server-side validation to make sure messages are in a format your server can safely handle. If you want to start learning more about validation, a good place to start is [Client-side form validation](/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation). -## 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: Forms and buttons](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons). - ## Summary That's all for now. There's a lot more to know about forms, but for now, we've given you enough of an understanding to move forward in your studies. -Next up, we will have a look at how to debug problems in your HTML code. +Next up, we'll give you some tests that you can use to check how well you've understood and retained the information we've provided on HTML forms. ## See also - [Web forms — Working with user data](/en-US/docs/Learn_web_development/Extensions/Forms) -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Planet_data_table", "Learn_web_development/Core/Structuring_content/Debugging_HTML", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Planet_data_table", "Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/html_images/index.md b/files/en-us/learn_web_development/core/structuring_content/html_images/index.md index 96dea58ff244fb0..9a58f6c2e57f1b3 100644 --- a/files/en-us/learn_web_development/core/structuring_content/html_images/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/html_images/index.md @@ -6,7 +6,7 @@ page-type: tutorial-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content", "Learn_web_development/Core/Structuring_content/HTML_video_and_audio", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content", "Learn_web_development/Core/Structuring_content/Test_your_skills/Images", "Learn_web_development/Core/Structuring_content")}} In the beginning, the web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. In this article we'll look at how to use the {{htmlelement("img")}} element in depth, including the basics, annotating it with captions using {{htmlelement("figure")}}, and detailing how it relates to {{glossary("CSS")}} background images. @@ -417,12 +417,10 @@ The resulting embedded image is arguably easier to position and control than HTM Summing up: if an image has meaning, in terms of your content, you should use an HTML image. If an image is purely decoration, you should use CSS background images (we'll cover these in detail later in the Core modules). -## 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: HTML images](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images). - ## Summary -That's all for now. We have covered images and captions in detail. In the next article, we'll move it up a gear, looking at how to use HTML to embed video and audio content into web pages. +That's all for now. We have covered images and captions in detail. + +In the next article, we'll give you some tests that you can use to check how well you've understood and retained the information we've provided on HTML images. -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content", "Learn_web_development/Core/Structuring_content/HTML_video_and_audio", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content", "Learn_web_development/Core/Structuring_content/Test_your_skills/Images", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/html_video_and_audio/index.md b/files/en-us/learn_web_development/core/structuring_content/html_video_and_audio/index.md index c43cbd16ddc9191..e2b62ec2c7eb335 100644 --- a/files/en-us/learn_web_development/core/structuring_content/html_video_and_audio/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/html_video_and_audio/index.md @@ -6,7 +6,7 @@ page-type: tutorial-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_images", "Learn_web_development/Core/Structuring_content/Mozilla_splash_page", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Images", "Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video", "Learn_web_development/Core/Structuring_content")}} Now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your HTML documents! In this article we'll look at doing just that with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements; we'll then finish off by looking at how to add captions/subtitles to your videos. @@ -318,12 +318,8 @@ Your finished HTML should look something like this: -## 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: Audio and video](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video). - ## Summary -And that's a wrap — we hope you had fun playing with video and audio in web pages! Next up, we'll present you with a challenge to test your skills with HTML media. +And that's a wrap — we hope you had fun playing with video and audio in web pages! Next up, we'll give you some tests that you can use to check how well you've understood and retained the information we've provided on HTML video and audio. -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_images", "Learn_web_development/Core/Structuring_content/Mozilla_splash_page", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Images", "Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/index.md b/files/en-us/learn_web_development/core/structuring_content/index.md index 1854db5284f9882..76af5faf3fa0406 100644 --- a/files/en-us/learn_web_development/core/structuring_content/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/index.md @@ -55,8 +55,10 @@ Before starting this module, you don't need any previous HTML knowledge, but you - : HTML forms and buttons are powerful tools for interacting with users — most commonly they are used for collecting data from users or allowing them to control a user interface. In this article we provide an introduction to the basics of forms and buttons. - [Debugging HTML](/en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML) - : Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help you find and fix errors in HTML. -- [Test your skills: HTML](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills) - - : This page lists HTML tests you can try so you can verify if you've understood the content in this module. + +## Test your skills + +You will find "Test your skills" articles placed between the tutorial articles to check whether you have retained the most important information before you move on. If you want to explore all of these together, you can find them listed at [Test your skills: HTML](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills). ## Additional tutorials diff --git a/files/en-us/learn_web_development/core/structuring_content/lists/index.md b/files/en-us/learn_web_development/core/structuring_content/lists/index.md index 5e6f8ce1c2b2aab..beb7fc3a4099c11 100644 --- a/files/en-us/learn_web_development/core/structuring_content/lists/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/lists/index.md @@ -5,7 +5,7 @@ page-type: tutorial-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Emphasis_and_importance", "Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Emphasis_and_importance", "Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics", "Learn_web_development/Core/Structuring_content")}} Now let's turn our attention to lists. Lists are everywhere in life—from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! It may not surprise you that HTML has a convenient set of elements that allows us to define different types of list. On the web, we have three types of lists: unordered, ordered, and description lists. This lesson shows you how to use the different types. @@ -317,12 +317,8 @@ Your finished HTML should look like this: -## Test your skills! - -You've reached the end of this set of three articles about basic HTML semantic elements, 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: HTML text basics](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics). - ## Summary -That's it for lists. Next we'll move on to a higher-level discussion. We've shown how to implement some individual page features, but what about structuring a whole HTML page? Structuring documents is next. +That's it for lists. Next we'll give you some tests that you can use to check how well you've understood and retained the information we've provided on HTML text basics. -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Emphasis_and_importance", "Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Emphasis_and_importance", "Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/marking_up_a_letter/index.md b/files/en-us/learn_web_development/core/structuring_content/marking_up_a_letter/index.md index 96d0567a9021e4c..493ec60974c74c3 100644 --- a/files/en-us/learn_web_development/core/structuring_content/marking_up_a_letter/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/marking_up_a_letter/index.md @@ -6,7 +6,7 @@ page-type: learn-module-assessment sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Links", "Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content", "Learn_web_development/Core/Structuring_content")}} We all learn to write a letter sooner or later; it is also a useful example to test our text formatting skills. In this challenge, you'll have a letter to mark up as a test for your HTML text formatting skills, as well as hyperlinks and proper use of the HTML `` element. @@ -57,4 +57,4 @@ The following screenshot shows an example of what the letter might look like aft ![Example](letter-update.png) -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Links", "Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/mozilla_splash_page/index.md b/files/en-us/learn_web_development/core/structuring_content/mozilla_splash_page/index.md index 4807665faeb2863..5d39dd89a8be71c 100644 --- a/files/en-us/learn_web_development/core/structuring_content/mozilla_splash_page/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/mozilla_splash_page/index.md @@ -5,7 +5,7 @@ page-type: learn-module-assessment sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_video_and_audio", "Learn_web_development/Core/Structuring_content/HTML_table_basics", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video", "Learn_web_development/Core/Structuring_content/HTML_table_basics", "Learn_web_development/Core/Structuring_content")}} In this challenge, we'll test your knowledge of some of the techniques discussed in the last couple of lessons, getting you to add some images and video to a funky splash page all about Mozilla! @@ -74,4 +74,4 @@ The following screenshots show what the splash page should look like. ![A wide shot of our example splash page](wide-shot.png) -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_video_and_audio", "Learn_web_development/Core/Structuring_content/HTML_table_basics", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video", "Learn_web_development/Core/Structuring_content/HTML_table_basics", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/structuring_documents/index.md b/files/en-us/learn_web_development/core/structuring_content/structuring_documents/index.md index 106ab666f4f781d..3a7be1f677397c4 100644 --- a/files/en-us/learn_web_development/core/structuring_content/structuring_documents/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/structuring_documents/index.md @@ -5,7 +5,7 @@ page-type: tutorial-chapter sidebar: learnsidebar --- -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Lists", "Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics", "Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content")}} In addition to defining individual parts of your page (such as "a paragraph" or "an image"), {{glossary("HTML")}} also boasts a number of block level elements used to define areas of your website such as "the header", "the navigation menu", or "the main content column". This article looks into how to plan a basic website structure, and write the HTML to represent this structure. @@ -355,4 +355,4 @@ Try carrying out the above exercise for a website of your own creation. What wou At this point, you should have a better idea about how to structure a web page/site. In the next article of this module, we'll look at some advanced text techniques. -{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Lists", "Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content")}} +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics", "Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md index ffedff105ecb5da..3e5c32432c508bd 100644 --- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Advanced HTML text" -short-title: Advanced HTML text +short-title: "Test: Advanced HTML text" slug: Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content")}} + The aim of this skill test is to help you assess whether you understand how to use [lesser-known HTML elements to mark up advanced semantic features](/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features). > [!NOTE] @@ -113,3 +115,5 @@ Your finished HTML should look like this: ``` + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md index ecdc79310fd2bd1..d36bfbfdcaae8f5 100644 --- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Audio and video" -short-title: Audio and video +short-title: "Test: Audio and video" slug: Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_video_and_audio", "Learn_web_development/Core/Structuring_content/Mozilla_splash_page", "Learn_web_development/Core/Structuring_content")}} + The aim of this skill test is to help you assess whether you understand how to [embed video and audio content in HTML](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio). > [!NOTE] @@ -135,3 +137,5 @@ Your finished HTML should look like this: ``` + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_video_and_audio", "Learn_web_development/Core/Structuring_content/Mozilla_splash_page", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md index 1b826659f169523..31bb57e845c0fe5 100644 --- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Forms and buttons" -short-title: Forms and buttons +short-title: "Test: Forms and buttons" slug: Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_forms", "Learn_web_development/Core/Structuring_content/Debugging_HTML", "Learn_web_development/Core/Structuring_content")}} + The aim of this skill test is to help you assess whether you understand how [HTML forms and buttons](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms) work. > [!NOTE] @@ -451,3 +453,5 @@ Your finished HTML should look something like this: ``` + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_forms", "Learn_web_development/Core/Structuring_content/Debugging_HTML", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md index f12b4604aed9b2b..19ff6febbfc9df4 100644 --- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: HTML text basics" -short-title: HTML text basics +short-title: "Test: HTML text basics" slug: Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Lists", "Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content")}} + The aim of this skill test is to help you assess whether you understand how to mark up text in HTML to give it structure and meaning. > [!NOTE] @@ -298,3 +300,5 @@ Your finished HTML should look like this: ``` + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Lists", "Learn_web_development/Core/Structuring_content/Structuring_documents", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md index 783bbe2d483bcdc..78bd556c8d0a784 100644 --- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: HTML images" -short-title: Images +short-title: "Test: Images" slug: Learn_web_development/Core/Structuring_content/Test_your_skills/Images page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_images", "Learn_web_development/Core/Structuring_content/HTML_video_and_audio", "Learn_web_development/Core/Structuring_content")}} + The aim of this skill test is to help you assess whether you understand [images and how to embed them in HTML](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images). > [!NOTE] @@ -140,3 +142,5 @@ Your finished HTML should look like this: ``` + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_images", "Learn_web_development/Core/Structuring_content/HTML_video_and_audio", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/index.md index fc5d851a272cfaa..9816a3468a89f8d 100644 --- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/index.md @@ -1,6 +1,6 @@ --- title: "Test your skills: Structuring content with HTML" -short-title: Test your skills +short-title: "Test: HTML tests index" slug: Learn_web_development/Core/Structuring_content/Test_your_skills page-type: learn-module-assessment sidebar: learnsidebar diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md index 65c0d3e79d070e5..8fbbd15446f8332 100644 --- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md @@ -1,11 +1,13 @@ --- title: "Test your skills: Links" -short-title: Links +short-title: "Test: Links" slug: Learn_web_development/Core/Structuring_content/Test_your_skills/Links page-type: learn-module-assessment sidebar: learnsidebar --- +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}} + The aim of this skill test is to help you assess whether you understand how to [implement links in HTML](/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links). > [!NOTE] @@ -252,3 +254,5 @@ Your finished HTML should look like this: ``` + +{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Creating_links", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}} diff --git a/files/sidebars/learnsidebar.yaml b/files/sidebars/learnsidebar.yaml index 9ac73db66a88dc9..6aad37fa058cde8 100644 --- a/files/sidebars/learnsidebar.yaml +++ b/files/sidebars/learnsidebar.yaml @@ -49,28 +49,26 @@ sidebar: - /Learn_web_development/Core/Structuring_content/Headings_and_paragraphs - /Learn_web_development/Core/Structuring_content/Emphasis_and_importance - /Learn_web_development/Core/Structuring_content/Lists + - /Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics - /Learn_web_development/Core/Structuring_content/Structuring_documents - /Learn_web_development/Core/Structuring_content/Advanced_text_features + - /Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text - /Learn_web_development/Core/Structuring_content/Creating_links + - /Learn_web_development/Core/Structuring_content/Test_your_skills/Links - /Learn_web_development/Core/Structuring_content/Marking_up_a_letter - /Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content - /Learn_web_development/Core/Structuring_content/HTML_images + - /Learn_web_development/Core/Structuring_content/Test_your_skills/Images - /Learn_web_development/Core/Structuring_content/HTML_video_and_audio + - /Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video - /Learn_web_development/Core/Structuring_content/Mozilla_splash_page - /Learn_web_development/Core/Structuring_content/HTML_table_basics - /Learn_web_development/Core/Structuring_content/Table_accessibility - /Learn_web_development/Core/Structuring_content/Planet_data_table - /Learn_web_development/Core/Structuring_content/HTML_forms + - /Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons - /Learn_web_development/Core/Structuring_content/Debugging_HTML - - link: /Learn_web_development/Core/Structuring_content/Test_your_skills - details: closed - children: - - /Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics - - /Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text - - /Learn_web_development/Core/Structuring_content/Test_your_skills/Links - - /Learn_web_development/Core/Structuring_content/Test_your_skills/Images - - /Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video - - /Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons + - /Learn_web_development/Core/Structuring_content/Test_your_skills - link: /Learn_web_development/Core/Styling_basics title: CSS_styling_basics details: closed