From 555458dee8950bdd26559ba4483d3e2ecf7da55b Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Sat, 10 Sep 2022 23:51:56 -0400
Subject: [PATCH 1/7] style: run prettier on learn

---
 .../accessibility_troubleshooting/index.md    |   8 +-
 .../index.md                                  |   8 +-
 files/en-us/learn/accessibility/html/index.md |   2 +-
 .../en-us/learn/accessibility/mobile/index.md |  30 +-
 .../index.md                                  |   8 +-
 .../accessibility/wai-aria_basics/index.md    |  22 +-
 .../test_your_skills_colon__wai-aria/index.md |   8 +-
 .../common_web_layouts/index.md               |   8 +-
 .../index.md                                  |  26 +-
 .../html_features_for_accessibility/index.md  |   3 +-
 files/en-us/learn/common_questions/index.md   |   2 +-
 .../set_up_a_local_testing_server/index.md    |  52 +-
 .../using_github_pages/index.md               |  36 +-
 .../what_are_browser_developer_tools/index.md |   4 +-
 .../what_is_a_web_server/index.md             |   4 +-
 .../a_cool_looking_box/index.md               |   8 +-
 .../building_blocks/box_model_tasks/index.md  |   8 +-
 .../cascade_and_inheritance/index.md          |  16 +-
 .../building_blocks/cascade_tasks/index.md    |   8 +-
 .../index.md                                  |   8 +-
 .../fundamental_css_comprehension/index.md    |   8 +-
 .../css/building_blocks/images_tasks/index.md |   8 +-
 .../building_blocks/overflow_tasks/index.md   |   8 +-
 .../selectors/selectors_tasks/index.md        |   8 +-
 .../css/building_blocks/sizing_tasks/index.md |   8 +-
 .../building_blocks/styling_tables/index.md   |   6 +-
 .../css/building_blocks/tables_tasks/index.md |   8 +-
 .../index.md                                  |   8 +-
 .../building_blocks/the_box_model/index.md    |   2 +-
 .../building_blocks/values_and_units/index.md |  16 +-
 .../css/building_blocks/values_tasks/index.md |   8 +-
 .../writing_modes_tasks/index.md              |   8 +-
 .../css/css_layout/flexbox_skills/index.md    |   8 +-
 .../css/css_layout/floats_skills/index.md     |   8 +-
 .../fundamental_layout_comprehension/index.md |   8 +-
 .../learn/css/css_layout/grid_skills/index.md |   8 +-
 .../css/css_layout/multicol_skills/index.md   |   8 +-
 .../css/css_layout/position_skills/index.md   |   8 +-
 .../learn/css/css_layout/rwd_skills/index.md  |   8 +-
 .../styling_a_biography_page/index.md         |   8 +-
 files/en-us/learn/css/howto/css_faq/index.md  |   4 +-
 files/en-us/learn/css/index.md                |   3 +
 .../typesetting_a_homepage/index.md           |   8 +-
 .../learn/css/styling_text/web_fonts/index.md |  26 +-
 .../index.md                                  |  18 +-
 .../how_to_structure_a_web_form/index.md      | 124 ++--
 .../learn/forms/other_form_controls/index.md  |   2 +-
 .../index.md                                  |   4 +-
 .../index.md                                  |   8 +-
 .../index.md                                  |   8 +-
 .../index.md                                  |   8 +-
 .../index.md                                  |   8 +-
 .../index.md                                  |   8 +-
 .../index.md                                  |   8 +-
 .../index.md                                  |   8 +-
 .../css_basics/index.md                       |  52 +-
 .../dealing_with_files/index.md               |  24 +-
 .../html_basics/index.md                      |  18 +-
 .../getting_started_with_the_web/index.md     |   7 +
 .../javascript_basics/index.md                |  98 +--
 .../publishing_your_website/index.md          |   6 +-
 .../advanced_text_formatting/index.md         |   1 +
 .../debugging_html/index.md                   |  76 +--
 .../getting_started/index.md                  |  26 +-
 .../marking_up_a_letter/index.md              |   8 +-
 .../structuring_a_page_of_content/index.md    |   8 +-
 .../index.md                                  |   8 +-
 .../index.md                                  |   8 +-
 .../test_your_skills_colon__links/index.md    |   8 +-
 .../the_head_metadata_in_html/index.md        |  28 +-
 .../index.md                                  |   8 +-
 .../mozilla_splash_page/index.md              |   8 +-
 .../responsive_images/index.md                |   8 +-
 .../index.md                                  |   8 +-
 .../en-us/learn/html/tables/advanced/index.md |  20 +-
 files/en-us/learn/html/tables/basics/index.md |  34 +-
 .../tables/structuring_planet_data/index.md   |   8 +-
 files/en-us/learn/index.md                    |  20 +-
 .../asynchronous/introducing_workers/index.md |   2 +-
 .../javascript/asynchronous/promises/index.md |   2 +-
 .../sequencing_animations/index.md            |   8 +-
 .../build_your_own_function/index.md          | 176 ++---
 .../building_blocks/events/index.md           |   4 +-
 .../building_blocks/functions/index.md        | 110 +--
 .../building_blocks/image_gallery/index.md    |   8 +-
 .../building_blocks/return_values/index.md    |  74 +-
 .../index.md                                  |   8 +-
 .../test_your_skills_colon__events/index.md   |   8 +-
 .../index.md                                  |   8 +-
 .../test_your_skills_colon__loops/index.md    |   8 +-
 .../client-side_storage/index.md              | 430 ++++++------
 .../drawing_graphics/index.md                 | 500 +++++++-------
 .../manipulating_documents/index.md           | 100 +--
 .../third_party_apis/index.md                 |  96 +--
 .../video_and_audio_apis/index.md             | 256 +++----
 .../first_steps/a_first_splash/index.md       |  54 +-
 .../javascript/first_steps/arrays/index.md    |  90 +--
 .../javascript/first_steps/math/index.md      |  56 +-
 .../silly_story_generator/index.md            |  28 +-
 .../javascript/first_steps/strings/index.md   |  72 +-
 .../test_your_skills_colon__arrays/index.md   |  10 +-
 .../test_your_skills_colon__math/index.md     |   8 +-
 .../test_your_skills_colon__strings/index.md  |  14 +-
 .../index.md                                  |   8 +-
 .../first_steps/what_went_wrong/index.md      |  64 +-
 .../adding_bouncing_balls_features/index.md   |  34 +-
 .../objects/object_building_practice/index.md |  18 +-
 .../test_your_skills_colon__json/index.md     |   8 +-
 .../index.md                                  |   8 +-
 .../index.md                                  |   8 +-
 .../first_steps/getting_started/index.md      |   2 +-
 files/en-us/learn/performance/css/index.md    |   4 +-
 .../learn/performance/multimedia/index.md     |   2 +-
 .../web_performance_basics/index.md           |   1 -
 .../apache_configuration_htaccess/index.md    |  21 +-
 .../server-side/django/admin_site/index.md    |   2 +-
 .../server-side/django/deployment/index.md    |  82 +--
 .../django/development_environment/index.md   |  15 +-
 .../django/django_assessment_blog/index.md    |  46 +-
 .../learn/server-side/django/forms/index.md   |  12 +-
 .../server-side/django/home_page/index.md     |   2 +-
 .../django/skeleton_website/index.md          |  18 +-
 .../express_nodejs/deployment/index.md        |  62 +-
 .../development_environment/index.md          | 178 ++---
 .../displaying_data/author_list_page/index.md |   2 +-
 .../date_formatting_using_moment/index.md     |   6 +-
 .../flow_control_using_async/index.md         |   2 +-
 .../server-side/express_nodejs/forms/index.md |   2 +-
 .../express_nodejs/introduction/index.md      |  46 +-
 .../express_nodejs/mongoose/index.md          |  56 +-
 .../express_nodejs/skeleton_website/index.md  |  34 +-
 .../client-server_overview/index.md           |   2 +-
 .../first_steps/web_frameworks/index.md       |  12 +-
 .../angular_getting_started/index.md          |   4 +-
 .../ember_conditional_footer/index.md         | 164 ++---
 .../ember_getting_started/index.md            |  68 +-
 .../ember_structure_componentization/index.md | 154 ++---
 .../react_components/index.md                 |   2 +-
 .../react_interactivity_events_state/index.md |   2 +-
 .../react_todo_list_beginning/index.md        |   4 +-
 .../svelte_components/index.md                | 376 +++++-----
 .../svelte_deployment_next/index.md           | 134 ++--
 .../index.md                                  | 536 +++++++--------
 .../svelte_stores/index.md                    | 460 ++++++-------
 .../svelte_todo_list_beginning/index.md       |  40 +-
 .../svelte_typescript/index.md                | 586 ++++++++--------
 .../svelte_variables_props/index.md           | 388 +++++------
 .../vue_conditional_rendering/index.md        |  20 +-
 .../vue_first_component/index.md              |  30 +-
 .../vue_getting_started/index.md              |  28 +-
 .../vue_methods_events_models/index.md        | 344 +++++-----
 .../vue_refs_focus_management/index.md        |  12 +-
 .../vue_rendering_lists/index.md              |  82 +--
 .../accessibility/index.md                    |  18 +-
 .../automated_testing/index.md                | 412 +++++------
 .../feature_detection/index.md                |  86 +--
 .../html_and_css/index.md                     |  14 +-
 .../cross_browser_testing/javascript/index.md |  28 +-
 .../testing_strategies/index.md               |  10 +-
 .../your_own_automation_environment/index.md  | 642 +++++++++---------
 .../deployment/index.md                       | 172 ++---
 .../introducing_complete_toolchain/index.md   | 186 ++---
 .../overview/index.md                         |  10 +-
 163 files changed, 4536 insertions(+), 4527 deletions(-)

diff --git a/files/en-us/learn/accessibility/accessibility_troubleshooting/index.md b/files/en-us/learn/accessibility/accessibility_troubleshooting/index.md
index e292253fd145fb7..0f5e51af3d4c5f5 100644
--- a/files/en-us/learn/accessibility/accessibility_troubleshooting/index.md
+++ b/files/en-us/learn/accessibility/accessibility_troubleshooting/index.md
@@ -99,10 +99,10 @@ 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/).
 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 Accessibility troubleshooting".
-    - 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.
+   - A descriptive title such as "Assessment wanted for Accessibility troubleshooting".
+   - 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.
 
 {{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}
 
diff --git a/files/en-us/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md b/files/en-us/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md
index 9000bcb8e6cd493..8a122afd048e6f1 100644
--- a/files/en-us/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md
+++ b/files/en-us/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md
@@ -70,7 +70,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 CSS accessibility 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for CSS accessibility 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/accessibility/html/index.md b/files/en-us/learn/accessibility/html/index.md
index 70c43b3d5315434..838865aca26f15d 100644
--- a/files/en-us/learn/accessibility/html/index.md
+++ b/files/en-us/learn/accessibility/html/index.md
@@ -488,7 +488,7 @@ This highlights the importance of not only using meaningful file names in case s
 
 Note that the contents of the `alt` attribute should always provide a direct representation of the image and what it conveys visually. The alt should be brief and concise and include all the information conveyed in the image that is not duplicated in the surrounding text.
 
-The content of the `alt` attribute for a single image differs based on the context. For example, if the photo of Fluffy is an avatar next to a review for Yuckymeat dog food, `alt="Fluffy"` is appropriate. If the photo is part of Fluffy's adoption page for the animal rescue society, information conveyed in the image that is relevant for a prospective dog parent that is not duplicated in the surrounding text should be included. A longer description, such as `alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth."` is appropriate. As the surrounding text likely has Fluffy's size and breed, that is not included in the `alt`.  However, as the dog's biography likely doesn't include hair length, colors, or toy preferences, which the potential parent needs to know, it is included. Is the image outdoors, or does Fluffy have a red collar with a blue leash? Not important in terms of adopting the pet and therefore not included. All information image conveys that a sited user can access and is relevant to the context is what needs to be conveyed; nothing more. Keep it short, precise, and useful.
+The content of the `alt` attribute for a single image differs based on the context. For example, if the photo of Fluffy is an avatar next to a review for Yuckymeat dog food, `alt="Fluffy"` is appropriate. If the photo is part of Fluffy's adoption page for the animal rescue society, information conveyed in the image that is relevant for a prospective dog parent that is not duplicated in the surrounding text should be included. A longer description, such as `alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth."` is appropriate. As the surrounding text likely has Fluffy's size and breed, that is not included in the `alt`. However, as the dog's biography likely doesn't include hair length, colors, or toy preferences, which the potential parent needs to know, it is included. Is the image outdoors, or does Fluffy have a red collar with a blue leash? Not important in terms of adopting the pet and therefore not included. All information image conveys that a sited user can access and is relevant to the context is what needs to be conveyed; nothing more. Keep it short, precise, and useful.
 
 Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not seen the image before. If the ball is Fluffy's favorite toy or if the sited user can't know that from the image, then don't include it.
 
diff --git a/files/en-us/learn/accessibility/mobile/index.md b/files/en-us/learn/accessibility/mobile/index.md
index b3f89f6ae357e0a..4dd75faf2653f5e 100644
--- a/files/en-us/learn/accessibility/mobile/index.md
+++ b/files/en-us/learn/accessibility/mobile/index.md
@@ -114,9 +114,9 @@ For example, with TalkBack turned on:
 2. Activate the URL bar.
 3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
 
-    - Select the URL bar by swiping left/right till you get to it, and then double-tapping.
-    - Hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. Repeat for each character.
-    - Once you've finished, find the Enter key and press it.
+   - Select the URL bar by swiping left/right till you get to it, and then double-tapping.
+   - Hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. Repeat for each character.
+   - Once you've finished, find the Enter key and press it.
 
 4. Swipe left and right to move between different items on the page.
 5. Swipe up and right with a smooth motion to enter the local content menu.
@@ -155,8 +155,8 @@ When VoiceOver is turned on, you have a navigation feature called the Rotor avai
 1. Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options.
 2. Once you've found the option you want:
 
-    - Release your fingers to select it.
-    - If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.
+   - Release your fingers to select it.
+   - If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.
 
 The options available under the Rotor are context-sensitive — they will differ depending on what app or view you are in (see below for an example).
 
@@ -168,20 +168,20 @@ Let's have a go at web browsing with VoiceOver:
 2. Activate the URL bar.
 3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
 
-    - Select the URL bar by swiping left/right until you get to it, and then double-tapping.
-    - For each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. Double-tap to type it.
-    - Once you've finished, find the Enter key and press it.
+   - Select the URL bar by swiping left/right until you get to it, and then double-tapping.
+   - For each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. Double-tap to type it.
+   - Once you've finished, find the Enter key and press it.
 
 4. Swipe left and right to move between items on the page. You can double-tap an item to select it (e.g., follow a link).
 5. By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate.
 6. Now turn two fingers around the screen like a dial to show the rotor and move between its options. Here are a few examples of the options available:
 
-    - _Speaking Rate_: Change the speaking rate.
-    - _Containers_: Move between different semantic containers on the page.
-    - _Headings_: Move between headings on the page.
-    - _Links_: Move between links on the page.
-    - _Form Controls_: Move between form controls on the page.
-    - _Language_: Move between different translations, if they are available.
+   - _Speaking Rate_: Change the speaking rate.
+   - _Containers_: Move between different semantic containers on the page.
+   - _Headings_: Move between headings on the page.
+   - _Links_: Move between links on the page.
+   - _Form Controls_: Move between form controls on the page.
+   - _Language_: Move between different translations, if they are available.
 
 7. Select _Headings_. Now you'll be able to swipe up and down to move between headings on the page.
 
@@ -232,7 +232,7 @@ In particular, the most common problems that need to be addressed for mobile are
 
 - Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies such as [media queries](/en-US/docs/Web/CSS/Media_Queries), [viewport](/en-US/docs/Web/HTML/Viewport_meta_tag), and [flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
 - Conserving image sizes downloaded. In general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. Therefore, it is wise to serve smaller images to narrow screen devices as appropriate. You can handle this using [responsive image techniques](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
-- Thinking about high resolutions. Many mobile devices have high-resolution screens, and therefore need higher-resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers today. SVG has a small file size and will stay sharp regardless of whatever size is being displayed  (see [Adding vector graphics to the web](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) for more details).
+- Thinking about high resolutions. Many mobile devices have high-resolution screens, and therefore need higher-resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers today. SVG has a small file size and will stay sharp regardless of whatever size is being displayed (see [Adding vector graphics to the web](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) for more details).
 
 > **Note:** We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links).
 
diff --git a/files/en-us/learn/accessibility/test_your_skills_colon__html_accessibility/index.md b/files/en-us/learn/accessibility/test_your_skills_colon__html_accessibility/index.md
index a2a74c6316ace46..2de80d1f3e33d7c 100644
--- a/files/en-us/learn/accessibility/test_your_skills_colon__html_accessibility/index.md
+++ b/files/en-us/learn/accessibility/test_your_skills_colon__html_accessibility/index.md
@@ -87,7 +87,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 HTML accessibility 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for HTML accessibility 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/accessibility/wai-aria_basics/index.md b/files/en-us/learn/accessibility/wai-aria_basics/index.md
index 01c400846d1bb16..93d1eb82896ecfd 100644
--- a/files/en-us/learn/accessibility/wai-aria_basics/index.md
+++ b/files/en-us/learn/accessibility/wai-aria_basics/index.md
@@ -287,25 +287,25 @@ We could go further with our ARIA usage, and provide some more validation help.
 2. Open them both in a text editor and have a look at how the code works.
 3. First of all, add a paragraph just above the opening `<form>` tag, like the one below, and mark both the form `<label>`s with an asterisk. This is normally how we mark required fields for sighted users.
 
-    ```html
-    <p>Fields marked with an asterisk (*) are required.</p>
-    ```
+   ```html
+   <p>Fields marked with an asterisk (*) are required.</p>
+   ```
 
 4. This makes visual sense, but it isn't as easy to understand for screen reader users. Fortunately, WAI-ARIA provides the [`aria-required`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required) attribute to give screen readers hints that they should tell users that form inputs need to be filled in. Update the `<input>` elements like so:
 
-    ```html
-    <input type="text" name="name" id="name" aria-required="true">
+   ```html
+   <input type="text" name="name" id="name" aria-required="true">
 
-    <input type="number" name="age" id="age" aria-required="true">
-    ```
+   <input type="number" name="age" id="age" aria-required="true">
+   ```
 
 5. If you save the example now and test it with a screen reader, you should hear something like "Enter your name star, required, edit text".
 6. It might also be useful if we give screen reader users and sighted users an idea of what the age value should be. This is often presented as a tooltip or placeholder inside the form field. WAI-ARIA does include [`aria-valuemin`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) and [`aria-valuemax`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) properties to specify min and max values, and screen readers support the native `min` and `max` attributes. Another well-supported feature is the HTML `placeholder` attribute, which can contain a message that is shown in the input when no value is entered and is read out by a few screen readers. Update your number input like this:
 
-    ```html
-    <label for="age">Your age:</label>
-    <input type="number" name="age" id="age" placeholder="Enter 1 to 150" required aria-required="true">
-    ```
+   ```html
+   <label for="age">Your age:</label>
+   <input type="number" name="age" id="age" placeholder="Enter 1 to 150" required aria-required="true">
+   ```
 
 Always include a {{HTMLelement('label')}} for every input. While some screen readers announce the placeholder text, most do not. Acceptable substitutions for providing form controls with an accessible name include [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) and [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby). But the `<label>` element with a `for` attribute is the preferred method as it provides usability for all users, including mouse users.
 
diff --git a/files/en-us/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md b/files/en-us/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md
index 86fec0c4ad59e69..45b70fc42741c8b 100644
--- a/files/en-us/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md
+++ b/files/en-us/learn/accessibility/wai-aria_basics/test_your_skills_colon__wai-aria/index.md
@@ -64,7 +64,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 WAI-ARIA 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for WAI-ARIA 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/common_questions/common_web_layouts/index.md b/files/en-us/learn/common_questions/common_web_layouts/index.md
index 975e924d9795597..efbfb8f340c743d 100644
--- a/files/en-us/learn/common_questions/common_web_layouts/index.md
+++ b/files/en-us/learn/common_questions/common_web_layouts/index.md
@@ -81,7 +81,7 @@ Let's study some more concrete examples taken from well-known websites.
 
 **[Invision application](https://www.invisionapp.com/)**. A typical one-column layout providing all the information linearly on one page.
 
-![Example of a 1 column layout in the wild](screenshot-product.jpg)        ![1 column layout with header, main content, a stack of aside contents and a footer](screenshot-product-overlay.jpg)
+![Example of a 1 column layout in the wild](screenshot-product.jpg) ![1 column layout with header, main content, a stack of aside contents and a footer](screenshot-product-overlay.jpg)
 
 Quite straightforward. Just remember, many people will still browse your site from desktops, so make your content usable/readable there as well.
 
@@ -89,7 +89,7 @@ Quite straightforward. Just remember, many people will still browse your site fr
 
 **[Abduzeedo](https://abduzeedo.com/typography-mania-261)**, a simple blog layout. Blogs usually have two columns, a fat one for the main content and a thin one for stuff on the side (like widgets, secondary navigation levels, and ads).
 
-![Example of a 2 column layout for a blog](screenshot-blog.jpg)        ![A 2 column layout with the main content on the left column](screenshot-blog-overlay.jpg)
+![Example of a 2 column layout for a blog](screenshot-blog.jpg) ![A 2 column layout with the main content on the left column](screenshot-blog-overlay.jpg)
 
 In this example, look at the image (B1) right underneath the header. It's related to the main content, but the main content makes sense without it, so you could think of the image either as main content or as side content. It doesn't really matter. What does matter is, if you put something right under the header, it should either be main content or _directly related_ to the main content.
 
@@ -97,7 +97,7 @@ In this example, look at the image (B1) right underneath the header. It's relate
 
 **[MICA](https://www.mica.edu/about-mica/)**. This is a bit trickier. It looks like a three-column layout:
 
-![Example of a false 3 columns layout](screenshot-education.jpg)        ![It looks like a 3 columns layout but actually, the aside content is floating around.](screenshot-education-overlay.jpg)
+![Example of a false 3 columns layout](screenshot-education.jpg) ![It looks like a 3 columns layout but actually, the aside content is floating around.](screenshot-education-overlay.jpg)
 
 But it's not! B1 and B2 float around the main content. Remember that word "float"--it will ring a bell when you start learning about {{Glossary("CSS")}}.
 
@@ -109,7 +109,7 @@ This is a good example of a classic layout supporting some design creativity. Si
 
 **The Opera de Paris**.
 
-![An example of a tricky layout.](screenshot-opera.jpg)        ![This is a 2 column layout but the header is overlapping the main content.](screenshot-opera-overlay.jpg)
+![An example of a tricky layout.](screenshot-opera.jpg) ![This is a 2 column layout but the header is overlapping the main content.](screenshot-opera-overlay.jpg)
 
 Basically a two-column layout, but you'll notice many tweaks here and there that visually break up the layout. Especially, the header overlaps the image of the main content. The way the curve of the header's menu ties in with the curve at the bottom of the image, the header and main content look like one thing even though they're technically completely different. The Opera example looks more complex than the MICA example, but it's actually easier to implement (all right, "easy" _is_ a relative concept).
 
diff --git a/files/en-us/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md b/files/en-us/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md
index 981028e51737c9c..13c253a01f3a9f6 100644
--- a/files/en-us/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md
+++ b/files/en-us/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md
@@ -23,8 +23,8 @@ To use Google's tools for your own site or app, you need to create a new project
 2. If you've not created a project before, you'll need to select whether you want to receive email updates or not, agree to the Terms of Service, and then you should be able to continue.
 3. Enter a name for the project, edit your project ID and note it down. For this tutorial, the following values are used:
 
-    - Project Name: _GAE Sample Site_
-    - Project ID: _gaesamplesite_
+   - Project Name: _GAE Sample Site_
+   - Project ID: _gaesamplesite_
 
 4. Click the _Create_ button to create your project.
 
@@ -35,8 +35,8 @@ Each Cloud Platform project can contain one App Engine application. Let's prepar
 1. We'll need a sample application to publish. If you've not got one to use, download and unzip this [sample app](https://gaesamplesite.appspot.com/downloads.html).
 2. Have a look at the sample application's structure — the `website` folder contains your website content and `app.yaml` is your application configuration file.
 
-    - Your website content must go inside the `website` folder, and its landing page must be called `index.html`, but apart from that it can take whatever form you like.
-    - The `app.yaml` file is a configuration file that tells App Engine how to map URLs to your static files. You don't need to edit it.
+   - Your website content must go inside the `website` folder, and its landing page must be called `index.html`, but apart from that it can take whatever form you like.
+   - The `app.yaml` file is a configuration file that tells App Engine how to map URLs to your static files. You don't need to edit it.
 
 ## Publishing your application
 
@@ -46,21 +46,21 @@ Now that we've got our project made and sample app files collected together, let
 2. Drag and drop the `sample-app` folder into the left pane of the code editor.
 3. Run the following in the command line to select your project:
 
-    ```bash
-    gcloud config set project gaesamplesite
-    ```
+   ```bash
+   gcloud config set project gaesamplesite
+   ```
 
 4. Then run the following command to go to your app's directory:
 
-    ```bash
-    cd sample-app
-    ```
+   ```bash
+   cd sample-app
+   ```
 
 5. You are now ready to deploy your application, i.e. upload your app to App Engine:
 
-    ```bash
-    gcloud app deploy
-    ```
+   ```bash
+   gcloud app deploy
+   ```
 
 6. Enter a number to choose the region where you want your application located.
 7. Enter `Y` to confirm.
diff --git a/files/en-us/learn/common_questions/html_features_for_accessibility/index.md b/files/en-us/learn/common_questions/html_features_for_accessibility/index.md
index ef99c53553c4bb7..dd8334460a21d9d 100644
--- a/files/en-us/learn/common_questions/html_features_for_accessibility/index.md
+++ b/files/en-us/learn/common_questions/html_features_for_accessibility/index.md
@@ -8,7 +8,6 @@ tags:
   - Learn
 ---
 
-
 The following content describes specific features of HTML that should be used to make a web page more accessible to people with different disabilities.
 
 ## Link text
@@ -64,7 +63,7 @@ The `alt` attribute for the same content may vary depending on the context. In t
 
 ## ARIA role attribute
 
-By default, all semantic elements in HTML have a `role`; for example, `<input type="radio">` has the `radio` role. Non-semantic elements in HTML do not have a role. ARIA roles can be used to describe elements that don't natively exist in HTML, such as a [`tablist`](/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role) widget. Roles are also helpful for newer elements that exist but don't yet have full browser support. For example, when using SVG images, add  `role="img"` to the opening tag, as there is an [SVG VoiceOver bug](https://bugs.webkit.org/show_bug.cgi?id=216364) whereby VoiceOver does not correctly announce SVG images.
+By default, all semantic elements in HTML have a `role`; for example, `<input type="radio">` has the `radio` role. Non-semantic elements in HTML do not have a role. ARIA roles can be used to describe elements that don't natively exist in HTML, such as a [`tablist`](/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role) widget. Roles are also helpful for newer elements that exist but don't yet have full browser support. For example, when using SVG images, add `role="img"` to the opening tag, as there is an [SVG VoiceOver bug](https://bugs.webkit.org/show_bug.cgi?id=216364) whereby VoiceOver does not correctly announce SVG images.
 
 ```html
  <img src="mdn.svg" alt="MDN logo" role="img">
diff --git a/files/en-us/learn/common_questions/index.md b/files/en-us/learn/common_questions/index.md
index 1533957df17002f..8db21b9bbff2997 100644
--- a/files/en-us/learn/common_questions/index.md
+++ b/files/en-us/learn/common_questions/index.md
@@ -23,7 +23,7 @@ This section covers questions relating to general knowledge of the web ecosystem
   - : The **Internet** is the backbone of the web, the technical infrastructure that makes the web possible.
     At its most basic, the internet is a massive network of computers communicating with each other. This article
     discusses how it works, in broad terms.
-- [What is the difference between   webpage, website, web server, and search engine?](/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines)
+- [What is the difference between webpage, website, web server, and search engine?](/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines)
   - : In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These
     terms are often a source of confusion for newcomers to the web, or are used incorrectly. Let's discover what they
     actually mean!
diff --git a/files/en-us/learn/common_questions/set_up_a_local_testing_server/index.md b/files/en-us/learn/common_questions/set_up_a_local_testing_server/index.md
index 57267b44e99803e..bf39f6e596a2219 100644
--- a/files/en-us/learn/common_questions/set_up_a_local_testing_server/index.md
+++ b/files/en-us/learn/common_questions/set_up_a_local_testing_server/index.md
@@ -64,41 +64,41 @@ To do this:
 
 1. Install Python. If you are using Linux or macOS, it should be available on your system already. If you are a Windows user, you can get an installer from the Python homepage and follow the instructions to install it:
 
-    - Go to [python.org](https://www.python.org/)
-    - Under the Download section, click the link for Python "3.xxx".
-    - At the bottom of the page, click the _Windows Installer_ link to download the installer file.
-    - When it has downloaded, run it.
-    - On the first installer page, make sure you check the "Add Python 3.xxx to PATH" checkbox.
-    - Click _Install_, then click _Close_ when the installation has finished.
+   - Go to [python.org](https://www.python.org/)
+   - Under the Download section, click the link for Python "3.xxx".
+   - At the bottom of the page, click the _Windows Installer_ link to download the installer file.
+   - When it has downloaded, run it.
+   - On the first installer page, make sure you check the "Add Python 3.xxx to PATH" checkbox.
+   - Click _Install_, then click _Close_ when the installation has finished.
 
 2. Open your command prompt (Windows) / terminal (macOS/ Linux). To check if Python is installed, enter the following command:
 
-    ```bash
-    python -V
-    # If the above fails, try:
-    python3 -V
-    # Or, if the "py" command is available, try:
-    py -V
-    ```
+   ```bash
+   python -V
+   # If the above fails, try:
+   python3 -V
+   # Or, if the "py" command is available, try:
+   py -V
+   ```
 
 3. This should return a version number. If this is OK, navigate to the directory that your example is inside, using the `cd` command.
 
-    ```bash
-    # include the directory name to enter it, for example
-    cd Desktop
-    # use two dots to jump up one directory level if you need to
-    cd ..
-    ```
+   ```bash
+   # include the directory name to enter it, for example
+   cd Desktop
+   # use two dots to jump up one directory level if you need to
+   cd ..
+   ```
 
 4. Enter the command to start up the server in that directory:
 
-    ```bash
-    # If Python version returned above is 3.X
-    # On Windows, try "python -m http.server" or "py -3 -m http.server"
-    python3 -m http.server
-    # If Python version returned above is 2.X
-    python -m SimpleHTTPServer
-    ```
+   ```bash
+   # If Python version returned above is 3.X
+   # On Windows, try "python -m http.server" or "py -3 -m http.server"
+   python3 -m http.server
+   # If Python version returned above is 2.X
+   python -m SimpleHTTPServer
+   ```
 
 5. By default, this will run the contents of the directory on a local web server, on port 8000. You can go to this server by going to the URL `localhost:8000` in your web browser. Here you'll see the contents of the directory listed — click the HTML file you want to run.
 
diff --git a/files/en-us/learn/common_questions/using_github_pages/index.md b/files/en-us/learn/common_questions/using_github_pages/index.md
index 54c7da1afa23b10..659a4359a7fc850 100644
--- a/files/en-us/learn/common_questions/using_github_pages/index.md
+++ b/files/en-us/learn/common_questions/using_github_pages/index.md
@@ -31,15 +31,15 @@ The other thing you need to do before moving on is to initialise your code direc
 
 1. Point the command line to your `test-site` directory (or whatever you called the directory containing your website). For this, use the `cd` command (i.e. "**c**hange **d**irectory"). Here's what you'd type if you've put your website in a directory called `test-site` on your desktop:
 
-    ```bash
-    cd Desktop/test-site
-    ```
+   ```bash
+   cd Desktop/test-site
+   ```
 
 2. When the command line is pointing inside your website directory, type the following command, which tells the `git` tool to turn the directory into a git repository:
 
-    ```bash
-    git init
-    ```
+   ```bash
+   git init
+   ```
 
 #### An aside on command line interfaces
 
@@ -62,30 +62,30 @@ This may seem a bit scary at first, but don't worry — you'll soon get the hang
 1. Next, you need to create a new repo for your files to go in. Click Plus (+) in the top right of the GitHub homepage, then choose _New Repository_.
 2. On this page, in the _Repository name_ box, enter a name for your code repository, for example _my-repository_.
 3. Also fill in a description to say what your repository is going to contain. Your screen should look like this:
-    ![New repository page opened in browser, repository owner input and the repository name are filled, same for the optional description input. The public check-box is selected, the private check-box is not, same goes for the initialize this repository with a readme.](create-new-repo.png)
+   ![New repository page opened in browser, repository owner input and the repository name are filled, same for the optional description input. The public check-box is selected, the private check-box is not, same goes for the initialize this repository with a readme.](create-new-repo.png)
 4. Click _Create repository_; this should bring you to the following page:
-    ![The repository page is opened in browser, below the github header composed of search bar and navigation links to the repository's pull request, issues and gist. Next to the navigation links, a bell notification and a link to your account. Below, the name of the owner's repository follow by a slash with the repository's name. Below a horizontal navigation bar composed of different tabs relating to your repository, the code tab selected displaying a documentation explaining how to create a repository or how to push from using command line.](github-repo.png)
+   ![The repository page is opened in browser, below the github header composed of search bar and navigation links to the repository's pull request, issues and gist. Next to the navigation links, a bell notification and a link to your account. Below, the name of the owner's repository follow by a slash with the repository's name. Below a horizontal navigation bar composed of different tabs relating to your repository, the code tab selected displaying a documentation explaining how to create a repository or how to push from using command line.](github-repo.png)
 
 ### Uploading your files to GitHub
 
 1. On the current page, you are interested in the section _…or push an existing repository from the command line_. You should see two lines of code listed in this section. Copy the whole of the first line, paste it into the command line, and press Enter. The command should look something like this:
 
-    ```bash
-    git remote add origin https://github.com/chrisdavidmills/my-repository.git
-    ```
+   ```bash
+   git remote add origin https://github.com/chrisdavidmills/my-repository.git
+   ```
 
 2. Next, type the following two commands, pressing Enter after each one. These prepare the code for uploading to GitHub, and ask Git to manage these files.
 
-    ```bash
-    git add --all
-    git commit -m 'adding my files to my repository'
-    ```
+   ```bash
+   git add --all
+   git commit -m 'adding my files to my repository'
+   ```
 
 3. Finally, push the code up to GitHub by going to the GitHub web page you're on and entering into the terminal the second of the two commands we saw the _…or push an existing repository from the command line_ section:
 
-    ```bash
-    git push -u origin main
-    ```
+   ```bash
+   git push -u origin main
+   ```
 
 4. Now you need to turn GitHub pages on for your repository. To do this, from the homepage of your repository choose _Settings_, then select _Pages_ from the sidebar on the left. Underneath _Source_, choose the "main" branch. The page should refresh.
 5. Go to the GitHub Pages section again, and you should see a line of the form "Your site is ready to be published at `https://xxxxxx`."
diff --git a/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md b/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md
index 70718cf58be3bf4..d16ca60f45a20e2 100644
--- a/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md
+++ b/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md
@@ -109,7 +109,7 @@ You'll notice a number of clickable tabs at the top of the CSS Viewer:
 Find out more about the Inspector in different browsers:
 
 - [Firefox Page inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html)
-- [IE DOM Explorer](https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/samples/dn255008(v=vs.85))
+- [IE DOM Explorer](<https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/samples/dn255008(v=vs.85)>)
 - [Chrome DOM inspector](https://developer.chrome.com/docs/devtools/dom/) (Opera's inspector works the same as this)
 - [Safari DOM inspector and style explorer](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1)
 
@@ -221,7 +221,7 @@ You'll start to see the kind of errors that the browser returns. Often these err
 Find out more about the JavaScript console in different browsers:
 
 - [Firefox Web Console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)
-- [IE JavaScript console](https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/samples/dn255006(v=vs.85))
+- [IE JavaScript console](<https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/samples/dn255006(v=vs.85)>)
 - [Chrome JavaScript Console](https://developer.chrome.com/docs/devtools/console/) (Opera's inspector works the same as this)
 - [Safari Console](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1)
 
diff --git a/files/en-us/learn/common_questions/what_is_a_web_server/index.md b/files/en-us/learn/common_questions/what_is_a_web_server/index.md
index 8135d373200d3e0..410295ebf83e6c6 100644
--- a/files/en-us/learn/common_questions/what_is_a_web_server/index.md
+++ b/files/en-us/learn/common_questions/what_is_a_web_server/index.md
@@ -95,8 +95,8 @@ On a web server, the HTTP server is responsible for processing and answering inc
 1. Upon receiving a request, an HTTP server first checks if the requested URL matches an existing file.
 2. If so, the web server sends the file content back to the browser. If not, an application server builds the necessary file.
 3. If neither process is possible, the web server returns an error message to the browser, most commonly {{HTTPStatus("404", "404 Not Found")}}.
-    The 404 error is so common that some web designers devote considerable time and effort to designing 404 error pages.
-    [![The MDN 404 page as an example of such error page](mdn-404.jpg)](/en-US/docs/Web/HTTP/Status/404)
+   The 404 error is so common that some web designers devote considerable time and effort to designing 404 error pages.
+   [![The MDN 404 page as an example of such error page](mdn-404.jpg)](/en-US/docs/Web/HTTP/Status/404)
 
 ### Static vs. dynamic content
 
diff --git a/files/en-us/learn/css/building_blocks/a_cool_looking_box/index.md b/files/en-us/learn/css/building_blocks/a_cool_looking_box/index.md
index 3fa63a6a7784e23..e6be5d84043decb 100644
--- a/files/en-us/learn/css/building_blocks/a_cool_looking_box/index.md
+++ b/files/en-us/learn/css/building_blocks/a_cool_looking_box/index.md
@@ -88,10 +88,10 @@ 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/).
 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 A cool-looking box".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for A cool-looking box".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
 
 {{PreviousMenu("Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper", "Learn/CSS/Building_blocks")}}
 
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 6b55b00a4db6de4..6e8a042eae82361 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
@@ -81,7 +81,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 the box model skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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/cascade_and_inheritance/index.md b/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md
index 0068f36f72e0d44..918d97043521b74 100644
--- a/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/en-us/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -193,13 +193,13 @@ The negation ([`:not()`](/en-US/docs/Web/CSS/:not)) and the matches-any ([`:is()
 
 The following table shows a few isolated examples to get you in the mood. Try going through these, and make sure you understand why they have the specificity that we have given them. We've not covered selectors in detail yet, but you can find details of each selector on the MDN [selectors reference](/en-US/docs/Web/CSS/CSS_Selectors).
 
-| Selector                                                                                | Identifiers | Classes | Elements | Total specificity |
-| --------------------------------------------------------------------------------------- | -------- | ---- | ---- | ----------------- |
-| `h1`                                                                                    | 0        | 0    | 1    | 0-0-1              |
-| `h1 + p::first-letter`                                                                  |  0        | 0    | 3    | 0-0-3              |
-| `li > a[href*="en-US"] > .inline-warning`                                               |  0        | 2    | 2    | 0-2-2              |
-| `#identifier`                                                                           | 1        | 0    | 0    | 1-0-0              |
-| `button:not(#mainBtn, .cta`)                                                                           | 1        | 0    | 1    | 1-0-1              |
+| Selector                                  | Identifiers | Classes | Elements | Total specificity |
+| ----------------------------------------- | ----------- | ------- | -------- | ----------------- |
+| `h1`                                      | 0           | 0       | 1        | 0-0-1             |
+| `h1 + p::first-letter`                    | 0           | 0       | 3        | 0-0-3             |
+| `li > a[href*="en-US"] > .inline-warning` | 0           | 2       | 2        | 0-2-2             |
+| `#identifier`                             | 1           | 0       | 0        | 1-0-0             |
+| `button:not(#mainBtn, .cta`)              | 1           | 0       | 1        | 1-0-1             |
 
 Before we move on, let's look at an example in action.
 
@@ -223,7 +223,7 @@ Inline styles, that is, the style declaration inside a {{htmlattrxref("style")}}
 
 There is a special piece of CSS that you can use to overrule all of the above calculations, even inline styles - the `!important` flag. However, you should be very careful while using it. This flag is used to make an individual property and value pair the most specific rule, thereby overriding the normal rules of the cascade, including normal inline styles.
 
-> **Note:** It is useful to know that the `!important` flag exists so that you know what it is when you come across it in other people's code. **However, we strongly recommend that you never use it unless you absolutely have to.**  The `!important` flag changes the way the cascade normally works, so it can make debugging CSS problems really hard to work out, especially in a large stylesheet.
+> **Note:** It is useful to know that the `!important` flag exists so that you know what it is when you come across it in other people's code. **However, we strongly recommend that you never use it unless you absolutely have to.** The `!important` flag changes the way the cascade normally works, so it can make debugging CSS problems really hard to work out, especially in a large stylesheet.
 
 Take a look at this example where we have two paragraphs, one of which has an ID.
 
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 af872ecd24e6803..72725aa590df06d 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
@@ -58,7 +58,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 the cascade skill test".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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/creating_fancy_letterheaded_paper/index.md b/files/en-us/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
index 099fa57b4b062ca..ced41d7cd86e14d 100644
--- a/files/en-us/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
+++ b/files/en-us/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md
@@ -92,10 +92,10 @@ 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/).
 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 Creating fancy letterheaded paper".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for Creating fancy letterheaded paper".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
 
 {{PreviousMenuNext("Learn/CSS/Building_blocks/Fundamental_CSS_comprehension", "Learn/CSS/Building_blocks/A_cool_looking_box", "Learn/CSS/Building_blocks")}}
 
diff --git a/files/en-us/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/en-us/learn/css/building_blocks/fundamental_css_comprehension/index.md
index 2ef3a41c825ff7f..813cc99582c7649 100644
--- a/files/en-us/learn/css/building_blocks/fundamental_css_comprehension/index.md
+++ b/files/en-us/learn/css/building_blocks/fundamental_css_comprehension/index.md
@@ -105,10 +105,10 @@ 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/).
 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 Fundamental CSS comprehension".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for Fundamental CSS comprehension".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
 
 {{PreviousMenuNext("Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper", "Learn/CSS/Building_blocks")}}
 
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 c3c1e197d1d9f50..25036aad4339e8a 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
@@ -64,7 +64,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 and form elements skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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/overflow_tasks/index.md b/files/en-us/learn/css/building_blocks/overflow_tasks/index.md
index 6aef621606f5e83..e3f0e6ea627c911 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
@@ -56,7 +56,7 @@ If you would like your work assessed or are stuck and want to ask for help:
 1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself or use the starting point files linked to in the above sections.
 2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include:
 
-    - A descriptive title such as "Assessment wanted for overflow skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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/selectors/selectors_tasks/index.md b/files/en-us/learn/css/building_blocks/selectors/selectors_tasks/index.md
index 59b12de0cfa9496..09acdc0e9db6552 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
@@ -126,7 +126,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".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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/sizing_tasks/index.md b/files/en-us/learn/css/building_blocks/sizing_tasks/index.md
index e2fc270d449819f..a64fd15e0cdb4ce 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
@@ -74,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 sizing skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for sizing skill test 1".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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/styling_tables/index.md b/files/en-us/learn/css/building_blocks/styling_tables/index.md
index 297e047177dfded..cbcad31a6857a49 100644
--- a/files/en-us/learn/css/building_blocks/styling_tables/index.md
+++ b/files/en-us/learn/css/building_blocks/styling_tables/index.md
@@ -97,9 +97,9 @@ Let's work through styling our table example together.
 2. Next, create a new file called `style.css` and save it in the same directory as your other files.
 3. Link the CSS to the HTML by placing the following line of HTML inside your {{htmlelement("head")}}:
 
-    ```html
-    <link href="style.css" rel="stylesheet">
-    ```
+   ```html
+   <link href="style.css" rel="stylesheet">
+   ```
 
 ### Spacing and layout
 
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 f258b68fc5334f8..2b5ae263a3bb3da 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
@@ -53,7 +53,7 @@ If you would like your work assessed or are stuck and want to ask for help:
 1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself or use the starting point files linked to in the above sections.
 2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include:
 
-    - A descriptive title such as "Assessment wanted for the tables skill test".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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 f77fb74d90d3c23..dbc102cf053d2ae 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
@@ -67,7 +67,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 backgrounds and borders skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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/the_box_model/index.md b/files/en-us/learn/css/building_blocks/the_box_model/index.md
index 34d3bcf7dbf5a26..6458f1c1a6f9248 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
@@ -120,7 +120,7 @@ To add complexity, there is a standard and an alternate box model. By default, b
 
 Making up a block box in CSS we have the:
 
-- **Content box**: The area where your content is displayed; size it using properties like  {{cssxref("inline-size")}} and {{cssxref("block-size")}} or {{cssxref("width")}} and {{cssxref("height")}}.
+- **Content box**: The area where your content is displayed; size it using properties like {{cssxref("inline-size")}} and {{cssxref("block-size")}} or {{cssxref("width")}} and {{cssxref("height")}}.
 - **Padding box**: The padding sits around the content as white space; size it using {{cssxref("padding")}} and related properties.
 - **Border box**: The border box wraps the content and any padding; size it using {{cssxref("border")}} and related properties.
 - **Margin box**: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using {{cssxref("margin")}} and related properties.
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 bf8f256e2d8ce7f..6240b619be5496c 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
@@ -147,15 +147,15 @@ The numeric type you will come across most frequently is [`<length>`](/en-US/doc
 
 The following are all **absolute** length units — they are not relative to anything else, and are generally considered to always be the same size.
 
-| Unit | Name                | Equivalent to        |
-| ---- | ------------------- | -------------------- |
+| Unit | Name                | Equivalent to            |
+| ---- | ------------------- | ------------------------ |
 | `cm` | Centimeters         | 1cm = 37.8px = 25.2/64in |
-| `mm` | Millimeters         | 1mm = 1/10th of 1cm  |
-| `Q`  | Quarter-millimeters | 1Q = 1/40th of 1cm   |
-| `in` | Inches              | 1in = 2.54cm = 96px  |
-| `pc` | Picas               | 1pc = 1/6th of 1in   |
-| `pt` | Points              | 1pt = 1/72nd of 1in  |
-| `px` | Pixels              | 1px = 1/96th of 1in  |
+| `mm` | Millimeters         | 1mm = 1/10th of 1cm      |
+| `Q`  | Quarter-millimeters | 1Q = 1/40th of 1cm       |
+| `in` | Inches              | 1in = 2.54cm = 96px      |
+| `pc` | Picas               | 1pc = 1/6th of 1in       |
+| `pt` | Points              | 1pt = 1/72nd of 1in      |
+| `px` | Pixels              | 1px = 1/96th of 1in      |
 
 Most of these units are more useful when used for print, rather than screen output. For example, we don't typically use `cm` (centimeters) on screen. The only value that you will commonly use is `px` (pixels).
 
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 0ffedbe4412d5a4..2776f0089ba9898 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
@@ -84,7 +84,7 @@ If you would like your work assessed or are stuck and want to ask for help:
 1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself or use the starting point files linked to in the above sections.
 2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include:
 
-    - A descriptive title such as "Assessment wanted for values and units skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for values and units skill test 1".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're stuck and need help or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md b/files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md
index 10ce0fc43215efd..4f3e6000dba17b1 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
@@ -75,7 +75,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 and logical properties skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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/flexbox_skills/index.md b/files/en-us/learn/css/css_layout/flexbox_skills/index.md
index f8452a299698daf..e46089c73313946 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
@@ -93,7 +93,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 skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're stuck and need help or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/css/css_layout/floats_skills/index.md b/files/en-us/learn/css/css_layout/floats_skills/index.md
index 9caed37863ef750..dde209eeb65d2ae 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
@@ -71,7 +71,7 @@ If you would like your work assessed or are stuck and want to ask for help:
 1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself or use the starting point files linked to in the above sections.
 2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include:
 
-    - A descriptive title such as "Assessment wanted for floats skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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/fundamental_layout_comprehension/index.md b/files/en-us/learn/css/css_layout/fundamental_layout_comprehension/index.md
index c597d0bc99429de..8dd25c9d832cc7a 100644
--- a/files/en-us/learn/css/css_layout/fundamental_layout_comprehension/index.md
+++ b/files/en-us/learn/css/css_layout/fundamental_layout_comprehension/index.md
@@ -84,10 +84,10 @@ 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/).
 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 Fundamental layout comprehension".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for Fundamental layout comprehension".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
 
 {{PreviousMenu("Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}
 
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 da1de1631d0dcb1..305a175c473c097 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
@@ -89,7 +89,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 grid skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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/multicol_skills/index.md b/files/en-us/learn/css/css_layout/multicol_skills/index.md
index 1913250b7641bf7..260022c10b9f32f 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
@@ -74,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 multicol skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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/index.md b/files/en-us/learn/css/css_layout/position_skills/index.md
index 688a15eec46ab1b..01a073173a23121 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
@@ -61,7 +61,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 positioning skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're stuck and need help or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/css/css_layout/rwd_skills/index.md b/files/en-us/learn/css/css_layout/rwd_skills/index.md
index d0bf560b9e8445b..687491656da60d6 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
@@ -35,7 +35,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 and media queries skill test".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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/first_steps/styling_a_biography_page/index.md b/files/en-us/learn/css/first_steps/styling_a_biography_page/index.md
index 78bafd7d51abab1..b3c0134e01db022 100644
--- a/files/en-us/learn/css/first_steps/styling_a_biography_page/index.md
+++ b/files/en-us/learn/css/first_steps/styling_a_biography_page/index.md
@@ -83,10 +83,10 @@ 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/).
 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 Styling a biography page".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for Styling a biography page".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
 
 {{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
 
diff --git a/files/en-us/learn/css/howto/css_faq/index.md b/files/en-us/learn/css/howto/css_faq/index.md
index 40bd25e81b3a9ff..b66b1ea48de5b0a 100644
--- a/files/en-us/learn/css/howto/css_faq/index.md
+++ b/files/en-us/learn/css/howto/css_faq/index.md
@@ -26,7 +26,7 @@ Gecko-based browsers, have a third _[Almost Standards Mode](/en-US/docs/Mozilla/
 The standard `DOCTYPE` declaration that will trigger standards mode is:
 
 ```html
-<!DOCTYPE html> 
+<!DOCTYPE html>
 ```
 
 When at all possible, you should just use the above doctype. There are other valid legacy doctypes that will trigger Standards or Almost Standards mode:
@@ -114,7 +114,7 @@ If the same property is declared in both rules, the conflict is resolved first t
 
 ## Why don't my style rules work properly?
 
-Style rules that are syntactically correct may not apply in certain situations. You can use [Rules view](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html) of  _CSS Pane_ of the Inspector to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.
+Style rules that are syntactically correct may not apply in certain situations. You can use [Rules view](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html) of _CSS Pane_ of the Inspector to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.
 
 ### HTML elements hierarchy
 
diff --git a/files/en-us/learn/css/index.md b/files/en-us/learn/css/index.md
index 664110e60e5b41a..34d2c13f73d0fb4 100644
--- a/files/en-us/learn/css/index.md
+++ b/files/en-us/learn/css/index.md
@@ -41,14 +41,17 @@ It is also recommended that you work through [Getting started with the web](/en-
 This topic contains the following modules, in a suggested order for working through them. You should start with the first one.
 
 - [CSS first steps](/en-US/docs/Learn/CSS/First_steps)
+
   - : CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.
 
 - [CSS building blocks](/en-US/docs/Learn/CSS/Building_blocks)
+
   - : This module carries on where [CSS first steps](/en-US/docs/Learn/CSS/First_steps) left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.
 
     The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like [text styling](/en-US/docs/Learn/CSS/Styling_text) and [CSS layout](/en-US/docs/Learn/CSS/CSS_layout).
 
 - [CSS styling text](/en-US/docs/Learn/CSS/Styling_text)
+
   - : With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.
 
 - [CSS layout](/en-US/docs/Learn/CSS/CSS_layout)
diff --git a/files/en-us/learn/css/styling_text/typesetting_a_homepage/index.md b/files/en-us/learn/css/styling_text/typesetting_a_homepage/index.md
index af812d2e06d518d..4259be1e1d5cb63 100644
--- a/files/en-us/learn/css/styling_text/typesetting_a_homepage/index.md
+++ b/files/en-us/learn/css/styling_text/typesetting_a_homepage/index.md
@@ -99,10 +99,10 @@ 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/).
 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 Typesetting a community school homepage".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for Typesetting a community school homepage".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
 
 {{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
 
diff --git a/files/en-us/learn/css/styling_text/web_fonts/index.md b/files/en-us/learn/css/styling_text/web_fonts/index.md
index 2ee3c27c2482b32..a1fdf892755a7a2 100644
--- a/files/en-us/learn/css/styling_text/web_fonts/index.md
+++ b/files/en-us/learn/css/styling_text/web_fonts/index.md
@@ -151,19 +151,19 @@ To implement these fonts in your demo, follow these steps:
 3. Each of the `url()` functions points to a font file that we want to import into our CSS. We need to make sure the paths to the files are correct, so add `fonts/` to the start of each path (adjust as necessary).
 4. Now you can use these fonts in your font stacks, just like any web safe or default system font. For example:
 
-    ```css
-    @font-face {
-        font-family: 'zantrokeregular';
-        src: url('fonts/zantroke-webfont.woff2') format('woff2'),
-             url('fonts/zantroke-webfont.woff') format('woff');
-        font-weight: normal;
-        font-style: normal;
-    }
-    ```
-
-    ```css
-    font-family: 'zantrokeregular', serif;
-    ```
+   ```css
+   @font-face {
+       font-family: 'zantrokeregular';
+       src: url('fonts/zantroke-webfont.woff2') format('woff2'),
+            url('fonts/zantroke-webfont.woff') format('woff');
+       font-weight: normal;
+       font-style: normal;
+   }
+   ```
+
+   ```css
+   font-family: 'zantrokeregular', serif;
+   ```
 
 You should end up with a demo page with some nice fonts implemented on them. Because different fonts are created at different sizes, you may have to adjust the size, spacing, etc., to sort out the look and feel.
 
diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md
index 8903303915bf1bb..defe7a66baccd3f 100644
--- a/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md
+++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/index.md
@@ -576,10 +576,10 @@ window.addEventListener('load', () => {
 
 At that point, our control will change state according to our design, but its value doesn't get updated yet. We'll handle that next.
 
-| Live example                                                                                                                                     |
-| ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Live example                                                                                                |
+| ----------------------------------------------------------------------------------------------------------- |
 | {{EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_3")}} |
-| [Check out the source code](/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_3)                                                 |
+| [Check out the source code](/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_3)            |
 
 ### Handling the control's value
 
@@ -679,10 +679,10 @@ In the code above, it's worth noting the use of the [`tabIndex`](/en-US/docs/Web
 
 With that, we're done! Here's the result:
 
-| Live example                                                                                                                                     |
-| ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Live example                                                                                                |
+| ----------------------------------------------------------------------------------------------------------- |
 | {{EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_4")}} |
-| [Check out the source code](/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_4)                                                 |
+| [Check out the source code](/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_4)            |
 
 But wait a second, are we really done?
 
@@ -748,10 +748,10 @@ It might have seemed simpler to let a screen reader focus on the off-screen sele
 
 Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as [NVDA](https://www.nvaccess.org/) or [VoiceOver](https://www.apple.com/accessibility/vision/)):
 
-| Live example                                                                                                                                     |
-| ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Live example                                                                                                |
+| ----------------------------------------------------------------------------------------------------------- |
 | {{EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_5")}} |
-| [Check out the final source code](/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_5)                                           |
+| [Check out the final source code](/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_5)      |
 
 If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise.
 
diff --git a/files/en-us/learn/forms/how_to_structure_a_web_form/index.md b/files/en-us/learn/forms/how_to_structure_a_web_form/index.md
index ef2a909e91c74d9..1d30459ae7e7de1 100644
--- a/files/en-us/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/en-us/learn/forms/how_to_structure_a_web_form/index.md
@@ -194,82 +194,82 @@ Let's put these ideas into practice and build a slightly more involved form —
 1. To start with, make a local copy of our [blank template file](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html) and the [CSS for our payment form](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/payment-form.css) in a new directory on your computer.
 2. Apply the CSS to the HTML by adding the following line inside the HTML {{htmlelement("head")}}:
 
-    ```html
-    <link href="payment-form.css" rel="stylesheet">
-    ```
+   ```html
+   <link href="payment-form.css" rel="stylesheet">
+   ```
 
 3. Next, create your form by adding the outer {{htmlelement("form")}} element:
 
-    ```html
-    <form>
+   ```html
+   <form>
 
-    </form>
-    ```
+   </form>
+   ```
 
 4. Inside the `<form>` tags, add a heading and paragraph to inform users how required fields are marked:
 
-    ```html
-    <h1>Payment form</h1>
-    <p>Required fields are followed by <strong><span aria-label="required">*</span></strong>.</p>
-    ```
+   ```html
+   <h1>Payment form</h1>
+   <p>Required fields are followed by <strong><span aria-label="required">*</span></strong>.</p>
+   ```
 
 5. Next we'll add a larger section of code into the form, below our previous entry. Here you'll see that we are wrapping the contact information fields inside a distinct {{htmlelement("section")}} element. Moreover, we have a set of three radio buttons, each of which we are putting inside its own list ({{htmlelement("li")}}) element. We also have two standard text {{htmlelement("input")}}s and their associated {{htmlelement("label")}} elements, each contained inside a {{htmlelement("p")}}, and a password input for entering a password. Add this code to your form:
 
-    ```html
-    <section>
-        <h2>Contact information</h2>
-        <fieldset>
-          <legend>Title</legend>
-          <ul>
-              <li>
-                <label for="title_1">
-                  <input type="radio" id="title_1" name="title" value="K">
-                  King
-                </label>
-              </li>
-              <li>
-                <label for="title_2">
-                  <input type="radio" id="title_2" name="title" value="Q">
-                  Queen
-                </label>
-              </li>
-              <li>
-                <label for="title_3">
-                  <input type="radio" id="title_3" name="title" value="J">
-                  Joker
-                </label>
-              </li>
-          </ul>
-        </fieldset>
-        <p>
-          <label for="name">
-            <span>Name: </span>
-            <strong><span aria-label="required">*</span></strong>
-          </label>
-          <input type="text" id="name" name="username">
-        </p>
-        <p>
-          <label for="mail">
-            <span>E-mail: </span>
-            <strong><span aria-label="required">*</span></strong>
-          </label>
-          <input type="email" id="mail" name="usermail">
-        </p>
-        <p>
-          <label for="pwd">
-            <span>Password: </span>
-            <strong><span aria-label="required">*</span></strong>
-          </label>
-          <input type="password" id="pwd" name="password">
-        </p>
-    </section>
-    ```
+   ```html
+   <section>
+       <h2>Contact information</h2>
+       <fieldset>
+         <legend>Title</legend>
+         <ul>
+             <li>
+               <label for="title_1">
+                 <input type="radio" id="title_1" name="title" value="K">
+                 King
+               </label>
+             </li>
+             <li>
+               <label for="title_2">
+                 <input type="radio" id="title_2" name="title" value="Q">
+                 Queen
+               </label>
+             </li>
+             <li>
+               <label for="title_3">
+                 <input type="radio" id="title_3" name="title" value="J">
+                 Joker
+               </label>
+             </li>
+         </ul>
+       </fieldset>
+       <p>
+         <label for="name">
+           <span>Name: </span>
+           <strong><span aria-label="required">*</span></strong>
+         </label>
+         <input type="text" id="name" name="username">
+       </p>
+       <p>
+         <label for="mail">
+           <span>E-mail: </span>
+           <strong><span aria-label="required">*</span></strong>
+         </label>
+         <input type="email" id="mail" name="usermail">
+       </p>
+       <p>
+         <label for="pwd">
+           <span>Password: </span>
+           <strong><span aria-label="required">*</span></strong>
+         </label>
+         <input type="password" id="pwd" name="password">
+       </p>
+   </section>
+   ```
 
 6. The second `<section>` of our form is the payment information.
    We have three distinct controls along with their labels, each contained inside a `<p>`.
    The first is a drop-down menu ({{htmlelement("select")}}) for selecting credit card type.
    The second is an `<input>` element of type `tel`, for entering a credit card number; while we could have used the `number` type, we don't want the number's spinner UI.
-   The last one is an `<input>` element of type `text`, for entering the expiration date of the card; this includes a  _placeholder_ attribute indicating the correct format, and a _pattern_ that tests that the entered date has the correct format.
+   The last one is an `<input>` element of type `text`, for entering the expiration date of the card; this includes a _placeholder_ attribute indicating the correct format, and a _pattern_ that tests that the entered date has the correct format.
    These newer input types are reintroduced in [The HTML5 input types](/en-US/docs/Learn/Forms/HTML5_input_types).
 
    Enter the following below the previous section:
@@ -312,7 +312,7 @@ Let's put these ideas into practice and build a slightly more involved form —
          <button type="submit">Validate the payment</button>
        </p>
    </section>
-    ```
+   ```
 
 You can see the finished form in action below (also find it on GitHub — see our payment-form.html [source](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/payment-form.html) and [running live](https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html)):
 
diff --git a/files/en-us/learn/forms/other_form_controls/index.md b/files/en-us/learn/forms/other_form_controls/index.md
index 9a235bfb4df018a..2f863afdcba5d20 100644
--- a/files/en-us/learn/forms/other_form_controls/index.md
+++ b/files/en-us/learn/forms/other_form_controls/index.md
@@ -59,7 +59,7 @@ Visually, the text entered wraps and the form control is by default resizable. M
 
 The following screenshots show default, focused, and disabled `<textarea>` elements in Firefox 71 and Safari 13 on macOS, and Edge 18, Yandex 14, Firefox 71 and Chrome 79 on Windows 10.
 
-![The default, focused, and disabled \<textarea> element in Firefox 71 and Safari 13 on Mac OSX and Edge 18, Yandex 14, Firefox and Chrome on Windows 10.](textarea_basic.png)
+![The default, focused, and disabled <textarea> element in Firefox 71 and Safari 13 on Mac OSX and Edge 18, Yandex 14, Firefox and Chrome on Windows 10.](textarea_basic.png)
 
 > **Note:** You can find a slightly more interesting example of text area usage in the [example](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html) we put together in the first article of the series ([see the source code also](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html)).
 
diff --git a/files/en-us/learn/forms/property_compatibility_table_for_form_controls/index.md b/files/en-us/learn/forms/property_compatibility_table_for_form_controls/index.md
index c461456d3a533a5..e192e88b2fd58eb 100644
--- a/files/en-us/learn/forms/property_compatibility_table_for_form_controls/index.md
+++ b/files/en-us/learn/forms/property_compatibility_table_for_form_controls/index.md
@@ -647,7 +647,7 @@ See the `{{htmlelement("input/button", "button")}}`, `{{htmlelement("input/submi
 
 ### Number
 
-See the  `{{htmlelement("input/number", "number")}}` input type. There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being outside the field.
+See the `{{htmlelement("input/number", "number")}}` input type. There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being outside the field.
 
 <table>
   <thead>
@@ -1437,7 +1437,7 @@ Note Firefox does not provide any way to change the down arrow on the `{{htmlele
 
 ### Select boxes (multiline)
 
-See the `{{htmlelement("select")}}`, `{{htmlelement("optgroup")}}` and  `{{htmlelement("option")}}` elements and the [`size` attribute](/en-US/docs/Web/HTML/Attributes/size).
+See the `{{htmlelement("select")}}`, `{{htmlelement("optgroup")}}` and `{{htmlelement("option")}}` elements and the [`size` attribute](/en-US/docs/Web/HTML/Attributes/size).
 
 <table>
   <thead>
diff --git a/files/en-us/learn/forms/test_your_skills_colon__advanced_styling/index.md b/files/en-us/learn/forms/test_your_skills_colon__advanced_styling/index.md
index 8a0086f68cddeb8..73632f1c1167608 100644
--- a/files/en-us/learn/forms/test_your_skills_colon__advanced_styling/index.md
+++ b/files/en-us/learn/forms/test_your_skills_colon__advanced_styling/index.md
@@ -81,7 +81,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 Advanced form styling 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Advanced form styling 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/forms/test_your_skills_colon__basic_controls/index.md b/files/en-us/learn/forms/test_your_skills_colon__basic_controls/index.md
index 30c3184a052d1d2..231433690950dd7 100644
--- a/files/en-us/learn/forms/test_your_skills_colon__basic_controls/index.md
+++ b/files/en-us/learn/forms/test_your_skills_colon__basic_controls/index.md
@@ -76,7 +76,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 Basic controls 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Basic controls 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/forms/test_your_skills_colon__form_structure/index.md b/files/en-us/learn/forms/test_your_skills_colon__form_structure/index.md
index 3f2a0ce4ae5081a..a2661af02071c6e 100644
--- a/files/en-us/learn/forms/test_your_skills_colon__form_structure/index.md
+++ b/files/en-us/learn/forms/test_your_skills_colon__form_structure/index.md
@@ -40,7 +40,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 Form structure 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Form structure 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/forms/test_your_skills_colon__form_validation/index.md b/files/en-us/learn/forms/test_your_skills_colon__form_validation/index.md
index efc65e98fd6868d..b55e4e3d8ef2493 100644
--- a/files/en-us/learn/forms/test_your_skills_colon__form_validation/index.md
+++ b/files/en-us/learn/forms/test_your_skills_colon__form_validation/index.md
@@ -68,7 +68,7 @@ If you would like your work assessed, or are stuck and want to ask for help:
 1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections.
 2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include:
 
-    - A descriptive title such as "Assessment wanted for Form validation 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Form validation 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/forms/test_your_skills_colon__html5_controls/index.md b/files/en-us/learn/forms/test_your_skills_colon__html5_controls/index.md
index aabd74d235fd15e..f9df4bbf8723da5 100644
--- a/files/en-us/learn/forms/test_your_skills_colon__html5_controls/index.md
+++ b/files/en-us/learn/forms/test_your_skills_colon__html5_controls/index.md
@@ -60,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 HTML controls 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for HTML controls 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/forms/test_your_skills_colon__other_controls/index.md b/files/en-us/learn/forms/test_your_skills_colon__other_controls/index.md
index ff81b331cb59717..450db22eff7fb8c 100644
--- a/files/en-us/learn/forms/test_your_skills_colon__other_controls/index.md
+++ b/files/en-us/learn/forms/test_your_skills_colon__other_controls/index.md
@@ -78,7 +78,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 Other controls 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Other controls 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/forms/test_your_skills_colon__styling_basics/index.md b/files/en-us/learn/forms/test_your_skills_colon__styling_basics/index.md
index 23464a5819eb7fc..7f9f06c75ce7783 100644
--- a/files/en-us/learn/forms/test_your_skills_colon__styling_basics/index.md
+++ b/files/en-us/learn/forms/test_your_skills_colon__styling_basics/index.md
@@ -40,7 +40,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 Styling basics 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Styling basics 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/getting_started_with_the_web/css_basics/index.md b/files/en-us/learn/getting_started_with_the_web/css_basics/index.md
index fc99fe79a795011..09cb97bf73af8c3 100644
--- a/files/en-us/learn/getting_started_with_the_web/css_basics/index.md
+++ b/files/en-us/learn/getting_started_with_the_web/css_basics/index.md
@@ -31,9 +31,9 @@ To make the code work, we still need to apply this CSS (above) to your HTML docu
 
 1. Open your `index.html` file. Paste the following line in the head (between the {{HTMLElement("head")}} and `</head>` tags):
 
-    ```html
-    <link href="styles/style.css" rel="stylesheet">
-    ```
+   ```html
+   <link href="styles/style.css" rel="stylesheet">
+   ```
 
 2. Save `index.html` and load it in your browser. You should see something like this:
 
@@ -154,38 +154,38 @@ Now that we've explored some CSS fundamentals, let's improve the appearance of t
 
 1. First, find the [output from Google Fonts](/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#font) that you previously saved from [What will your website look like?](/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like). Add the {{htmlelement("link")}} element somewhere inside your `index.html`'s head (anywhere between the {{HTMLElement("head")}} and `</head>` tags). It looks something like this:
 
-    ```html
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
-    ```
+   ```html
+   <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+   ```
 
-    This code links your page to a style sheet that loads the Open Sans font family with your webpage.
+   This code links your page to a style sheet that loads the Open Sans font family with your webpage.
 
 2. Next, delete the existing rule you have in your `style.css` file. It was a good test, but let's not continue with lots of red text.
 3. Add the following lines (shown below), replacing the `font-family` assignment with your `font-family` selection from [What will your website look like?](/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#font). The property `font-family` refers to the font(s) you want to use for text. This rule defines a global base font and font size for the whole page. Since {{HTMLElement("html")}} is the parent element of the whole page, all elements inside it inherit the same `font-size` and `font-family`.
 
-    ```css
-    html {
-      font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high  */
-      font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google Fonts */
-    }
-    ```
+   ```css
+   html {
+     font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high  */
+     font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google Fonts */
+   }
+   ```
 
-    > **Note:** Anything in CSS between `/*` and `*/` is a **CSS comment**. The browser ignores comments as it renders the code. CSS comments are a way for you to write helpful notes about your code or logic.
+   > **Note:** Anything in CSS between `/*` and `*/` is a **CSS comment**. The browser ignores comments as it renders the code. CSS comments are a way for you to write helpful notes about your code or logic.
 
 4. Now let's set font sizes for elements that will have text inside the HTML body ({{htmlelement("h1")}}, {{htmlelement("li")}}, and {{htmlelement("p")}}). We'll also center the heading. Finally, let's expand the second ruleset (below) with settings for line height and letter spacing to make body content more readable.
 
-    ```css
-    h1 {
-      font-size: 60px;
-      text-align: center;
-    }
-
-    p, li {
-      font-size: 16px;
-      line-height: 2;
-      letter-spacing: 1px;
-    }
-    ```
+   ```css
+   h1 {
+     font-size: 60px;
+     text-align: center;
+   }
+
+   p, li {
+     font-size: 16px;
+     line-height: 2;
+     letter-spacing: 1px;
+   }
+   ```
 
 Adjust the `px` values as you like. Your work-in-progress should look similar to this:
 
diff --git a/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md
index d94a2a43c2e3a67..00ac9e264a9185c 100644
--- a/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -50,18 +50,18 @@ To make files talk to one another, you have to provide a file path between them
 1. Copy the image you chose earlier into your `images` folder.
 2. Open up your `index.html` file, and insert the following code into the file exactly as shown. Don't worry about what it all means for now — we'll look at the structures in more detail later in the series.
 
-    ```html
-    <!DOCTYPE html>
-    <html lang="en-US">
-      <head>
-        <meta charset="utf-8">
-        <title>My test page</title>
-      </head>
-      <body>
-        <img src="" alt="My test image">
-      </body>
-    </html>
-    ```
+   ```html
+   <!DOCTYPE html>
+   <html lang="en-US">
+     <head>
+       <meta charset="utf-8">
+       <title>My test page</title>
+     </head>
+     <body>
+       <img src="" alt="My test image">
+     </body>
+   </html>
+   ```
 
 3. The line `<img src="" alt="My test image">` is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the _images_ directory, which is in the same directory as `index.html`. To walk down the file structure from `index.html` to our image, the file path we'd need is `images/your-image-filename`. For example, our image is called `firefox-icon.png`, so the file path is `images/firefox-icon.png`.
 4. Insert the file path into your HTML code between the double quote marks of the `src=""` code.
diff --git a/files/en-us/learn/getting_started_with_the_web/html_basics/index.md b/files/en-us/learn/getting_started_with_the_web/html_basics/index.md
index 513f4c7c5de55a0..6e18718f55f6dbc 100644
--- a/files/en-us/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/en-us/learn/getting_started_with_the_web/html_basics/index.md
@@ -203,21 +203,21 @@ Links are very important — they are what makes the web a web! To add a link, w
 1. Choose some text. We chose the text "Mozilla Manifesto".
 2. Wrap the text in an {{htmlelement("a")}} element, as shown below:
 
-    ```html
-    <a>Mozilla Manifesto</a>
-    ```
+   ```html
+   <a>Mozilla Manifesto</a>
+   ```
 
 3. Give the {{htmlelement("a")}} element an `href` attribute, as shown below:
 
-    ```html
-    <a href="">Mozilla Manifesto</a>
-    ```
+   ```html
+   <a href="">Mozilla Manifesto</a>
+   ```
 
 4. Fill in the value of this attribute with the web address that you want the link to:
 
-    ```html
-    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
-    ```
+   ```html
+   <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
+   ```
 
 You might get unexpected results if you omit the `https://` or `http://` part, called the _protocol_, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.
 
diff --git a/files/en-us/learn/getting_started_with_the_web/index.md b/files/en-us/learn/getting_started_with_the_web/index.md
index 86db676162d0f0f..96bb16b85a32ee7 100644
--- a/files/en-us/learn/getting_started_with_the_web/index.md
+++ b/files/en-us/learn/getting_started_with_the_web/index.md
@@ -26,24 +26,31 @@ It's a lot of work to create a professional website, so if you're new to web dev
 By working through the articles listed below, you will go from nothing to getting your first webpage online. Let's begin our journey!
 
 - [Installing basic software](/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software)
+
   - : When it comes to tools for building a website, there's a lot to pick from. If you're just starting, you might be confused by the array of code editors, frameworks, and testing tools out there. In this article, we will show you step-by-step how to install the software you need to begin some basic web development.
 
 - [What will your website look like?](/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
+
   - : Before you start writing the code for your website, you should plan it first. What information are you showcasing? What fonts and colors are you using? Here we'll outline a simple method that you can follow to plan out your site's content and design.
 
 - [Dealing with files](/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
+
   - : A website consists of many files: text content, code, stylesheets, media content, and so on. When you're building a website, you need to assemble these files into a sensible structure and make sure they can talk to one another. This article explains how to set up a sensible file structure for your website and what issues you should be aware of.
 
 - [HTML basics](/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)
+
   - : HyperText Markup Language (HTML) is the code that you use to structure your web content and give it meaning and purpose. For example, is my content a set of paragraphs or a list of bullet points? Do I have images inserted on my page? Do I have a data table? Without overwhelming you, this article will provide enough information to make you familiar with HTML.
 
 - [CSS basics](/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)
+
   - : Cascading Style Sheets (CSS) is the code that you use to style your website. For example, do you want the text to be black or red? Where should content be drawn on the screen? What background images and colors should be used to decorate your website? In this article, we'll take you through what you need to get started.
 
 - [JavaScript basics](/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+
   - : JavaScript is the programming language that you use to add interactive features to your website. Some examples could be games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more. In this article, we'll give you an idea of what is possible with this exciting language, and how to get started.
 
 - [Publishing your sample code](/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
+
   - : Once you have finished writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article describes how to get your simple sample code online with minimum effort.
 
 - [How the web works](/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/en-us/learn/getting_started_with_the_web/javascript_basics/index.md b/files/en-us/learn/getting_started_with_the_web/javascript_basics/index.md
index fc711ff69de3653..13f6f59c6059ee7 100644
--- a/files/en-us/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/en-us/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -44,17 +44,17 @@ However, getting comfortable with JavaScript is more challenging than getting co
 1. Go to your test site and create a new folder named `scripts`. Within the scripts folder, create a new text document called `main.js`, and save it.
 2. In your `index.html` file, enter this code on a new line, just before the closing `</body>` tag:
 
-    ```html
-    <script src="scripts/main.js"></script>
-    ```
+   ```html
+   <script src="scripts/main.js"></script>
+   ```
 
 3. This is doing the same job as the {{htmlelement("link")}} element for CSS. It applies the JavaScript to the page, so it can have an effect on the HTML (along with the CSS, and anything else on the page).
 4. Add this code to the `main.js` file:
 
-    ```js
-    const myHeading = document.querySelector('h1');
-    myHeading.textContent = 'Hello world!';
-    ```
+   ```js
+   const myHeading = document.querySelector('h1');
+   myHeading.textContent = 'Hello world!';
+   ```
 
 5. Make sure the HTML and JavaScript files are saved. Then load `index.html` in your browser. You should see something like this:
 
@@ -383,18 +383,18 @@ In this section, you will learn how to use JavaScript and DOM API features to al
 3. Rename the image _firefox2.png_.
 4. Add the following JavaScript code to your `main.js` file.
 
-    ```js
-    const myImage = document.querySelector('img');
+   ```js
+   const myImage = document.querySelector('img');
 
-    myImage.onclick = () => {
-      const mySrc = myImage.getAttribute('src');
-      if (mySrc === 'images/firefox-icon.png') {
-        myImage.setAttribute('src','images/firefox2.png');
-      } else {
-        myImage.setAttribute('src','images/firefox-icon.png');
-      }
-    }
-    ```
+   myImage.onclick = () => {
+     const mySrc = myImage.getAttribute('src');
+     if (mySrc === 'images/firefox-icon.png') {
+       myImage.setAttribute('src','images/firefox2.png');
+     } else {
+       myImage.setAttribute('src','images/firefox-icon.png');
+     }
+   }
+   ```
 
 5. Save all files and load `index.html` in the browser. Now when you click the image, it should change to the other one.
 
@@ -403,8 +403,8 @@ This is what happened. You stored a reference to your {{htmlelement("img")}} ele
 1. The code retrieves the value of the image's `src` attribute.
 2. The code uses a conditional to check if the `src` value is equal to the path of the original image:
 
-    1. If it is, the code changes the `src` value to the path of the second image, forcing the other image to be loaded inside the {{htmlelement("img")}} element.
-    2. If it isn't (meaning it must already have changed), the `src` value swaps back to the original image path, to the original state.
+   1. If it is, the code changes the `src` value to the path of the second image, forcing the other image to be loaded inside the {{htmlelement("img")}} element.
+   2. If it isn't (meaning it must already have changed), the `src` value swaps back to the original image path, to the original state.
 
 ### Adding a personalized welcome message
 
@@ -412,49 +412,49 @@ Next, let's change the page title to a personalized welcome message when the use
 
 1. In `index.html`, add the following line just before the {{htmlelement("script")}} element:
 
-    ```html
-    <button>Change user</button>
-    ```
+   ```html
+   <button>Change user</button>
+   ```
 
 2. In `main.js`, place the following code at the bottom of the file, exactly as it is written. This takes references to the new button and the heading, storing each inside variables:
 
-    ```js
-    let myButton = document.querySelector('button');
-    let myHeading = document.querySelector('h1');
-    ```
+   ```js
+   let myButton = document.querySelector('button');
+   let myHeading = document.querySelector('h1');
+   ```
 
 3. Add the following function to set the personalized greeting. This won't do anything yet, but this will change soon.
 
-    ```js
-    function setUserName() {
-      const myName = prompt('Please enter your name.');
-      localStorage.setItem('name', myName);
-      myHeading.textContent = `Mozilla is cool, ${myName}`;
-    }
-    ```
+   ```js
+   function setUserName() {
+     const myName = prompt('Please enter your name.');
+     localStorage.setItem('name', myName);
+     myHeading.textContent = `Mozilla is cool, ${myName}`;
+   }
+   ```
 
-    The `setUserName()` function contains a [`prompt()`](/en-US/docs/Web/API/Window/prompt) function, which displays a dialog box, similar to `alert()`. This `prompt()` function does more than `alert()`, asking the user to enter data, and storing it in a variable after the user clicks _OK._ In this case, we are asking the user to enter a name. Next, the code calls on an API `localStorage`, which allows us to store data in the browser and retrieve it later. We use localStorage's `setItem()` function to create and store a data item called `'name'`, setting its value to the `myName` variable which contains the user's entry for the name. Finally, we set the `textContent` of the heading to a string, plus the user's newly stored name.
+   The `setUserName()` function contains a [`prompt()`](/en-US/docs/Web/API/Window/prompt) function, which displays a dialog box, similar to `alert()`. This `prompt()` function does more than `alert()`, asking the user to enter data, and storing it in a variable after the user clicks _OK._ In this case, we are asking the user to enter a name. Next, the code calls on an API `localStorage`, which allows us to store data in the browser and retrieve it later. We use localStorage's `setItem()` function to create and store a data item called `'name'`, setting its value to the `myName` variable which contains the user's entry for the name. Finally, we set the `textContent` of the heading to a string, plus the user's newly stored name.
 
 4. Add the following condition block. We could call this initialization code, as it structures the app when it first loads.
 
-    ```js
-    if (!localStorage.getItem('name')) {
-      setUserName();
-    } else {
-      const storedName = localStorage.getItem('name');
-      myHeading.textContent = `Mozilla is cool, ${storedName}`;
-    }
-    ```
+   ```js
+   if (!localStorage.getItem('name')) {
+     setUserName();
+   } else {
+     const storedName = localStorage.getItem('name');
+     myHeading.textContent = `Mozilla is cool, ${storedName}`;
+   }
+   ```
 
-    This first line of this block uses the negation operator (logical NOT, represented by the `!`) to check whether the `name` data exists. If not, the `setUserName()` function runs to create it. If it exists (that is, the user set a user name during a previous visit), we retrieve the stored name using `getItem()` and set the `textContent` of the heading to a string, plus the user's name, as we did inside `setUserName()`.
+   This first line of this block uses the negation operator (logical NOT, represented by the `!`) to check whether the `name` data exists. If not, the `setUserName()` function runs to create it. If it exists (that is, the user set a user name during a previous visit), we retrieve the stored name using `getItem()` and set the `textContent` of the heading to a string, plus the user's name, as we did inside `setUserName()`.
 
 5. Put this `onclick` event handler (below) on the button. When clicked, `setUserName()` runs. This allows the user to enter a different name by pressing the button.
 
-    ```js
-    myButton.onclick = () => {
-      setUserName();
-    }
-    ```
+   ```js
+   myButton.onclick = () => {
+     setUserName();
+   }
+   ```
 
 ### A user name of null?
 
diff --git a/files/en-us/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/en-us/learn/getting_started_with_the_web/publishing_your_website/index.md
index 6e1c4df40c32984..295140ca41e29d4 100644
--- a/files/en-us/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/en-us/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -71,14 +71,14 @@ Now let's examine how to easily publish your site via GitHub Pages.
 1. First of all, [sign up for GitHub](https://github.com/) and verify your email address.
 2. Next, you need to [create a repository](https://github.com/new) to store files.
 3. On this page, in the _Repository name_ box, enter _username_.github.io, where _username_ is your username. For example, our friend Bob Smith would enter _bobsmith.github.io_.
-    Check the "_Initialize this repository with a README"_ box. Then click _Create repository_.![](github-create-repo.png)
+   Check the "_Initialize this repository with a README"_ box. Then click _Create repository_.![](github-create-repo.png)
 4. Drag and drop the content of your website folder into your repository. Then click _Commit changes_.
 
-    > **Note:** Make sure your folder has an `index.html` file.
+   > **Note:** Make sure your folder has an `index.html` file.
 
 5. Navigate your browser to _username_.github.io to see your website online. For example, for the username _chrisdavidmills_, go to [_chrisdavidmills_.github.io](https://chrisdavidmills.github.io/).
 
-    > **Note:** It may take a few minutes for your website to go live. If your website does not display immediately, wait a few minutes. Try again.
+   > **Note:** It may take a few minutes for your website to go live. If your website does not display immediately, wait a few minutes. Try again.
 
 To learn more, see [GitHub Pages Help](https://docs.github.com/en/pages/getting-started-with-github-pages).
 
diff --git a/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 75ee9859b619ccb..3a9ed34dea71c8c 100644
--- a/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -675,6 +675,7 @@ HTML also provides the {{htmlelement("time")}} element for marking up times and
 Why is this useful? Well, there are many different ways that humans write down dates. The above date could be written as:
 
 <!-- markdownlint-disable MD033 -->
+
 - 20 January 2016
 - 20th January 2016
 - Jan 20 2016
diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/index.md b/files/en-us/learn/html/introduction_to_html/debugging_html/index.md
index 97eaed100d027fd..ce3f18c211dff63 100644
--- a/files/en-us/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/en-us/learn/html/introduction_to_html/debugging_html/index.md
@@ -50,7 +50,7 @@ When writing code of some kind, everything is usually fine, until that dreaded m
 
 ![A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.](error-message.png)Here, the error message is relatively easy to understand — "unterminated double quote string". If you look at the listing, you can probably see how `println!(Hello, world!");` might logically be missing a double quote. However, error messages can quickly get more complicated and less easy to interpret as programs get bigger, and even simple cases can look a little intimidating to someone who doesn't know anything about Rust.
 
-Debugging doesn't have to be scary though —  the key to being comfortable with writing and debugging any programming language or code is familiarity with both the language and the tools.
+Debugging doesn't have to be scary though — the key to being comfortable with writing and debugging any programming language or code is familiarity with both the language and the tools.
 
 ## HTML and debugging
 
@@ -75,55 +75,55 @@ It's time to study the permissive nature of HTML code.
 2. Next, open it in a browser. You will see something like this:![A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. ](badly-formed-html.png)
 3. This immediately doesn't look great; let's look at the source code to see if we can work out why (only the body contents are shown):
 
-    ```html
-    <h1>HTML debugging examples</h1>
+   ```html
+   <h1>HTML debugging examples</h1>
 
-    <p>What causes errors in HTML?
+   <p>What causes errors in HTML?
 
-    <ul>
-      <li>Unclosed elements: If an element is <strong>not closed properly,
-          then its effect can spread to areas you didn't intend
+   <ul>
+     <li>Unclosed elements: If an element is <strong>not closed properly,
+         then its effect can spread to areas you didn't intend
 
-      <li>Badly nested elements: Nesting elements properly is also very important
-          for code behaving correctly. <strong>strong <em>strong emphasized?</strong>
-          what is this?</em>
+     <li>Badly nested elements: Nesting elements properly is also very important
+         for code behaving correctly. <strong>strong <em>strong emphasized?</strong>
+         what is this?</em>
 
-      <li>Unclosed attributes: Another common source of HTML problems. Let's
-          look at an example: <a href="https://www.mozilla.org/>link to Mozilla
-          homepage</a>
-    </ul>
-    ```
+     <li>Unclosed attributes: Another common source of HTML problems. Let's
+         look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+         homepage</a>
+   </ul>
+   ```
 
 4. Let's review the problems:
 
-    - The {{htmlelement("p","paragraph")}} and {{htmlelement("li","list item")}} elements have no closing tags. Looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin.
-    - The first {{htmlelement("strong")}} element has no closing tag. This is a bit more problematic, as it isn't easy to tell where the element is supposed to end. In fact, the whole of the rest of the text has been strongly emphasized.
-    - This section is badly nested: `<strong>strong <em>strong emphasized?</strong> what is this?</em>`. It is not easy to tell how this has been interpreted because of the previous problem.
-    - The {{htmlattrxref("href","a")}} attribute value is missing a closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.
+   - The {{htmlelement("p","paragraph")}} and {{htmlelement("li","list item")}} elements have no closing tags. Looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin.
+   - The first {{htmlelement("strong")}} element has no closing tag. This is a bit more problematic, as it isn't easy to tell where the element is supposed to end. In fact, the whole of the rest of the text has been strongly emphasized.
+   - This section is badly nested: `<strong>strong <em>strong emphasized?</strong> what is this?</em>`. It is not easy to tell how this has been interpreted because of the previous problem.
+   - The {{htmlattrxref("href","a")}} attribute value is missing a closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.
 
 5. Now let's look at the markup the browser has rendered, as opposed to the markup in the source code. To do this, we can use the browser developer tools. If you are not familiar with how to use your browser's developer tools, take a few minutes to review [Discover browser developer tools](/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools).
 6. In the DOM inspector, you can see what the rendered markup looks like: ![The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.](html-inspector.png)
 7. Using the DOM inspector, let's explore our code in detail to see how the browser has tried to fix our HTML errors (we did the review in Firefox; other modern browsers _should_ give the same result):
 
-    - The paragraphs and list items have been given closing tags.
-    - It isn't clear where the first `<strong>` element should be closed, so the browser has wrapped each separate block of text with its own strong tag, right down to the bottom of the document!
-    - The incorrect nesting has been fixed by the browser as shown here:
-
-      ```html
-      <strong>strong
-        <em>strong emphasized?</em>
-      </strong>
-      <em> what is this?</em>
-      ```
-
-    - The link with the missing double quote has been deleted altogether. The last list item looks like this:
-
-      ```html
-      <li>
-        <strong>Unclosed attributes: Another common source of HTML problems.
-        Let's look at an example: </strong>
-      </li>
-      ```
+   - The paragraphs and list items have been given closing tags.
+   - It isn't clear where the first `<strong>` element should be closed, so the browser has wrapped each separate block of text with its own strong tag, right down to the bottom of the document!
+   - The incorrect nesting has been fixed by the browser as shown here:
+
+     ```html
+     <strong>strong
+       <em>strong emphasized?</em>
+     </strong>
+     <em> what is this?</em>
+     ```
+
+   - The link with the missing double quote has been deleted altogether. The last list item looks like this:
+
+     ```html
+     <li>
+       <strong>Unclosed attributes: Another common source of HTML problems.
+       Let's look at an example: </strong>
+     </li>
+     ```
 
 ### HTML validation
 
diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/index.md b/files/en-us/learn/html/introduction_to_html/getting_started/index.md
index c24eff3bab2adad..a000480cad6cdec 100644
--- a/files/en-us/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/en-us/learn/html/introduction_to_html/getting_started/index.md
@@ -263,7 +263,7 @@ This would output the following:
 
 Elements can also have attributes. Attributes look like this:
 
-![&amp;amp;amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;amp;amp;lt;/p>](grumpy-cat-attribute-small.png)
+![&amp;amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;amp;lt;/p>](grumpy-cat-attribute-small.png)
 
 Attributes contain extra information about the element that won't appear in the content. In this example, the **`class`** attribute is an identifying name used to target the element with style information.
 
@@ -514,12 +514,12 @@ Here we have:
 
 1. `<!DOCTYPE html>`: The doctype. When HTML was young (1991-1992), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML. Doctypes used to look something like this:
 
-    ```html
-    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-    ```
+   ```html
+   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+   ```
 
-    More recently, the doctype is a historical artifact that needs to be included for everything else to work right. `<!DOCTYPE html>` is the shortest string of characters that counts as a valid doctype. That is all you need to know!
+   More recently, the doctype is a historical artifact that needs to be included for everything else to work right. `<!DOCTYPE html>` is the shortest string of characters that counts as a valid doctype. That is all you need to know!
 
 2. `<html></html>`: The {{htmlelement("html")}} element. This element wraps all the content on the page. It is sometimes known as the root element.
 3. `<head></head>`: The {{htmlelement("head")}} element. This element acts as a container for everything you want to include on the HTML page, **that isn't the content** the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more. You will learn more about this in the next article of the series.
@@ -701,13 +701,13 @@ In HTML, the characters `<`, `>`,`"`,`'` and `&` are special characters. They ar
 
 You do this with character references. These are special codes that represent characters, to be used in these exact circumstances. Each character reference starts with an ampersand (&), and ends with a semicolon (;).
 
-| Literal character |  Character reference equivalent  |
-| ----------------- | -------------------------------- |
-| <                 | `&lt;`                           |
-| >                 | `&gt;`                           |
-| "                 | `&quot;`                         |
-| '                 | `&apos;`                         |
-| &                 | `&amp;`                          |
+| Literal character | Character reference equivalent |
+| ----------------- | ------------------------------ |
+| <                 | `&lt;`                         |
+| >                 | `&gt;`                         |
+| "                 | `&quot;`                       |
+| '                 | `&apos;`                       |
+| &                 | `&amp;`                        |
 
 The character reference equivalent could be easily remembered because the text it uses can be seen as less than for '\&lt;', quotation for ' \&quot; ' and similarly for others. To find more about entity reference, see [List of XML and HTML character entity references](https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references) (Wikipedia).
 
diff --git a/files/en-us/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/en-us/learn/html/introduction_to_html/marking_up_a_letter/index.md
index 912d86fbfd5a0f1..f9cc0e7cba5f989 100644
--- a/files/en-us/learn/html/introduction_to_html/marking_up_a_letter/index.md
+++ b/files/en-us/learn/html/introduction_to_html/marking_up_a_letter/index.md
@@ -104,10 +104,10 @@ 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/).
 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 Marking up a letter".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for Marking up a letter".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
 
 {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
 
diff --git a/files/en-us/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/en-us/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
index 6754ec85c0fde5f..e9ff264bf328a65 100644
--- a/files/en-us/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
+++ b/files/en-us/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
@@ -95,10 +95,10 @@ 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/).
 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 Structuring a page of content".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for Structuring a page of content".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
 
 {{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
 
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 72ff94e49608fa5..6577c303cfdd526 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
@@ -55,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 advanced HTML text skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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 3080d3943480c3c..e22800ad0e2d95c 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
@@ -62,7 +62,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 HTML text basics skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - 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; for example, tell us if you're 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 2e9c3c8698794b5..3239f58ca2b1ece 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
@@ -81,7 +81,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 links skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for links skill test 1".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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/the_head_metadata_in_html/index.md b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index fc3cee6763d1453..05d300e8d7eff44 100644
--- a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -77,18 +77,18 @@ We've already seen the {{htmlelement("title")}} element in action — this can b
 
 1. To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our [title-example.html page](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/title-example.html). To do this, either
 
-    1. Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.
-    2. Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's _Save Page As…_ menu and choose a sensible place to save the file.
+   1. Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.
+   2. Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's _Save Page As…_ menu and choose a sensible place to save the file.
 
 2. Now open the file in your browser. You should see something like this:
 
-    ![A simple web page with the title set to \<title> element, and the \<h1> set to \<h1> element.](title-example.png)It should now be completely obvious where the `<h1>` content appears, and where the `<title>` content appears!
+   ![A simple web page with the title set to <title> element, and the <h1> set to <h1> element.](title-example.png)It should now be completely obvious where the `<h1>` content appears, and where the `<title>` content appears!
 
 3. You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it.
 
 The `<title>` element contents are also used in other ways. For example, if you try bookmarking the page (_Bookmarks > Bookmark This Page_ or the star icon in the URL bar in Firefox), you will see the `<title>` contents filled in as the suggested bookmark name.
 
-![A webpage being bookmarked in Firefox; the bookmark name has been automatically filled in with the contents of the \<title> element ](bookmark-example.png)
+![A webpage being bookmarked in Firefox; the bookmark name has been automatically filled in with the contents of the <title> element ](bookmark-example.png)
 
 The `<title>` contents are also used in search results, as you'll see below.
 
@@ -148,16 +148,16 @@ The description is also used on search engine result pages. Let's go through an
 2. View the page's source (right-click on the page, choose _View Page Source_ from the context menu.)
 3. Find the description meta tag. It will look something like this (although it may change over time):
 
-    ```html
-    <meta name="description" content="The MDN Web Docs site
-      provides information about Open Web technologies
-      including HTML, CSS, and APIs for both Web sites and
-      progressive web apps.">
-    ```
+   ```html
+   <meta name="description" content="The MDN Web Docs site
+     provides information about Open Web technologies
+     including HTML, CSS, and APIs for both Web sites and
+     progressive web apps.">
+   ```
 
 4. Now search for "MDN Web Docs" in your favorite search engine (We used Google.) You'll notice the description `<meta>` and `<title>` element content used in the search result — definitely worth having!
 
-    ![A Yahoo search result for "Mozilla Developer Network"](mdn-search-result.png)
+   ![A Yahoo search result for "Mozilla Developer Network"](mdn-search-result.png)
 
 > **Note:** In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in [Google's webmaster tools](https://search.google.com/search-console/about?hl=en) — a way to make your site's search results better in the Google search engine.
 
@@ -198,9 +198,9 @@ A favicon can be added to your page by:
 1. Saving it in the same directory as the site's index page, saved in `.ico` format (most browsers will support favicons in more common formats like `.gif` or `.png`, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
 2. Adding the following line into your HTML's {{HTMLElement("head")}} block to reference it:
 
-    ```html
-    <link rel="icon" href="favicon.ico" type="image/x-icon">
-    ```
+   ```html
+   <link rel="icon" href="favicon.ico" type="image/x-icon">
+   ```
 
 Here is an example of a favicon in a bookmarks panel:
 
diff --git a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
index 0f07e5c1f1726e9..7cb89d327570925 100644
--- a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
+++ b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
@@ -67,7 +67,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 HTML images skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for HTML images skill test 1".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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/multimedia_and_embedding/mozilla_splash_page/index.md b/files/en-us/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
index 5b9b96061cd0722..729611e00670ec2 100644
--- a/files/en-us/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
+++ b/files/en-us/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
@@ -117,10 +117,10 @@ 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/). Glitch is probably better for this example, as it allows you upload assets like images, whereas some of the other tools don't.
 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 Mozilla splash page".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for Mozilla splash page".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
 
 {{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
 
diff --git a/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md
index 59a2f301df8572d..f7497efa3cc9942 100644
--- a/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -118,13 +118,13 @@ The `srcset` and `sizes` attributes look complicated, but they're not too hard t
 2. A space
 3. The image's **intrinsic width in pixels** (`480w`) — note that this uses the `w` unit, not `px` as you might expect. An image's [intrinsic size](/en-US/docs/Glossary/Intrinsic_Size) is its real size, which can be found by inspecting the image file on your computer (for example, on a Mac you can select the image in Finder and press
 
-    <kbd>Cmd</kbd>
+   <kbd>Cmd</kbd>
 
-    \+
+   \+
 
-    <kbd>I</kbd>
+   <kbd>I</kbd>
 
-    to bring up the info screen).
+   to bring up the info screen).
 
 **`sizes`** defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the hints we talked about earlier. In this case, before each comma we write:
 
diff --git a/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md b/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md
index bb039222c3d5a15..fad35416a809387 100644
--- a/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md
+++ b/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md
@@ -80,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 multimedia and embedding skill test 1".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for multimedia and embedding skill test 1".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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/tables/advanced/index.md b/files/en-us/learn/html/tables/advanced/index.md
index 515bd4bd110bb72..6a29a478b6e18d4 100644
--- a/files/en-us/learn/html/tables/advanced/index.md
+++ b/files/en-us/learn/html/tables/advanced/index.md
@@ -98,16 +98,16 @@ Let's put these new elements into action.
 5. Next, add a {{htmlattrxref("colspan","td")}} attribute to make the "SUM" cell span across the first four columns, so the actual number appears at the bottom of the "Cost" column.
 6. Let's add some simple extra styling to the table, to give you an idea of how useful these elements are for applying CSS. Inside the head of your HTML document, you'll see an empty {{htmlelement("style")}} element. Inside this element, add the following lines of CSS code:
 
-    ```css
-    tbody {
-      font-size: 95%;
-      font-style: italic;
-    }
-
-    tfoot {
-      font-weight: bold;
-    }
-    ```
+   ```css
+   tbody {
+     font-size: 95%;
+     font-style: italic;
+   }
+
+   tfoot {
+     font-weight: bold;
+   }
+   ```
 
 7. Save and refresh, and have a look at the result. If the `<tbody>` and `<tfoot>` elements weren't in place, you'd have to write much more complicated selectors/rules to apply the same styling.
 
diff --git a/files/en-us/learn/html/tables/basics/index.md b/files/en-us/learn/html/tables/basics/index.md
index 332bec05ae04c19..c7b67a8feb323e7 100644
--- a/files/en-us/learn/html/tables/basics/index.md
+++ b/files/en-us/learn/html/tables/basics/index.md
@@ -236,18 +236,18 @@ We've talked table theory enough, so, let's dive into a practical example and bu
 2. The content of every table is enclosed by these two tags : **[`<table></table>`](/en-US/docs/Web/HTML/Element/table)**. Add these inside the body of your HTML.
 3. The smallest container inside a table is a table cell, which is created by a **[`<td>`](/en-US/docs/Web/HTML/Element/td)** element ('td' stands for 'table data'). Add the following inside your table tags:
 
-    ```html
-    <td>Hi, I'm your first cell.</td>
-    ```
+   ```html
+   <td>Hi, I'm your first cell.</td>
+   ```
 
 4. If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so:
 
-    ```html
-    <td>Hi, I'm your first cell.</td>
-    <td>I'm your second cell.</td>
-    <td>I'm your third cell.</td>
-    <td>I'm your fourth cell.</td>
-    ```
+   ```html
+   <td>Hi, I'm your first cell.</td>
+   <td>I'm your second cell.</td>
+   <td>I'm your third cell.</td>
+   <td>I'm your fourth cell.</td>
+   ```
 
 As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each `<td>` element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.
 
@@ -255,14 +255,14 @@ To stop this row from growing and start placing subsequent cells on a second row
 
 1. Place the four cells you've already created inside `<tr>` tags, like so:
 
-    ```html
-    <tr>
-      <td>Hi, I'm your first cell.</td>
-      <td>I'm your second cell.</td>
-      <td>I'm your third cell.</td>
-      <td>I'm your fourth cell.</td>
-    </tr>
-    ```
+   ```html
+   <tr>
+     <td>Hi, I'm your first cell.</td>
+     <td>I'm your second cell.</td>
+     <td>I'm your third cell.</td>
+     <td>I'm your fourth cell.</td>
+   </tr>
+   ```
 
 2. Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional `<tr>` element, with each cell contained in a `<td>`.
 
diff --git a/files/en-us/learn/html/tables/structuring_planet_data/index.md b/files/en-us/learn/html/tables/structuring_planet_data/index.md
index f3a451828329440..483dc9be2612f38 100644
--- a/files/en-us/learn/html/tables/structuring_planet_data/index.md
+++ b/files/en-us/learn/html/tables/structuring_planet_data/index.md
@@ -75,10 +75,10 @@ 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/).
 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 Structuring planet data".
-    - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
+   - A descriptive title such as "Assessment wanted for Structuring planet data".
+   - Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.
 
 {{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
 
diff --git a/files/en-us/learn/index.md b/files/en-us/learn/index.md
index 85f4cc1e3dba19f..35f7ec86fa8c924 100644
--- a/files/en-us/learn/index.md
+++ b/files/en-us/learn/index.md
@@ -61,7 +61,7 @@ The following is a list of all the topics we cover in the MDN learning area.
 - [Web Performance — making websites fast and responsive](/en-US/docs/Learn/Performance)
   - : Web performance is the art of making sure web applications download fast and are responsive to user interaction, regardless of a user's bandwidth, screen size, network, or device capabilities.
 - [MathML](/en-US/docs/Learn/MathML)
-  - : MathML is the language that we can use to write mathematical formulas in web pages using fractions, scripts, radicals, matrices, integrals, series, etc.  This topic covers MathML.
+  - : MathML is the language that we can use to write mathematical formulas in web pages using fractions, scripts, radicals, matrices, integrals, series, etc. This topic covers MathML.
 - [Tools and testing](/en-US/docs/Learn/Tools_and_testing)
   - : This topic covers the tools developers use to facilitate their work, such as cross-browser testing tools, linters, formatters, transformation tools, version control systems, deployment tools, and client-side JavaScript frameworks.
 - [Server-side website programming](/en-US/docs/Learn/Server-side)
@@ -77,9 +77,9 @@ If you prefer to copy the repo in a more flexible way that allows for automatic
 2. Open your computer's [command prompt](https://www.lifewire.com/how-to-open-command-prompt-2618089) (Windows) or terminal ([Linux](https://help.ubuntu.com/community/UsingTheTerminal), [macOS](https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line)).
 3. To copy the learning area repo to a folder called learning-area in the current location your command prompt/terminal is pointing to, use the following command:
 
-    ```bash
-    git clone https://github.com/mdn/learning-area
-    ```
+   ```bash
+   git clone https://github.com/mdn/learning-area
+   ```
 
 4. You can now enter the directory and find the files you are after (either using your Finder/File Explorer or the [`cd` command](<https://en.wikipedia.org/wiki/Cd_(command)>)).
 
@@ -87,15 +87,15 @@ You can update the `learning-area` repository with any changes made to the maste
 
 1. In your command prompt/terminal, go inside the `learning-area` directory using `cd`. For example, if you were in the parent directory:
 
-    ```bash
-    cd learning-area
-    ```
+   ```bash
+   cd learning-area
+   ```
 
 2. Update the repository using the following command:
 
-    ```bash
-    git pull
-    ```
+   ```bash
+   git pull
+   ```
 
 ## Contact us
 
diff --git a/files/en-us/learn/javascript/asynchronous/introducing_workers/index.md b/files/en-us/learn/javascript/asynchronous/introducing_workers/index.md
index e777b0437270934..ba242731b0e4d8a 100644
--- a/files/en-us/learn/javascript/asynchronous/introducing_workers/index.md
+++ b/files/en-us/learn/javascript/asynchronous/introducing_workers/index.md
@@ -104,7 +104,7 @@ The "index.html" file and the "style.css" files are already complete:
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <meta charset="utf-8"> 
+    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Prime numbers</title>
     <script src="main.js" defer></script>
diff --git a/files/en-us/learn/javascript/asynchronous/promises/index.md b/files/en-us/learn/javascript/asynchronous/promises/index.md
index 90510e202cedbac..d965c21b934655b 100644
--- a/files/en-us/learn/javascript/asynchronous/promises/index.md
+++ b/files/en-us/learn/javascript/asynchronous/promises/index.md
@@ -171,7 +171,7 @@ First, a promise can be in one of three states:
 - **fulfilled**: the asynchronous function has succeeded. When a promise is fulfilled, its `then()` handler is called.
 - **rejected**: the asynchronous function has failed. When a promise is rejected, its `catch()` handler is called.
 
- Note that what "succeeded" or "failed" means here is up to the API in question: for example, `fetch()` considers a request successful if the server returned an error like [404 Not Found](/en-US/docs/Web/HTTP/Status/404), but not if a network error prevented the request being sent.
+Note that what "succeeded" or "failed" means here is up to the API in question: for example, `fetch()` considers a request successful if the server returned an error like [404 Not Found](/en-US/docs/Web/HTTP/Status/404), but not if a network error prevented the request being sent.
 
 Sometimes, we use the term **settled** to cover both **fulfilled** and **rejected**.
 
diff --git a/files/en-us/learn/javascript/asynchronous/sequencing_animations/index.md b/files/en-us/learn/javascript/asynchronous/sequencing_animations/index.md
index 6dcce01555ccc69..02376289b665318 100644
--- a/files/en-us/learn/javascript/asynchronous/sequencing_animations/index.md
+++ b/files/en-us/learn/javascript/asynchronous/sequencing_animations/index.md
@@ -103,10 +103,10 @@ 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/).
 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 Sequencing animations".
-    - 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.
+   - A descriptive title such as "Assessment wanted for Sequencing animations".
+   - 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.
 
 {{PreviousMenu("Learn/JavaScript/Asynchronous/Introducing_workers", "Learn/JavaScript/Asynchronous")}}
 
diff --git a/files/en-us/learn/javascript/building_blocks/build_your_own_function/index.md b/files/en-us/learn/javascript/building_blocks/build_your_own_function/index.md
index cff28bf84338458..46023fefd247f03 100644
--- a/files/en-us/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/en-us/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -67,33 +67,33 @@ To begin with, let's put together a basic function.
 1. Start by accessing the [function-start.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-start.html) file and making a local copy. You'll see that the HTML is simple — the body contains just a single button. We've also provided some basic CSS to style the custom message box, and an empty {{htmlelement("script")}} element to put our JavaScript in.
 2. Next, add the following inside the `<script>` element:
 
-    ```js
-    function displayMessage() {
+   ```js
+   function displayMessage() {
 
-    }
-    ```
+   }
+   ```
 
-    We start off with the keyword `function`, which means we are defining a function. This is followed by the name we want to give to our function, a set of parentheses, and a set of curly braces. Any parameters we want to give to our function go inside the parentheses, and the code that runs when we call the function goes inside the curly braces.
+   We start off with the keyword `function`, which means we are defining a function. This is followed by the name we want to give to our function, a set of parentheses, and a set of curly braces. Any parameters we want to give to our function go inside the parentheses, and the code that runs when we call the function goes inside the curly braces.
 
 3. Finally, add the following code inside the curly braces:
 
-    ```js
-    const body = document.body;
+   ```js
+   const body = document.body;
 
-    const panel = document.createElement('div');
-    panel.setAttribute('class','msgBox');
-    body.appendChild(panel);
+   const panel = document.createElement('div');
+   panel.setAttribute('class','msgBox');
+   body.appendChild(panel);
 
-    const msg = document.createElement('p');
-    msg.textContent = 'This is a message box';
-    panel.appendChild(msg);
+   const msg = document.createElement('p');
+   msg.textContent = 'This is a message box';
+   panel.appendChild(msg);
 
-    const closeBtn = document.createElement('button');
-    closeBtn.textContent = 'x';
-    panel.appendChild(closeBtn);
+   const closeBtn = document.createElement('button');
+   closeBtn.textContent = 'x';
+   panel.appendChild(closeBtn);
 
-    closeBtn.addEventListener('click', () => panel.parentNode.removeChild(panel));
-    ```
+   closeBtn.addEventListener('click', () => panel.parentNode.removeChild(panel));
+   ```
 
 This is quite a lot of code to go through, so we'll walk you through it bit by bit.
 
@@ -152,32 +152,32 @@ You've now got your function definition written into your `<script>` element jus
 
 1. Try including the following line below your function to call it:
 
-    ```js
-    displayMessage();
-    ```
+   ```js
+   displayMessage();
+   ```
 
-    This line invokes the function, making it run immediately. When you save your code and reload it in the browser, you'll see the little message box appear immediately, only once. We are only calling it once, after all.
+   This line invokes the function, making it run immediately. When you save your code and reload it in the browser, you'll see the little message box appear immediately, only once. We are only calling it once, after all.
 
 2. Now open your browser developer tools on the example page, go to the JavaScript console and type the line again there, you'll see it appear again! So this is fun — we now have a reusable function that we can call any time we like.
 
-    But we probably want it to appear in response to user and system actions. In a real application, such a message box would probably be called in response to new data being available, or an error having occurred, or the user trying to delete their profile ("are you sure about this?"), or the user adding a new contact and the operation completing successfully, etc.
+   But we probably want it to appear in response to user and system actions. In a real application, such a message box would probably be called in response to new data being available, or an error having occurred, or the user trying to delete their profile ("are you sure about this?"), or the user adding a new contact and the operation completing successfully, etc.
 
-    In this demo, we'll get the message box to appear when the user clicks the button.
+   In this demo, we'll get the message box to appear when the user clicks the button.
 
 3. Delete the previous line you added.
 4. Next, we'll select the button and store a reference to it in a constant. Add the following line to your code, above the function definition:
 
-    ```js
-    const btn = document.querySelector('button');
-    ```
+   ```js
+   const btn = document.querySelector('button');
+   ```
 
 5. Finally, add the following line below the previous one:
 
-    ```js
-    btn.addEventListener('click', displayMessage);
-    ```
+   ```js
+   btn.addEventListener('click', displayMessage);
+   ```
 
-    In a similar way to our closeBtn's click event handler, here we are calling some code in response to a button being clicked. But in this case, instead of calling an anonymous function containing some code, we are calling our `displayMessage()` function by name.
+   In a similar way to our closeBtn's click event handler, here we are calling some code in response to a button being clicked. But in this case, instead of calling an anonymous function containing some code, we are calling our `displayMessage()` function by name.
 
 6. Try saving and refreshing the page — now you should see the message box appear when you click the button.
 
@@ -197,43 +197,43 @@ As it stands, the function is still not very useful — we don't want to just sh
 
 1. First of all, update the first line of the function:
 
-    ```js
-    function displayMessage() {
-    ```
+   ```js
+   function displayMessage() {
+   ```
 
-    to this:
+   to this:
 
-    ```js
-    function displayMessage(msgText, msgType) {
-    ```
+   ```js
+   function displayMessage(msgText, msgType) {
+   ```
 
-    Now when we call the function, we can provide two variable values inside the parentheses to specify the message to display in the message box, and the type of message it is.
+   Now when we call the function, we can provide two variable values inside the parentheses to specify the message to display in the message box, and the type of message it is.
 
 2. To make use of the first parameter, update the following line inside your function:
 
-    ```js
-    msg.textContent = 'This is a message box';
-    ```
+   ```js
+   msg.textContent = 'This is a message box';
+   ```
 
-    to
+   to
 
-    ```js
-    msg.textContent = msgText;
-    ```
+   ```js
+   msg.textContent = msgText;
+   ```
 
 3. Last but not least, you now need to update your function call to include some updated message text. Change the following line:
 
-    ```js
-    btn.addEventListener('click', displayMessage);
-    ```
+   ```js
+   btn.addEventListener('click', displayMessage);
+   ```
 
-    to this block:
+   to this block:
 
-    ```js
-    btn.addEventListener('click', () => displayMessage('Woo, this is a different message!'));
-    ```
+   ```js
+   btn.addEventListener('click', () => displayMessage('Woo, this is a different message!'));
+   ```
 
-    If we want to specify parameters inside parentheses for the function we are calling, then we can't call it directly — we need to put it inside an anonymous function so that it isn't in the immediate scope and therefore isn't called immediately. Now it will not be called until the button is clicked.
+   If we want to specify parameters inside parentheses for the function we are calling, then we can't call it directly — we need to put it inside an anonymous function so that it isn't in the immediate scope and therefore isn't called immediately. Now it will not be called until the button is clicked.
 
 4. Reload and try the code again and you'll see that it still works just fine, except that now you can also vary the message inside the parameter to get different messages displayed in the box!
 
@@ -243,58 +243,58 @@ On to the next parameter. This one is going to involve slightly more work — we
 
 1. First of all, download the icons needed for this exercise ([warning](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/icons/warning.png) and [chat](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/icons/chat.png)) from GitHub. Save them in a new folder called `icons` in the same location as your HTML file.
 
-    > **Note:** The warning and chat icons were originally found on [iconfinder.com](https://www.iconfinder.com/), and designed by [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr) — Thanks! (The actual icon pages were since moved or removed.)
+   > **Note:** The warning and chat icons were originally found on [iconfinder.com](https://www.iconfinder.com/), and designed by [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr) — Thanks! (The actual icon pages were since moved or removed.)
 
 2. Next, find the CSS inside your HTML file. We'll make a few changes to make way for the icons. First, update the `.msgBox` width from:
 
-    ```css
-    width: 200px;
-    ```
+   ```css
+   width: 200px;
+   ```
 
-    to
+   to
 
-    ```css
-    width: 242px;
-    ```
+   ```css
+   width: 242px;
+   ```
 
 3. Next, add the following lines inside the `.msgBox p { }` rule:
 
-    ```css
-    padding-left: 82px;
-    background-position: 25px center;
-    background-repeat: no-repeat;
-    ```
+   ```css
+   padding-left: 82px;
+   background-position: 25px center;
+   background-repeat: no-repeat;
+   ```
 
 4. Now we need to add code to our `displayMessage()` function to handle displaying the icons. Add the following block just above the closing curly brace (`}`) of your function:
 
-    ```js
-    if (msgType === 'warning') {
-      msg.style.backgroundImage = 'url(icons/warning.png)';
-      panel.style.backgroundColor = 'red';
-    } else if (msgType === 'chat') {
-      msg.style.backgroundImage = 'url(icons/chat.png)';
-      panel.style.backgroundColor = 'aqua';
-    } else {
-      msg.style.paddingLeft = '20px';
-    }
-    ```
+   ```js
+   if (msgType === 'warning') {
+     msg.style.backgroundImage = 'url(icons/warning.png)';
+     panel.style.backgroundColor = 'red';
+   } else if (msgType === 'chat') {
+     msg.style.backgroundImage = 'url(icons/chat.png)';
+     panel.style.backgroundColor = 'aqua';
+   } else {
+     msg.style.paddingLeft = '20px';
+   }
+   ```
 
-    Here, if the `msgType` parameter is set as `'warning'`, the warning icon is displayed and the panel's background color is set to red. If it is set to `'chat'`, the chat icon is displayed and the panel's background color is set to aqua blue. If the `msgType` parameter is not set at all (or to something different), then the `else { }` part of the code comes into play, and the paragraph is given default padding and no icon, with no background panel color set either. This provides a default state if no `msgType` parameter is provided, meaning that it is an optional parameter!
+   Here, if the `msgType` parameter is set as `'warning'`, the warning icon is displayed and the panel's background color is set to red. If it is set to `'chat'`, the chat icon is displayed and the panel's background color is set to aqua blue. If the `msgType` parameter is not set at all (or to something different), then the `else { }` part of the code comes into play, and the paragraph is given default padding and no icon, with no background panel color set either. This provides a default state if no `msgType` parameter is provided, meaning that it is an optional parameter!
 
 5. Let's test out our updated function, try updating the `displayMessage()` call from this:
 
-    ```js
-    displayMessage('Woo, this is a different message!');
-    ```
+   ```js
+   displayMessage('Woo, this is a different message!');
+   ```
 
-    to one of these:
+   to one of these:
 
-    ```js
-    displayMessage('Your inbox is almost full — delete some mails', 'warning');
-    displayMessage('Brian: Hi there, how are you today?','chat');
-    ```
+   ```js
+   displayMessage('Your inbox is almost full — delete some mails', 'warning');
+   displayMessage('Brian: Hi there, how are you today?','chat');
+   ```
 
-    You can see how useful our (now not so) little function is becoming.
+   You can see how useful our (now not so) little function is becoming.
 
 > **Note:** If you have trouble getting the example to work, feel free to check your code against the [finished version on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-stage-4.html) ([see it running live](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html) also), or ask us for help.
 
diff --git a/files/en-us/learn/javascript/building_blocks/events/index.md b/files/en-us/learn/javascript/building_blocks/events/index.md
index 9e74d582675c80b..40df1b7aebc6d43 100644
--- a/files/en-us/learn/javascript/building_blocks/events/index.md
+++ b/files/en-us/learn/javascript/building_blocks/events/index.md
@@ -356,8 +356,8 @@ So, in this example, we are setting a random background color on the button, not
 > **Note:** See the [Event delegation](#event_delegation) section below for an example where we use `event.target`.
 
 > **Note:** You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function.
-`e`/`evt`/`event` are most commonly used by developers because they are short and easy to remember.
-It's always good to be consistent — with yourself, and with others if possible.
+> `e`/`evt`/`event` are most commonly used by developers because they are short and easy to remember.
+> It's always good to be consistent — with yourself, and with others if possible.
 
 ### Extra properties of event objects
 
diff --git a/files/en-us/learn/javascript/building_blocks/functions/index.md b/files/en-us/learn/javascript/building_blocks/functions/index.md
index 850c208f9fb46c8..d55a022c5807dae 100644
--- a/files/en-us/learn/javascript/building_blocks/functions/index.md
+++ b/files/en-us/learn/javascript/building_blocks/functions/index.md
@@ -371,89 +371,89 @@ Let's look at a real example to demonstrate scoping.
 2. Open the example up in a browser and in your text editor.
 3. Open the JavaScript console in your browser developer tools. In the JavaScript console, enter the following command:
 
-    ```js
-    output(x);
-    ```
+   ```js
+   output(x);
+   ```
 
-    You should see the value of variable `x` printed to the browser viewport.
+   You should see the value of variable `x` printed to the browser viewport.
 
 4. Now try entering the following in your console
 
-    ```js
-    output(y);
-    output(z);
-    ```
+   ```js
+   output(y);
+   output(z);
+   ```
 
-    Both of these should throw an error into the console along the lines of "[ReferenceError: y is not defined](/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined)". Why is that? Because of function scope — `y` and `z` are locked inside the `a()` and `b()` functions, so `output()` can't access them when called from the global scope.
+   Both of these should throw an error into the console along the lines of "[ReferenceError: y is not defined](/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined)". Why is that? Because of function scope — `y` and `z` are locked inside the `a()` and `b()` functions, so `output()` can't access them when called from the global scope.
 
 5. However, what about when it's called from inside another function? Try editing `a()` and `b()` so they look like this:
 
-    ```js
-    function a() {
-      const y = 2;
-      output(y);
-    }
+   ```js
+   function a() {
+     const y = 2;
+     output(y);
+   }
 
-    function b() {
-      const z = 3;
-      output(z);
-    }
-    ```
+   function b() {
+     const z = 3;
+     output(z);
+   }
+   ```
 
-    Save the code and reload it in your browser, then try calling the `a()` and `b()` functions from the JavaScript console:
+   Save the code and reload it in your browser, then try calling the `a()` and `b()` functions from the JavaScript console:
 
-    ```js
-    a();
-    b();
-    ```
+   ```js
+   a();
+   b();
+   ```
 
-    You should see the `y` and `z` values printed in the browser viewport. This works fine, as the `output()` function is being called inside the other functions — in the same scope as the variables it is printing are defined in, in each case. `output()` itself is available from anywhere, as it is defined in the global scope.
+   You should see the `y` and `z` values printed in the browser viewport. This works fine, as the `output()` function is being called inside the other functions — in the same scope as the variables it is printing are defined in, in each case. `output()` itself is available from anywhere, as it is defined in the global scope.
 
 6. Now try updating your code like this:
 
-    ```js
-    function a() {
-      const y = 2;
-      output(x);
-    }
+   ```js
+   function a() {
+     const y = 2;
+     output(x);
+   }
 
-    function b() {
-      const z = 3;
-      output(x);
-    }
-    ```
+   function b() {
+     const z = 3;
+     output(x);
+   }
+   ```
 
 7. Save and reload again, and try this again in your JavaScript console:
 
-    ```js
-    a();
-    b();
-    ```
+   ```js
+   a();
+   b();
+   ```
 
-    Both the `a()` and `b()` call should print the value of x to the browser viewport. These work fine because even though the `output()` calls are not in the same scope as `x` is defined in, `x` is a global variable so is available inside all code, everywhere.
+   Both the `a()` and `b()` call should print the value of x to the browser viewport. These work fine because even though the `output()` calls are not in the same scope as `x` is defined in, `x` is a global variable so is available inside all code, everywhere.
 
 8. Finally, try updating your code like this:
 
-    ```js
-    function a() {
-      const y = 2;
-      output(z);
-    }
+   ```js
+   function a() {
+     const y = 2;
+     output(z);
+   }
 
-    function b() {
-      const z = 3;
-      output(y);
-    }
-    ```
+   function b() {
+     const z = 3;
+     output(y);
+   }
+   ```
 
 9. Save and reload again, and try this again in your JavaScript console:
 
-    ```js
-    a();
-    b();
-    ```
+   ```js
+   a();
+   b();
+   ```
 
-    This time the `a()` and `b()` calls will throw that annoying [ReferenceError: _variable name_ is not defined](/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined) error into the console — this is because the `output()` calls and the variables they are trying to print are not in the same function scopes — the variables are effectively invisible to those function calls.
+   This time the `a()` and `b()` calls will throw that annoying [ReferenceError: _variable name_ is not defined](/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined) error into the console — this is because the `output()` calls and the variables they are trying to print are not in the same function scopes — the variables are effectively invisible to those function calls.
 
 > **Note:** The same scoping rules do not apply to loop (e.g. `for() { }`) and conditional blocks (e.g. `if () { }`) — they look very similar, but they are not the same thing! Take care not to get these confused.
 
diff --git a/files/en-us/learn/javascript/building_blocks/image_gallery/index.md b/files/en-us/learn/javascript/building_blocks/image_gallery/index.md
index 79879ba9593ae5b..bc1d6a91bce3981 100644
--- a/files/en-us/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/en-us/learn/javascript/building_blocks/image_gallery/index.md
@@ -132,10 +132,10 @@ 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/).
 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 Image gallery".
-    - 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.
+   - A descriptive title such as "Assessment wanted for Image gallery".
+   - 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.
 
 {{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
diff --git a/files/en-us/learn/javascript/building_blocks/return_values/index.md b/files/en-us/learn/javascript/building_blocks/return_values/index.md
index fa0aea494f6f36e..0b62704cad23d14 100644
--- a/files/en-us/learn/javascript/building_blocks/return_values/index.md
+++ b/files/en-us/learn/javascript/building_blocks/return_values/index.md
@@ -129,49 +129,49 @@ Let's have a go at writing our own functions featuring return values.
 1. First of all, make a local copy of the [function-library.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-library.html) file from GitHub. This is a simple HTML page containing a text {{htmlelement("input")}} field and a paragraph. There's also a {{htmlelement("script")}} element, in which we have stored a reference to both HTML elements in two variables. This little page will allow you to enter a number into the text box, and display different numbers related to it in the paragraph below.
 2. Let's add some useful functions to this `<script>` element. Below the two existing lines of [JavaScript](/en-US/docs/Web/JavaScript), add the following function definitions:
 
-    ```js
-    function squared(num) {
-      return num * num;
-    }
-
-    function cubed(num) {
-      return num * num * num;
-    }
-
-    function factorial(num) {
-      if (num < 0) return undefined;
-      if (num === 0) return 1;
-      let x = num - 1;
-      while (x > 1) {
-        num *= x;
-        x--;
-      }
-      return num;
-    }
-    ```
-
-    The `squared()` and `cubed()` functions are fairly obvious — they return the square or cube of the number that was given as a parameter. The `factorial()` function returns the [factorial](https://en.wikipedia.org/wiki/Factorial) of the given number.
+   ```js
+   function squared(num) {
+     return num * num;
+   }
+
+   function cubed(num) {
+     return num * num * num;
+   }
+
+   function factorial(num) {
+     if (num < 0) return undefined;
+     if (num === 0) return 1;
+     let x = num - 1;
+     while (x > 1) {
+       num *= x;
+       x--;
+     }
+     return num;
+   }
+   ```
+
+   The `squared()` and `cubed()` functions are fairly obvious — they return the square or cube of the number that was given as a parameter. The `factorial()` function returns the [factorial](https://en.wikipedia.org/wiki/Factorial) of the given number.
 
 3. Next, we're going to include a way to print out information about the number entered into the text input. Enter the following event handler below the existing functions:
 
-    ```js
-    input.addEventListener('change', () => {
-      const num = parseFloat(input.value);
-      if (isNaN(num)) {
-        para.textContent = 'You need to enter a number!';
-      } else {
-        para.textContent = `${num} squared is ${squared(num)}. `;
-        para.textContent += `${num} cubed is ${cubed(num)}. `;
-        para.textContent += `${num} factorial is ${factorial(num)}. `;
-      }
-    });
-    ```
+   ```js
+   input.addEventListener('change', () => {
+     const num = parseFloat(input.value);
+     if (isNaN(num)) {
+       para.textContent = 'You need to enter a number!';
+     } else {
+       para.textContent = `${num} squared is ${squared(num)}. `;
+       para.textContent += `${num} cubed is ${cubed(num)}. `;
+       para.textContent += `${num} factorial is ${factorial(num)}. `;
+     }
+   });
+   ```
 
-    Here we are adding a listener to the `change` event. It runs whenever the `change` event fires on the text input — that is, when a new value is entered into the text `input`, and submitted (e.g., enter a value, then un-focus the input by pressing <kbd>Tab</kbd> or <kbd>Return</kbd>). When this anonymous function runs, the value in the `input` is stored in the `num` constant.
+   Here we are adding a listener to the `change` event. It runs whenever the `change` event fires on the text input — that is, when a new value is entered into the text `input`, and submitted (e.g., enter a value, then un-focus the input by pressing <kbd>Tab</kbd> or <kbd>Return</kbd>). When this anonymous function runs, the value in the `input` is stored in the `num` constant.
 
-    Next, we do a conditional test. If the entered value is not a number, an error message is printed to the paragraph. The test looks at whether the expression `isNaN(num)` returns `true`. The [`isNaN()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN) function to test whether the `num` value is not a number — if so, it returns `true`, and if not, it returns `false`.
+   Next, we do a conditional test. If the entered value is not a number, an error message is printed to the paragraph. The test looks at whether the expression `isNaN(num)` returns `true`. The [`isNaN()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN) function to test whether the `num` value is not a number — if so, it returns `true`, and if not, it returns `false`.
 
-    If the test returns `false`, the `num` value is a number. Therefore, a sentence is printed out inside the paragraph element that states the square, cube, and factorial values of the number. The sentence calls the `squared()`, `cubed()`, and `factorial()` functions to calculate the required values.
+   If the test returns `false`, the `num` value is a number. Therefore, a sentence is printed out inside the paragraph element that states the square, cube, and factorial values of the number. The sentence calls the `squared()`, `cubed()`, and `factorial()` functions to calculate the required values.
 
 4. Save your code, load it in a browser, and try it out.
 
diff --git a/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md b/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
index 9ddb54cd0fe3ef4..2d916abb2092d9a 100644
--- a/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
+++ b/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
@@ -106,7 +106,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 Conditionals 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Conditionals 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__events/index.md b/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
index 1d40655763422e7..66d4e0938993517 100644
--- a/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
+++ b/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
@@ -78,7 +78,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 Events 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Events 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md b/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
index ede2db32de45520..9b04ca795fb9b53 100644
--- a/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
+++ b/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
@@ -94,7 +94,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 Functions 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Functions 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md b/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
index d7a9e23a4da81d9..c619948b19c9478 100644
--- a/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
+++ b/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
@@ -73,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 Loops 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Loops 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md
index b62192728b99603..b0eb1691b020abf 100644
--- a/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md
+++ b/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md
@@ -93,30 +93,30 @@ Let's show you how:
 2. Open the JavaScript console of your browser's developer tools.
 3. All of your web storage data is contained within two object-like structures inside the browser: {{domxref("Window.sessionStorage", "sessionStorage")}} and {{domxref("Window.localStorage", "localStorage")}}. The first one persists data for as long as the browser is open (the data is lost when the browser is closed) and the second one persists data even after the browser is closed and then opened again. We'll use the second one in this article as it is generally more useful.
 
-    The {{domxref("Storage.setItem()")}} method allows you to save a data item in storage — it takes two parameters: the name of the item, and its value. Try typing this into your JavaScript console (change the value to your own name, if you wish!):
+   The {{domxref("Storage.setItem()")}} method allows you to save a data item in storage — it takes two parameters: the name of the item, and its value. Try typing this into your JavaScript console (change the value to your own name, if you wish!):
 
-    ```js
-    localStorage.setItem('name','Chris');
-    ```
+   ```js
+   localStorage.setItem('name','Chris');
+   ```
 
 4. The {{domxref("Storage.getItem()")}} method takes one parameter — the name of a data item you want to retrieve — and returns the item's value. Now type these lines into your JavaScript console:
 
-    ```js
-    let myName = localStorage.getItem('name');
-    myName
-    ```
+   ```js
+   let myName = localStorage.getItem('name');
+   myName
+   ```
 
-    Upon typing in the second line, you should see that the `myName` variable now contains the value of the `name` data item.
+   Upon typing in the second line, you should see that the `myName` variable now contains the value of the `name` data item.
 
 5. The {{domxref("Storage.removeItem()")}} method takes one parameter — the name of a data item you want to remove — and removes that item out of web storage. Type the following lines into your JavaScript console:
 
-    ```js
-    localStorage.removeItem('name');
-    myName = localStorage.getItem('name');
-    myName
-    ```
+   ```js
+   localStorage.removeItem('name');
+   myName = localStorage.getItem('name');
+   myName
+   ```
 
-    The third line should now return `null` — the `name` item no longer exists in the web storage.
+   The third line should now return `null` — the `name` item no longer exists in the web storage.
 
 ### The data persists!
 
@@ -125,23 +125,23 @@ One key feature of web storage is that the data persists between page loads (and
 1. Open our web storage blank template again, but this time in a different browser to the one you've got this tutorial open in! This will make it easier to deal with.
 2. Type these lines into the browser's JavaScript console:
 
-    ```js
-    localStorage.setItem('name','Chris');
-    let myName = localStorage.getItem('name');
-    myName
-    ```
+   ```js
+   localStorage.setItem('name','Chris');
+   let myName = localStorage.getItem('name');
+   myName
+   ```
 
-    You should see the name item returned.
+   You should see the name item returned.
 
 3. Now close down the browser and open it up again.
 4. Enter the following lines again:
 
-    ```js
-    let myName = localStorage.getItem('name');
-    myName
-    ```
+   ```js
+   let myName = localStorage.getItem('name');
+   myName
+   ```
 
-    You should see that the value is still available, even though the browser has been closed and then opened again.
+   You should see that the value is still available, even though the browser has been closed and then opened again.
 
 ### Separate storage for each domain
 
@@ -163,80 +163,80 @@ Let's build up the example, so you can understand how it works.
 2. Next, note how our HTML references a JavaScript file called `index.js`, with a line like `<script src="index.js" defer></script>`. We need to create this and write our JavaScript code into it. Create an `index.js` file in the same directory as your HTML file.
 3. We'll start off by creating references to all the HTML features we need to manipulate in this example — we'll create them all as constants, as these references do not need to change in the lifecycle of the app. Add the following lines to your JavaScript file:
 
-    ```js
-    // create needed constants
-    const rememberDiv = document.querySelector('.remember');
-    const forgetDiv = document.querySelector('.forget');
-    const form = document.querySelector('form');
-    const nameInput = document.querySelector('#entername');
-    const submitBtn = document.querySelector('#submitname');
-    const forgetBtn = document.querySelector('#forgetname');
+   ```js
+   // create needed constants
+   const rememberDiv = document.querySelector('.remember');
+   const forgetDiv = document.querySelector('.forget');
+   const form = document.querySelector('form');
+   const nameInput = document.querySelector('#entername');
+   const submitBtn = document.querySelector('#submitname');
+   const forgetBtn = document.querySelector('#forgetname');
 
-    const h1 = document.querySelector('h1');
-    const personalGreeting = document.querySelector('.personal-greeting');
-    ```
+   const h1 = document.querySelector('h1');
+   const personalGreeting = document.querySelector('.personal-greeting');
+   ```
 
 4. Next up, we need to include a small event listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want. Add this snippet below your previous code:
 
-    ```js
-    // Stop the form from submitting when a button is pressed
-    form.addEventListener('submit', (e) => e.preventDefault());
-    ```
+   ```js
+   // Stop the form from submitting when a button is pressed
+   form.addEventListener('submit', (e) => e.preventDefault());
+   ```
 
 5. Now we need to add an event listener, the handler function of which will run when the "Say hello" button is clicked. The comments explain in detail what each bit does, but in essence here we are taking the name the user has entered into the text input box and saving it in web storage using `setItem()`, then running a function called `nameDisplayCheck()` that will handle updating the actual website text. Add this to the bottom of your code:
 
-    ```js
-    // run function when the 'Say hello' button is clicked
-    submitBtn.addEventListener('click', () => {
-      // store the entered name in web storage
-      localStorage.setItem('name', nameInput.value);
-      // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
-      nameDisplayCheck();
-    });
-    ```
+   ```js
+   // run function when the 'Say hello' button is clicked
+   submitBtn.addEventListener('click', () => {
+     // store the entered name in web storage
+     localStorage.setItem('name', nameInput.value);
+     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
+     nameDisplayCheck();
+   });
+   ```
 
 6. At this point we also need an event handler to run a function when the "Forget" button is clicked — this is only displayed after the "Say hello" button has been clicked (the two form states toggle back and forth). In this function we remove the `name` item from web storage using `removeItem()`, then again run `nameDisplayCheck()` to update the display. Add this to the bottom:
 
-    ```js
-    // run function when the 'Forget' button is clicked
-    forgetBtn.addEventListener('click', () => {
-      // Remove the stored name from web storage
-      localStorage.removeItem('name');
-      // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
-      nameDisplayCheck();
-    });
-    ```
+   ```js
+   // run function when the 'Forget' button is clicked
+   forgetBtn.addEventListener('click', () => {
+     // Remove the stored name from web storage
+     localStorage.removeItem('name');
+     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
+     nameDisplayCheck();
+   });
+   ```
 
 7. It is now time to define the `nameDisplayCheck()` function itself. Here we check whether the name item has been stored in web storage by using `localStorage.getItem('name')` as a conditional test. If the name has been stored, this call will evaluate to `true`; if not, the call will evaluate to `false`. If the call evaluates to `true`, we display a personalized greeting, display the "forget" part of the form, and hide the "Say hello" part of the form. If the call evaluates to `false`, we display a generic greeting and do the opposite. Again, put the following code at the bottom:
 
-    ```js
-    // define the nameDisplayCheck() function
-    function nameDisplayCheck() {
-      // check whether the 'name' data item is stored in web Storage
-      if (localStorage.getItem('name')) {
-        // If it is, display personalized greeting
-        const name = localStorage.getItem('name');
-        h1.textContent = `Welcome, ${name}`;
-        personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
-        // hide the 'remember' part of the form and show the 'forget' part
-        forgetDiv.style.display = 'block';
-        rememberDiv.style.display = 'none';
-      } else {
-        // if not, display generic greeting
-        h1.textContent = 'Welcome to our website ';
-        personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
-        // hide the 'forget' part of the form and show the 'remember' part
-        forgetDiv.style.display = 'none';
-        rememberDiv.style.display = 'block';
-      }
-    }
-    ```
+   ```js
+   // define the nameDisplayCheck() function
+   function nameDisplayCheck() {
+     // check whether the 'name' data item is stored in web Storage
+     if (localStorage.getItem('name')) {
+       // If it is, display personalized greeting
+       const name = localStorage.getItem('name');
+       h1.textContent = `Welcome, ${name}`;
+       personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
+       // hide the 'remember' part of the form and show the 'forget' part
+       forgetDiv.style.display = 'block';
+       rememberDiv.style.display = 'none';
+     } else {
+       // if not, display generic greeting
+       h1.textContent = 'Welcome to our website ';
+       personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
+       // hide the 'forget' part of the form and show the 'remember' part
+       forgetDiv.style.display = 'none';
+       rememberDiv.style.display = 'block';
+     }
+   }
+   ```
 
 8. Last but not least, we need to run the `nameDisplayCheck()` function when the page is loaded. If we don't do this, then the personalized greeting will not persist across page reloads. Add the following to the bottom of your code:
 
-    ```js
-    nameDisplayCheck();
-    ```
+   ```js
+   nameDisplayCheck();
+   ```
 
 Your example is finished — well done! All that remains now is to save your code and test your HTML page in a browser. You can see our [finished version running live here](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html).
 
@@ -272,75 +272,75 @@ Now let's look at what we have to do in the first place, to actually set up a da
 
 1. Below the constant declarations, add the following lines:
 
-    ```js
-    // Create an instance of a db object for us to store the open database in
-    let db;
-    ```
+   ```js
+   // Create an instance of a db object for us to store the open database in
+   let db;
+   ```
 
-    Here we are declaring a variable called `db` — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier.
+   Here we are declaring a variable called `db` — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier.
 
 2. Next, add the following:
 
-    ```js
-    // Open our database; it is created if it doesn't already exist
-    // (see the upgradeneeded handler below)
-    const openRequest = window.indexedDB.open('notes_db', 1);
-    ```
+   ```js
+   // Open our database; it is created if it doesn't already exist
+   // (see the upgradeneeded handler below)
+   const openRequest = window.indexedDB.open('notes_db', 1);
+   ```
 
-    This line creates a request to open version `1` of a database called `notes_db`. If this doesn't already exist, it will be created for you by subsequent code. You will see this request pattern used very often throughout IndexedDB. Database operations take time. You don't want to hang the browser while you wait for the results, so database operations are {{Glossary("asynchronous")}}, meaning that instead of happening immediately, they will happen at some point in the future, and you get notified when they're done.
+   This line creates a request to open version `1` of a database called `notes_db`. If this doesn't already exist, it will be created for you by subsequent code. You will see this request pattern used very often throughout IndexedDB. Database operations take time. You don't want to hang the browser while you wait for the results, so database operations are {{Glossary("asynchronous")}}, meaning that instead of happening immediately, they will happen at some point in the future, and you get notified when they're done.
 
-    To handle this in IndexedDB, you create a request object (which can be called anything you like — we called it `openRequest` here, so it is obvious what it is for). You then use event handlers to run code when the request completes, fails, etc., which you'll see in use below.
+   To handle this in IndexedDB, you create a request object (which can be called anything you like — we called it `openRequest` here, so it is obvious what it is for). You then use event handlers to run code when the request completes, fails, etc., which you'll see in use below.
 
-    > **Note:** The version number is important. If you want to upgrade your database (for example, by changing the table structure), you have to run your code again with an increased version number, different schema specified inside the `upgradeneeded` handler (see below), etc. We won't cover upgrading databases in this tutorial.
+   > **Note:** The version number is important. If you want to upgrade your database (for example, by changing the table structure), you have to run your code again with an increased version number, different schema specified inside the `upgradeneeded` handler (see below), etc. We won't cover upgrading databases in this tutorial.
 
 3. Now add the following event handlers just below your previous addition:
 
-    ```js
-    // error handler signifies that the database didn't open successfully
-    openRequest.addEventListener('error', () => console.error('Database failed to open'));
+   ```js
+   // error handler signifies that the database didn't open successfully
+   openRequest.addEventListener('error', () => console.error('Database failed to open'));
 
-    // success handler signifies that the database opened successfully
-    openRequest.addEventListener('success', () => {
-      console.log('Database opened successfully');
+   // success handler signifies that the database opened successfully
+   openRequest.addEventListener('success', () => {
+     console.log('Database opened successfully');
 
-      // Store the opened database object in the db variable. This is used a lot below
-      db = openRequest.result;
+     // Store the opened database object in the db variable. This is used a lot below
+     db = openRequest.result;
 
-      // Run the displayData() function to display the notes already in the IDB
-      displayData();
-    });
-    ```
+     // Run the displayData() function to display the notes already in the IDB
+     displayData();
+   });
+   ```
 
-    The {{domxref("IDBRequest/error_event", "error")}} event handler will run if the system comes back saying that the request failed. This allows you to respond to this problem. In our example, we just print a message to the JavaScript console.
+   The {{domxref("IDBRequest/error_event", "error")}} event handler will run if the system comes back saying that the request failed. This allows you to respond to this problem. In our example, we just print a message to the JavaScript console.
 
-    The {{domxref("IDBRequest/success_event", "success")}} event handler will run if the request returns successfully, meaning the database was successfully opened. If this is the case, an object representing the opened database becomes available in the {{domxref("IDBRequest.result", "openRequest.result")}} property, allowing us to manipulate the database. We store this in the `db` variable we created earlier for later use. We also run a function called `displayData()`, which displays the data in the database inside the {{HTMLElement("ul")}}. We run it now so that the notes already in the database are displayed as soon as the page loads. You'll see `displayData()` defined later on.
+   The {{domxref("IDBRequest/success_event", "success")}} event handler will run if the request returns successfully, meaning the database was successfully opened. If this is the case, an object representing the opened database becomes available in the {{domxref("IDBRequest.result", "openRequest.result")}} property, allowing us to manipulate the database. We store this in the `db` variable we created earlier for later use. We also run a function called `displayData()`, which displays the data in the database inside the {{HTMLElement("ul")}}. We run it now so that the notes already in the database are displayed as soon as the page loads. You'll see `displayData()` defined later on.
 
 4. Finally for this section, we'll add probably the most important event handler for setting up the database: {{domxref("IDBOpenDBRequest/upgradeneeded_event", "upgradeneeded")}}. This handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). Add the following code, below your previous handler:
 
-    ```js
-    // Set up the database tables if this has not already been done
-    openRequest.addEventListener('upgradeneeded', (e) => {
+   ```js
+   // Set up the database tables if this has not already been done
+   openRequest.addEventListener('upgradeneeded', (e) => {
 
-      // Grab a reference to the opened database
-      db = e.target.result;
+     // Grab a reference to the opened database
+     db = e.target.result;
 
-      // Create an objectStore to store our notes in (basically like a single table)
-      // including a auto-incrementing key
-      const objectStore = db.createObjectStore('notes_os', { keyPath: 'id', autoIncrement:true });
+     // Create an objectStore to store our notes in (basically like a single table)
+     // including a auto-incrementing key
+     const objectStore = db.createObjectStore('notes_os', { keyPath: 'id', autoIncrement:true });
 
-      // Define what data items the objectStore will contain
-      objectStore.createIndex('title', 'title', { unique: false });
-      objectStore.createIndex('body', 'body', { unique: false });
+     // Define what data items the objectStore will contain
+     objectStore.createIndex('title', 'title', { unique: false });
+     objectStore.createIndex('body', 'body', { unique: false });
 
-      console.log('Database setup complete');
-    });
-    ```
+     console.log('Database setup complete');
+   });
+   ```
 
-    This is where we define the schema (structure) of our database; that is, the set of columns (or fields) it contains. Here we first grab a reference to the existing database from the `result` property of the event's target (`e.target.result`), which is the `request` object. This is equivalent to the line `db = openRequest.result;` inside the `success` event handler, but we need to do this separately here because the `upgradeneeded` event handler (if needed) will run before the `success` event handler, meaning that the `db` value wouldn't be available if we didn't do this.
+   This is where we define the schema (structure) of our database; that is, the set of columns (or fields) it contains. Here we first grab a reference to the existing database from the `result` property of the event's target (`e.target.result`), which is the `request` object. This is equivalent to the line `db = openRequest.result;` inside the `success` event handler, but we need to do this separately here because the `upgradeneeded` event handler (if needed) will run before the `success` event handler, meaning that the `db` value wouldn't be available if we didn't do this.
 
-    We then use {{domxref("IDBDatabase.createObjectStore()")}} to create a new object store inside our opened database called `notes_os`. This is equivalent to a single table in a conventional database system. We've given it the name notes, and also specified an `autoIncrement` key field called `id` — in each new record this will automatically be given an incremented value — the developer doesn't need to set this explicitly. Being the key, the `id` field will be used to uniquely identify records, such as when deleting or displaying a record.
+   We then use {{domxref("IDBDatabase.createObjectStore()")}} to create a new object store inside our opened database called `notes_os`. This is equivalent to a single table in a conventional database system. We've given it the name notes, and also specified an `autoIncrement` key field called `id` — in each new record this will automatically be given an incremented value — the developer doesn't need to set this explicitly. Being the key, the `id` field will be used to uniquely identify records, such as when deleting or displaying a record.
 
-    We also create two other indexes (fields) using the {{domxref("IDBObjectStore.createIndex()")}} method: `title` (which will contain a title for each note), and `body` (which will contain the body text of the note).
+   We also create two other indexes (fields) using the {{domxref("IDBObjectStore.createIndex()")}} method: `title` (which will contain a title for each note), and `body` (which will contain the body text of the note).
 
 So with this database schema set up, when we start adding records to the database, each one will be represented as an object along these lines:
 
@@ -537,110 +537,110 @@ Let's walk through the most interesting parts of the example. We won't look at i
 
 1. For this example, we've stored the names of the videos to fetch in an array of objects:
 
-    ```js
-    const videos = [
-      { 'name' : 'crystal' },
-      { 'name' : 'elf' },
-      { 'name' : 'frog' },
-      { 'name' : 'monster' },
-      { 'name' : 'pig' },
-      { 'name' : 'rabbit' }
-    ];
-    ```
+   ```js
+   const videos = [
+     { 'name' : 'crystal' },
+     { 'name' : 'elf' },
+     { 'name' : 'frog' },
+     { 'name' : 'monster' },
+     { 'name' : 'pig' },
+     { 'name' : 'rabbit' }
+   ];
+   ```
 
 2. To start with, once the database is successfully opened we run an `init()` function. This loops through the different video names, trying to load a record identified by each name from the `videos` database.
 
-    If each video is found in the database (checked by seeing whether `request.result` evaluates to `true` — if the record is not present, it will be `undefined`), its video files (stored as blobs) and the video name are passed straight to the `displayVideo()` function to place them in the UI. If not, the video name is passed to the `fetchVideoFromNetwork()` function to, you guessed it, fetch the video from the network.
-
-    ```js
-    function init() {
-      // Loop through the video names one by one
-      for(const video of videos) {
-        // Open transaction, get object store, and get() each video by name
-        const objectStore = db.transaction('videos_os').objectStore('videos_os');
-        const request = objectStore.get(video.name);
-        request.addEventListener('success', () => {
-          // If the result exists in the database (is not undefined)
-          if (request.result) {
-            // Grab the videos from IDB and display them using displayVideo()
-            console.log('taking videos from IDB');
-            displayVideo(request.result.mp4, request.result.webm, request.result.name);
-          } else {
-            // Fetch the videos from the network
-            fetchVideoFromNetwork(video);
-          }
-        });
-      }
-    }
-    ```
+   If each video is found in the database (checked by seeing whether `request.result` evaluates to `true` — if the record is not present, it will be `undefined`), its video files (stored as blobs) and the video name are passed straight to the `displayVideo()` function to place them in the UI. If not, the video name is passed to the `fetchVideoFromNetwork()` function to, you guessed it, fetch the video from the network.
+
+   ```js
+   function init() {
+     // Loop through the video names one by one
+     for(const video of videos) {
+       // Open transaction, get object store, and get() each video by name
+       const objectStore = db.transaction('videos_os').objectStore('videos_os');
+       const request = objectStore.get(video.name);
+       request.addEventListener('success', () => {
+         // If the result exists in the database (is not undefined)
+         if (request.result) {
+           // Grab the videos from IDB and display them using displayVideo()
+           console.log('taking videos from IDB');
+           displayVideo(request.result.mp4, request.result.webm, request.result.name);
+         } else {
+           // Fetch the videos from the network
+           fetchVideoFromNetwork(video);
+         }
+       });
+     }
+   }
+   ```
 
 3. The following snippet is taken from inside `fetchVideoFromNetwork()` — here we fetch MP4 and WebM versions of the video using two separate {{domxref("fetch()")}} requests. We then use the {{domxref("Response.blob()")}} method to extract each response's body as a blob, giving us an object representation of the videos that can be stored and displayed later on.
 
-    We have a problem here though — these two requests are both asynchronous, but we only want to try to display or store the video when both promises have fulfilled. Fortunately there is a built-in method that handles such a problem — {{jsxref("Promise.all()")}}. This takes one argument — references to all the individual promises you want to check for fulfillment placed in an array — and returns a promise which is fulfilled when all the individual promises are fulfilled.
+   We have a problem here though — these two requests are both asynchronous, but we only want to try to display or store the video when both promises have fulfilled. Fortunately there is a built-in method that handles such a problem — {{jsxref("Promise.all()")}}. This takes one argument — references to all the individual promises you want to check for fulfillment placed in an array — and returns a promise which is fulfilled when all the individual promises are fulfilled.
 
-    Inside the `then()` handler for this promise, we call the `displayVideo()` function like we did before to display the videos in the UI, then we also call the `storeVideo()` function to store those videos inside the database.
+   Inside the `then()` handler for this promise, we call the `displayVideo()` function like we did before to display the videos in the UI, then we also call the `storeVideo()` function to store those videos inside the database.
 
-    ```js
-    // Fetch the MP4 and WebM versions of the video using the fetch() function,
-    // then expose their response bodies as blobs
-    const mp4Blob = fetch(`videos/${video.name}.mp4`).then((response) => response.blob());
-    const webmBlob = fetch(`videos/${video.name}.webm`).then((response) => response.blob());
+   ```js
+   // Fetch the MP4 and WebM versions of the video using the fetch() function,
+   // then expose their response bodies as blobs
+   const mp4Blob = fetch(`videos/${video.name}.mp4`).then((response) => response.blob());
+   const webmBlob = fetch(`videos/${video.name}.webm`).then((response) => response.blob());
 
-    // Only run the next code when both promises have fulfilled
-    Promise.all([mp4Blob, webmBlob]).then((values) => {
-      // display the video fetched from the network with displayVideo()
-      displayVideo(values[0], values[1], video.name);
-      // store it in the IDB using storeVideo()
-      storeVideo(values[0], values[1], video.name);
-    });
-    ```
+   // Only run the next code when both promises have fulfilled
+   Promise.all([mp4Blob, webmBlob]).then((values) => {
+     // display the video fetched from the network with displayVideo()
+     displayVideo(values[0], values[1], video.name);
+     // store it in the IDB using storeVideo()
+     storeVideo(values[0], values[1], video.name);
+   });
+   ```
 
 4. Let's look at `storeVideo()` first. This is very similar to the pattern you saw in the previous example for adding data to the database — we open a `readwrite` transaction and get a reference to our `videos_os` object store, create an object representing the record to add to the database, then add it using {{domxref("IDBObjectStore.add()")}}.
 
-    ```js
-    // Define the storeVideo() function
-    function storeVideo(mp4, webm, name) {
-      // Open transaction, get object store; make it a readwrite so we can write to the IDB
-      const objectStore = db.transaction(['videos_os'], 'readwrite').objectStore('videos_os');
+   ```js
+   // Define the storeVideo() function
+   function storeVideo(mp4, webm, name) {
+     // Open transaction, get object store; make it a readwrite so we can write to the IDB
+     const objectStore = db.transaction(['videos_os'], 'readwrite').objectStore('videos_os');
 
-      // Add the record to the IDB using add()
-      const request = objectStore.add({ mp4, webm, name });
+     // Add the record to the IDB using add()
+     const request = objectStore.add({ mp4, webm, name });
 
-      request.addEventListener('success', () => console.log('Record addition attempt finished'));
-      request.addEventListener('error', () => console.error(request.error));
-    }
-    ```
+     request.addEventListener('success', () => console.log('Record addition attempt finished'));
+     request.addEventListener('error', () => console.error(request.error));
+   }
+   ```
 
 5. Finally, we have `displayVideo()`, which creates the DOM elements needed to insert the video in the UI and then appends them to the page. The most interesting parts of this are those shown below — to actually display our video blobs in a `<video>` element, we need to create object URLs (internal URLs that point to the video blobs stored in memory) using the {{domxref("URL.createObjectURL()")}} method. Once that is done, we can set the object URLs to be the values of our {{htmlelement("source")}} element's `src` attributes, and it works fine.
 
-    ```js
-    // Define the displayVideo() function
-    function displayVideo(mp4Blob, webmBlob, title) {
-      // Create object URLs out of the blobs
-      const mp4URL = URL.createObjectURL(mp4Blob);
-      const webmURL = URL.createObjectURL(webmBlob);
-
-      // Create DOM elements to embed video in the page
-      const article = document.createElement('article');
-      const h2 = document.createElement('h2');
-      h2.textContent = title;
-      const video = document.createElement('video');
-      video.controls = true;
-      const source1 = document.createElement('source');
-      source1.src = mp4URL;
-      source1.type = 'video/mp4';
-      const source2 = document.createElement('source');
-      source2.src = webmURL;
-      source2.type = 'video/webm';
-
-      // Embed DOM elements into page
-      section.appendChild(article);
-      article.appendChild(h2);
-      article.appendChild(video);
-      video.appendChild(source1);
-      video.appendChild(source2);
-    }
-    ```
+   ```js
+   // Define the displayVideo() function
+   function displayVideo(mp4Blob, webmBlob, title) {
+     // Create object URLs out of the blobs
+     const mp4URL = URL.createObjectURL(mp4Blob);
+     const webmURL = URL.createObjectURL(webmBlob);
+
+     // Create DOM elements to embed video in the page
+     const article = document.createElement('article');
+     const h2 = document.createElement('h2');
+     h2.textContent = title;
+     const video = document.createElement('video');
+     video.controls = true;
+     const source1 = document.createElement('source');
+     source1.src = mp4URL;
+     source1.type = 'video/mp4';
+     const source2 = document.createElement('source');
+     source2.src = webmURL;
+     source2.type = 'video/webm';
+
+     // Embed DOM elements into page
+     section.appendChild(article);
+     article.appendChild(h2);
+     article.appendChild(video);
+     video.appendChild(source1);
+     video.appendChild(source2);
+   }
+   ```
 
 ## Offline asset storage
 
diff --git a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md
index afe8d3db17b7673..0ccec2ef0ec1aff 100644
--- a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md
+++ b/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md
@@ -89,30 +89,30 @@ Of course, the above message is really unhelpful! In a real example you'd want t
 Let's start by creating our own canvas that we draw future experiments on to.
 
 1. First make a local copy of the [0_canvas_start](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/0_canvas_start) directory. It contains three files:
-    - "index.html"
-    - "script.js"
-    - "style.css"
+   - "index.html"
+   - "script.js"
+   - "style.css"
 2. Open "index.html", and add the following code into it, just below the opening {{htmlelement("body")}} tag:
 
-    ```html
-    <canvas class="myCanvas">
-      <p>Add suitable fallback here.</p>
-    </canvas>
-    ```
+   ```html
+   <canvas class="myCanvas">
+     <p>Add suitable fallback here.</p>
+   </canvas>
+   ```
 
-    We have added a `class` to the `<canvas>` element so it will be easier to select if we have multiple canvases on the page, but we have removed the `width` and `height` attributes for now (you could add them back in if you wanted, but we will set them using JavaScript in a below section). Canvases with no explicit width and height default to 300 pixels wide by 150 pixels high.
+   We have added a `class` to the `<canvas>` element so it will be easier to select if we have multiple canvases on the page, but we have removed the `width` and `height` attributes for now (you could add them back in if you wanted, but we will set them using JavaScript in a below section). Canvases with no explicit width and height default to 300 pixels wide by 150 pixels high.
 
 3. Now open "script.js" and add the following lines of JavaScript:
 
-    ```js
-    const canvas = document.querySelector('.myCanvas');
-    const width = canvas.width = window.innerWidth;
-    const height = canvas.height = window.innerHeight;
-    ```
+   ```js
+   const canvas = document.querySelector('.myCanvas');
+   const width = canvas.width = window.innerWidth;
+   const height = canvas.height = window.innerHeight;
+   ```
 
-    Here we have stored a reference to the canvas in the `canvas` constant. In the second line we set both a new constant `width` and the canvas' `width` property equal to {{domxref("Window.innerWidth")}} (which gives us the viewport width). In the third line we set both a new constant `height` and the canvas' `height` property equal to {{domxref("Window.innerHeight")}} (which gives us the viewport height). So now we have a canvas that fills the entire width and height of the browser window!
+   Here we have stored a reference to the canvas in the `canvas` constant. In the second line we set both a new constant `width` and the canvas' `width` property equal to {{domxref("Window.innerWidth")}} (which gives us the viewport width). In the third line we set both a new constant `height` and the canvas' `height` property equal to {{domxref("Window.innerHeight")}} (which gives us the viewport height). So now we have a canvas that fills the entire width and height of the browser window!
 
-    You'll also see that we are chaining assignments together with multiple equals signs — this is allowed in JavaScript, and it is a good technique if you want to make multiple variables all equal to the same value. We wanted to make the canvas width and height easily accessible in the width/height variables, as they are useful values to have available for later (for example, if you want to draw something exactly halfway across the width of the canvas).
+   You'll also see that we are chaining assignments together with multiple equals signs — this is allowed in JavaScript, and it is a good technique if you want to make multiple variables all equal to the same value. We wanted to make the canvas width and height easily accessible in the width/height variables, as they are useful values to have available for later (for example, if you want to draw something exactly halfway across the width of the canvas).
 
 > **Note:** You should generally set the size of the image using HTML attributes or DOM properties, as explained above. You could use CSS, but the trouble then is that the sizing is done after the canvas has rendered, and just like any other image (the rendered canvas is just an image), the image could become pixelated/distorted.
 
@@ -156,28 +156,28 @@ Let's start with some simple rectangles.
 1. First of all, take a copy of your newly coded canvas template (or make a local copy of the [1_canvas_template](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template) directory if you didn't follow the above steps).
 2. Next, add the following lines to the bottom of your JavaScript:
 
-    ```js
-    ctx.fillStyle = 'rgb(255, 0, 0)';
-    ctx.fillRect(50, 50, 100, 150);
-    ```
+   ```js
+   ctx.fillStyle = 'rgb(255, 0, 0)';
+   ctx.fillRect(50, 50, 100, 150);
+   ```
 
-    If you save and refresh, you should see a red rectangle has appeared on your canvas. Its top left corner is 50 pixels away from the top and left of the canvas edge (as defined by the first two parameters), and it is 100 pixels wide and 150 pixels tall (as defined by the third and fourth parameters).
+   If you save and refresh, you should see a red rectangle has appeared on your canvas. Its top left corner is 50 pixels away from the top and left of the canvas edge (as defined by the first two parameters), and it is 100 pixels wide and 150 pixels tall (as defined by the third and fourth parameters).
 
 3. Let's add another rectangle into the mix — a green one this time. Add the following at the bottom of your JavaScript:
 
-    ```js
-    ctx.fillStyle = 'rgb(0, 255, 0)';
-    ctx.fillRect(75, 75, 100, 100);
-    ```
+   ```js
+   ctx.fillStyle = 'rgb(0, 255, 0)';
+   ctx.fillRect(75, 75, 100, 100);
+   ```
 
-    Save and refresh, and you'll see your new rectangle. This raises an important point: graphics operations like drawing rectangles, lines, and so forth are performed in the order in which they occur. Think of it like painting a wall, where each coat of paint overlaps and may even hide what's underneath. You can't do anything to change this, so you have to think carefully about the order in which you draw the graphics.
+   Save and refresh, and you'll see your new rectangle. This raises an important point: graphics operations like drawing rectangles, lines, and so forth are performed in the order in which they occur. Think of it like painting a wall, where each coat of paint overlaps and may even hide what's underneath. You can't do anything to change this, so you have to think carefully about the order in which you draw the graphics.
 
 4. Note that you can draw semi-transparent graphics by specifying a semi-transparent color, for example by using `rgba()`. The `a` value defines what's called the "alpha channel, " or the amount of transparency the color has. The higher its value, the more it will obscure whatever's behind it. Add the following to your code:
 
-    ```js
-    ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';
-    ctx.fillRect(25, 100, 175, 50);
-    ```
+   ```js
+   ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';
+   ctx.fillRect(25, 100, 175, 50);
+   ```
 
 5. Now try drawing some more rectangles of your own; have fun!
 
@@ -187,16 +187,16 @@ So far we've looked at drawing filled rectangles, but you can also draw rectangl
 
 1. Add the following to the previous example, again below the previous JavaScript lines:
 
-    ```js
-    ctx.strokeStyle = 'rgb(255, 255, 255)';
-    ctx.strokeRect(25, 25, 175, 200);
-    ```
+   ```js
+   ctx.strokeStyle = 'rgb(255, 255, 255)';
+   ctx.strokeRect(25, 25, 175, 200);
+   ```
 
 2. The default width of strokes is 1 pixel; you can adjust the {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}} property value to change this (it takes a number representing the number of pixels wide the stroke is). Add the following line in between the previous two lines:
 
-    ```js
-    ctx.lineWidth = 5;
-    ```
+   ```js
+   ctx.lineWidth = 5;
+   ```
 
 Now you should see that your white outline has become much thicker! That's it for now. At this point your example should look like this:
 
@@ -234,43 +234,43 @@ Let's draw an equilateral triangle on the canvas.
 
 1. First of all, add the following helper function to the bottom of your code. This converts degree values to radians, which is useful because whenever you need to provide an angle value in JavaScript, it will nearly always be in radians, but humans usually think in degrees.
 
-    ```js
-    function degToRad(degrees) {
-      return degrees * Math.PI / 180;
-    }
-    ```
+   ```js
+   function degToRad(degrees) {
+     return degrees * Math.PI / 180;
+   }
+   ```
 
 2. Next, start off your path by adding the following below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything. That's where we'll start drawing our triangle.
 
-    ```js
-    ctx.fillStyle = 'rgb(255, 0, 0)';
-    ctx.beginPath();
-    ctx.moveTo(50, 50);
-    ```
+   ```js
+   ctx.fillStyle = 'rgb(255, 0, 0)';
+   ctx.beginPath();
+   ctx.moveTo(50, 50);
+   ```
 
 3. Now add the following lines at the bottom of your script:
 
-    ```js
-    ctx.lineTo(150, 50);
-    const triHeight = 50 * Math.tan(degToRad(60));
-    ctx.lineTo(100, 50 + triHeight);
-    ctx.lineTo(50, 50);
-    ctx.fill();
-    ```
+   ```js
+   ctx.lineTo(150, 50);
+   const triHeight = 50 * Math.tan(degToRad(60));
+   ctx.lineTo(100, 50 + triHeight);
+   ctx.lineTo(50, 50);
+   ctx.fill();
+   ```
 
-    Let's run through this in order:
+   Let's run through this in order:
 
-    First we draw a line across to (150, 50) — our path now goes 100 pixels to the right along the x axis.
+   First we draw a line across to (150, 50) — our path now goes 100 pixels to the right along the x axis.
 
-    Second, we work out the height of our equilateral triangle, using a bit of simple trigonometry. Basically, we are drawing the triangle pointing downwards. The angles in an equilateral triangle are always 60 degrees; to work out the height we can split it down the middle into two right-angled triangles, which will each have angles of 90 degrees, 60 degrees, and 30 degrees. In terms of the sides:
+   Second, we work out the height of our equilateral triangle, using a bit of simple trigonometry. Basically, we are drawing the triangle pointing downwards. The angles in an equilateral triangle are always 60 degrees; to work out the height we can split it down the middle into two right-angled triangles, which will each have angles of 90 degrees, 60 degrees, and 30 degrees. In terms of the sides:
 
-    - The longest side is called the **hypotenuse**
-    - The side next to the 60 degree angle is called the **adjacent** — which we know is 50 pixels, as it is half of the line we just drew.
-    - The side opposite the 60 degree angle is called the **opposite**, which is the height of the triangle we want to calculate.
+   - The longest side is called the **hypotenuse**
+   - The side next to the 60 degree angle is called the **adjacent** — which we know is 50 pixels, as it is half of the line we just drew.
+   - The side opposite the 60 degree angle is called the **opposite**, which is the height of the triangle we want to calculate.
 
-    ![A equilateral triangle pointing downwards with labeled angles and sides. The horizontal line at the top is labeled 'adjacent'. A perpendicular dotted line, from the middle of the adjacent line, labeled 'opposite', splits the triangle creating two equal right triangles. The right side of the triangle is labeled the hypotenuse, as it is the hypotenuse of the right triangle formed by the line labeled 'opposite'. while all three-sided of the triangle are of equal length, the hypotenuse is the longest side of the right triangle.](trigonometry.png)
+   ![A equilateral triangle pointing downwards with labeled angles and sides. The horizontal line at the top is labeled 'adjacent'. A perpendicular dotted line, from the middle of the adjacent line, labeled 'opposite', splits the triangle creating two equal right triangles. The right side of the triangle is labeled the hypotenuse, as it is the hypotenuse of the right triangle formed by the line labeled 'opposite'. while all three-sided of the triangle are of equal length, the hypotenuse is the longest side of the right triangle.](trigonometry.png)
 
-    One of the basic trigonometric formulae states that the length of the adjacent multiplied by the tangent of the angle is equal to the opposite, hence we come up with `50 * Math.tan(degToRad(60))`. We use our `degToRad()` function to convert 60 degrees to radians, as {{jsxref("Math.tan()")}} expects an input value in radians.
+   One of the basic trigonometric formulae states that the length of the adjacent multiplied by the tangent of the angle is equal to the opposite, hence we come up with `50 * Math.tan(degToRad(60))`. We use our `degToRad()` function to convert 60 degrees to radians, as {{jsxref("Math.tan()")}} expects an input value in radians.
 
 4. With the height calculated, we draw another line to `(100, 50 + triHeight)`. The X coordinate is simple; it must be halfway between the previous two X values we set. The Y value on the other hand must be 50 plus the triangle height, as we know the top of the triangle is 50 pixels from the top of the canvas.
 5. The next line draws a line back to the starting point of the triangle.
@@ -282,31 +282,31 @@ Now let's look at how to draw a circle in canvas. This is accomplished using the
 
 1. Let's add an arc to our canvas — add the following to the bottom of your code:
 
-    ```js
-    ctx.fillStyle = 'rgb(0, 0, 255)';
-    ctx.beginPath();
-    ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
-    ctx.fill();
-    ```
+   ```js
+   ctx.fillStyle = 'rgb(0, 0, 255)';
+   ctx.beginPath();
+   ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
+   ctx.fill();
+   ```
 
-    `arc()` takes six parameters. The first two specify the position of the arc's center (X and Y, respectively). The third is the circle's radius, the fourth and fifth are the start and end angles at which to draw the circle (so specifying 0 and 360 degrees gives us a full circle), and the sixth parameter defines whether the circle should be drawn counterclockwise (anticlockwise) or clockwise (`false` is clockwise).
+   `arc()` takes six parameters. The first two specify the position of the arc's center (X and Y, respectively). The third is the circle's radius, the fourth and fifth are the start and end angles at which to draw the circle (so specifying 0 and 360 degrees gives us a full circle), and the sixth parameter defines whether the circle should be drawn counterclockwise (anticlockwise) or clockwise (`false` is clockwise).
 
-    > **Note:** 0 degrees is horizontally to the right.
+   > **Note:** 0 degrees is horizontally to the right.
 
 2. Let's try adding another arc:
 
-    ```js
-    ctx.fillStyle = 'yellow';
-    ctx.beginPath();
-    ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true);
-    ctx.lineTo(200, 106);
-    ctx.fill();
-    ```
+   ```js
+   ctx.fillStyle = 'yellow';
+   ctx.beginPath();
+   ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true);
+   ctx.lineTo(200, 106);
+   ctx.fill();
+   ```
 
-    The pattern here is very similar, but with two differences:
+   The pattern here is very similar, but with two differences:
 
-    - We have set the last parameter of `arc()` to `true`, meaning that the arc is drawn counterclockwise, which means that even though the arc is specified as starting at -45 degrees and ending at 45 degrees, we draw the arc around the 270 degrees not inside this portion. If you were to change `true` to `false` and then re-run the code, only the 90 degree slice of the circle would be drawn.
-    - Before calling `fill()`, we draw a line to the center of the circle. This means that we get the rather nice Pac-Man-style cutout rendered. If you removed this line (try it!) then re-ran the code, you'd get just an edge of the circle chopped off between the start and end point of the arc. This illustrates another important point of the canvas — if you try to fill an incomplete path (i.e. one that is not closed), the browser fills in a straight line between the start and end point and then fills it in.
+   - We have set the last parameter of `arc()` to `true`, meaning that the arc is drawn counterclockwise, which means that even though the arc is specified as starting at -45 degrees and ending at 45 degrees, we draw the arc around the 270 degrees not inside this portion. If you were to change `true` to `false` and then re-run the code, only the 90 degree slice of the circle would be drawn.
+   - Before calling `fill()`, we draw a line to the center of the circle. This means that we get the rather nice Pac-Man-style cutout rendered. If you removed this line (try it!) then re-ran the code, you'd get just an edge of the circle chopped off between the start and end point of the arc. This illustrates another important point of the canvas — if you try to fill an incomplete path (i.e. one that is not closed), the browser fills in a straight line between the start and end point and then fills it in.
 
 That's it for now; your final example should look like this:
 
@@ -356,36 +356,36 @@ It is possible to render external images onto your canvas. These can be simple i
 
 1. As before, make another fresh copy of our canvas template ([1_canvas_template](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template)) in which to draw the new example.
 
-    Images are drawn onto canvas using the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method. The simplest version takes three parameters — a reference to the image you want to render, and the X and Y coordinates of the image's top left corner.
+   Images are drawn onto canvas using the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method. The simplest version takes three parameters — a reference to the image you want to render, and the X and Y coordinates of the image's top left corner.
 
 2. Let's start by getting an image source to embed in our canvas. Add the following lines to the bottom of your JavaScript:
 
-    ```js
-    const image = new Image();
-    image.src = 'firefox.png';
-    ```
+   ```js
+   const image = new Image();
+   image.src = 'firefox.png';
+   ```
 
-    Here we create a new {{domxref("HTMLImageElement")}} object using the {{domxref("HTMLImageElement.Image()", "Image()")}} constructor. The returned object is the same type as that which is returned when you grab a reference to an existing {{htmlelement("img")}} element. We then set its {{htmlattrxref("src", "img")}} attribute to equal our Firefox logo image. At this point, the browser starts loading the image.
+   Here we create a new {{domxref("HTMLImageElement")}} object using the {{domxref("HTMLImageElement.Image()", "Image()")}} constructor. The returned object is the same type as that which is returned when you grab a reference to an existing {{htmlelement("img")}} element. We then set its {{htmlattrxref("src", "img")}} attribute to equal our Firefox logo image. At this point, the browser starts loading the image.
 
 3. We could now try to embed the image using `drawImage()`, but we need to make sure the image file has been loaded first, otherwise the code will fail. We can achieve this using the `load` event, which will only be fired when the image has finished loading. Add the following block below the previous one:
 
-    ```js
-    image.addEventListener('load', () => ctx.drawImage(image, 20, 20));
-    ```
+   ```js
+   image.addEventListener('load', () => ctx.drawImage(image, 20, 20));
+   ```
 
-    If you load your example in the browser now, you should see the image embedded in the canvas.
+   If you load your example in the browser now, you should see the image embedded in the canvas.
 
 4. But there's more! What if we want to display only a part of the image, or to resize it? We can do both with the more complex version of `drawImage()`. Update your `ctx.drawImage()` line like so:
 
-    ```js
-    ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
-    ```
+   ```js
+   ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
+   ```
 
-    - The first parameter is the image reference, as before.
-    - Parameters 2 and 3 define the coordinates of the top left corner of the area you want to cut out of the loaded image, relative to the top-left corner of the image itself. Nothing to the left of the first parameter or above the second will be drawn.
-    - Parameters 4 and 5 define the width and height of the area we want to cut out from the original image we loaded.
-    - Parameters 6 and 7 define the coordinates at which you want to draw the top-left corner of the cut-out portion of the image, relative to the top-left corner of the canvas.
-    - Parameters 8 and 9 define the width and height to draw the cut-out area of the image. In this case, we have specified the same dimensions as the original slice, but you could resize it by specifying different values.
+   - The first parameter is the image reference, as before.
+   - Parameters 2 and 3 define the coordinates of the top left corner of the area you want to cut out of the loaded image, relative to the top-left corner of the image itself. Nothing to the left of the first parameter or above the second will be drawn.
+   - Parameters 4 and 5 define the width and height of the area we want to cut out from the original image we loaded.
+   - Parameters 6 and 7 define the coordinates at which you want to draw the top-left corner of the cut-out portion of the image, relative to the top-left corner of the canvas.
+   - Parameters 8 and 9 define the width and height to draw the cut-out area of the image. In this case, we have specified the same dimensions as the original slice, but you could resize it by specifying different values.
 
 The final example should look like so:
 
@@ -406,60 +406,60 @@ Let's build a simple example.
 1. Make another fresh copy of our canvas template ([1_canvas_template](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template)) and open it in your code editor.
 2. Add the following line to the bottom of your JavaScript. This contains a new method, {{domxref("CanvasRenderingContext2D.translate", "translate()")}}, which moves the origin point of the canvas:
 
-    ```js
-    ctx.translate(width/2, height/2);
-    ```
+   ```js
+   ctx.translate(width/2, height/2);
+   ```
 
-    This causes the coordinate origin (0, 0) to be moved to the center of the canvas, rather than being at the top left corner. This is very useful in many situations, like this one, where we want our design to be drawn relative to the center of the canvas.
+   This causes the coordinate origin (0, 0) to be moved to the center of the canvas, rather than being at the top left corner. This is very useful in many situations, like this one, where we want our design to be drawn relative to the center of the canvas.
 
 3. Now add the following code to the bottom of the JavaScript:
 
-    ```js
-    function degToRad(degrees) {
-      return degrees * Math.PI / 180;
-    }
+   ```js
+   function degToRad(degrees) {
+     return degrees * Math.PI / 180;
+   }
 
-    function rand(min, max) {
-      return Math.floor(Math.random() * (max-min+1)) + (min);
-    }
+   function rand(min, max) {
+     return Math.floor(Math.random() * (max-min+1)) + (min);
+   }
 
-    let length = 250;
-    let moveOffset = 20;
+   let length = 250;
+   let moveOffset = 20;
 
-    for (let i = 0; i < length; i++) {
+   for (let i = 0; i < length; i++) {
 
-    }
-    ```
+   }
+   ```
 
-    Here we are implementing the same `degToRad()` function we saw in the triangle example above, a `rand()` function that returns a random number between given lower and upper bounds, `length` and `moveOffset` variables (which we'll find out more about later), and an empty `for` loop.
+   Here we are implementing the same `degToRad()` function we saw in the triangle example above, a `rand()` function that returns a random number between given lower and upper bounds, `length` and `moveOffset` variables (which we'll find out more about later), and an empty `for` loop.
 
 4. The idea here is that we'll draw something on the canvas inside the `for` loop, and iterate on it each time so we can create something interesting. Add the following code inside your `for` loop:
 
-    ```js
-    ctx.fillStyle = `rgba(${255-length},0,${255-length},0.9)`;
-    ctx.beginPath();
-    ctx.moveTo(moveOffset,moveOffset);
-    ctx.lineTo(moveOffset+length,moveOffset);
-    const triHeight = length/2 * Math.tan(degToRad(60));
-    ctx.lineTo(moveOffset+(length/2),moveOffset+triHeight);
-    ctx.lineTo(moveOffset,moveOffset);
-    ctx.fill();
-
-    length--;
-    moveOffset += 0.7;
-    ctx.rotate(degToRad(5));
-    ```
-
-    So on each iteration, we:
-
-    - Set the `fillStyle` to be a shade of slightly transparent purple, which changes each time based on the value of `length`. As you'll see later the length gets smaller each time the loop runs, so the effect here is that the color gets brighter with each successive triangle drawn.
-    - Begin the path.
-    - Move the pen to a coordinate of `(moveOffset, moveOffset)`; This variable defines how far we want to move each time we draw a new triangle.
-    - Draw a line to a coordinate of `(moveOffset+length, moveOffset)`. This draws a line of length `length` parallel to the X axis.
-    - Calculate the triangle's height, as before.
-    - Draw a line to the downward-pointing corner of the triangle, then draw a line back to the start of the triangle.
-    - Call `fill()` to fill in the triangle.
-    - Update the variables that describe the sequence of triangles, so we can be ready to draw the next one. We decrease the `length` value by 1, so the triangles get smaller each time; increase `moveOffset` by a small amount so each successive triangle is slightly further away, and use another new function, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, which allows us to rotate the entire canvas! We rotate it by 5 degrees before drawing the next triangle.
+   ```js
+   ctx.fillStyle = `rgba(${255-length},0,${255-length},0.9)`;
+   ctx.beginPath();
+   ctx.moveTo(moveOffset,moveOffset);
+   ctx.lineTo(moveOffset+length,moveOffset);
+   const triHeight = length/2 * Math.tan(degToRad(60));
+   ctx.lineTo(moveOffset+(length/2),moveOffset+triHeight);
+   ctx.lineTo(moveOffset,moveOffset);
+   ctx.fill();
+
+   length--;
+   moveOffset += 0.7;
+   ctx.rotate(degToRad(5));
+   ```
+
+   So on each iteration, we:
+
+   - Set the `fillStyle` to be a shade of slightly transparent purple, which changes each time based on the value of `length`. As you'll see later the length gets smaller each time the loop runs, so the effect here is that the color gets brighter with each successive triangle drawn.
+   - Begin the path.
+   - Move the pen to a coordinate of `(moveOffset, moveOffset)`; This variable defines how far we want to move each time we draw a new triangle.
+   - Draw a line to a coordinate of `(moveOffset+length, moveOffset)`. This draws a line of length `length` parallel to the X axis.
+   - Calculate the triangle's height, as before.
+   - Draw a line to the downward-pointing corner of the triangle, then draw a line back to the start of the triangle.
+   - Call `fill()` to fill in the triangle.
+   - Update the variables that describe the sequence of triangles, so we can be ready to draw the next one. We decrease the `length` value by 1, so the triangles get smaller each time; increase `moveOffset` by a small amount so each successive triangle is slightly further away, and use another new function, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, which allows us to rotate the entire canvas! We rotate it by 5 degrees before drawing the next triangle.
 
 That's it! The final example should look like so:
 
@@ -525,90 +525,90 @@ Now let's create our own simple animation — we'll get a character from a certa
 1. Make another fresh copy of our canvas template ([1_canvas_template](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template)) and open it in your code editor.
 2. At the bottom of the JavaScript, add the following line to once again make the coordinate origin sit in the middle of the canvas:
 
-    ```js
-    ctx.translate(width/2, height/2);
-    ```
+   ```js
+   ctx.translate(width/2, height/2);
+   ```
 
 3. Now let's create a new {{domxref("HTMLImageElement")}} object, set its {{htmlattrxref("src", "img")}} to the image we want to load, and add an `onload` event handler that will cause the `draw()` function to fire when the image is loaded:
 
-    ```js
-    const image = new Image();
-    image.src = 'walk-right.png';
-    image.onload = draw;
-    ```
+   ```js
+   const image = new Image();
+   image.src = 'walk-right.png';
+   image.onload = draw;
+   ```
 
 4. Now we'll add some variables to keep track of the position the sprite is to be drawn on the screen, and the sprite number we want to display.
 
-    ```js
-    let sprite = 0;
-    let posX = 0;
-    ```
+   ```js
+   let sprite = 0;
+   let posX = 0;
+   ```
 
-    Let's explain the spritesheet image (which we have respectfully borrowed from Mike Thomas' [Walking cycle using CSS animation](https://codepen.io/mikethomas/pen/kQjKLW) CodePen). The image looks like this:
+   Let's explain the spritesheet image (which we have respectfully borrowed from Mike Thomas' [Walking cycle using CSS animation](https://codepen.io/mikethomas/pen/kQjKLW) CodePen). The image looks like this:
 
-    ![A sprite sheet with six sprite images of a pixelated character resembling a walking person from their right side at different instances of a single step forward. The character has a white shirt with sky blue buttons, black trousers, and black shoes. Each sprite is 102 pixels wide and 148 pixels high.](walk-right.png)
+   ![A sprite sheet with six sprite images of a pixelated character resembling a walking person from their right side at different instances of a single step forward. The character has a white shirt with sky blue buttons, black trousers, and black shoes. Each sprite is 102 pixels wide and 148 pixels high.](walk-right.png)
 
-    It contains six sprites that make up the whole walking sequence — each one is 102 pixels wide and 148 pixels high. To display each sprite cleanly we will have to use `drawImage()` to chop out a single sprite image from the spritesheet and display only that part, like we did above with the Firefox logo. The X coordinate of the slice will have to be a multiple of 102, and the Y coordinate will always be 0. The slice size will always be 102 by 148 pixels.
+   It contains six sprites that make up the whole walking sequence — each one is 102 pixels wide and 148 pixels high. To display each sprite cleanly we will have to use `drawImage()` to chop out a single sprite image from the spritesheet and display only that part, like we did above with the Firefox logo. The X coordinate of the slice will have to be a multiple of 102, and the Y coordinate will always be 0. The slice size will always be 102 by 148 pixels.
 
 5. Now let's insert an empty `draw()` function at the bottom of the code, ready for filling up with some code:
 
-    ```js
-    function draw() {
+   ```js
+   function draw() {
 
-    }
-    ```
+   }
+   ```
 
 6. The rest of the code in this section goes inside `draw()`. First, add the following line, which clears the canvas to prepare for drawing each frame. Notice that we have to specify the top-left corner of the rectangle as `-(width/2), -(height/2)` because we specified the origin position as `width/2, height/2` earlier on.
 
-    ```js
-    ctx.fillRect(-(width/2), -(height/2), width, height);
-    ```
+   ```js
+   ctx.fillRect(-(width/2), -(height/2), width, height);
+   ```
 
 7. Next, we'll draw our image using drawImage — the 9-parameter version. Add the following:
 
-    ```js
-    ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);
-    ```
+   ```js
+   ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);
+   ```
 
-    As you can see:
+   As you can see:
 
-    - We specify `image` as the image to embed.
-    - Parameters 2 and 3 specify the top-left corner of the slice to cut out of the source image, with the X value as `sprite` multiplied by 102 (where `sprite` is the sprite number between 0 and 5) and the Y value always 0.
-    - Parameters 4 and 5 specify the size of the slice to cut out — 102 pixels by 148 pixels.
-    - Parameters 6 and 7 specify the top-left corner of the box into which to draw the slice on the canvas — the X position is 0 + `posX`, meaning that we can alter the drawing position by altering the `posX` value.
-    - Parameters 8 and 9 specify the size of the image on the canvas. We just want to keep its original size, so we specify 102 and 148 as the width and height.
+   - We specify `image` as the image to embed.
+   - Parameters 2 and 3 specify the top-left corner of the slice to cut out of the source image, with the X value as `sprite` multiplied by 102 (where `sprite` is the sprite number between 0 and 5) and the Y value always 0.
+   - Parameters 4 and 5 specify the size of the slice to cut out — 102 pixels by 148 pixels.
+   - Parameters 6 and 7 specify the top-left corner of the box into which to draw the slice on the canvas — the X position is 0 + `posX`, meaning that we can alter the drawing position by altering the `posX` value.
+   - Parameters 8 and 9 specify the size of the image on the canvas. We just want to keep its original size, so we specify 102 and 148 as the width and height.
 
 8. Now we'll alter the `sprite` value after each draw — well, after some of them anyway. Add the following block to the bottom of the `draw()` function:
 
-    ```js
-      if (posX % 13 === 0) {
-        if (sprite === 5) {
-          sprite = 0;
-        } else {
-          sprite++;
-        }
-      }
-    ```
+   ```js
+     if (posX % 13 === 0) {
+       if (sprite === 5) {
+         sprite = 0;
+       } else {
+         sprite++;
+       }
+     }
+   ```
 
-    We are wrapping the whole block in `if (posX % 13 === 0) { }`. We use the modulo (`%`) operator (also known as the [remainder operator](/en-US/docs/Web/JavaScript/Reference/Operators/Remainder)) to check whether the `posX` value can be exactly divided by 13 with no remainder. If so, we move on to the next sprite by incrementing `sprite` (wrapping to 0 after we're done with sprite #5). This effectively means that we are only updating the sprite on every 13th frame, or roughly about 5 frames a second (`requestAnimationFrame()` calls us at up to 60 frames per second if possible). We are deliberately slowing down the frame rate because we only have six sprites to work with, and if we display one every 60th of a second, our character will move way too fast!
+   We are wrapping the whole block in `if (posX % 13 === 0) { }`. We use the modulo (`%`) operator (also known as the [remainder operator](/en-US/docs/Web/JavaScript/Reference/Operators/Remainder)) to check whether the `posX` value can be exactly divided by 13 with no remainder. If so, we move on to the next sprite by incrementing `sprite` (wrapping to 0 after we're done with sprite #5). This effectively means that we are only updating the sprite on every 13th frame, or roughly about 5 frames a second (`requestAnimationFrame()` calls us at up to 60 frames per second if possible). We are deliberately slowing down the frame rate because we only have six sprites to work with, and if we display one every 60th of a second, our character will move way too fast!
 
-    Inside the outer block we use an [`if...else`](/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to check whether the `sprite` value is at 5 (the last sprite, given that the sprite numbers run from 0 to 5). If we are showing the last sprite already, we reset `sprite` back to 0; if not we just increment it by 1.
+   Inside the outer block we use an [`if...else`](/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to check whether the `sprite` value is at 5 (the last sprite, given that the sprite numbers run from 0 to 5). If we are showing the last sprite already, we reset `sprite` back to 0; if not we just increment it by 1.
 
 9. Next we need to work out how to change the `posX` value on each frame — add the following code block just below your last one.
 
-    ```js
-      if (posX > width/2) {
-        let newStartPos = -((width/2) + 102);
-        posX = Math.ceil(newStartPos);
-        console.log(posX);
-      } else {
-        posX += 2;
-      }
-    ```
+   ```js
+     if (posX > width/2) {
+       let newStartPos = -((width/2) + 102);
+       posX = Math.ceil(newStartPos);
+       console.log(posX);
+     } else {
+       posX += 2;
+     }
+   ```
 
-    We are using another `if...else` statement to see if the value of `posX` has become greater than `width/2`, which means our character has walked off the right edge of the screen. If so, we calculate a position that would put the character just to the left of the left side of the screen.
+   We are using another `if...else` statement to see if the value of `posX` has become greater than `width/2`, which means our character has walked off the right edge of the screen. If so, we calculate a position that would put the character just to the left of the left side of the screen.
 
-    If our character hasn't yet walked off the edge of the screen, we increment `posX` by 2. This will make him move a little bit to the right the next time we draw him.
+   If our character hasn't yet walked off the edge of the screen, we increment `posX` by 2. This will make him move a little bit to the right the next time we draw him.
 
 10. Finally, we need to make the animation loop by calling {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} at the bottom of the `draw()` function:
 
@@ -697,93 +697,93 @@ Let's look at a simple example of how to create something with a WebGL library.
 3. Next, you need to [download the three.min.js library](https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js) and save it in the same directory as before.
 4. Now we've got `three.js` attached to our page, we can start to write JavaScript that makes use of it into `script.js`. Let's start by creating a new scene — add the following into your main.js file:
 
-    ```js
-    const scene = new THREE.Scene();
-    ```
+   ```js
+   const scene = new THREE.Scene();
+   ```
 
-    The [`Scene()`](https://threejs.org/docs/index.html#api/en/scenes/Scene) constructor creates a new scene, which represents the whole 3D world we are trying to display.
+   The [`Scene()`](https://threejs.org/docs/index.html#api/en/scenes/Scene) constructor creates a new scene, which represents the whole 3D world we are trying to display.
 
 5. Next, we need a **camera** so we can see the scene. In 3D imagery terms, the camera represents a viewer's position in the world. To create a camera, add the following lines next:
 
-    ```js
-    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-    camera.position.z = 5;
-    ```
+   ```js
+   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+   camera.position.z = 5;
+   ```
 
-    The [`PerspectiveCamera()`](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera) constructor takes four arguments:
+   The [`PerspectiveCamera()`](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera) constructor takes four arguments:
 
-    - The field of view: How wide the area in front of the camera is that should be visible onscreen, in degrees.
-    - The aspect ratio: Usually, this is the ratio of the scene's width divided by the scene's height. Using another value will distort the scene (which might be what you want, but usually isn't).
-    - The near plane: How close to the camera objects can be before we stop rendering them to the screen. Think about how when you move your fingertip closer and closer to the space between your eyes, eventually you can't see it anymore.
-    - The far plane: How far away things are from the camera before they are no longer rendered.
+   - The field of view: How wide the area in front of the camera is that should be visible onscreen, in degrees.
+   - The aspect ratio: Usually, this is the ratio of the scene's width divided by the scene's height. Using another value will distort the scene (which might be what you want, but usually isn't).
+   - The near plane: How close to the camera objects can be before we stop rendering them to the screen. Think about how when you move your fingertip closer and closer to the space between your eyes, eventually you can't see it anymore.
+   - The far plane: How far away things are from the camera before they are no longer rendered.
 
-    We also set the camera's position to be 5 distance units out of the Z axis, which, like in CSS, is out of the screen towards you, the viewer.
+   We also set the camera's position to be 5 distance units out of the Z axis, which, like in CSS, is out of the screen towards you, the viewer.
 
 6. The third vital ingredient is a renderer. This is an object that renders a given scene, as viewed through a given camera. We'll create one for now using the [`WebGLRenderer()`](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer) constructor, but we'll not use it till later. Add the following lines next:
 
-    ```js
-    const renderer = new THREE.WebGLRenderer();
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement);
-    ```
+   ```js
+   const renderer = new THREE.WebGLRenderer();
+   renderer.setSize(window.innerWidth, window.innerHeight);
+   document.body.appendChild(renderer.domElement);
+   ```
 
-    The first line creates a new renderer, the second line sets the size at which the renderer will draw the camera's view, and the third line appends the {{htmlelement("canvas")}} element created by the renderer to the document's {{htmlelement("body")}}. Now anything the renderer draws will be displayed in our window.
+   The first line creates a new renderer, the second line sets the size at which the renderer will draw the camera's view, and the third line appends the {{htmlelement("canvas")}} element created by the renderer to the document's {{htmlelement("body")}}. Now anything the renderer draws will be displayed in our window.
 
 7. Next, we want to create the cube we'll display on the canvas. Add the following chunk of code at the bottom of your JavaScript:
 
-    ```js
-    let cube;
+   ```js
+   let cube;
 
-    const loader = new THREE.TextureLoader();
+   const loader = new THREE.TextureLoader();
 
-    loader.load('metal003.png', (texture) => {
-      texture.wrapS = THREE.RepeatWrapping;
-      texture.wrapT = THREE.RepeatWrapping;
-      texture.repeat.set(2, 2);
+   loader.load('metal003.png', (texture) => {
+     texture.wrapS = THREE.RepeatWrapping;
+     texture.wrapT = THREE.RepeatWrapping;
+     texture.repeat.set(2, 2);
 
-      const geometry = new THREE.BoxGeometry(2.4,2.4,2.4);
-      const material = new THREE.MeshLambertMaterial({ map: texture });
-      cube = new THREE.Mesh(geometry, material);
-      scene.add(cube);
+     const geometry = new THREE.BoxGeometry(2.4,2.4,2.4);
+     const material = new THREE.MeshLambertMaterial({ map: texture });
+     cube = new THREE.Mesh(geometry, material);
+     scene.add(cube);
 
-      draw();
-    });
-    ```
+     draw();
+   });
+   ```
 
-    There's a bit more to take in here, so let's go through it in stages:
+   There's a bit more to take in here, so let's go through it in stages:
 
-    - We first create a `cube` global variable so we can access our cube from anywhere in the code.
-    - Next, we create a new [`TextureLoader`](https://threejs.org/docs/index.html#api/en/loaders/TextureLoader) object, then call `load()` on it. `load()` takes two parameters in this case (although it can take more): the texture we want to load (our PNG), and a function that will run when the texture has loaded.
-    - Inside this function we use properties of the [`texture`](https://threejs.org/docs/index.html#api/en/textures/Texture) object to specify that we want a 2 x 2 repeat of the image wrapped around all sides of the cube. Next, we create a new [`BoxGeometry`](https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry) object and a new [`MeshLambertMaterial`](https://threejs.org/docs/index.html#api/en/materials/MeshLambertMaterial) object, and bring them together in a [`Mesh`](https://threejs.org/docs/index.html#api/en/objects/Mesh) to create our cube. An object typically requires a geometry (what shape it is) and a material (what its surface looks like).
-    - Last of all, we add our cube to the scene, then call our `draw()` function to start off the animation.
+   - We first create a `cube` global variable so we can access our cube from anywhere in the code.
+   - Next, we create a new [`TextureLoader`](https://threejs.org/docs/index.html#api/en/loaders/TextureLoader) object, then call `load()` on it. `load()` takes two parameters in this case (although it can take more): the texture we want to load (our PNG), and a function that will run when the texture has loaded.
+   - Inside this function we use properties of the [`texture`](https://threejs.org/docs/index.html#api/en/textures/Texture) object to specify that we want a 2 x 2 repeat of the image wrapped around all sides of the cube. Next, we create a new [`BoxGeometry`](https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry) object and a new [`MeshLambertMaterial`](https://threejs.org/docs/index.html#api/en/materials/MeshLambertMaterial) object, and bring them together in a [`Mesh`](https://threejs.org/docs/index.html#api/en/objects/Mesh) to create our cube. An object typically requires a geometry (what shape it is) and a material (what its surface looks like).
+   - Last of all, we add our cube to the scene, then call our `draw()` function to start off the animation.
 
 8. Before we get to defining `draw()`, we'll add a couple of lights to the scene, to liven things up a bit; add the following blocks next:
 
-    ```js
-    const light = new THREE.AmbientLight('rgb(255,255,255)'); // soft white light
-    scene.add(light);
+   ```js
+   const light = new THREE.AmbientLight('rgb(255,255,255)'); // soft white light
+   scene.add(light);
 
-    const spotLight = new THREE.SpotLight('rgb(255,255,255)');
-    spotLight.position.set(100, 1000, 1000);
-    spotLight.castShadow = true;
-    scene.add(spotLight);
-    ```
+   const spotLight = new THREE.SpotLight('rgb(255,255,255)');
+   spotLight.position.set(100, 1000, 1000);
+   spotLight.castShadow = true;
+   scene.add(spotLight);
+   ```
 
-    An [`AmbientLight`](https://threejs.org/docs/index.html#api/en/lights/AmbientLight) object is a kind of soft light that lightens the whole scene a bit, like the sun when you are outside. The [`SpotLight`](https://threejs.org/docs/index.html#api/en/lights/SpotLight) object, on the other hand, is a directional beam of light, more like a flashlight/torch (or a spotlight, in fact).
+   An [`AmbientLight`](https://threejs.org/docs/index.html#api/en/lights/AmbientLight) object is a kind of soft light that lightens the whole scene a bit, like the sun when you are outside. The [`SpotLight`](https://threejs.org/docs/index.html#api/en/lights/SpotLight) object, on the other hand, is a directional beam of light, more like a flashlight/torch (or a spotlight, in fact).
 
 9. Last of all, let's add our `draw()` function to the bottom of the code:
 
-    ```js
-    function draw() {
-      cube.rotation.x += 0.01;
-      cube.rotation.y += 0.01;
-      renderer.render(scene, camera);
+   ```js
+   function draw() {
+     cube.rotation.x += 0.01;
+     cube.rotation.y += 0.01;
+     renderer.render(scene, camera);
 
-      requestAnimationFrame(draw);
-    }
-    ```
+     requestAnimationFrame(draw);
+   }
+   ```
 
-    This is fairly intuitive; on each frame, we rotate our cube slightly on its X and Y axes, then render the scene as viewed by our camera, then finally call `requestAnimationFrame()` to schedule drawing our next frame.
+   This is fairly intuitive; on each frame, we rotate our cube slightly on its X and Y axes, then render the scene as viewed by our camera, then finally call `requestAnimationFrame()` to schedule drawing our next frame.
 
 Let's have another quick look at what the finished product should look like:
 
diff --git a/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md
index 65914b4d46599e7..c40f3d3021a1a8a 100644
--- a/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md
+++ b/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md
@@ -101,21 +101,21 @@ To start learning about DOM manipulation, let's begin with a practical example.
 2. Add a `<script></script>` element just above the closing `</body>` tag.
 3. To manipulate an element inside the DOM, you first need to select it and store a reference to it inside a variable. Inside your script element, add the following line:
 
-    ```js
-    const link = document.querySelector('a');
-    ```
+   ```js
+   const link = document.querySelector('a');
+   ```
 
 4. Now we have the element reference stored in a variable, we can start to manipulate it using properties and methods available to it (these are defined on interfaces like {{domxref("HTMLAnchorElement")}} in the case of {{htmlelement("a")}} element, its more general parent interface {{domxref("HTMLElement")}}, and {{domxref("Node")}} — which represents all nodes in a DOM). First of all, let's change the text inside the link by updating the value of the {{domxref("Node.textContent")}} property. Add the following line below the previous one:
 
-    ```js
-    link.textContent = 'Mozilla Developer Network';
-    ```
+   ```js
+   link.textContent = 'Mozilla Developer Network';
+   ```
 
 5. We should also change the URL the link is pointing to, so that it doesn't go to the wrong place when it is clicked on. Add the following line, again at the bottom:
 
-    ```js
-    link.href = 'https://developer.mozilla.org';
-    ```
+   ```js
+   link.href = 'https://developer.mozilla.org';
+   ```
 
 Note that, as with many things in JavaScript, there are many ways to select an element and store a reference to it in a variable. {{domxref("Document.querySelector()")}} is the recommended modern approach. It is convenient because it allows you to select elements using CSS selectors. The above `querySelector()` call will match the first {{htmlelement("a")}} element that appears in the document. If you wanted to match and do things to multiple elements, you could use {{domxref("Document.querySelectorAll()")}}, which matches every element in the document that matches the selector, and stores references to them in an [array](/en-US/docs/Learn/JavaScript/First_steps/Arrays)-like object called a {{domxref("NodeList")}}.
 
@@ -132,35 +132,35 @@ The above has given you a little taste of what you can do, but let's go further
 
 1. Going back to the current example, let's start by grabbing a reference to our {{htmlelement("section")}} element — add the following code at the bottom of your existing script (do the same with the other lines too):
 
-    ```js
-    const sect = document.querySelector('section');
-    ```
+   ```js
+   const sect = document.querySelector('section');
+   ```
 
 2. Now let's create a new paragraph using {{domxref("Document.createElement()")}} and give it some text content in the same way as before:
 
-    ```js
-    const para = document.createElement('p');
-    para.textContent = 'We hope you enjoyed the ride.';
-    ```
+   ```js
+   const para = document.createElement('p');
+   para.textContent = 'We hope you enjoyed the ride.';
+   ```
 
 3. You can now append the new paragraph at the end of the section using {{domxref("Node.appendChild()")}}:
 
-    ```js
-    sect.appendChild(para);
-    ```
+   ```js
+   sect.appendChild(para);
+   ```
 
 4. Finally for this part, let's add a text node to the paragraph the link sits inside, to round off the sentence nicely. First we will create the text node using {{domxref("Document.createTextNode()")}}:
 
-    ```js
-    const text = document.createTextNode(' — the premier source for web development knowledge.');
-    ```
+   ```js
+   const text = document.createTextNode(' — the premier source for web development knowledge.');
+   ```
 
 5. Now we'll grab a reference to the paragraph the link is inside, and append the text node to it:
 
-    ```js
-    const linkPara = document.querySelector('p');
-    linkPara.appendChild(text);
-    ```
+   ```js
+   const linkPara = document.querySelector('p');
+   linkPara.appendChild(text);
+   ```
 
 That's most of what you need for adding nodes to the DOM — you'll make a lot of use of these methods when building dynamic interfaces (we'll look at some examples later).
 
@@ -206,19 +206,19 @@ The first way is to add inline styles directly onto elements you want to dynamic
 
 1. As an example, try adding these lines to our ongoing example:
 
-    ```js
-    para.style.color = 'white';
-    para.style.backgroundColor = 'black';
-    para.style.padding = '10px';
-    para.style.width = '250px';
-    para.style.textAlign = 'center';
-    ```
+   ```js
+   para.style.color = 'white';
+   para.style.backgroundColor = 'black';
+   para.style.padding = '10px';
+   para.style.width = '250px';
+   para.style.textAlign = 'center';
+   ```
 
 2. Reload the page and you'll see that the styles have been applied to the paragraph. If you look at that paragraph in your browser's [Page Inspector/DOM inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html), you'll see that these lines are indeed adding inline styles to the document:
 
-    ```html
-    <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
-    ```
+   ```html
+   <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
+   ```
 
 > **Note:** Notice how the JavaScript property versions of the CSS styles are written in lower camel case whereas the CSS versions are hyphenated (e.g. `backgroundColor` versus `background-color`). Make sure you don't get these mixed up, otherwise it won't work.
 
@@ -227,23 +227,23 @@ There is another common way to dynamically manipulate styles on your document, w
 1. Delete the previous five lines you added to the JavaScript.
 2. Add the following inside your HTML {{htmlelement("head")}}:
 
-    ```html
-    <style>
-    .highlight {
-      color: white;
-      background-color: black;
-      padding: 10px;
-      width: 250px;
-      text-align: center;
-    }
-    </style>
-    ```
+   ```html
+   <style>
+   .highlight {
+     color: white;
+     background-color: black;
+     padding: 10px;
+     width: 250px;
+     text-align: center;
+   }
+   </style>
+   ```
 
 3. Now we'll turn to a very useful method for general HTML manipulation — {{domxref("Element.setAttribute()")}} — this takes two arguments, the attribute you want to set on the element, and the value you want to set it to. In this case we will set a class name of highlight on our paragraph:
 
-    ```js
-    para.setAttribute('class', 'highlight');
-    ```
+   ```js
+   para.setAttribute('class', 'highlight');
+   ```
 
 4. Refresh your page, and you'll see no change — the CSS is still applied to the paragraph, but this time by giving it a class that is selected by our CSS rule, not as inline CSS styles.
 
diff --git a/files/en-us/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/en-us/learn/javascript/client-side_web_apis/third_party_apis/index.md
index 70575ec567b4da5..70d2c2af14810ad 100644
--- a/files/en-us/learn/javascript/client-side_web_apis/third_party_apis/index.md
+++ b/files/en-us/learn/javascript/client-side_web_apis/third_party_apis/index.md
@@ -202,42 +202,42 @@ First, you'll need to make a connection between the API and your app. In the cas
 
 1. Find the following line:
 
-    ```js
-    const key = 'INSERT-YOUR-API-KEY-HERE';
-    ```
+   ```js
+   const key = 'INSERT-YOUR-API-KEY-HERE';
+   ```
 
-    Replace the existing API key with the actual API key you got in the previous section.
+   Replace the existing API key with the actual API key you got in the previous section.
 
 2. Add the following line to your JavaScript, below the "`// Event listeners to control the functionality`" comment. This runs a function called `submitSearch()` when the form is submitted (the button is pressed).
 
-    ```js
-    searchForm.addEventListener('submit', submitSearch);
-    ```
+   ```js
+   searchForm.addEventListener('submit', submitSearch);
+   ```
 
 3. Now add the `submitSearch()` and `fetchResults()` function definitions, below the previous line:
 
-    ```js
-    function submitSearch(e) {
-      pageNumber = 0;
-      fetchResults(e);
-    }
+   ```js
+   function submitSearch(e) {
+     pageNumber = 0;
+     fetchResults(e);
+   }
 
-    function fetchResults(e) {
-      // Use preventDefault() to stop the form submitting
-      e.preventDefault();
+   function fetchResults(e) {
+     // Use preventDefault() to stop the form submitting
+     e.preventDefault();
 
-      // Assemble the full URL
-      let url = `${baseURL}?api-key=${key}&page=${pageNumber}&q=${searchTerm.value}&fq=document_type:("article")`;
+     // Assemble the full URL
+     let url = `${baseURL}?api-key=${key}&page=${pageNumber}&q=${searchTerm.value}&fq=document_type:("article")`;
 
-      if (startDate.value !== '') {
-        url = `${url}&begin_date=${startDate.value}`;
-      };
+     if (startDate.value !== '') {
+       url = `${url}&begin_date=${startDate.value}`;
+     };
 
-      if (endDate.value !== '') {
-        url = `${url}&end_date=${endDate.value}`;
-      };
-    }
-    ```
+     if (endDate.value !== '') {
+       url = `${url}&end_date=${endDate.value}`;
+     };
+   }
+   ```
 
 `submitSearch()` sets the page number back to 0 to begin with, then calls `fetchResults()`. This first calls [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault) on the event object, to stop the form actually submitting (which would break the example). Next, we use some string manipulation to assemble the full URL that we will make the request to. We start off by assembling the parts we deem as mandatory for this demo:
 
@@ -350,32 +350,32 @@ This allows us to write a simplistic pagination function.
 
 1. Below the existing [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) call, add these two new ones, which cause the `nextPage()` and `previousPage()` functions to be invoked when the relevant buttons are clicked:
 
-    ```js
-    nextBtn.addEventListener('click', nextPage);
-    previousBtn.addEventListener('click', previousPage);
-    ```
+   ```js
+   nextBtn.addEventListener('click', nextPage);
+   previousBtn.addEventListener('click', previousPage);
+   ```
 
 2. Below your previous addition, let's define the two functions — add this code now:
 
-    ```js
-    function nextPage(e) {
-      pageNumber++;
-      fetchResults(e);
-    };
-
-    function previousPage(e) {
-      if (pageNumber > 0) {
-        pageNumber--;
-      } else {
-        return;
-      }
-      fetchResults(e);
-    };
-    ```
-
-    The first function increments the `pageNumber` variable, then run the `fetchResults()` function again to display the next page's results.
-
-    The second function works nearly exactly the same way in reverse, but we also have to take the extra step of checking that `pageNumber` is not already zero before decrementing it — if the fetch request runs with a minus `page` URL parameter, it could cause errors. If the `pageNumber` is already 0, we [`return`](/en-US/docs/Web/JavaScript/Reference/Statements/return) out of the function — if we are already at the first page, we don't need to load the same results again.
+   ```js
+   function nextPage(e) {
+     pageNumber++;
+     fetchResults(e);
+   };
+
+   function previousPage(e) {
+     if (pageNumber > 0) {
+       pageNumber--;
+     } else {
+       return;
+     }
+     fetchResults(e);
+   };
+   ```
+
+   The first function increments the `pageNumber` variable, then run the `fetchResults()` function again to display the next page's results.
+
+   The second function works nearly exactly the same way in reverse, but we also have to take the extra step of checking that `pageNumber` is not already zero before decrementing it — if the fetch request runs with a minus `page` URL parameter, it could cause errors. If the `pageNumber` is already 0, we [`return`](/en-US/docs/Web/JavaScript/Reference/Statements/return) out of the function — if we are already at the first page, we don't need to load the same results again.
 
 > **Note:** You can find our [finished NYTimes API example code on GitHub](https://github.com/mdn/learning-area/blob/main/javascript/apis/third-party-apis/nytimes/finished/index.html) (also [see it running live here](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/finished/)).
 
diff --git a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
index c18b9fc569b4e35..841f63dfe081794 100644
--- a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
+++ b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
@@ -218,34 +218,34 @@ We've got a fairly complete HTML and CSS interface already; now we just need to
 1. Create a new JavaScript file in the same directory level as your index.html file. Call it `custom-player.js`.
 2. At the top of this file, insert the following code:
 
-    ```js
-    const media = document.querySelector('video');
-    const controls = document.querySelector('.controls');
+   ```js
+   const media = document.querySelector('video');
+   const controls = document.querySelector('.controls');
 
-    const play = document.querySelector('.play');
-    const stop = document.querySelector('.stop');
-    const rwd = document.querySelector('.rwd');
-    const fwd = document.querySelector('.fwd');
+   const play = document.querySelector('.play');
+   const stop = document.querySelector('.stop');
+   const rwd = document.querySelector('.rwd');
+   const fwd = document.querySelector('.fwd');
 
-    const timerWrapper = document.querySelector('.timer');
-    const timer = document.querySelector('.timer span');
-    const timerBar = document.querySelector('.timer div');
-    ```
+   const timerWrapper = document.querySelector('.timer');
+   const timer = document.querySelector('.timer span');
+   const timerBar = document.querySelector('.timer div');
+   ```
 
-    Here we are creating constants to hold references to all the objects we want to manipulate. We have three groups:
+   Here we are creating constants to hold references to all the objects we want to manipulate. We have three groups:
 
-    - The `<video>` element, and the controls bar.
-    - The play/pause, stop, rewind, and fast forward buttons.
-    - The outer timer wrapper `<div>`, the digital timer readout `<span>`, and the inner `<div>` that gets wider as the time elapses.
+   - The `<video>` element, and the controls bar.
+   - The play/pause, stop, rewind, and fast forward buttons.
+   - The outer timer wrapper `<div>`, the digital timer readout `<span>`, and the inner `<div>` that gets wider as the time elapses.
 
 3. Next, insert the following at the bottom of your code:
 
-    ```js
-    media.removeAttribute('controls');
-    controls.style.visibility = 'visible';
-    ```
+   ```js
+   media.removeAttribute('controls');
+   controls.style.visibility = 'visible';
+   ```
 
-    These two lines remove the default browser controls from the video, and make the custom controls visible.
+   These two lines remove the default browser controls from the video, and make the custom controls visible.
 
 #### Playing and pausing the video
 
@@ -253,52 +253,52 @@ Let's implement probably the most important control — the play/pause button.
 
 1. First of all, add the following to the bottom of your code, so that the `playPauseMedia()` function is invoked when the play button is clicked:
 
-    ```js
-    play.addEventListener('click', playPauseMedia);
-    ```
+   ```js
+   play.addEventListener('click', playPauseMedia);
+   ```
 
 2. Now to define `playPauseMedia()` — add the following, again at the bottom of your code:
 
-    ```js
-    function playPauseMedia() {
-      if (media.paused) {
-        play.setAttribute('data-icon','u');
-        media.play();
-      } else {
-        play.setAttribute('data-icon','P');
-        media.pause();
-      }
-    }
-    ```
+   ```js
+   function playPauseMedia() {
+     if (media.paused) {
+       play.setAttribute('data-icon','u');
+       media.play();
+     } else {
+       play.setAttribute('data-icon','P');
+       media.pause();
+     }
+   }
+   ```
 
-    Here we use an [`if`](/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to check whether the video is paused. The {{domxref("HTMLMediaElement.paused")}} property returns true if the media is paused, which is any time the video is not playing, including when it is set at 0 duration after it first loads. If it is paused, we set the `data-icon` attribute value on the play button to "u", which is a "paused" icon, and invoke the {{domxref("HTMLMediaElement.play()")}} method to play the media.
+   Here we use an [`if`](/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to check whether the video is paused. The {{domxref("HTMLMediaElement.paused")}} property returns true if the media is paused, which is any time the video is not playing, including when it is set at 0 duration after it first loads. If it is paused, we set the `data-icon` attribute value on the play button to "u", which is a "paused" icon, and invoke the {{domxref("HTMLMediaElement.play()")}} method to play the media.
 
-    On the second click, the button will be toggled back again — the "play" icon will be shown again, and the video will be paused with {{domxref("HTMLMediaElement.pause()")}}.
+   On the second click, the button will be toggled back again — the "play" icon will be shown again, and the video will be paused with {{domxref("HTMLMediaElement.pause()")}}.
 
 #### Stopping the video
 
 1. Next, let's add functionality to handle stopping the video. Add the following [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) lines below the previous one you added:
 
-    ```js
-    stop.addEventListener('click', stopMedia);
-    media.addEventListener('ended', stopMedia);
-    ```
+   ```js
+   stop.addEventListener('click', stopMedia);
+   media.addEventListener('ended', stopMedia);
+   ```
 
-    The {{domxref("Element/click_event", "click")}} event is obvious — we want to stop the video by running our `stopMedia()` function when the stop button is clicked. We do however also want to stop the video when it finishes playing — this is marked by the {{domxref("HTMLMediaElement/ended_event", "ended")}} event firing, so we also set up a listener to run the function on that event firing too.
+   The {{domxref("Element/click_event", "click")}} event is obvious — we want to stop the video by running our `stopMedia()` function when the stop button is clicked. We do however also want to stop the video when it finishes playing — this is marked by the {{domxref("HTMLMediaElement/ended_event", "ended")}} event firing, so we also set up a listener to run the function on that event firing too.
 
 2. Next, let's define `stopMedia()` — add the following function below `playPauseMedia()`:
 
-    ```js
-    function stopMedia() {
-      media.pause();
-      media.currentTime = 0;
-      play.setAttribute('data-icon','P');
-    }
-    ```
+   ```js
+   function stopMedia() {
+     media.pause();
+     media.currentTime = 0;
+     play.setAttribute('data-icon','P');
+   }
+   ```
 
-    there is no `stop()` method on the HTMLMediaElement API — the equivalent is to `pause()` the video, and set its {{domxref("HTMLMediaElement.currentTime","currentTime")}} property to 0. Setting `currentTime` to a value (in seconds) immediately jumps the media to that position.
+   there is no `stop()` method on the HTMLMediaElement API — the equivalent is to `pause()` the video, and set its {{domxref("HTMLMediaElement.currentTime","currentTime")}} property to 0. Setting `currentTime` to a value (in seconds) immediately jumps the media to that position.
 
-    All there is left to do after that is to set the displayed icon to the "play" icon. Regardless of whether the video was paused or playing when the stop button is pressed, you want it to be ready to play afterwards.
+   All there is left to do after that is to set the displayed icon to the "play" icon. Regardless of whether the video was paused or playing when the stop button is pressed, you want it to be ready to play afterwards.
 
 #### Seeking back and forth
 
@@ -306,85 +306,85 @@ There are many ways that you can implement rewind and fast forward functionality
 
 1. First of all, add the following two [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) lines below the previous ones:
 
-    ```js
-    rwd.addEventListener('click', mediaBackward);
-    fwd.addEventListener('click', mediaForward);
-    ```
+   ```js
+   rwd.addEventListener('click', mediaBackward);
+   fwd.addEventListener('click', mediaForward);
+   ```
 
 2. Now on to the event handler functions — add the following code below your previous functions to define `mediaBackward()` and `mediaForward()`:
 
-    ```js
-    let intervalFwd;
-    let intervalRwd;
-
-    function mediaBackward() {
-      clearInterval(intervalFwd);
-      fwd.classList.remove('active');
-
-      if (rwd.classList.contains('active')) {
-        rwd.classList.remove('active');
-        clearInterval(intervalRwd);
-        media.play();
-      } else {
-        rwd.classList.add('active');
-        media.pause();
-        intervalRwd = setInterval(windBackward, 200);
-      }
-    }
-
-    function mediaForward() {
-      clearInterval(intervalRwd);
-      rwd.classList.remove('active');
-
-      if (fwd.classList.contains('active')) {
-        fwd.classList.remove('active');
-        clearInterval(intervalFwd);
-        media.play();
-      } else {
-        fwd.classList.add('active');
-        media.pause();
-        intervalFwd = setInterval(windForward, 200);
-      }
-    }
-    ```
-
-    You'll notice that first we initialize two variables — `intervalFwd` and `intervalRwd` — you'll find out what they are for later on.
-
-    Let's step through `mediaBackward()` (the functionality for `mediaForward()` is exactly the same, but in reverse):
-
-    1. We clear any classes and intervals that are set on the fast forward functionality — we do this because if we press the `rwd` button after pressing the `fwd` button, we want to cancel any fast forward functionality and replace it with the rewind functionality. If we tried to do both at once, the player would break.
-    2. We use an `if` statement to check whether the `active` class has been set on the `rwd` button, indicating that it has already been pressed. The {{domxref("Element.classList", "classList")}} is a rather handy property that exists on every element — it contains a list of all the classes set on the element, as well as methods for adding/removing classes, etc. We use the `classList.contains()` method to check whether the list contains the `active` class. This returns a boolean `true`/`false` result.
-    3. If `active` has been set on the `rwd` button, we remove it using `classList.remove()`, clear the interval that has been set when the button was first pressed (see below for more explanation), and use {{domxref("HTMLMediaElement.play()")}} to cancel the rewind and start the video playing normally.
-    4. If it hasn't yet been set, we add the `active` class to the `rwd` button using `classList.add()`, pause the video using {{domxref("HTMLMediaElement.pause()")}}, then set the `intervalRwd` variable to equal a {{domxref("setInterval()")}} call. When invoked, `setInterval()` creates an active interval, meaning that it runs the function given as the first parameter every x milliseconds, where x is the value of the 2nd parameter. So here we are running the `windBackward()` function every 200 milliseconds — we'll use this function to wind the video backwards constantly. To stop a {{domxref("setInterval()")}} running, you have to call {{domxref("clearInterval", "clearInterval()")}}, giving it the identifying name of the interval to clear, which in this case is the variable name `intervalRwd` (see the `clearInterval()` call earlier on in the function).
+   ```js
+   let intervalFwd;
+   let intervalRwd;
+
+   function mediaBackward() {
+     clearInterval(intervalFwd);
+     fwd.classList.remove('active');
+
+     if (rwd.classList.contains('active')) {
+       rwd.classList.remove('active');
+       clearInterval(intervalRwd);
+       media.play();
+     } else {
+       rwd.classList.add('active');
+       media.pause();
+       intervalRwd = setInterval(windBackward, 200);
+     }
+   }
+
+   function mediaForward() {
+     clearInterval(intervalRwd);
+     rwd.classList.remove('active');
+
+     if (fwd.classList.contains('active')) {
+       fwd.classList.remove('active');
+       clearInterval(intervalFwd);
+       media.play();
+     } else {
+       fwd.classList.add('active');
+       media.pause();
+       intervalFwd = setInterval(windForward, 200);
+     }
+   }
+   ```
+
+   You'll notice that first we initialize two variables — `intervalFwd` and `intervalRwd` — you'll find out what they are for later on.
+
+   Let's step through `mediaBackward()` (the functionality for `mediaForward()` is exactly the same, but in reverse):
+
+   1. We clear any classes and intervals that are set on the fast forward functionality — we do this because if we press the `rwd` button after pressing the `fwd` button, we want to cancel any fast forward functionality and replace it with the rewind functionality. If we tried to do both at once, the player would break.
+   2. We use an `if` statement to check whether the `active` class has been set on the `rwd` button, indicating that it has already been pressed. The {{domxref("Element.classList", "classList")}} is a rather handy property that exists on every element — it contains a list of all the classes set on the element, as well as methods for adding/removing classes, etc. We use the `classList.contains()` method to check whether the list contains the `active` class. This returns a boolean `true`/`false` result.
+   3. If `active` has been set on the `rwd` button, we remove it using `classList.remove()`, clear the interval that has been set when the button was first pressed (see below for more explanation), and use {{domxref("HTMLMediaElement.play()")}} to cancel the rewind and start the video playing normally.
+   4. If it hasn't yet been set, we add the `active` class to the `rwd` button using `classList.add()`, pause the video using {{domxref("HTMLMediaElement.pause()")}}, then set the `intervalRwd` variable to equal a {{domxref("setInterval()")}} call. When invoked, `setInterval()` creates an active interval, meaning that it runs the function given as the first parameter every x milliseconds, where x is the value of the 2nd parameter. So here we are running the `windBackward()` function every 200 milliseconds — we'll use this function to wind the video backwards constantly. To stop a {{domxref("setInterval()")}} running, you have to call {{domxref("clearInterval", "clearInterval()")}}, giving it the identifying name of the interval to clear, which in this case is the variable name `intervalRwd` (see the `clearInterval()` call earlier on in the function).
 
 3. Finally, we need to define the `windBackward()` and `windForward()` functions invoked in the `setInterval()` calls. Add the following below your two previous functions:
 
-    ```js
-    function windBackward() {
-      if (media.currentTime <= 3) {
-        rwd.classList.remove('active');
-        clearInterval(intervalRwd);
-        stopMedia();
-      } else {
-        media.currentTime -= 3;
-      }
-    }
-
-    function windForward() {
-      if (media.currentTime >= media.duration - 3) {
-        fwd.classList.remove('active');
-        clearInterval(intervalFwd);
-        stopMedia();
-      } else {
-        media.currentTime += 3;
-      }
-    }
-    ```
-
-    Again, we'll just run through the first one of these functions as they work almost identically, but in reverse to one another. In `windBackward()` we do the following — bear in mind that when the interval is active, this function is being run once every 200 milliseconds.
-
-    1. We start off with an `if` statement that checks to see whether the current time is less than 3 seconds, i.e., if rewinding by another three seconds would take it back past the start of the video. This would cause strange behavior, so if this is the case we stop the video playing by calling `stopMedia()`, remove the `active` class from the rewind button, and clear the `intervalRwd` interval to stop the rewind functionality. If we didn't do this last step, the video would just keep rewinding forever.
-    2. If the current time is not within 3 seconds of the start of the video, we remove three seconds from the current time by executing `media.currentTime -= 3`. So in effect, we are rewinding the video by 3 seconds, once every 200 milliseconds.
+   ```js
+   function windBackward() {
+     if (media.currentTime <= 3) {
+       rwd.classList.remove('active');
+       clearInterval(intervalRwd);
+       stopMedia();
+     } else {
+       media.currentTime -= 3;
+     }
+   }
+
+   function windForward() {
+     if (media.currentTime >= media.duration - 3) {
+       fwd.classList.remove('active');
+       clearInterval(intervalFwd);
+       stopMedia();
+     } else {
+       media.currentTime += 3;
+     }
+   }
+   ```
+
+   Again, we'll just run through the first one of these functions as they work almost identically, but in reverse to one another. In `windBackward()` we do the following — bear in mind that when the interval is active, this function is being run once every 200 milliseconds.
+
+   1. We start off with an `if` statement that checks to see whether the current time is less than 3 seconds, i.e., if rewinding by another three seconds would take it back past the start of the video. This would cause strange behavior, so if this is the case we stop the video playing by calling `stopMedia()`, remove the `active` class from the rewind button, and clear the `intervalRwd` interval to stop the rewind functionality. If we didn't do this last step, the video would just keep rewinding forever.
+   2. If the current time is not within 3 seconds of the start of the video, we remove three seconds from the current time by executing `media.currentTime -= 3`. So in effect, we are rewinding the video by 3 seconds, once every 200 milliseconds.
 
 #### Updating the elapsed time
 
@@ -452,11 +452,11 @@ Here are some suggestions for ways you could enhance the existing example we've
 2. Because `<audio>` elements have the same {{domxref("HTMLMediaElement")}} functionality available to them, you could easily get this player to work for an `<audio>` element too. Try doing so.
 3. Can you work out a way to turn the timer inner `<div>` element into a true seek bar/scroller — i.e., when you click somewhere on the bar, it jumps to that relative position in the video playback? As a hint, you can find out the X and Y values of the element's left/right and top/bottom sides via the [`getBoundingClientRect()`](/en-US/docs/Web/API/Element/getBoundingClientRect) method, and you can find the coordinates of a mouse click via the event object of the click event, called on the {{domxref("Document")}} object. For example:
 
-    ```js
-    document.onclick = function(e) {
-      console.log(e.x, e.y);
-    }
-    ```
+   ```js
+   document.onclick = function(e) {
+     console.log(e.x, e.y);
+   }
+   ```
 
 ## See also
 
diff --git a/files/en-us/learn/javascript/first_steps/a_first_splash/index.md b/files/en-us/learn/javascript/first_steps/a_first_splash/index.md
index 45877262c9fc51b..b7c203093d2fc49 100644
--- a/files/en-us/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/en-us/learn/javascript/first_steps/a_first_splash/index.md
@@ -73,21 +73,21 @@ Upon looking at this brief, the first thing we can do is to start breaking it do
 5. Next, check whether it is the correct number.
 6. If it is correct:
 
-    1. Display congratulations message.
-    2. Stop the player from being able to enter more guesses (this would mess the game up).
-    3. Display control allowing the player to restart the game.
+   1. Display congratulations message.
+   2. Stop the player from being able to enter more guesses (this would mess the game up).
+   3. Display control allowing the player to restart the game.
 
 7. If it is wrong and the player has turns left:
 
-    1. Tell the player they are wrong and whether their guess was too high or too low.
-    2. Allow them to enter another guess.
-    3. Increment the turn number by 1.
+   1. Tell the player they are wrong and whether their guess was too high or too low.
+   2. Allow them to enter another guess.
+   3. Increment the turn number by 1.
 
 8. If it is wrong and the player has no turns left:
 
-    1. Tell the player it is game over.
-    2. Stop the player from being able to enter more guesses (this would mess the game up).
-    3. Display control allowing the player to restart the game.
+   1. Tell the player it is game over.
+   2. Stop the player from being able to enter more guesses (this would mess the game up).
+   3. Display control allowing the player to restart the game.
 
 9. Once the game restarts, make sure the game logic and UI are completely reset, then go back to step 1.
 
@@ -484,37 +484,37 @@ Let's play with some browser objects a bit.
 3. Type `guessField` into the console and the console shows you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!
 4. Now type in the following:
 
-    ```js
-    guessField.value = 2;
-    ```
+   ```js
+   guessField.value = 2;
+   ```
 
-    The `value` property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!
+   The `value` property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!
 
 5. Now try typing `guesses` into the console and pressing return. The console shows you that the variable contains a {{htmlelement("p")}} element.
 6. Now try entering the following line:
 
-    ```js
-    guesses.value
-    ```
+   ```js
+   guesses.value
+   ```
 
-    The browser returns `undefined`, because paragraphs don't have the `value` property.
+   The browser returns `undefined`, because paragraphs don't have the `value` property.
 
 7. To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this:
 
-    ```js
-    guesses.textContent = 'Where is my paragraph?';
-    ```
+   ```js
+   guesses.textContent = 'Where is my paragraph?';
+   ```
 
 8. Now for some fun stuff. Try entering the below lines, one by one:
 
-    ```js
-    guesses.style.backgroundColor = 'yellow';
-    guesses.style.fontSize = '200%';
-    guesses.style.padding = '10px';
-    guesses.style.boxShadow = '3px 3px 6px black';
-    ```
+   ```js
+   guesses.style.backgroundColor = 'yellow';
+   guesses.style.fontSize = '200%';
+   guesses.style.padding = '10px';
+   guesses.style.boxShadow = '3px 3px 6px black';
+   ```
 
-    Every element on a page has a `style` property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.
+   Every element on a page has a `style` property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.
 
 ## Finished for now…
 
diff --git a/files/en-us/learn/javascript/first_steps/arrays/index.md b/files/en-us/learn/javascript/first_steps/arrays/index.md
index 17d72234334108a..4358f977ad70ca3 100644
--- a/files/en-us/learn/javascript/first_steps/arrays/index.md
+++ b/files/en-us/learn/javascript/first_steps/arrays/index.md
@@ -53,17 +53,17 @@ Arrays consist of square brackets and items that are separated by commas.
 
 1. Suppose we want to store a shopping list in an array. Paste the following code into the console:
 
-    ```js
-    const shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
-    console.log(shopping);
-    ```
+   ```js
+   const shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+   console.log(shopping);
+   ```
 
 2. In the above example, each item is a string, but in an array we can store various data types — strings, numbers, objects, and even other arrays. We can also mix data types in a single array — we do not have to limit ourselves to storing only numbers in one array, and in another only strings. For example:
 
-    ```js
-    const sequence = [1, 1, 2, 3, 5, 8, 13];
-    const random = ['tree', 795, [0, 1, 2]];
-    ```
+   ```js
+   const sequence = [1, 1, 2, 3, 5, 8, 13];
+   const random = ['tree', 795, [0, 1, 2]];
+   ```
 
 3. Before proceeding, create a few example arrays.
 
@@ -82,29 +82,29 @@ Items in an array are numbered, starting from zero. This number is called the it
 
 1. Enter the following into your console:
 
-    ```js
-    const shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
-    console.log(shopping[0]);
-    // returns "bread"
-    ```
+   ```js
+   const shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+   console.log(shopping[0]);
+   // returns "bread"
+   ```
 
 2. You can also modify an item in an array by giving a single array item a new value. Try this:
 
-    ```js
-    const shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
-    shopping[0] = 'tahini';
-    console.log(shopping);
-    // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
-    ```
+   ```js
+   const shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+   shopping[0] = 'tahini';
+   console.log(shopping);
+   // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
+   ```
 
-    > **Note:** We've said it before, but just as a reminder — computers start counting from 0!
+   > **Note:** We've said it before, but just as a reminder — computers start counting from 0!
 
 3. Note that an array inside an array is called a multidimensional array. You can access an item inside an array that is itself inside another array by chaining two sets of square brackets together. For example, to access one of the items inside the array that is the third item inside the `random` array (see previous section), we could do something like this:
 
-    ```js
-    const random = ['tree', 795, [0, 1, 2]];
-    random[2][2];
-    ```
+   ```js
+   const random = ['tree', 795, [0, 1, 2]];
+   random[2][2];
+   ```
 
 4. Try making some more modifications to your array examples before moving on. Play around a bit, and see what works and what doesn't.
 
@@ -241,39 +241,39 @@ Often you'll be presented with some raw data contained in a big long string, and
 
 1. Let's play with this, to see how it works. First, create a string in your console:
 
-    ```js
-    const data = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
-    ```
+   ```js
+   const data = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
+   ```
 
 2. Now let's split it at each comma:
 
-    ```js
-    const cities = data.split(',');
-    cities;
-    ```
+   ```js
+   const cities = data.split(',');
+   cities;
+   ```
 
 3. Finally, try finding the length of your new array, and retrieving some items from it:
 
-    ```js
-    cities.length;
-    cities[0]; // the first item in the array
-    cities[1]; // the second item in the array
-    cities[cities.length - 1]; // the last item in the array
-    ```
+   ```js
+   cities.length;
+   cities[0]; // the first item in the array
+   cities[1]; // the second item in the array
+   cities[cities.length - 1]; // the last item in the array
+   ```
 
 4. You can also go the opposite way using the {{jsxref("Array.prototype.join()","join()")}} method. Try the following:
 
-    ```js
-    const commaSeparated = cities.join(',');
-    commaSeparated;
-    ```
+   ```js
+   const commaSeparated = cities.join(',');
+   commaSeparated;
+   ```
 
 5. Another way of converting an array to a string is to use the {{jsxref("Array.prototype.toString()","toString()")}} method. `toString()` is arguably simpler than `join()` as it doesn't take a parameter, but more limiting. With `join()` you can specify different separators, whereas `toString()` always uses a comma. (Try running Step 4 with a different character than a comma.)
 
-    ```js
-    const dogNames = ['Rocket','Flash','Bella','Slugger'];
-    dogNames.toString(); // Rocket,Flash,Bella,Slugger
-    ```
+   ```js
+   const dogNames = ['Rocket','Flash','Bella','Slugger'];
+   dogNames.toString(); // Rocket,Flash,Bella,Slugger
+   ```
 
 ## Active learning: Printing those products
 
diff --git a/files/en-us/learn/javascript/first_steps/math/index.md b/files/en-us/learn/javascript/first_steps/math/index.md
index 1f36b6d0bdce9b0..7155ba20aeb1ec0 100644
--- a/files/en-us/learn/javascript/first_steps/math/index.md
+++ b/files/en-us/learn/javascript/first_steps/math/index.md
@@ -69,22 +69,22 @@ Let's quickly play with some numbers to reacquaint ourselves with the basic synt
 
 1. First of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order:
 
-    ```js
-    const myInt = 5;
-    const myFloat = 6.667;
-    myInt;
-    myFloat;
-    ```
+   ```js
+   const myInt = 5;
+   const myFloat = 6.667;
+   myInt;
+   myFloat;
+   ```
 
 2. Number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on.
 3. Now let's check that both our original variables are of the same datatype. There is an operator called {{jsxref("Operators/typeof", "typeof")}} in JavaScript that does this. Enter the below two lines as shown:
 
-    ```js
-    typeof myInt;
-    typeof myFloat;
-    ```
+   ```js
+   typeof myInt;
+   typeof myFloat;
+   ```
 
-    You should get `"number"` returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. Phew!
+   You should get `"number"` returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. Phew!
 
 ### Useful Number methods
 
@@ -203,29 +203,29 @@ We probably don't need to teach you how to do basic math, but we would like to t
 
 1. First try entering some simple examples of your own, such as
 
-    ```js
-    10 + 7
-    9 * 8
-    60 % 3
-    ```
+   ```js
+   10 + 7
+   9 * 8
+   60 % 3
+   ```
 
 2. You can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum. For example:
 
-    ```js
-    const num1 = 10;
-    const num2 = 50;
-    9 * num1;
-    num1 ** 3;
-    num2 / num1;
-    ```
+   ```js
+   const num1 = 10;
+   const num2 = 50;
+   9 * num1;
+   num1 ** 3;
+   num2 / num1;
+   ```
 
 3. Last for this section, try entering some more complex expressions, such as:
 
-    ```js
-    5 + 10 * 3;
-    num2 % 9 * num1;
-    num2 + num1 / 8 + 2;
-    ```
+   ```js
+   5 + 10 * 3;
+   num2 % 9 * num1;
+   num2 + num1 / 8 + 2;
+   ```
 
 Parts of this last set of calculations might not give you quite the result you were expecting; the section below might well give the answer as to why.
 
diff --git a/files/en-us/learn/javascript/first_steps/silly_story_generator/index.md b/files/en-us/learn/javascript/first_steps/silly_story_generator/index.md
index 551c6d585b9f1f6..416642aa758c8d5 100644
--- a/files/en-us/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/en-us/learn/javascript/first_steps/silly_story_generator/index.md
@@ -78,18 +78,18 @@ Initial variables and functions:
 1. In the raw text file, copy all of the code underneath the heading "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" and paste it into the top of the `main.js` file. This gives you three variables that store references to the "Enter custom name" text field (`customName`), the "Generate random story" button (`randomize`), and the {{htmlelement("p")}} element at the bottom of the HTML body that the story will be copied into (`story`), respectively. In addition you've got a function called `randomValueFromArray()` that takes an array, and returns one of the items stored inside the array at random.
 2. Now look at the second section of the raw text file — "2. RAW TEXT STRINGS". This contains text strings that will act as input into our program. We'd like you to contain these inside variables inside `main.js`:
 
-    1. Store the first, big long, string of text inside a variable called `storyText`.
-    2. Store the first set of three strings inside an array called `insertX`.
-    3. Store the second set of three strings inside an array called `insertY`.
-    4. Store the third set of three strings inside an array called `insertZ`.
+   1. Store the first, big long, string of text inside a variable called `storyText`.
+   2. Store the first set of three strings inside an array called `insertX`.
+   3. Store the second set of three strings inside an array called `insertY`.
+   4. Store the third set of three strings inside an array called `insertZ`.
 
 Placing the event handler and incomplete function:
 
 1. Now return to the raw text file.
 2. Copy the code found underneath the heading "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" and paste it into the bottom of your `main.js` file. This:
 
-    - Adds a click event listener to the `randomize` variable so that when the button it represents is clicked, the `result()` function is run.
-    - Adds a partially-completed `result()` function definition to your code. For the remainder of the assessment, you'll be filling in lines inside this function to complete it and make it work properly.
+   - Adds a click event listener to the `randomize` variable so that when the button it represents is clicked, the `result()` function is run.
+   - Adds a partially-completed `result()` function definition to your code. For the remainder of the assessment, you'll be filling in lines inside this function to complete it and make it work properly.
 
 Completing the `result()` function:
 
@@ -99,10 +99,10 @@ Completing the `result()` function:
 4. Inside the first `if` block, add another string replacement method call to replace the name 'Bob' found in the `newStory` string with the `name` variable. In this block we are saying "If a value has been entered into the `customName` text input, replace Bob in the story with that custom name."
 5. Inside the second `if` block, we are checking to see if the `uk` radio button has been selected. If so, we want to convert the weight and temperature values in the story from pounds and Fahrenheit into stones and centigrade. What you need to do is as follows:
 
-    1. Look up the formulas for converting pounds to stone, and Fahrenheit to centigrade.
-    2. Inside the line that defines the `weight` variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate `' stone'` onto the end of the result of the overall `Math.round()` call.
-    3. Inside the line that defines the `temperature` variable, replace 94 with a calculation that converts 94 Fahrenheit into centigrade. Concatenate `' centigrade'` onto the end of the result of the overall `Math.round()` call.
-    4. Just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the `temperature` variable, and '300 pounds' with the contents of the `weight` variable.
+   1. Look up the formulas for converting pounds to stone, and Fahrenheit to centigrade.
+   2. Inside the line that defines the `weight` variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate `' stone'` onto the end of the result of the overall `Math.round()` call.
+   3. Inside the line that defines the `temperature` variable, replace 94 with a calculation that converts 94 Fahrenheit into centigrade. Concatenate `' centigrade'` onto the end of the result of the overall `Math.round()` call.
+   4. Just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the `temperature` variable, and '300 pounds' with the contents of the `weight` variable.
 
 6. Finally, in the second-to-last line of the function, make the `textContent` property of the `story` variable (which references the paragraph) equal to `newStory`.
 
@@ -125,10 +125,10 @@ 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/).
 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 Silly story generator".
-    - 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.
+   - A descriptive title such as "Assessment wanted for Silly story generator".
+   - 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.
 
 {{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
 
diff --git a/files/en-us/learn/javascript/first_steps/strings/index.md b/files/en-us/learn/javascript/first_steps/strings/index.md
index f2e1d9e7e6181c9..fa61078f2c002c0 100644
--- a/files/en-us/learn/javascript/first_steps/strings/index.md
+++ b/files/en-us/learn/javascript/first_steps/strings/index.md
@@ -48,65 +48,65 @@ Strings are dealt with similarly to numbers at first glance, but when you dig de
 
 1. To start with, enter the following lines:
 
-    ```js
-    const string = 'The revolution will not be televised.';
-    console.log(string);
-    ```
+   ```js
+   const string = 'The revolution will not be televised.';
+   console.log(string);
+   ```
 
-    Just like we did with numbers, we are declaring a variable, initializing it with a string value, and then returning the value. The only difference here is that when writing a string, you need to surround the value with quotes.
+   Just like we did with numbers, we are declaring a variable, initializing it with a string value, and then returning the value. The only difference here is that when writing a string, you need to surround the value with quotes.
 
 2. If you don't do this, or miss one of the quotes, you'll get an error. Try entering the following lines:
 
-    ```js example-bad
-    const badString1 = This is a test;
-    const badString2 = 'This is a test;
-    const badString3 = This is a test';
-    ```
+   ```js example-bad
+   const badString1 = This is a test;
+   const badString2 = 'This is a test;
+   const badString3 = This is a test';
+   ```
 
-    These lines don't work because any text without quotes around it is assumed to be a variable name, property name, a reserved word, or similar. If the browser can't find it, then an error is raised (e.g. "missing; before statement"). If the browser can see where a string starts, but can't find the end of the string, as indicated by the 2nd quote, it complains with an error (with "unterminated string literal"). If your program is raising such errors, then go back and check all your strings to make sure you have no missing quote marks.
+   These lines don't work because any text without quotes around it is assumed to be a variable name, property name, a reserved word, or similar. If the browser can't find it, then an error is raised (e.g. "missing; before statement"). If the browser can see where a string starts, but can't find the end of the string, as indicated by the 2nd quote, it complains with an error (with "unterminated string literal"). If your program is raising such errors, then go back and check all your strings to make sure you have no missing quote marks.
 
 3. The following will work if you previously defined the variable `string` — try it now:
 
-    ```js
-    const badString = string;
-    console.log(badString);
-    ```
+   ```js
+   const badString = string;
+   console.log(badString);
+   ```
 
-    `badString` is now set to have the same value as `string`.
+   `badString` is now set to have the same value as `string`.
 
 ### Single quotes vs. double quotes
 
 1. In JavaScript, you can choose single quotes or double quotes to wrap your strings in. Both of the following will work okay:
 
-    ```js
-    const sgl = 'Single quotes.';
-    const dbl = "Double quotes";
-    console.log(sgl);
-    console.log(dbl);
-    ```
+   ```js
+   const sgl = 'Single quotes.';
+   const dbl = "Double quotes";
+   console.log(sgl);
+   console.log(dbl);
+   ```
 
 2. There is very little difference between the two, and which you use is down to personal preference. You should choose one and stick to it, however; differently quoted code can be confusing, especially if you use two different quotes on the same string! The following will return an error:
 
-    ```js example-bad
-    const badQuotes = 'What on earth?";
-    ```
+   ```js example-bad
+   const badQuotes = 'What on earth?";
+   ```
 
 3. The browser will think the string has not been closed because the other type of quote you are not using to contain your strings can appear in the string. For example, both of these are okay:
 
-    ```js
-    const sglDbl = 'Would you eat a "fish supper"?';
-    const dblSgl = "I'm feeling blue.";
-    console.log(sglDbl);
-    console.log(dblSgl);
-    ```
+   ```js
+   const sglDbl = 'Would you eat a "fish supper"?';
+   const dblSgl = "I'm feeling blue.";
+   console.log(sglDbl);
+   console.log(dblSgl);
+   ```
 
 4. However, you can't include the same quote mark inside the string if it's being used to contain them. The following will error, as it confuses the browser as to where the string ends:
 
-    ```js example-bad
-    const bigmouth = 'I've got no right to take my place…';
-    ```
+   ```js example-bad
+   const bigmouth = 'I've got no right to take my place…';
+   ```
 
-    This leads us very nicely into our next subject.
+   This leads us very nicely into our next subject.
 
 ### Escaping characters in a string
 
@@ -123,7 +123,7 @@ This works fine. You can escape other characters in the same way, e.g. `\"`, and
 
 Concatenate just means "join together". To join together strings in JavaScript you can use a different type of string, called a _template literal_.
 
-A template literal looks just like a normal string, but instead of using single or double quote marks  (`'` or `"`), you use backtick characters (`` ` ``):
+A template literal looks just like a normal string, but instead of using single or double quote marks (`'` or `"`), you use backtick characters (`` ` ``):
 
 ```js
 const greeting = `Hello`;
diff --git a/files/en-us/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md b/files/en-us/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
index 451722380d8622e..fa4c720018e0daa 100644
--- a/files/en-us/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
+++ b/files/en-us/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
@@ -56,7 +56,7 @@ For this array task, we provide you with a starting array, and you will work in
 1. Remove the last item in the array.
 2. Add two new names to the end of the array.
 3. Go over each item in the array and add its index number after the name inside parentheses, for example `Ryu (0)`. Note that we don't teach how to do this in the Arrays article, so you'll have to do some research.
-4. Finally, join the array items together in a single string called `myString`, with a separator of "` - `".
+4. Finally, join the array items together in a single string called `myString`, with a separator of "`-`".
 
 Try updating the live code below to recreate the finished example:
 
@@ -90,7 +90,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 Variables 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Variables 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/javascript/first_steps/test_your_skills_colon__math/index.md b/files/en-us/learn/javascript/first_steps/test_your_skills_colon__math/index.md
index 91550173c088ae7..ef8672c59980dcb 100644
--- a/files/en-us/learn/javascript/first_steps/test_your_skills_colon__math/index.md
+++ b/files/en-us/learn/javascript/first_steps/test_your_skills_colon__math/index.md
@@ -75,7 +75,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 Math 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Math 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/javascript/first_steps/test_your_skills_colon__strings/index.md b/files/en-us/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
index f68e3b520428000..9d45a8a176b0263 100644
--- a/files/en-us/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
+++ b/files/en-us/learn/javascript/first_steps/test_your_skills_colon__strings/index.md
@@ -75,9 +75,9 @@ In the final string task, we have given you the name of a theorem, two numeric v
 1. Change it from a regular string literal into a template literal.
 2. Replace the four asterisks with four template literal placeholders. These should be:
 
-    1. The name of the theorem.
-    2. The two number values we have.
-    3. The length of the hypotenuse of a right-angled triangle, given that the two other side lengths are the same as the two values we have. You'll need to look up how to calculate this from what you have. Do the calculation inside the placeholder.
+   1. The name of the theorem.
+   2. The two number values we have.
+   3. The length of the hypotenuse of a right-angled triangle, given that the two other side lengths are the same as the two values we have. You'll need to look up how to calculate this from what you have. Do the calculation inside the placeholder.
 
 Try updating the live code below to recreate the finished example:
 
@@ -96,7 +96,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 Strings 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Strings 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/javascript/first_steps/test_your_skills_colon__variables/index.md b/files/en-us/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
index f9bc6b2e77c7006..38e355847550a28 100644
--- a/files/en-us/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
+++ b/files/en-us/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
@@ -68,7 +68,7 @@ If you would like your work assessed, or are stuck and want to ask for help:
 1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections.
 2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250). Your post should include:
 
-    - A descriptive title such as "Assessment wanted for Variables 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Variables 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/javascript/first_steps/what_went_wrong/index.md b/files/en-us/learn/javascript/first_steps/what_went_wrong/index.md
index 424ddf907f402e5..b353648aa90e49f 100644
--- a/files/en-us/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/en-us/learn/javascript/first_steps/what_went_wrong/index.md
@@ -65,17 +65,17 @@ Earlier on in the course we got you to type some simple JavaScript commands into
 1. Go to the tab that you've got `number-game-errors.html` open in, and open your JavaScript console. You should see an error message along the following lines: !["Number guessing game" demo page in Firefox. One error is visible in the JavaScript console: "X TypeError: guessSubmit.addeventListener is not a function [Learn More] (number-game-errors.html:86:3)".](not-a-function.png)
 2. This is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from Firefox, but other browsers provide similar information). From left to right, we've got:
 
-    - A red "x" to indicate that this is an error.
-    - An error message to indicate what's gone wrong: "TypeError: guessSubmit.addeventListener is not a function"
-    - A "Learn More" link that links through to an MDN page that explains what this error means in greater detail.
-    - The name of the JavaScript file, which links through to the Debugger tab of the developer tools. If you follow this link, you'll see the exact line where the error is highlighted.
-    - The line number where the error is, and the character number in that line where the error is first seen. In this case, we've got line 86, character number 3.
+   - A red "x" to indicate that this is an error.
+   - An error message to indicate what's gone wrong: "TypeError: guessSubmit.addeventListener is not a function"
+   - A "Learn More" link that links through to an MDN page that explains what this error means in greater detail.
+   - The name of the JavaScript file, which links through to the Debugger tab of the developer tools. If you follow this link, you'll see the exact line where the error is highlighted.
+   - The line number where the error is, and the character number in that line where the error is first seen. In this case, we've got line 86, character number 3.
 
 3. If we look at line 86 in our code editor, we'll find this line:
 
-    ```js
-    guessSubmit.addeventListener('click', checkGuess);
-    ```
+   ```js
+   guessSubmit.addeventListener('click', checkGuess);
+   ```
 
 4. The error message says "guessSubmit.addeventListener is not a function", which means that the function we're calling is not recognized by the JavaScript interpreter. Often, this error message actually means that we've spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn _name-of-feature_" with your favorite search engine. Here's a shortcut to save you some time in this instance: [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener).
 5. So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight difference in spelling or casing will cause an error. Changing `addeventListener` to `addEventListener` should fix this. Do this now.
@@ -88,36 +88,36 @@ Earlier on in the course we got you to type some simple JavaScript commands into
 2. Now if you try to enter a guess and press the Submit guess button, you'll see another error! ![Screenshot of the same "Number guessing game" demo. This time, a different error is visible in the console, reading "X TypeError: lowOrHi is null".](variable-is-null.png)
 3. This time the error being reported is "TypeError: lowOrHi is null", on line 78.
 
-    > **Note:** [`Null`](/en-US/docs/Glossary/Null) is a special value that means "nothing", or "no value". So `lowOrHi` has been declared and initialized, but not with any meaningful value — it has no type or value.
+   > **Note:** [`Null`](/en-US/docs/Glossary/Null) is a special value that means "nothing", or "no value". So `lowOrHi` has been declared and initialized, but not with any meaningful value — it has no type or value.
 
-    > **Note:** This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the `checkGuess() { }` block). As you'll learn in more detail in our later [functions article](/en-US/docs/Learn/JavaScript/Building_blocks/Functions), code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the `checkGuess()` function was run by line 86.
+   > **Note:** This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the `checkGuess() { }` block). As you'll learn in more detail in our later [functions article](/en-US/docs/Learn/JavaScript/Building_blocks/Functions), code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the `checkGuess()` function was run by line 86.
 
 4. Have a look at line 78, and you'll see the following code:
 
-    ```js
-    lowOrHi.textContent = 'Last guess was too high!';
-    ```
+   ```js
+   lowOrHi.textContent = 'Last guess was too high!';
+   ```
 
 5. This line is trying to set the `textContent` property of the `lowOrHi` constant to a text string, but it's not working because `lowOrHi` does not contain what it's supposed to. Let's see why this is — try searching for other instances of `lowOrHi` in the code. The earliest instance you'll find in the JavaScript is on line 48:
 
-    ```js
-    const lowOrHi = document.querySelector('lowOrHi');
-    ```
+   ```js
+   const lowOrHi = document.querySelector('lowOrHi');
+   ```
 
 6. At this point we are trying to make the variable contain a reference to an element in the document's HTML. Let's check whether the value is `null` after this line has been run. Add the following code on line 49:
 
-    ```js
-    console.log(lowOrHi);
-    ```
+   ```js
+   console.log(lowOrHi);
+   ```
 
-    > **Note:** [`console.log()`](/en-US/docs/Web/API/console/log) is a really useful debugging function that prints a value to the console. So it will print the value of `lowOrHi` to the console as soon as we have tried to set it in line 48.
+   > **Note:** [`console.log()`](/en-US/docs/Web/API/console/log) is a really useful debugging function that prints a value to the console. So it will print the value of `lowOrHi` to the console as soon as we have tried to set it in line 48.
 
 7. Save and refresh, and you should now see the `console.log()` result in your console. ![Screenshot of the same demo. One log statement is visible in the console, reading simply "null".](console-log-output.png) Sure enough, `lowOrHi`'s value is `null` at this point, so there is definitely a problem with line 48.
 8. Let's think about what the problem could be. Line 48 is using a [`document.querySelector()`](/en-US/docs/Web/API/Document/querySelector) method to get a reference to an element by selecting it with a CSS selector. Looking further up our file, we can find the paragraph in question:
 
-    ```html
-    <p class="lowOrHi"></p>
-    ```
+   ```html
+   <p class="lowOrHi"></p>
+   ```
 
 9. So we need a class selector here, which begins with a dot (`.`), but the selector being passed into the `querySelector()` method in line 48 has no dot. This could be the problem! Try changing `lowOrHi` to `.lowOrHi` in line 48.
 10. Try saving and refreshing again, and your `console.log()` statement should return the `<p>` element we want. Phew! Another error fixed! You can delete your `console.log()` line now, or keep it to reference later on — your choice.
@@ -138,21 +138,21 @@ There's definitely a problem in the game logic somewhere — the game is not ret
 
 1. Search for the `randomNumber` variable, and the lines where the random number is first set. The instance that stores the random number that we want to guess at the start of the game should be around line number 44:
 
-    ```js
-    let randomNumber = Math.floor(Math.random()) + 1;
-    ```
+   ```js
+   let randomNumber = Math.floor(Math.random()) + 1;
+   ```
 
 2. And the one that generates the random number before each subsequent game is around line 113:
 
-    ```js
-    randomNumber = Math.floor(Math.random()) + 1;
-    ```
+   ```js
+   randomNumber = Math.floor(Math.random()) + 1;
+   ```
 
 3. To check whether these lines are indeed the problem, let's turn to our friend `console.log()` again — insert the following line directly below each of the above two lines:
 
-    ```js
-    console.log(randomNumber);
-    ```
+   ```js
+   console.log(randomNumber);
+   ```
 
 4. Save and refresh, then play a few games — you'll see that `randomNumber` is equal to 1 at each point where it is logged to the console.
 
diff --git a/files/en-us/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/en-us/learn/javascript/objects/adding_bouncing_balls_features/index.md
index 85508e510195628..40c6852f4d37996 100644
--- a/files/en-us/learn/javascript/objects/adding_bouncing_balls_features/index.md
+++ b/files/en-us/learn/javascript/objects/adding_bouncing_balls_features/index.md
@@ -178,22 +178,22 @@ To implement the score counter, follow the following steps:
 1. In your HTML file, add a {{HTMLElement("p")}} element just below the {{HTMLElement("h1")}} element containing the text "Ball count: ".
 2. In your CSS file, add the following rule at the bottom:
 
-    ```css
-    p {
-      position: absolute;
-      margin: 0;
-      top: 35px;
-      right: 5px;
-      color: #aaa;
-    }
-    ```
+   ```css
+   p {
+     position: absolute;
+     margin: 0;
+     top: 35px;
+     right: 5px;
+     color: #aaa;
+   }
+   ```
 
 3. In your JavaScript, make the following updates:
 
-    - Create a variable that stores a reference to the paragraph.
-    - Keep a count of the number of balls on screen in some way.
-    - Increment the count and display the updated number of balls each time a ball is added to the scene.
-    - Decrement the count and display the updated number of balls each time the evil circle eats a ball (causes it not to exist).
+   - Create a variable that stores a reference to the paragraph.
+   - Keep a count of the number of balls on screen in some way.
+   - Increment the count and display the updated number of balls each time a ball is added to the scene.
+   - Decrement the count and display the updated number of balls each time the evil circle eats a ball (causes it not to exist).
 
 ## Assessment or further help
 
@@ -202,10 +202,10 @@ 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/).
 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 Adding bouncing balls features".
-    - 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.
+   - A descriptive title such as "Assessment wanted for Adding bouncing balls features".
+   - 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.
 
 {{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
 
diff --git a/files/en-us/learn/javascript/objects/object_building_practice/index.md b/files/en-us/learn/javascript/objects/object_building_practice/index.md
index b72072b659da25a..047e523ec414655 100644
--- a/files/en-us/learn/javascript/objects/object_building_practice/index.md
+++ b/files/en-us/learn/javascript/objects/object_building_practice/index.md
@@ -147,18 +147,18 @@ You can start testing your object out already.
 2. Open the browser's JavaScript console, and then refresh the page so that the canvas size changes to the smaller visible viewport that remains when the console opens.
 3. Type in the following to create a new ball instance:
 
-    ```js
-    const testBall = new Ball(50, 100, 4, 4, 'blue', 10);
-    ```
+   ```js
+   const testBall = new Ball(50, 100, 4, 4, 'blue', 10);
+   ```
 
 4. Try calling its members:
 
-    ```js
-    testBall.x
-    testBall.size
-    testBall.color
-    testBall.draw()
-    ```
+   ```js
+   testBall.x
+   testBall.size
+   testBall.color
+   testBall.draw()
+   ```
 
 5. When you enter the last line, you should see the ball draw itself somewhere on the canvas.
 
diff --git a/files/en-us/learn/javascript/objects/test_your_skills_colon__json/index.md b/files/en-us/learn/javascript/objects/test_your_skills_colon__json/index.md
index 6ca1dbee9a8113b..1137681bf394dec 100644
--- a/files/en-us/learn/javascript/objects/test_your_skills_colon__json/index.md
+++ b/files/en-us/learn/javascript/objects/test_your_skills_colon__json/index.md
@@ -50,7 +50,7 @@ If you would like your work assessed, or are stuck and want to ask for help:
 
 1. 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 JSON 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.
-    - Your code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for JSON 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.
+   - Your 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/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md b/files/en-us/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md
index 2a711d723e2e020..5499b74d765607b 100644
--- a/files/en-us/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md
+++ b/files/en-us/learn/javascript/objects/test_your_skills_colon__object-oriented_javascript/index.md
@@ -64,7 +64,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 OOJS 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for OOJS 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/javascript/objects/test_your_skills_colon__object_basics/index.md b/files/en-us/learn/javascript/objects/test_your_skills_colon__object_basics/index.md
index 750ccc77e103794..adaf16e72f0b6d9 100644
--- a/files/en-us/learn/javascript/objects/test_your_skills_colon__object_basics/index.md
+++ b/files/en-us/learn/javascript/objects/test_your_skills_colon__object_basics/index.md
@@ -101,7 +101,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 Object basics 1 skill test".
-    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
-    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
-    - A link to the actual task or assessment page, so we can find the question you want help with.
+   - A descriptive title such as "Assessment wanted for Object basics 1 skill test".
+   - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+   - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+   - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/en-us/learn/mathml/first_steps/getting_started/index.md b/files/en-us/learn/mathml/first_steps/getting_started/index.md
index 2c9990448e3283d..953eeee2377aade 100644
--- a/files/en-us/learn/mathml/first_steps/getting_started/index.md
+++ b/files/en-us/learn/mathml/first_steps/getting_started/index.md
@@ -102,7 +102,7 @@ You may also notice some subtle change in the appearance: the text and vertical
 
 > **Note:** This corresponds to the LaTeX's concept of _inline_ formulas (delimited by dollar signs `$...$`) and _display_ formulas (delimited by `\[...\]`).
 
-> **Note:** The appearance change mentioned above is actually controlled by the  [`math-style`](/en-US/docs/Web/CSS/math-style) property which is initially `normal` for `<math display="block">` and `compact` otherwise. In some MathML subtrees, this property can then automatically become `compact` but we will ignore this subtlety for this introductory tutorial. Again, this is similar to LaTeX.
+> **Note:** The appearance change mentioned above is actually controlled by the [`math-style`](/en-US/docs/Web/CSS/math-style) property which is initially `normal` for `<math display="block">` and `compact` otherwise. In some MathML subtrees, this property can then automatically become `compact` but we will ignore this subtlety for this introductory tutorial. Again, this is similar to LaTeX.
 
 ## Grouping with the \<mrow> element
 
diff --git a/files/en-us/learn/performance/css/index.md b/files/en-us/learn/performance/css/index.md
index dd96c5ebe64f099..27b90702e7f2fa3 100644
--- a/files/en-us/learn/performance/css/index.md
+++ b/files/en-us/learn/performance/css/index.md
@@ -21,10 +21,10 @@ CSS can scope styles to particular conditions with media queries. Media queries
 <link rel="stylesheet" href="styles.css">
 
 <!-- Loading and parsing print.css is not render-blocking  -->
-<link rel="stylesheet" href="print.css" media="print"> 
+<link rel="stylesheet" href="print.css" media="print">
 
 <!-- Loading and parsing mobile.css is not render-blocking on large screens -->
-<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> 
+<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)">
 ```
 
 By default the browser assumes that each specified style sheet is render blocking. Tell the browser when the style sheet should be applied by adding a `media` attribute with the [media query](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). When the browser sees a style sheet it knows that it only needs to apply it for a specific scenario, it still downloads the stylesheet, but doesn't render block. By separating out the CSS into multiple files, the main render-blocking file, in this case `styles.css`, is much smaller, reducing the time that rendering is blocked.
diff --git a/files/en-us/learn/performance/multimedia/index.md b/files/en-us/learn/performance/multimedia/index.md
index ef27b276f83237c..f1deba971c0c6d4 100644
--- a/files/en-us/learn/performance/multimedia/index.md
+++ b/files/en-us/learn/performance/multimedia/index.md
@@ -38,7 +38,7 @@ Media, namely images and video, account for over 70% of the bytes downloaded for
   </tbody>
 </table>
 
-> **Note:** This is a high-level introduction to optimizing multimedia delivery on the web, covering general principles and techniques. For a more in-depth guide, see  <https://images.guide>.
+> **Note:** This is a high-level introduction to optimizing multimedia delivery on the web, covering general principles and techniques. For a more in-depth guide, see <https://images.guide>.
 
 ## Why optimize your multimedia?
 
diff --git a/files/en-us/learn/performance/web_performance_basics/index.md b/files/en-us/learn/performance/web_performance_basics/index.md
index 6560478dffe7c3f..12f57988f6fc04f 100644
--- a/files/en-us/learn/performance/web_performance_basics/index.md
+++ b/files/en-us/learn/performance/web_performance_basics/index.md
@@ -6,7 +6,6 @@ tags:
   - Website performance
 ---
 
-
 There are many [reasons](https://web.dev/why-speed-matters/) why your website should perform as well as possible.
 Below is a quick review of best practices, tools, APIs with links to provide more information about each topic.
 
diff --git a/files/en-us/learn/server-side/apache_configuration_htaccess/index.md b/files/en-us/learn/server-side/apache_configuration_htaccess/index.md
index acef272dadb5ab4..66946ca49696667 100644
--- a/files/en-us/learn/server-side/apache_configuration_htaccess/index.md
+++ b/files/en-us/learn/server-side/apache_configuration_htaccess/index.md
@@ -227,8 +227,7 @@ Servers should use text/javascript for JavaScript resources as indicated in the
 
 Every piece of content on the web has a character set. Most, if not all, the content is UTF-8 Unicode.
 
-Use [AddDefaultCharset](https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset
-) to serve all resources labeled as `text/html` or `text/plain` with the `UTF-8` charset.
+Use [AddDefaultCharset](https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset) to serve all resources labeled as `text/html` or `text/plain` with the `UTF-8` charset.
 
 ```apache
 <IfModule mod_mime.c>
@@ -279,9 +278,9 @@ The required steps are:
 2. Enable the `FollowSymLinks` option if it isn't already. See [Core Options](https://httpd.apache.org/docs/current/mod/core.html#options) documentation
 3. If your web host doesn't allow the `FollowSymlinks` option, you need to comment it out or remove it, and then uncomment the `Options +SymLinksIfOwnerMatch` line, but be aware of the [performance impact](https://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks)
 
-    - Some cloud hosting services will require you set `RewriteBase`
-    - See [Rackspace FAQ](https://web.archive.org/web/20151223141222/http://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-modrewrite-not-working-on-my-site) and the [HTTPD documentation](https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase)
-    - Depending on how your server is set up, you may also need to use the [`RewriteOptions`](https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewriteoptions) directive to enable some options for the rewrite engine
+   - Some cloud hosting services will require you set `RewriteBase`
+   - See [Rackspace FAQ](https://web.archive.org/web/20151223141222/http://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-modrewrite-not-working-on-my-site) and the [HTTPD documentation](https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase)
+   - Depending on how your server is set up, you may also need to use the [`RewriteOptions`](https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewriteoptions) directive to enable some options for the rewrite engine
 
 ```apache
 <IfModule mod_rewrite.c>
@@ -464,22 +463,22 @@ Be aware that Strict Transport Security is not revokable and you must ensure bei
 
 1. Restricts all fetches by default to the origin of the current website by setting the `default-src` directive to `'self'` - which acts as a fallback to all [Fetch directives](/en-US/docs/Glossary/Fetch_directive).
 
-    - This is convenient as you do not have to specify all Fetch directives that apply to your site, for example: `connect-src 'self'; font-src 'self'; script-src 'self'; style-src 'self'`, etc
-    - This restriction also means that you must explicitly define from which site(s) your website is allowed to load resources from, otherwise it will be restricted to the same origin as the page making the request
+   - This is convenient as you do not have to specify all Fetch directives that apply to your site, for example: `connect-src 'self'; font-src 'self'; script-src 'self'; style-src 'self'`, etc
+   - This restriction also means that you must explicitly define from which site(s) your website is allowed to load resources from, otherwise it will be restricted to the same origin as the page making the request
 
 2. Disallows the `<base>` element on the website. This is to prevent attackers from changing the locations of resources loaded from relative URLs
 
-    - If you want to use the `<base>` element, then use `base-uri 'self'` instead
+   - If you want to use the `<base>` element, then use `base-uri 'self'` instead
 
 3. Only allows form submissions are from the current origin with: `form-action 'self'`
 4. Prevents all websites (including your own) from embedding your webpages within e.g. the `<iframe>` or `<object>` element by setting: `frame-ancestors 'none'`.
 
-    - The `frame-ancestors` directive helps avoid [clickjacking](/en-US/docs/Glossary/Clickjacking) attacks and is similar to the `X-Frame-Options` header
-    - Browsers that support the CSP header will ignore `X-Frame-Options` if `frame-ancestors` is also specified
+   - The `frame-ancestors` directive helps avoid [clickjacking](/en-US/docs/Glossary/Clickjacking) attacks and is similar to the `X-Frame-Options` header
+   - Browsers that support the CSP header will ignore `X-Frame-Options` if `frame-ancestors` is also specified
 
 5. Forces the browser to treat all the resources that are served over HTTP as if they were loaded securely over HTTPS by setting the `upgrade-insecure-requests` directive
 
-    - **`upgrade-insecure-requests` does not ensure HTTPS for the top-level navigation. If you want to force the website itself to be loaded over HTTPS you must include the `Strict-Transport-Security` header**
+   - **`upgrade-insecure-requests` does not ensure HTTPS for the top-level navigation. If you want to force the website itself to be loaded over HTTPS you must include the `Strict-Transport-Security` header**
 
 6. Includes the `Content-Security-Policy` header in all responses that are able to execute scripting. This includes the commonly used file types: HTML, XML and PDF documents. Although JavaScript files can not execute scripts in a "browsing context", they are included to target [web workers](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#csp_in_workers)
 
diff --git a/files/en-us/learn/server-side/django/admin_site/index.md b/files/en-us/learn/server-side/django/admin_site/index.md
index 861fcf766d58a56..cf8010b534c5935 100644
--- a/files/en-us/learn/server-side/django/admin_site/index.md
+++ b/files/en-us/learn/server-side/django/admin_site/index.md
@@ -339,7 +339,7 @@ That's it! You've now learned how to set up the administration site in both its
 
 ## Further reading
 
-- [Writing your first Django app, part 2: Introducing the Django Admin](https://docs.djangoproject.com/en/4.0/intro/tutorial02/#introducing-the-django-admin)  (Django docs)
+- [Writing your first Django app, part 2: Introducing the Django Admin](https://docs.djangoproject.com/en/4.0/intro/tutorial02/#introducing-the-django-admin) (Django docs)
 - [The Django Admin site](https://docs.djangoproject.com/en/4.0/ref/contrib/admin/) (Django Docs)
 
 {{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
diff --git a/files/en-us/learn/server-side/django/deployment/index.md b/files/en-us/learn/server-side/django/deployment/index.md
index e523658fce28bc8..c4a347d4d1991b1 100644
--- a/files/en-us/learn/server-side/django/deployment/index.md
+++ b/files/en-us/learn/server-side/django/deployment/index.md
@@ -207,79 +207,79 @@ There are a lot of ways to work with git, but one of the easiest is to first set
 2. Once you are logged in, click the **+** link in the top toolbar and select **New repository**.
 3. Fill in all the fields on this form. While these are not compulsory, they are strongly recommended.
 
-    - Enter a new repository name (e.g. _django_local_library_), and description (e.g. "Local Library website written in Django".
-    - Choose **Python** in the _Add .gitignore_ selection list.
-    - Choose your preferred license in the _Add license_ selection list.
-    - Check **Initialize this repository with a README**.
+   - Enter a new repository name (e.g. _django_local_library_), and description (e.g. "Local Library website written in Django".
+   - Choose **Python** in the _Add .gitignore_ selection list.
+   - Choose your preferred license in the _Add license_ selection list.
+   - Check **Initialize this repository with a README**.
 
 4. Press **Create repository**.
 5. Click the green "**Clone or download**" button on your new repo page.
-6. Copy the URL value from the text field inside the dialog box that appears (it should be something like: `https://github.com/<your_git_user_id>/django_local_library`.git**).
+6. Copy the URL value from the text field inside the dialog box that appears (it should be something like: `https://github.com/<your_git_user_id>/django_local_library`.git\*\*).
 
 Now that the repository ("repo") is created we are going to want to clone it on our local computer:
 
 1. Install _git_ for your local computer (you can find versions for different platforms [here](https://git-scm.com/downloads)).
 2. Open a command prompt/terminal and clone your repository using the URL you copied above:
 
-    ```bash
-    git clone https://github.com/<your_git_user_id>/django_local_library.git
-    ```
+   ```bash
+   git clone https://github.com/<your_git_user_id>/django_local_library.git
+   ```
 
-    This will create the repository in a new folder in the current working directory.
+   This will create the repository in a new folder in the current working directory.
 
 3. Navigate into the new repo.
 
-    ```bash
-    cd django_local_library
-    ```
+   ```bash
+   cd django_local_library
+   ```
 
 The final steps are to copy your application into this local project directory and then add (or "push", in git lingo) the local repository to your remote GitHub repository:
 
 1. Copy your Django application into this folder (all the files at the same level as **manage.py** and below, **not** their containing locallibrary folder).
 2. Open the **.gitignore** file, copy the following lines into the bottom of it, and then save (this file is used to identify files that should not be uploaded to git by default).
 
-    ```plain
-    # Text backup files
-    *.bak
+   ```plain
+   # Text backup files
+   *.bak
 
-    # Database
-    *.sqlite3
-    ```
+   # Database
+   *.sqlite3
+   ```
 
 3. Open a command prompt/terminal and use the `add` command to add all files to git. This adds the files which aren't ignored by the **.gitignore** file to the "staging area".
 
-    ```bash
-    git add -A
-    ```
+   ```bash
+   git add -A
+   ```
 
 4. Use the `status` command to check that all files you are about to `commit` are correct (you want to include source files, not binaries, temporary files etc.). It should look a bit like the listing below.
 
-    ```plain
-    > git status
-    On branch main
-    Your branch is up-to-date with 'origin/main'.
-    Changes to be committed:
-      (use "git reset HEAD <file>..." to unstage)
-
-            modified:   .gitignore
-            new file:   catalog/__init__.py
-            ...
-            new file:   catalog/migrations/0001_initial.py
-            ...
-            new file:   templates/registration/password_reset_form.html
-    ```
+   ```plain
+   > git status
+   On branch main
+   Your branch is up-to-date with 'origin/main'.
+   Changes to be committed:
+     (use "git reset HEAD <file>..." to unstage)
+
+           modified:   .gitignore
+           new file:   catalog/__init__.py
+           ...
+           new file:   catalog/migrations/0001_initial.py
+           ...
+           new file:   templates/registration/password_reset_form.html
+   ```
 
 5. When you're satisfied, `commit` the files to your local repository. This is essentially equivalent to signing off on the changes and making them an official part of the local repository.
 
-    ```bash
-    git commit -m "First version of application moved into GitHub"
-    ```
+   ```bash
+   git commit -m "First version of application moved into GitHub"
+   ```
 
 6. At this point, the remote repository has not been changed. Synchronize (`push`) your local repository to the remote GitHub repository using the following command:
 
-    ```bash
-    git push origin main
-    ```
+   ```bash
+   git push origin main
+   ```
 
 > **Warning:** In 2020 GitHub change the default repo branch name to "main" (from "master"). If using an older/existing repository you might call `git push origin master` instead.
 
diff --git a/files/en-us/learn/server-side/django/development_environment/index.md b/files/en-us/learn/server-side/django/development_environment/index.md
index a8db3d77389782e..322cd09be966d34 100644
--- a/files/en-us/learn/server-side/django/development_environment/index.md
+++ b/files/en-us/learn/server-side/django/development_environment/index.md
@@ -143,9 +143,9 @@ You can easily install Python 3 (along with the _pip3_ tool) from [python.org](h
 
 1. Download the required installer:
 
-    1. Go to <https://www.python.org/downloads/macos/>
-    2. Download the most recent [supported version](https://docs.djangoproject.com/en/4.0/faq/install/#what-python-version-can-i-use-with-django) that works with Django 4.0.2.
-       (at time of writing this is Python 3.10.2).
+   1. Go to <https://www.python.org/downloads/macos/>
+   2. Download the most recent [supported version](https://docs.djangoproject.com/en/4.0/faq/install/#what-python-version-can-i-use-with-django) that works with Django 4.0.2.
+      (at time of writing this is Python 3.10.2).
 
 2. Locate the file using _Finder_, and double-click the package file. Following the installation prompts.
 
@@ -168,9 +168,10 @@ Windows doesn't include Python by default, but you can easily install it (along
 
 1. Download the required installer:
 
-    1. Go to <https://www.python.org/downloads/windows/>
-    2. Download the most recent [supported version](https://docs.djangoproject.com/en/4.0/faq/install/#what-python-version-can-i-use-with-django) that works with Django 4.0.2.
-       (at time of writing this is Python 3.10.2).
+   1. Go to <https://www.python.org/downloads/windows/>
+   2. Download the most recent [supported version](https://docs.djangoproject.com/en/4.0/faq/install/#what-python-version-can-i-use-with-django) that works with Django 4.0.2.
+      (at time of writing this is Python 3.10.2).
+
 2. Install Python by double-clicking on the downloaded file and following the installation prompts
 3. Be sure to check the box labeled "Add Python to PATH"
 
@@ -403,7 +404,7 @@ Quit the server with CONTROL-C.
 ```
 
 > **Note:** The above command shows the Linux/macOS command.
-> You can ignore the warnings about  "18 unapplied migration(s)" at this point!
+> You can ignore the warnings about "18 unapplied migration(s)" at this point!
 
 Once the server is running you can view the site by navigating to the following URL on your local web browser: `http://127.0.0.1:8000/`. You should see a site that looks like this:
 
diff --git a/files/en-us/learn/server-side/django/django_assessment_blog/index.md b/files/en-us/learn/server-side/django/django_assessment_blog/index.md
index 41181b5209632a5..654677d6b7cb2ac 100644
--- a/files/en-us/learn/server-side/django/django_assessment_blog/index.md
+++ b/files/en-us/learn/server-side/django/django_assessment_blog/index.md
@@ -254,10 +254,10 @@ The following sections describe what you need to do.
 1. Create a skeleton project and web application for the site (as described in [Django Tutorial Part 2: Creating a skeleton website](/en-US/docs/Learn/Server-side/Django/skeleton_website)). You might use 'diyblog' for the project name and 'blog' for the application name.
 2. Create models for the Blog posts, Comments, and any other objects needed. When thinking about your design, remember:
 
-    - Each comment will have only one blog, but a blog may have many comments.
-    - Blog posts and comments must be sorted by post date.
-    - Not every user will necessarily be a blog author though any user may be a commenter.
-    - Blog authors must also include bio information.
+   - Each comment will have only one blog, but a blog may have many comments.
+   - Blog posts and comments must be sorted by post date.
+   - Not every user will necessarily be a blog author though any user may be a commenter.
+   - Blog authors must also include bio information.
 
 3. Run migrations for your new models and create a superuser.
 4. Use the admin site to create some example blog posts and blog comments.
@@ -275,28 +275,28 @@ Some general hints:
 2. The list view for blog posts and bloggers, and the detail view for blog posts can be created using the [generic list and detail views](/en-US/docs/Learn/Server-side/Django/Generic_views).
 3. The list of blog posts for a particular author can be created by using a generic blog list view and filtering for blog objects that match the specified author.
 
-    - You will have to implement `get_queryset(self)` to do the filtering (much like in our library class `LoanedBooksAllListView`) and get the author information from the URL.
-    - You will also need to pass the name of the author to the page in the context. To do this in a class-based view you need to implement `get_context_data()` (discussed below).
+   - You will have to implement `get_queryset(self)` to do the filtering (much like in our library class `LoanedBooksAllListView`) and get the author information from the URL.
+   - You will also need to pass the name of the author to the page in the context. To do this in a class-based view you need to implement `get_context_data()` (discussed below).
 
 4. The _add comment_ form can be created using a function-based view (and associated model and form) or using a generic `CreateView`. If you use a `CreateView` (recommended) then:
 
-    - You will also need to pass the name of the blog post to the comment page in the context (implement `get_context_data()` as discussed below).
-    - The form should only display the comment "description" for user entry (date and associated blog post should not be editable). Since they won't be in the form itself, your code will need to set the comment's author in the `form_valid()` function so it can be saved into the model ([as described here](https://docs.djangoproject.com/en/4.0/topics/class-based-views/generic-editing/#models-and-request-user) — Django docs). In that same function we set the associated blog. A possible implementation is shown below (`pk` is a blog id passed in from the URL/URL configuration).
-
-      ```python
-          def form_valid(self, form):
-              """
-              Add author and associated blog to form data before setting it as valid (so it is saved to model)
-              """
-              #Add logged-in user as author of comment
-              form.instance.author = self.request.user
-              #Associate comment with blog based on passed id
-              form.instance.blog=get_object_or_404(Blog, pk = self.kwargs['pk'])
-              # Call super-class form validation behavior
-              return super(BlogCommentCreate, self).form_valid(form)
-      ```
-
-    - You will need to provide a success URL to redirect to after the form validates; this should be the original blog. To do this you will need to override `get_success_url()` and "reverse" the URL for the original blog. You can get the required blog ID using the `self.kwargs` attribute, as shown in the `form_valid()` method above.
+   - You will also need to pass the name of the blog post to the comment page in the context (implement `get_context_data()` as discussed below).
+   - The form should only display the comment "description" for user entry (date and associated blog post should not be editable). Since they won't be in the form itself, your code will need to set the comment's author in the `form_valid()` function so it can be saved into the model ([as described here](https://docs.djangoproject.com/en/4.0/topics/class-based-views/generic-editing/#models-and-request-user) — Django docs). In that same function we set the associated blog. A possible implementation is shown below (`pk` is a blog id passed in from the URL/URL configuration).
+
+     ```python
+         def form_valid(self, form):
+             """
+             Add author and associated blog to form data before setting it as valid (so it is saved to model)
+             """
+             #Add logged-in user as author of comment
+             form.instance.author = self.request.user
+             #Associate comment with blog based on passed id
+             form.instance.blog=get_object_or_404(Blog, pk = self.kwargs['pk'])
+             # Call super-class form validation behavior
+             return super(BlogCommentCreate, self).form_valid(form)
+     ```
+
+   - You will need to provide a success URL to redirect to after the form validates; this should be the original blog. To do this you will need to override `get_success_url()` and "reverse" the URL for the original blog. You can get the required blog ID using the `self.kwargs` attribute, as shown in the `form_valid()` method above.
 
 We briefly talked about passing a context to the template in a class-based view in the [Django Tutorial Part 6: Generic list and detail views](/en-US/docs/Learn/Server-side/Django/Generic_views#overriding_methods_in_class-based_views) topic. To do this you need to override `get_context_data()` (first getting the existing context, updating it with whatever additional variables you want to pass to the template, and then returning the updated context). For example, the code fragment below shows how you can add a blogger object to the context based on their `BlogAuthor` id.
 
diff --git a/files/en-us/learn/server-side/django/forms/index.md b/files/en-us/learn/server-side/django/forms/index.md
index ad0fe5402ea40fd..32e522d96020f43 100644
--- a/files/en-us/learn/server-side/django/forms/index.md
+++ b/files/en-us/learn/server-side/django/forms/index.md
@@ -92,17 +92,17 @@ Based on the diagram above, the main things that Django's form handling does are
 
 1. Display the default form the first time it is requested by the user.
 
-    - The form may contain blank fields if you're creating a new record, or it may be pre-populated with initial values (for example, if you are changing a record, or have useful default initial values).
-    - The form is referred to as _unbound_ at this point, because it isn't associated with any user-entered data (though it may have initial values).
+   - The form may contain blank fields if you're creating a new record, or it may be pre-populated with initial values (for example, if you are changing a record, or have useful default initial values).
+   - The form is referred to as _unbound_ at this point, because it isn't associated with any user-entered data (though it may have initial values).
 
 2. Receive data from a submit request and bind it to the form.
 
-    - Binding data to the form means that the user-entered data and any errors are available when we need to redisplay the form.
+   - Binding data to the form means that the user-entered data and any errors are available when we need to redisplay the form.
 
 3. Clean and validate the data.
 
-    - Cleaning the data performs sanitization of the input fields, such as removing invalid characters that might be used to send malicious content to the server, and converts them into consistent Python types.
-    - Validation checks that the values are appropriate for the field (for example, that they are in the right date range, aren't too short or too long, etc.)
+   - Cleaning the data performs sanitization of the input fields, such as removing invalid characters that might be used to send malicious content to the server, and converts them into consistent Python types.
+   - Validation checks that the values are appropriate for the field (for example, that they are in the right date range, aren't too short or too long, etc.)
 
 4. If any data is invalid, re-display the form, this time with any user populated values and error messages for the problem fields.
 5. If all data is valid, perform required actions (such as save the data, send an email, return the result of a search, upload a file, and so on).
@@ -602,7 +602,7 @@ Create the template file `locallibrary/catalog/templates/catalog/author_form.htm
 
 This is similar to our previous forms and renders the fields using a table. Note also how again we declare the `{% csrf_token %}` to ensure that our forms are resistant to CSRF attacks.
 
-The "delete" view expects to find a template named with the format _`model_name_confirm_delete.html` (again, you can change the suffix using `template_name_suffix` in your view). Create the template file `locallibrary/catalog/templates/catalog/author_confirm_delete.html` and copy the text below.
+The "delete" view expects to find a template named with the format \_`model_name_confirm_delete.html` (again, you can change the suffix using `template_name_suffix` in your view). Create the template file `locallibrary/catalog/templates/catalog/author_confirm_delete.html` and copy the text below.
 
 ```html
 {% extends "base_generic.html" %}
diff --git a/files/en-us/learn/server-side/django/home_page/index.md b/files/en-us/learn/server-side/django/home_page/index.md
index 52d776e2ea3c4a3..267015f91b56fef 100644
--- a/files/en-us/learn/server-side/django/home_page/index.md
+++ b/files/en-us/learn/server-side/django/home_page/index.md
@@ -382,7 +382,7 @@ Here are a couple of tasks to test your familiarity with model queries, views, a
 
 1. The LocalLibrary [base template](#the_locallibrary_base_template) includes a `title` block. Override this block in the [index template](#the_index_template) and create a new title for the page.
 
-    > **Note:** The section [Extending templates](#extending_templates) explains how to create blocks and extend a block in another template.
+   > **Note:** The section [Extending templates](#extending_templates) explains how to create blocks and extend a block in another template.
 
 2. Modify the [view](<#view_(function-based)>) to generate counts for _genres_ and _books_ that contain a particular word (case insensitive), and pass the results to the `context.` You accomplish this in a similar way to creating and using `num_books` and `num_instances_available`. Then update the [index template](#the_index_template) to include these variables.
 
diff --git a/files/en-us/learn/server-side/django/skeleton_website/index.md b/files/en-us/learn/server-side/django/skeleton_website/index.md
index b31cf961790573f..47be8b1fe00e95c 100644
--- a/files/en-us/learn/server-side/django/skeleton_website/index.md
+++ b/files/en-us/learn/server-side/django/skeleton_website/index.md
@@ -49,7 +49,7 @@ To get started:
 1. Use the `django-admin` tool to generate a project folder, the basic file templates, and **manage.py**, which serves as your project management script.
 2. Use **manage.py** to create one or more _applications_.
 
-    > **Note:** A website may consist of one or more sections. For example, main site, blog, wiki, downloads area, etc. Django encourages you to develop these components as separate _applications_, which could then be re-used in different projects if desired.
+   > **Note:** A website may consist of one or more sections. For example, main site, blog, wiki, downloads area, etc. Django encourages you to develop these components as separate _applications_, which could then be re-used in different projects if desired.
 
 3. Register the new applications to include them in the project.
 4. Hook up the **url/path** mapper for each application.
@@ -74,17 +74,17 @@ To create the project:
 1. Open a command shell (or a terminal window), and make sure you are in your [virtual environment](/en-US/docs/Learn/Server-side/Django/development_environment#using_a_virtual_environment).
 2. Navigate to where you want to store your Django apps (make it somewhere easy to find like inside your _Documents_ folder), and create a folder for your new website (in this case: _django_projects_). Then change into your newly-created directory:
 
-    ```bash
-    mkdir django_projects
-    cd django_projects
-    ```
+   ```bash
+   mkdir django_projects
+   cd django_projects
+   ```
 
 3. Create the new project using the `django-admin startproject` command as shown, and then change into the project folder:
 
-    ```bash
-    django-admin startproject locallibrary
-    cd locallibrary
-    ```
+   ```bash
+   django-admin startproject locallibrary
+   cd locallibrary
+   ```
 
 The `django-admin` tool creates a folder/file structure as follows:
 
diff --git a/files/en-us/learn/server-side/express_nodejs/deployment/index.md b/files/en-us/learn/server-side/express_nodejs/deployment/index.md
index 38f06c1c4fda164..ec58344996e9f2a 100644
--- a/files/en-us/learn/server-side/express_nodejs/deployment/index.md
+++ b/files/en-us/learn/server-side/express_nodejs/deployment/index.md
@@ -255,14 +255,14 @@ There are a lot of ways to work with git. One easy workflow is to first set up a
 2. Once you are logged in, click the **+** link in the top toolbar and select **New repository**.
 3. Fill in all the fields on this form. While these are not compulsory, they are strongly recommended.
 
-    - Enter a new repository name (e.g. _express-locallibrary-tutorial_), and description (e.g. "Local Library website written in Express (Node)".
-    - Choose **Node** in the _Add .gitignore_ selection list.
-    - Choose your preferred license in the _Add license_ selection list.
-    - Check **Initialize this repository with a README**.
+   - Enter a new repository name (e.g. _express-locallibrary-tutorial_), and description (e.g. "Local Library website written in Express (Node)".
+   - Choose **Node** in the _Add .gitignore_ selection list.
+   - Choose your preferred license in the _Add license_ selection list.
+   - Check **Initialize this repository with a README**.
 
-    > **Warning:** The default "Public" access will make _all_ source code — including your database username and password — visible to anyone on the internet! Make sure the source code reads credentials _only_ from environment variables and does not have any credentials hard-coded.
-    >
-    > Otherwise, select the "Private" option to allow only selected people to see the source code.
+   > **Warning:** The default "Public" access will make _all_ source code — including your database username and password — visible to anyone on the internet! Make sure the source code reads credentials _only_ from environment variables and does not have any credentials hard-coded.
+   >
+   > Otherwise, select the "Private" option to allow only selected people to see the source code.
 
 4. Press **Create repository**.
 5. Click the green "**Clone or download**" button on your new repo page.
@@ -273,50 +273,50 @@ Now that the repository ("repo") is created we are going to want to clone it on
 1. Install _git_ for your local computer (you can find versions for different platforms [here](https://git-scm.com/downloads)).
 2. Open a command prompt/terminal and clone your repository using the URL you copied above:
 
-    ```bash
-    git clone https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git
-    ```
+   ```bash
+   git clone https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git
+   ```
 
-    This will create the repository below the current point.
+   This will create the repository below the current point.
 
 3. Navigate into the new repo.
 
-    ```bash
-    cd express-locallibrary-tutorial
-    ```
+   ```bash
+   cd express-locallibrary-tutorial
+   ```
 
 The final step is to copy in your application and then add the files to your repo using git:
 
 1. Copy your Express application into this folder (excluding **/node_modules**, which contains dependency files that you should fetch from npm as needed).
 2. Open a command prompt/terminal and use the `add` command to add all files to git.
 
-    ```bash
-    git add -A
-    ```
+   ```bash
+   git add -A
+   ```
 
 3. Use the status command to check all files that you are about to add are correct (you want to include source files, not binaries, temporary files etc.). It should look a bit like the listing below.
 
-    ```bash
-    > git status
-    On branch main
-    Your branch is up-to-date with 'origin/main'.
-    Changes to be committed:
-      (use "git reset HEAD <file>..." to unstage)
+   ```bash
+   > git status
+   On branch main
+   Your branch is up-to-date with 'origin/main'.
+   Changes to be committed:
+     (use "git reset HEAD <file>..." to unstage)
 
-            new file:   ...
-    ```
+           new file:   ...
+   ```
 
 4. When you're satisfied, commit the files to your local repository:
 
-    ```bash
-    git commit -m "First version of application moved into GitHub"
-    ```
+   ```bash
+   git commit -m "First version of application moved into GitHub"
+   ```
 
 5. Then synchronize your local repository to the GitHub website, using the following:
 
-    ```bash
-    git push origin main
-    ```
+   ```bash
+   git push origin main
+   ```
 
 > **Warning:** In 2020 GitHub changed the default repo branch name to "main" (from "master"). If using an older/existing repository you might need to call `git push origin master` instead.
 
diff --git a/files/en-us/learn/server-side/express_nodejs/development_environment/index.md b/files/en-us/learn/server-side/express_nodejs/development_environment/index.md
index cc054e7d2210b36..886591c4887ab3d 100644
--- a/files/en-us/learn/server-side/express_nodejs/development_environment/index.md
+++ b/files/en-us/learn/server-side/express_nodejs/development_environment/index.md
@@ -80,8 +80,8 @@ Installing _Node_ and _npm_ on Windows and macOS is straightforward because you
 
 1. Download the required installer:
 
-    1. Go to <https://nodejs.org/en/>
-    2. Select the button to download the LTS build that is "Recommended for most users".
+   1. Go to <https://nodejs.org/en/>
+   2. Select the button to download the LTS build that is "Recommended for most users".
 
 2. Install Node by double-clicking on the downloaded file and following the installation prompts.
 
@@ -116,37 +116,37 @@ As a slightly more exciting test let's create a very basic "pure node" server th
 
 1. Copy the following text into a file named **hellonode.js**. This uses pure Node features (nothing from Express):
 
-    ```js
-    //Load HTTP module
-    const http = require("http");
-    const hostname = '127.0.0.1';
-    const port = 3000;
+   ```js
+   //Load HTTP module
+   const http = require("http");
+   const hostname = '127.0.0.1';
+   const port = 3000;
 
-    //Create HTTP server and listen on port 3000 for requests
-    const server = http.createServer((req, res) => {
+   //Create HTTP server and listen on port 3000 for requests
+   const server = http.createServer((req, res) => {
 
-      //Set the response HTTP header with HTTP status and Content type
-      res.statusCode = 200;
-      res.setHeader('Content-Type', 'text/plain');
-      res.end('Hello World\n');
-    });
+     //Set the response HTTP header with HTTP status and Content type
+     res.statusCode = 200;
+     res.setHeader('Content-Type', 'text/plain');
+     res.end('Hello World\n');
+   });
 
-    //listen for request on port 3000, and as a callback function have the port listened on logged
-    server.listen(port, hostname, () => {
-      console.log(`Server running at http://${hostname}:${port}/`);
-    });
-    ```
+   //listen for request on port 3000, and as a callback function have the port listened on logged
+   server.listen(port, hostname, () => {
+     console.log(`Server running at http://${hostname}:${port}/`);
+   });
+   ```
 
-    The code imports the "http" module and uses it to create a server (`createServer()`) that listens for HTTP requests on port 3000. The script then prints a message to the console about what browser URL you can use to test the server. The `createServer()` function takes as an argument a callback function that will be invoked when an HTTP request is received — this returns a response with an HTTP status code of 200 ("OK") and the plain text "Hello World".
+   The code imports the "http" module and uses it to create a server (`createServer()`) that listens for HTTP requests on port 3000. The script then prints a message to the console about what browser URL you can use to test the server. The `createServer()` function takes as an argument a callback function that will be invoked when an HTTP request is received — this returns a response with an HTTP status code of 200 ("OK") and the plain text "Hello World".
 
-    > **Note:** Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!
+   > **Note:** Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!
 
 2. Start the server by navigating into the same directory as your `hellonode.js` file in your command prompt, and calling `node` along with the script name, like so:
 
-    ```bash
-    >node hellonode.js
-    Server running at http://127.0.0.1:3000/
-    ```
+   ```bash
+   >node hellonode.js
+   Server running at http://127.0.0.1:3000/
+   ```
 
 3. Navigate to the URL `http://127.0.0.1:3000`. If everything is working, the browser should display the string "Hello World".
 
@@ -166,90 +166,90 @@ The following steps show how you can use npm to download a package, save it into
 
 1. First create a directory for your new application and navigate into it:
 
-    ```bash
-    mkdir myapp
-    cd myapp
-    ```
+   ```bash
+   mkdir myapp
+   cd myapp
+   ```
 
 2. Use the npm `init` command to create a **package.json** file for your application. This command prompts you for a number of things, including the name and version of your application and the name of the initial entry point file (by default this is **index.js**). For now, just accept the defaults:
 
-    ```bash
-    npm init
-    ```
-
-    If you display the **package.json** file (`cat package.json`), you will see the defaults that you accepted, ending with the license.
-
-    ```json
-    {
-      "name": "myapp",
-      "version": "1.0.0",
-      "description": "",
-      "main": "index.js",
-      "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-      },
-      "author": "",
-      "license": "ISC"
-    }
-    ```
+   ```bash
+   npm init
+   ```
+
+   If you display the **package.json** file (`cat package.json`), you will see the defaults that you accepted, ending with the license.
+
+   ```json
+   {
+     "name": "myapp",
+     "version": "1.0.0",
+     "description": "",
+     "main": "index.js",
+     "scripts": {
+       "test": "echo \"Error: no test specified\" && exit 1"
+     },
+     "author": "",
+     "license": "ISC"
+   }
+   ```
 
 3. Now install Express in the `myapp` directory and save it in the dependencies list of your **package.json** file:
 
    ```bash
     npm install express
-    ```
-
-    The dependencies section of your **package.json** will now appear at the end of the **package.json** file and will include _Express_.
-
-    ```json
-    {
-      "name": "myapp",
-      "version": "1.0.0",
-      "description": "",
-      "main": "index.js",
-      "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-      },
-      "author": "",
-      "license": "ISC",
-      "dependencies": {
-        "express": "^4.17.1"
-      }
-    }
-    ```
+   ```
+
+   The dependencies section of your **package.json** will now appear at the end of the **package.json** file and will include _Express_.
+
+   ```json
+   {
+     "name": "myapp",
+     "version": "1.0.0",
+     "description": "",
+     "main": "index.js",
+     "scripts": {
+       "test": "echo \"Error: no test specified\" && exit 1"
+     },
+     "author": "",
+     "license": "ISC",
+     "dependencies": {
+       "express": "^4.17.1"
+     }
+   }
+   ```
 
 4. To use the Express library you call the `require()` function in your **index.js** file to include it in your application.
-    Create this file now, in the root of the "myapp" application directory, and give it the following contents:
+   Create this file now, in the root of the "myapp" application directory, and give it the following contents:
 
-    ```js
-    const express = require('express')
-    const app = express();
-    const port = 3000;
+   ```js
+   const express = require('express')
+   const app = express();
+   const port = 3000;
 
-    app.get('/', (req, res) => {
-      res.send('Hello World!')
-    });
+   app.get('/', (req, res) => {
+     res.send('Hello World!')
+   });
 
-    app.listen(port, () => {
-      console.log(`Example app listening on port ${port}!`)
-    });
-    ```
+   app.listen(port, () => {
+     console.log(`Example app listening on port ${port}!`)
+   });
+   ```
 
-    This code shows a minimal "HelloWorld" Express web application.
-    This imports the "express" module using `require()` and uses it to create a server (`app`) that listens for HTTP requests on port 3000 and prints a message to the console explaining what browser URL you can use to test the server.
-    The `app.get()` function only responds to HTTP `GET` requests with the specified URL path ('/'), in this case by calling a function to send our _Hello World!_ message.
+   This code shows a minimal "HelloWorld" Express web application.
+   This imports the "express" module using `require()` and uses it to create a server (`app`) that listens for HTTP requests on port 3000 and prints a message to the console explaining what browser URL you can use to test the server.
+   The `app.get()` function only responds to HTTP `GET` requests with the specified URL path ('/'), in this case by calling a function to send our _Hello World!_ message.
 
-    > **Note:** The backticks in the `` `Example app listening on port ${port}!` `` let us interpolate the value of `$port` into the string.
+   > **Note:** The backticks in the `` `Example app listening on port ${port}!` `` let us interpolate the value of `$port` into the string.
 
 5. You can start the server by calling node with the script in your command prompt:
 
-    ```bash
-    >node index.js
-    Example app listening on port 3000
-    ```
+   ```bash
+   >node index.js
+   Example app listening on port 3000
+   ```
 
 6. Navigate to the URL `http://127.0.0.1:3000/`.
-    If everything is working, the browser should display the string "Hello World!".
+   If everything is working, the browser should display the string "Hello World!".
 
 ### Development dependencies
 
diff --git a/files/en-us/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md b/files/en-us/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
index 1166d9631437610..22e1423eafbd02f 100644
--- a/files/en-us/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
+++ b/files/en-us/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
@@ -74,7 +74,7 @@ The genre list controller function needs to get a list of all `Genre` instances,
 1. You will need to edit `genre_list()` in **/controllers/genreController.js**.
 2. The implementation is almost exactly the same as the `author_list()` controller.
 
-    - Sort the results by name, in ascending order.
+   - Sort the results by name, in ascending order.
 
 3. The template to be rendered should be named **genre_list.pug**.
 4. The template to be rendered should be passed the variables `title` ('Genre List') and `genre_list` (the list of genres returned from your `Genre.find()` callback).
diff --git a/files/en-us/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md b/files/en-us/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
index e3d93bfa467bd15..657a19e527ac75b 100644
--- a/files/en-us/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
+++ b/files/en-us/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
@@ -30,9 +30,9 @@ npm install luxon
 1. Open **./models/bookinstance.js**.
 2. At the top of the page, import _luxon_.
 
-    ```js
-    const { DateTime } = require("luxon");
-    ```
+   ```js
+   const { DateTime } = require("luxon");
+   ```
 
 Add the virtual property `due_back_formatted` just after the URL property.
 
diff --git a/files/en-us/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.md b/files/en-us/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.md
index 62acc4c964d86db..7b5c6a3c8113d44 100644
--- a/files/en-us/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.md
+++ b/files/en-us/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.md
@@ -47,7 +47,7 @@ The method [`async.parallel()`](https://caolan.github.io/async/v3/docs.html#para
 
 The first argument to `async.parallel()` is a collection of the asynchronous functions to run (an array, object or other iterable). Each function is passed a `callback(err, result)` which it must call on completion with an error `err` (which can be `null`) and an optional `results` value.
 
-The optional second argument to  `async.parallel()` is a callback that will be run when all the functions in the first argument have completed. The callback is invoked with an error argument and a result collection that contains the results of the individual asynchronous operations. The result collection is of the same type as the first argument (i.e. if you pass an array of asynchronous functions, the final callback will be invoked with an array of results). If any of the parallel functions reports an error the callback is invoked early (with the error value).
+The optional second argument to `async.parallel()` is a callback that will be run when all the functions in the first argument have completed. The callback is invoked with an error argument and a result collection that contains the results of the individual asynchronous operations. The result collection is of the same type as the first argument (i.e. if you pass an array of asynchronous functions, the final callback will be invoked with an array of results). If any of the parallel functions reports an error the callback is invoked early (with the error value).
 
 The example below shows how this works when we pass an object as the first argument. As you can see, the results are _returned_ in an object with the same property names as the original functions that were passed in.
 
diff --git a/files/en-us/learn/server-side/express_nodejs/forms/index.md b/files/en-us/learn/server-side/express_nodejs/forms/index.md
index b7c1b492d48292e..b6b2d627ca55bba 100644
--- a/files/en-us/learn/server-side/express_nodejs/forms/index.md
+++ b/files/en-us/learn/server-side/express_nodejs/forms/index.md
@@ -85,7 +85,7 @@ As shown in the diagram above, the main things that form handling code needs to
 
 1. Display the default form the first time it is requested by the user.
 
-    - The form may contain blank fields (e.g. if you're creating a new record), or it may be pre-populated with initial values (e.g. if you are changing a record, or have useful default initial values).
+   - The form may contain blank fields (e.g. if you're creating a new record), or it may be pre-populated with initial values (e.g. if you are changing a record, or have useful default initial values).
 
 2. Receive data submitted by the user, usually in an HTTP `POST` request.
 3. Validate and sanitize the data.
diff --git a/files/en-us/learn/server-side/express_nodejs/introduction/index.md b/files/en-us/learn/server-side/express_nodejs/introduction/index.md
index bb00e71dfff25ab..ef7db01c61d7776 100644
--- a/files/en-us/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/en-us/learn/server-side/express_nodejs/introduction/index.md
@@ -63,41 +63,41 @@ The following example creates a web server that listens for any kind of HTTP req
 1. Open Terminal (on Windows, open the command line utility)
 2. Create the folder where you want to save the program, for example, `test-node` and then enter it by entering the following command into your terminal:
 
-    ```bash
-    cd test-node
-    ```
+   ```bash
+   cd test-node
+   ```
 
 3. Using your favorite text editor, create a file called `hello.js` and paste the following code into it:
 
-    ```js
-    // Load HTTP module
-    const http = require("http");
+   ```js
+   // Load HTTP module
+   const http = require("http");
 
-    const hostname = "127.0.0.1";
-    const port = 8000;
+   const hostname = "127.0.0.1";
+   const port = 8000;
 
-    // Create HTTP server
-    const server = http.createServer(function(req, res) {
+   // Create HTTP server
+   const server = http.createServer(function(req, res) {
 
-       // Set the response HTTP header with HTTP status and Content type
-       res.writeHead(200, {'Content-Type': 'text/plain'});
+      // Set the response HTTP header with HTTP status and Content type
+      res.writeHead(200, {'Content-Type': 'text/plain'});
 
-       // Send the response body "Hello World"
-       res.end('Hello World\n');
-    });
+      // Send the response body "Hello World"
+      res.end('Hello World\n');
+   });
 
-    // Prints a log once the server starts listening
-    server.listen(port, hostname, function() {
-       console.log(`Server running at http://${hostname}:${port}/`);
-    })
-    ```
+   // Prints a log once the server starts listening
+   server.listen(port, hostname, function() {
+      console.log(`Server running at http://${hostname}:${port}/`);
+   })
+   ```
 
 4. Save the file in the folder you created above.
 5. Go back to the terminal and type the following command:
 
-    ```bash
-    node hello.js
-    ```
+   ```bash
+   node hello.js
+   ```
 
 Finally, navigate to `http://localhost:8000` in your web browser; you should see the text "**Hello World**" in the upper left of an otherwise empty web page.
 
diff --git a/files/en-us/learn/server-side/express_nodejs/mongoose/index.md b/files/en-us/learn/server-side/express_nodejs/mongoose/index.md
index b16f652c51e0203..54f0327605693d7 100644
--- a/files/en-us/learn/server-side/express_nodejs/mongoose/index.md
+++ b/files/en-us/learn/server-side/express_nodejs/mongoose/index.md
@@ -518,52 +518,52 @@ You will first need to [create an account](https://www.mongodb.com/cloud/atlas/r
 After logging in, you'll be taken to the [home](https://cloud.mongodb.com/v2) screen:
 
 1. Click the **Build a Database** button in the _Database Deployments_ section.
-    ![Create a database on MongoDB Atlas.](mongodb_atlas_-_createdatabase.jpg)
+   ![Create a database on MongoDB Atlas.](mongodb_atlas_-_createdatabase.jpg)
 
 2. This will open the _Deploy a cloud database_ screen. Click on the **Create** button under the _Shared_ deployment option.
-    ![Choose a deployment option when using MongoDB Atlas.](mongodb_atlas_-_deploy.jpg)
+   ![Choose a deployment option when using MongoDB Atlas.](mongodb_atlas_-_deploy.jpg)
 
 3. This will open the _Create a Shared Cluster_ screen.
-    ![Choose a cloud provider when using MongoDB Atlas.](mongodb_atlas_-_createsharedcluster.jpg)
+   ![Choose a cloud provider when using MongoDB Atlas.](mongodb_atlas_-_createsharedcluster.jpg)
 
-    - Select any provider from the _Cloud Provider & Region_ section. Different regions offer different providers.
-    - _Cluster Tier_ and _Additional Settings_ don't need to be changed. You can change the name of your Cluster under _Cluster Name_. We are naming it `Cluster0` for this tutorial.
-    - Click the **Create Cluster** button (creation of the cluster will take some minutes).
+   - Select any provider from the _Cloud Provider & Region_ section. Different regions offer different providers.
+   - _Cluster Tier_ and _Additional Settings_ don't need to be changed. You can change the name of your Cluster under _Cluster Name_. We are naming it `Cluster0` for this tutorial.
+   - Click the **Create Cluster** button (creation of the cluster will take some minutes).
 
 4. This will open the _Security Quickstart_ section.
-    ![Set up the Access Rules on the Security Quickstart screen on MongoDB Atlas.](mongodb_atlas_-_securityquickstart.jpg)
+   ![Set up the Access Rules on the Security Quickstart screen on MongoDB Atlas.](mongodb_atlas_-_securityquickstart.jpg)
 
-    - Enter a username and password. Remember to copy and store the credentials safely as we will need them later on. Click the **Create User** button.
+   - Enter a username and password. Remember to copy and store the credentials safely as we will need them later on. Click the **Create User** button.
 
-      > **Note:** Avoid using special characters in your MongoDB user password as mongoose may not parse the connection string properly.
+     > **Note:** Avoid using special characters in your MongoDB user password as mongoose may not parse the connection string properly.
 
-    - Enter `0.0.0.0/0` in the IP Address field. This tells MongoDB that we want to allow access from anywhere. Click the **Add Entry** button.
+   - Enter `0.0.0.0/0` in the IP Address field. This tells MongoDB that we want to allow access from anywhere. Click the **Add Entry** button.
 
-      > **Note:** It is a best practice to limit the IP addresses that can connect to your database and other resources. Here we allow a connection from anywhere because we don't know where the request will come from after deployment.
+     > **Note:** It is a best practice to limit the IP addresses that can connect to your database and other resources. Here we allow a connection from anywhere because we don't know where the request will come from after deployment.
 
-    - Click the **Finish and Close** button.
+   - Click the **Finish and Close** button.
 
 5. This will open the following screen. Click on the **Go to Databases** button.
-    ![Go to Databases after setting up Access Rules on MongoDB Atlas](mongodb_atlas_-_accessrules.jpg)
+   ![Go to Databases after setting up Access Rules on MongoDB Atlas](mongodb_atlas_-_accessrules.jpg)
 
 6. You will return to the _Database Deployments_ screen. Click the **Browse Collections** button.
-    ![Setup a collection on MongoDB Atlas.](mongodb_atlas_-_createcollection.jpg)
+   ![Setup a collection on MongoDB Atlas.](mongodb_atlas_-_createcollection.jpg)
 
 7. This will open the _Collections_ section. Click the **Add My Own Data** button.
-    ![Create a database on MongoDB Atlas.](mongodb_atlas_-_adddata.jpg)
+   ![Create a database on MongoDB Atlas.](mongodb_atlas_-_adddata.jpg)
 
 8. This will open the _Create Database_ screen.
 
    ![Details during database creation on MongoDB Atlas.](mongodb_atlas_-_databasedetails.jpg)
 
-    - Enter the name for the new database as `local_library`.
-    - Enter the name of the collection as `Collection0`.
-    - Click the **Create** button to create the database.
+   - Enter the name for the new database as `local_library`.
+   - Enter the name of the collection as `Collection0`.
+   - Click the **Create** button to create the database.
 
 9. You will return to the _Collections_ screen with your database created.
-    ![Database creation confirmation on MongoDB Atlas.](mongodb_atlas_-_databasecreated.jpg)
+   ![Database creation confirmation on MongoDB Atlas.](mongodb_atlas_-_databasecreated.jpg)
 
-    - Click the _Overview_ tab to return to the cluster overview.
+   - Click the _Overview_ tab to return to the cluster overview.
 
 10. From the Cluster0 _Overview_ screen click the **Connect** button.
     ![Configure connection after setting up a cluster in MongoDB Atlas.](mongodb_atlas_-_connectbutton.jpg)
@@ -765,21 +765,21 @@ In order to test the models (and to create some example books and other items th
 
 1. Download (or otherwise create) the file [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) inside your _express-locallibrary-tutorial_ directory (in the same level as `package.json`).
 
-    > **Note:** You don't need to know how [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) works; it just adds sample data into the database.
+   > **Note:** You don't need to know how [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) works; it just adds sample data into the database.
 
 2. Enter the following commands in the project root to install the _async_ module that is required by the script (we'll discuss this in later tutorials).
 
-    ```bash
-    npm install async
-    ```
+   ```bash
+   npm install async
+   ```
 
 3. Run the script using node in your command prompt, passing in the URL of your _MongoDB_ database (the same one you replaced the _insert_your_database_url_here_ placeholder with, inside `app.js` earlier):
 
-    ```bash
-    node populatedb <your mongodb url>
-    ```
+   ```bash
+   node populatedb <your mongodb url>
+   ```
 
-    > **Note:** On some operating systems/terminals, you may need to wrap the database URL inside double (") or single (') quotation marks.
+   > **Note:** On some operating systems/terminals, you may need to wrap the database URL inside double (") or single (') quotation marks.
 
 4. The script should run through to completion, displaying items as it creates them in the terminal.
 
diff --git a/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md b/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md
index 1810ff1454b0232..adc063f250fc58a 100644
--- a/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md
+++ b/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md
@@ -182,32 +182,32 @@ At this point, we have a complete skeleton project. The website doesn't actually
 
 1. First, install the dependencies (the `install` command will fetch all the dependency packages listed in the project's **package.json** file).
 
-    ```bash
-    cd express-locallibrary-tutorial
-    npm install
-    ```
+   ```bash
+   cd express-locallibrary-tutorial
+   npm install
+   ```
 
 2. Then run the application.
 
-    - On the Windows CMD prompt, use this command:
+   - On the Windows CMD prompt, use this command:
 
-      ```bash
-      SET DEBUG=express-locallibrary-tutorial:* & npm start
-      ```
+     ```bash
+     SET DEBUG=express-locallibrary-tutorial:* & npm start
+     ```
 
-    - On Windows Powershell, use this command:
+   - On Windows Powershell, use this command:
 
-      ```bash
-      $ENV:DEBUG = "express-locallibrary-tutorial:*"; npm start
-      ```
+     ```bash
+     $ENV:DEBUG = "express-locallibrary-tutorial:*"; npm start
+     ```
 
-      > **Note:** Powershell commands are not covered further in this tutorial (The provided "Windows" commands assume you're using the Windows CMD prompt.)
+     > **Note:** Powershell commands are not covered further in this tutorial (The provided "Windows" commands assume you're using the Windows CMD prompt.)
 
-    - On macOS or Linux, use this command:
+   - On macOS or Linux, use this command:
 
-      ```bash
-      DEBUG=express-locallibrary-tutorial:* npm start
-      ```
+     ```bash
+     DEBUG=express-locallibrary-tutorial:* npm start
+     ```
 
 3. Then load `http://localhost:3000/` in your browser to access the app.
 
diff --git a/files/en-us/learn/server-side/first_steps/client-server_overview/index.md b/files/en-us/learn/server-side/first_steps/client-server_overview/index.md
index 8aaf35fa283ad91..79df491b89c8d16 100644
--- a/files/en-us/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/en-us/learn/server-side/first_steps/client-server_overview/index.md
@@ -296,7 +296,7 @@ def junior(request):
     return render(request, 'best/index.html', context)
 ```
 
-After the `junior()` function gets the list of junior teams, it calls the `render()` function, passing the original `HttpRequest`, an HTML template, and a "context" object defining the information to be included in the template. The  `render()` function is a convenience function that generates HTML using a context and an HTML template, and returns it in an `HttpResponse` object.
+After the `junior()` function gets the list of junior teams, it calls the `render()` function, passing the original `HttpRequest`, an HTML template, and a "context" object defining the information to be included in the template. The `render()` function is a convenience function that generates HTML using a context and an HTML template, and returns it in an `HttpResponse` object.
 
 Obviously web frameworks can help you with a lot of other tasks. We discuss a lot more benefits and some popular web framework choices in the next article.
 
diff --git a/files/en-us/learn/server-side/first_steps/web_frameworks/index.md b/files/en-us/learn/server-side/first_steps/web_frameworks/index.md
index dedae6a8da6af91..9fcfc08bce26a14 100644
--- a/files/en-us/learn/server-side/first_steps/web_frameworks/index.md
+++ b/files/en-us/learn/server-side/first_steps/web_frameworks/index.md
@@ -204,15 +204,15 @@ If you're an absolute beginner at programming then you'll probably choose your f
 >
 > 1. Navigate to the main sites (linked above)
 >
->     - Click on the Documentation menu links (named things like "Documentation, Guide, API Reference, Getting Started", etc.).
->     - Can you see topics showing how to set up URL routing, templates, and databases/models?
->     - Are the documents clear?
+>    - Click on the Documentation menu links (named things like "Documentation, Guide, API Reference, Getting Started", etc.).
+>    - Can you see topics showing how to set up URL routing, templates, and databases/models?
+>    - Are the documents clear?
 >
 > 2. Navigate to mailing lists for each site (accessible from Community links).
 >
->     - How many questions have been posted in the last few days
->     - How many have responses?
->     - Do they have an active community?
+>    - How many questions have been posted in the last few days
+>    - How many have responses?
+>    - Do they have an active community?
 
 ## A few good web frameworks?
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md
index 529ef2a9bce39fa..414bbf7da8cdaf4 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md
@@ -162,10 +162,10 @@ The application source files that this tutorial focuses on are in `src/app`.
 Key files that the CLI generates automatically include the following:
 
 1. `app.module.ts`: Specifies the files that the application uses.
-    This file acts as a central hub for the other files in your application.
+   This file acts as a central hub for the other files in your application.
 2. `app.component.ts`: Also known as the class, contains the logic for the application's main page.
 3. `app.component.html`: Contains the HTML for `AppComponent`. The contents of this file are also known as the template.
-    The template determines the view or what you see in the browser.
+   The template determines the view or what you see in the browser.
 4. `app.component.css`: Contains the styles for `AppComponent`. You use this file when you want to define styles that only apply to a specific component, as opposed to your application overall.
 
 A component in Angular is made up of three main parts—the template, styles, and the class.
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md
index bc52b38082ec92f..cac5f553e5f22a3 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md
@@ -60,68 +60,68 @@ To get the footer working, we need to implement the following three areas of fun
 
 1. Because we need access to our service from the footer component, we need to generate a class for the footer. Enter the following terminal command to do so:
 
-    ```bash
-    ember generate component-class footer
-    ```
+   ```bash
+   ember generate component-class footer
+   ```
 
 2. Next, go and find the newly-created `todomvc/app/components/footer.js` file and update it to the following:
 
-    ```js
-    import Component from '@glimmer/component';
-    import { inject as service } from '@ember/service';
+   ```js
+   import Component from '@glimmer/component';
+   import { inject as service } from '@ember/service';
 
-    export default class FooterComponent extends Component {
-      @service('todo-data') todos;
-    }
-    ```
+   export default class FooterComponent extends Component {
+     @service('todo-data') todos;
+   }
+   ```
 
 3. Now we need to go back to our `todo-data.js` file and add some functionality that will allow us to return the number of incomplete todos (useful for showing how many are left), and clear the completed todos out of the list (which is what the "Clear completed" functionality needs).
 
-    In `todo-data.js`, add the following getter underneath the existing `all()` getter to define what the incomplete todos actually are:
+   In `todo-data.js`, add the following getter underneath the existing `all()` getter to define what the incomplete todos actually are:
 
-    ```js
-    get incomplete() {
-      return this.todos.filterBy('isCompleted', false);
-    }
-    ```
+   ```js
+   get incomplete() {
+     return this.todos.filterBy('isCompleted', false);
+   }
+   ```
 
-    Using Ember's [`ArrayProxy.filterBy()`](https://api.emberjs.com/ember/4.2/classes/ArrayProxy/methods/filterBy?anchor=filterBy) method, we're able to easily filter Objects in our array based on simple equals conditions. Here we're asking for all the todo items where the `isCompleted` property is equal to `false`, and because `isCompleted` is `@tracked` in our `Todo` object, this getter will re-compute when the value changes on an Object in the array.
+   Using Ember's [`ArrayProxy.filterBy()`](https://api.emberjs.com/ember/4.2/classes/ArrayProxy/methods/filterBy?anchor=filterBy) method, we're able to easily filter Objects in our array based on simple equals conditions. Here we're asking for all the todo items where the `isCompleted` property is equal to `false`, and because `isCompleted` is `@tracked` in our `Todo` object, this getter will re-compute when the value changes on an Object in the array.
 
 4. Next, add the following action underneath the existing `add(text)` action:
 
-    ```js
-    @action
-    clearCompleted() {
-      this.todos = this.incomplete;
-    }
-    ```
+   ```js
+   @action
+   clearCompleted() {
+     this.todos = this.incomplete;
+   }
+   ```
 
-    This is rather nice for clearing the todos — we just need to set the `todos` array to equal the list of incomplete todos.
+   This is rather nice for clearing the todos — we just need to set the `todos` array to equal the list of incomplete todos.
 
 5. Finally, we need to make use of this new functionality in our `footer.hbs` template. Go to this file now.
 6. First of all, replace this line:
 
-    ```html
-    <strong>0</strong> todos left
-    ```
+   ```html
+   <strong>0</strong> todos left
+   ```
 
-    With this, which populates the incomplete number with the length of the `incomplete` array:
+   With this, which populates the incomplete number with the length of the `incomplete` array:
 
-    ```html
-    <strong>\{{this.todos.incomplete.length}}</strong> todos left
-    ```
+   ```html
+   <strong>\{{this.todos.incomplete.length}}</strong> todos left
+   ```
 
 7. Next, replace this:
 
-    ```html
-    <button type="button" class="clear-completed">
-    ```
+   ```html
+   <button type="button" class="clear-completed">
+   ```
 
-    With this:
+   With this:
 
-    ```html
-    <button type="button" class="clear-completed" \{{on 'click' this.todos.clearCompleted}}>
-    ```
+   ```html
+   <button type="button" class="clear-completed" \{{on 'click' this.todos.clearCompleted}}>
+   ```
 
 So now when the button is clicked, the `clearCompleted()` action we added earlier is run.
 However, if you try to click the "Clear Completed" button now, it won't appear to do anything, because there is currently no way to "complete" a todo. We need to wire up the `todo.hbs` template to the service, so that checking the relevant checkbox changes the state of each todo. We'll do that next.
@@ -194,29 +194,29 @@ As with the other components, we need a class to access the service.
 
 1. Run the following command in your terminal:
 
-    ```bash
-    ember generate component-class todo
-    ```
+   ```bash
+   ember generate component-class todo
+   ```
 
 2. Now go to the newly-created `todomvc/app/components/todo.js` file and update the contents to look like so, to give the todo component access to the service:
 
-    ```js
-    import Component from '@glimmer/component';
-    import { inject as service } from '@ember/service';
+   ```js
+   import Component from '@glimmer/component';
+   import { inject as service } from '@ember/service';
 
-    export default class TodoComponent extends Component {
-      @service('todo-data') todos;
-    }
-    ```
+   export default class TodoComponent extends Component {
+     @service('todo-data') todos;
+   }
+   ```
 
 3. Next, go back again to our `todo-data.js` service file and add the following action just below the previous ones, which will allow us to toggle a completion state for each todo:
 
-    ```js
-    @action
-    toggleCompletion(todo) {
-      todo.isCompleted = !todo.isCompleted;
-    }
-    ```
+   ```js
+   @action
+   toggleCompletion(todo) {
+     todo.isCompleted = !todo.isCompleted;
+   }
+   ```
 
 ### Updating the template to show completed state
 
@@ -224,39 +224,39 @@ Finally, we will edit the `todo.hbs` template such that the checkbox's value is
 
 1. In `todo.hbs`, first find the following line:
 
-    ```html
-    <li>
-    ```
+   ```html
+   <li>
+   ```
 
-    And replace it with this — you'll notice that here we're using some more conditional content to add the class value if appropriate:
+   And replace it with this — you'll notice that here we're using some more conditional content to add the class value if appropriate:
 
-    ```html
-    <li class="\{{ if @todo.isCompleted 'completed' }}">
-    ```
+   ```html
+   <li class="\{{ if @todo.isCompleted 'completed' }}">
+   ```
 
 2. Next, find the following line:
 
-    ```html
-    <input
-      aria-label="Toggle the completion of this todo"
-      class="toggle"
-      type="checkbox"
-    >
-    ```
-
-    And replace it with this:
-
-    ```html
-    <input
-      class="toggle"
-      type="checkbox"
-      aria-label="Toggle the completion of this todo"
-      checked=\{{ @todo.isCompleted }}
-      \{{ on 'change' (fn this.todos.toggleCompletion @todo) }}
-    >
-    ```
-
-    > **Note:** The above snippet uses a new Ember-specific keyword — `fn`. `fn` allows for [partial application](https://en.wikipedia.org/wiki/Partial_application), which is similar to [`bind`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind), but it never changes the invocation context; this is equivalent to using `bind` with a `null` first argument.
+   ```html
+   <input
+     aria-label="Toggle the completion of this todo"
+     class="toggle"
+     type="checkbox"
+   >
+   ```
+
+   And replace it with this:
+
+   ```html
+   <input
+     class="toggle"
+     type="checkbox"
+     aria-label="Toggle the completion of this todo"
+     checked=\{{ @todo.isCompleted }}
+     \{{ on 'change' (fn this.todos.toggleCompletion @todo) }}
+   >
+   ```
+
+   > **Note:** The above snippet uses a new Ember-specific keyword — `fn`. `fn` allows for [partial application](https://en.wikipedia.org/wiki/Partial_application), which is similar to [`bind`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind), but it never changes the invocation context; this is equivalent to using `bind` with a `null` first argument.
 
 Try restarting the dev server and going to `localhost:4200` again, and you'll now see that we have a fully-operational "todos left" counter and Clear button:
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md
index 8ccd02bfa8d9174..d62d12a8cccf33e 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started/index.md
@@ -131,23 +131,23 @@ Ember uses a command-line interface (CLI) tool for building and scaffolding part
 1. You'll need node and npm installed before you can install ember-cli. [Go here to find out how to install node and npm](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#adding_powerups), if you haven't already got them.
 2. Now type the following into your terminal to install ember-cli:
 
-    ```
-    npm install -g ember-cli
-    ```
+   ```
+   npm install -g ember-cli
+   ```
 
-    This tool provides the `ember` program in your terminal, which is used to create, build, develop, test, and scaffold your application (run `ember --help` for a full list of commands and their options).
+   This tool provides the `ember` program in your terminal, which is used to create, build, develop, test, and scaffold your application (run `ember --help` for a full list of commands and their options).
 
 3. To create a brand new application, type the following in your terminal. This creates a new directory inside the current directory you are in called todomvc, containing the scaffolding for a new Ember app. Make sure you navigate to somewhere appropriate in the terminal before you run it. (Good suggestions are your "desktop" or "documents" directories, so that it is easy to find):
 
-    ```bash
-    ember new todomvc
-    ```
+   ```bash
+   ember new todomvc
+   ```
 
-    Or, on Windows:
+   Or, on Windows:
 
-    ```bash
-    npx ember-cli new todomvc
-    ```
+   ```bash
+   npx ember-cli new todomvc
+   ```
 
 This generates a production-ready application development environment that includes the following features by default:
 
@@ -169,42 +169,42 @@ Installing shared assets, as we're about to do, isn't normally a required step f
 1. First, enter into your `todomvc` directory in the terminal, for example using `cd todomvc` in macOS/Linux.
 2. Now run the following command to place the common todomvc CSS inside your app:
 
-    ```bash
-    npm install --save-dev todomvc-app-css todomvc-common
-    ```
+   ```bash
+   npm install --save-dev todomvc-app-css todomvc-common
+   ```
 
 3. Next, find the [ember-cli-build.js](https://github.com/ember-cli/ember-cli/blob/master/blueprints/app/files/ember-cli-build.js) file inside the todomvc directory (it's right there inside the root) and open it in your chosen code editor. ember-cli-build.js is responsible for configuring details about how your project is built — including bundling all your files together, asset minification, and creating sourcemaps — with reasonable defaults, so you don't typically need to worry about this file.
 
-    We will however add lines to the ember-cli-build.js file to import our shared CSS files, so that they become part of our build without having to explicitly [`@import`](/en-US/docs/Web/CSS/@import) them into the `app.css` file (this would require URL rewrites at build time and therefore be less efficient and more complicated to set up).
+   We will however add lines to the ember-cli-build.js file to import our shared CSS files, so that they become part of our build without having to explicitly [`@import`](/en-US/docs/Web/CSS/@import) them into the `app.css` file (this would require URL rewrites at build time and therefore be less efficient and more complicated to set up).
 
 4. In `ember-cli-build.js`, find the following code:
 
-    ```js
-    let app = new EmberApp(defaults, {
-        // Add options here
-      });
-    ```
+   ```js
+   let app = new EmberApp(defaults, {
+       // Add options here
+     });
+   ```
 
 5. Add the following lines underneath it before saving the file:
 
-    ```js
-      app.import('node_modules/todomvc-common/base.css');
-      app.import('node_modules/todomvc-app-css/index.css');
-    ```
+   ```js
+     app.import('node_modules/todomvc-common/base.css');
+     app.import('node_modules/todomvc-app-css/index.css');
+   ```
 
-    For more information on what `ember-cli-build.js` does, and for other ways in which you can customize your build / pipeline, the Ember Guides have a page on [Addons and Dependencies](https://guides.emberjs.com/release/addons-and-dependencies/).
+   For more information on what `ember-cli-build.js` does, and for other ways in which you can customize your build / pipeline, the Ember Guides have a page on [Addons and Dependencies](https://guides.emberjs.com/release/addons-and-dependencies/).
 
 6. Finally, find `app.css`, located at `app/styles/app.css`, and paste in the following:
 
-    ```css
-    :focus,
-    .view label:focus,
-    .todo-list li .toggle:focus + label,
-    .toggle-all:focus + label {
-      /* !important needed because todomvc styles deliberately disable the outline */
-      outline: #d86f95 solid !important;
-    }
-    ```
+   ```css
+   :focus,
+   .view label:focus,
+   .todo-list li .toggle:focus + label,
+   .toggle-all:focus + label {
+     /* !important needed because todomvc styles deliberately disable the outline */
+     outline: #d86f95 solid !important;
+   }
+   ```
 
 This CSS overrides some of the styles provided by the `todomvc-app-css` npm package, therefore allowing keyboard focus to be visible. This goes some way towards fixing one of the major accessibility disadvantages of the default TodoMVC app.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md
index a439ca17c577561..3d4151f9fd6338e 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization/index.md
@@ -199,20 +199,20 @@ To create a component, we use the `ember generate component` command, followed b
 1. Stop the server running by going to the terminal and pressing <kbd>Ctrl</kbd> + <kbd>C</kbd>.
 2. Enter the following command into your terminal:
 
-    ```bash
-    ember generate component header
-    ```
+   ```bash
+   ember generate component header
+   ```
 
-    These will generate some new files, as shown in the resulting terminal output:
+   These will generate some new files, as shown in the resulting terminal output:
 
-    ```
-    installing component
-      create app/components/header.hbs
-      skip app/components/header.js
-      tip to add a class, run `ember generate component-class header`
-    installing component-test
-      create tests/integration/components/header-test.js
-    ```
+   ```
+   installing component
+     create app/components/header.hbs
+     skip app/components/header.js
+     tip to add a class, run `ember generate component-class header`
+   installing component-test
+     create tests/integration/components/header-test.js
+   ```
 
 `header.hbs` is the template file where we'll include the HTML structure for just that component. Later on we'll add the required dynamic functionality such as data bindings, responding to user interaction, etc.
 
@@ -236,87 +236,87 @@ Now that we have all of our component structure files, we can cut and paste the
 
 1. The `header.hbs` file should be updated to contain the following:
 
-    ```html
-    <input
-      class="new-todo"
-      aria-label="What needs to be done?"
-      placeholder="What needs to be done?"
-      autofocus
-    >
-    ```
+   ```html
+   <input
+     class="new-todo"
+     aria-label="What needs to be done?"
+     placeholder="What needs to be done?"
+     autofocus
+   >
+   ```
 
 2. `todo-list.hbs` should be updated to contain this chunk of code:
 
-    ```html
-    <section class="main">
-      <input id="mark-all-complete" class="toggle-all" type="checkbox">
-      <label for="mark-all-complete">Mark all as complete</label>
+   ```html
+   <section class="main">
+     <input id="mark-all-complete" class="toggle-all" type="checkbox">
+     <label for="mark-all-complete">Mark all as complete</label>
 
-      <ul class="todo-list">
-        <Todo />
-        <Todo />
-      </ul>
-    </section>
-    ```
+     <ul class="todo-list">
+       <Todo />
+       <Todo />
+     </ul>
+   </section>
+   ```
 
-    > **Note:** The only non-HTML in this new `todo-list.hbs` is the `<Todo />` component invocation. In Ember, a component invocation is similar to declaring an HTML element, but the first letter starts with a capital letter, and the names are written in upper camel case, as you'll see with `<TodoList />` later on. The contents of the `todo.hbs` file below will replace `<Todo />` in the rendered page as our application loads.
+   > **Note:** The only non-HTML in this new `todo-list.hbs` is the `<Todo />` component invocation. In Ember, a component invocation is similar to declaring an HTML element, but the first letter starts with a capital letter, and the names are written in upper camel case, as you'll see with `<TodoList />` later on. The contents of the `todo.hbs` file below will replace `<Todo />` in the rendered page as our application loads.
 
 3. Add the following into the `todo.hbs` file:
 
-    ```html
-    <li>
-      <div class="view">
-        <input
-          aria-label="Toggle the completion of this todo"
-          class="toggle"
-          type="checkbox"
-        >
-        <label>Buy Movie Tickets</label>
-        <button
-          type="button"
-          class="destroy"
-          title="Remove this todo"
-        ></button>
-      </div>
-
-      <input autofocus class="edit" value="Todo Text">
-    </li>
-    ```
+   ```html
+   <li>
+     <div class="view">
+       <input
+         aria-label="Toggle the completion of this todo"
+         class="toggle"
+         type="checkbox"
+       >
+       <label>Buy Movie Tickets</label>
+       <button
+         type="button"
+         class="destroy"
+         title="Remove this todo"
+       ></button>
+     </div>
+
+     <input autofocus class="edit" value="Todo Text">
+   </li>
+   ```
 
 4. `footer.hbs` should be updated to contain the following:
 
-    ```html
-    <footer class="footer">
-      <span class="todo-count">
-        <strong>0</strong> todos left
-      </span>
-
-      <ul class="filters">
-        <li>
-          <a href="#">All</a>
-          <a href="#">Active</a>
-          <a href="#">Completed</a>
-        </li>
-      </ul>
-
-      <button type="button" class="clear-completed">
-        Clear Completed
-      </button>
-    </footer>
-    ```
+   ```html
+   <footer class="footer">
+     <span class="todo-count">
+       <strong>0</strong> todos left
+     </span>
+
+     <ul class="filters">
+       <li>
+         <a href="#">All</a>
+         <a href="#">Active</a>
+         <a href="#">Completed</a>
+       </li>
+     </ul>
+
+     <button type="button" class="clear-completed">
+       Clear Completed
+     </button>
+   </footer>
+   ```
 
 5. Finally, the contents of `application.hbs` should be updated so that they call the appropriate components, like so:
 
-    ```html
-    <section class="todoapp">
-      <h1>todos</h1>
+   ```html
+   <section class="todoapp">
+     <h1>todos</h1>
 
-      <Header />
-      <TodoList />
-      <Footer />
+     <Header />
+     <TodoList />
+     <Footer />
 
-    </section>
-    ```
+   </section>
+   ```
 
 6. With these changes made, run `npm start` in your terminal again, then head over to `http://localhost:4200` to ensure that the todo app still looks as it did before the refactor.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
index 110e3b8d1c04bfd..4968659c7885d6d 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
@@ -183,7 +183,7 @@ _Now_ your browser should show three unique tasks. Another problem remains thoug
 
 ### Is it `completed`?
 
-In our original static list, only `Eat` was checked. Once again, we want to reuse _most_ of the UI that makes up a `<Todo />`  component, but change one thing. That's a good job for another prop!  Give each `<Todo />` call in `App.js` a new prop of `completed`. The first (`Eat`) should have a value of `true`; the rest should be `false`:
+In our original static list, only `Eat` was checked. Once again, we want to reuse _most_ of the UI that makes up a `<Todo />` component, but change one thing. That's a good job for another prop! Give each `<Todo />` call in `App.js` a new prop of `completed`. The first (`Eat`) should have a value of `true`; the rest should be `false`:
 
 ```js
 <Todo name="Eat" completed={true} />
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md
index 80970b4d330834e..bbcfab9a1889e7c 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md
@@ -137,7 +137,7 @@ Clicking on the "Add" button in your browser will prove that the `addTask()` cal
 
 So far, we've used props to pass data through our components and this has served us just fine. Now that we're dealing with user input and data updates, however, we need something more.
 
-For one thing, props come from the parent of a component. Our `<Form />` will not be inheriting a new name for our task; our `<input />`  element lives directly inside of `<Form />`, so `<Form/>` will be directly responsible for creating that new name. We can't ask `<Form />` to spontaneously create its own props, but we _can_ ask it to track some of its own data for us. Data such as this, which a component itself owns, is called **state**. State is another powerful tool for React because components not only _own_ state, but can _update_ it later. It's not possible to update the props a component receives; only to read them.
+For one thing, props come from the parent of a component. Our `<Form />` will not be inheriting a new name for our task; our `<input />` element lives directly inside of `<Form />`, so `<Form/>` will be directly responsible for creating that new name. We can't ask `<Form />` to spontaneously create its own props, but we _can_ ask it to track some of its own data for us. Data such as this, which a component itself owns, is called **state**. State is another powerful tool for React because components not only _own_ state, but can _update_ it later. It's not possible to update the props a component receives; only to read them.
 
 React provides a variety of special functions that allow us to provide new capabilities to components, like state. These functions are called **hooks**, and the `useState` hook, as its name implies, is precisely the one we need in order to give our component some state.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
index be2680deec70906..85edb5ea4db50cd 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
@@ -238,7 +238,7 @@ Further down, you can find our [`<ul>`](/en-US/docs/Web/HTML/Element/ul) element
 >
 ```
 
-The `role` attribute helps assistive technology explain what kind of element a tag represents. A `<ul>` is treated like a list by default, but the styles we're about to add will break that functionality. This role will restore the "list" meaning to the `<ul>`  element. If you want to learn more about why this is necessary, you can check out [Scott O'Hara's article, "Fixing Lists"](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html).
+The `role` attribute helps assistive technology explain what kind of element a tag represents. A `<ul>` is treated like a list by default, but the styles we're about to add will break that functionality. This role will restore the "list" meaning to the `<ul>` element. If you want to learn more about why this is necessary, you can check out [Scott O'Hara's article, "Fixing Lists"](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html).
 
 The `aria-labelledby` attribute tells assistive technologies that we're treating our list heading as the label that describes the purpose of the list beneath it. Making this association gives the list a more informative context, which could help screen reader users better understand the purpose of it.
 
@@ -251,7 +251,7 @@ Finally, the labels and inputs in our list items have some attributes unique to
 </label>
 ```
 
-The `defaultChecked` attribute in the `<input/ >`  tag tells React to check this checkbox initially. If we were to use `checked`, as we would in regular HTML, React would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid. Don't worry too much about this for now — we will cover this later on when we get to using events.
+The `defaultChecked` attribute in the `<input/ >` tag tells React to check this checkbox initially. If we were to use `checked`, as we would in regular HTML, React would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid. Don't worry too much about this for now — we will cover this later on when we get to using events.
 
 The `htmlFor` attribute corresponds to the `for` attribute used in HTML. We cannot use `for` as an attribute in JSX because `for` is a reserved word, so React uses `htmlFor` instead.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
index 99dc055067c0c0b..013b3cb50800a8f 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
@@ -118,41 +118,41 @@ We'll begin by creating our `FilterButton.svelte`.
 1. First of all, create a new file, `components/FilterButton.svelte`.
 2. Inside this file we will declare a `filter` prop, and then copy the relevant markup over to it from `Todos.svelte`. Add the following content into the file:
 
-    ```html
-    <script>
-      export let filter = 'all'
-    </script>
-
-    <div class="filters btn-group stack-exception">
-      <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={() => filter = 'all'} >
-        <span class="visually-hidden">Show</span>
-        <span>All</span>
-        <span class="visually-hidden">tasks</span>
-      </button>
-      <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={() => filter = 'active'} >
-        <span class="visually-hidden">Show</span>
-        <span>Active</span>
-        <span class="visually-hidden">tasks</span>
-      </button>
-      <button class="btn toggle-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={() => filter = 'completed'} >
-        <span class="visually-hidden">Show</span>
-        <span>Completed</span>
-        <span class="visually-hidden">tasks</span>
-      </button>
-    </div>
-    ```
+   ```html
+   <script>
+     export let filter = 'all'
+   </script>
+
+   <div class="filters btn-group stack-exception">
+     <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={() => filter = 'all'} >
+       <span class="visually-hidden">Show</span>
+       <span>All</span>
+       <span class="visually-hidden">tasks</span>
+     </button>
+     <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={() => filter = 'active'} >
+       <span class="visually-hidden">Show</span>
+       <span>Active</span>
+       <span class="visually-hidden">tasks</span>
+     </button>
+     <button class="btn toggle-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={() => filter = 'completed'} >
+       <span class="visually-hidden">Show</span>
+       <span>Completed</span>
+       <span class="visually-hidden">tasks</span>
+     </button>
+   </div>
+   ```
 
 3. Back in our `Todos.svelte` component, we want to make use of our `FilterButton` component. First of all, we need to import it. Add the following line at the top of the `Todos.svelte <script>` section:
 
-    ```js
-    import FilterButton from './FilterButton.svelte'
-    ```
+   ```js
+   import FilterButton from './FilterButton.svelte'
+   ```
 
 4. Now replace the `filters` `<div>` with a call to the `FilterButton` component, which takes the current filter as a prop. The below line is all you need:
 
-    ```html
-    <FilterButton {filter} />
-    ```
+   ```html
+   <FilterButton {filter} />
+   ```
 
 > **Note:** Remember that when the HTML attribute name and variable match, they can be replaced with `{variable}`. That's why we could replace `<FilterButton filter={filter} />` with `<FilterButton {filter} />`.
 
@@ -174,17 +174,17 @@ And we'll declare the reactive statement `$: onclick(filter)` to call the `oncli
 
 1. The `<script>` section of our `FilterButton` component should end up looking like this. Update it now:
 
-    ```js
-    export let filter = 'all'
-    export let onclick = (clicked) => {}
-    $: onclick(filter)
-    ```
+   ```js
+   export let filter = 'all'
+   export let onclick = (clicked) => {}
+   $: onclick(filter)
+   ```
 
 2. Now when we call `FilterButton` inside `Todos.svelte`, we'll need to specify the handler. Update it like this:
 
-    ```html
-    <FilterButton {filter} onclick={ (clicked) => filter = clicked }/>
-    ```
+   ```html
+   <FilterButton {filter} onclick={ (clicked) => filter = clicked }/>
+   ```
 
 When any filter button is clicked, we just update the filter variable with the new filter. Now our `FilterButton` component will work again.
 
@@ -198,19 +198,19 @@ Using `bind`, we will tell Svelte that any changes made to the `filter` prop in
 
 1. In `Todos.svelte`, update the call to the `FilterButton` component as follows:
 
-    ```html
-    <FilterButton bind:filter={filter} />
-    ```
+   ```html
+   <FilterButton bind:filter={filter} />
+   ```
 
-    As usual, Svelte provides us with a nice shorthand: `bind:value={value}` is equivalent to `bind:value`. So in the above example you could just write `<FilterButton bind:filter />`.
+   As usual, Svelte provides us with a nice shorthand: `bind:value={value}` is equivalent to `bind:value`. So in the above example you could just write `<FilterButton bind:filter />`.
 
 2. The child component can now modify the value of the parent's filter variable, so we no longer need the `onclick` prop. Modify your `FilterButton` `<script>` like this:
 
-    ```html
-    <script>
-      export let filter = 'all'
-    </script>
-    ```
+   ```html
+   <script>
+     export let filter = 'all'
+   </script>
+   ```
 
 3. Try your app again, and you should still see your filters working correctly.
 
@@ -223,51 +223,51 @@ Our `Todo` component will receive a single `todo` object as a prop. Let's declar
 1. Create a new component file, `components/Todo.svelte`.
 2. Put the following contents inside this file:
 
-    ```html
-    <script>
-      export let todo
-    </script>
-
-    <div class="stack-small">
-      <div class="c-cb">
-        <input type="checkbox" id="todo-{todo.id}"
-          on:click={() => todo.completed = !todo.completed}
-          checked={todo.completed}
-        />
-        <label for="todo-{todo.id}" class="todo-label">{todo.name}</label>
-      </div>
-      <div class="btn-group">
-        <button type="button" class="btn">
-          Edit <span class="visually-hidden">{todo.name}</span>
-        </button>
-        <button type="button" class="btn btn__danger" on:click={() => alert('not implemented')}>
-          Delete <span class="visually-hidden">{todo.name}</span>
-        </button>
-      </div>
-    </div>
-    ```
+   ```html
+   <script>
+     export let todo
+   </script>
+
+   <div class="stack-small">
+     <div class="c-cb">
+       <input type="checkbox" id="todo-{todo.id}"
+         on:click={() => todo.completed = !todo.completed}
+         checked={todo.completed}
+       />
+       <label for="todo-{todo.id}" class="todo-label">{todo.name}</label>
+     </div>
+     <div class="btn-group">
+       <button type="button" class="btn">
+         Edit <span class="visually-hidden">{todo.name}</span>
+       </button>
+       <button type="button" class="btn btn__danger" on:click={() => alert('not implemented')}>
+         Delete <span class="visually-hidden">{todo.name}</span>
+       </button>
+     </div>
+   </div>
+   ```
 
 3. Now we need to import our `Todo` component into `Todos.svelte`. Go to this file now, and add the following `import` statement below your previous one:
 
-    ```js
-    import Todo from './Todo.svelte'
-    ```
+   ```js
+   import Todo from './Todo.svelte'
+   ```
 
 4. Next we need to update our `{#each}` block to include a `<Todo>` component for each to-do, rather than the code that has been moved out to `Todo.svelte`. We are also passing the current `todo` object into the component as a prop.
 
-    Update the `{#each}` block inside `Todos.svelte` like so:
+   Update the `{#each}` block inside `Todos.svelte` like so:
 
-    ```html
-    <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading">
-      {#each filterTodos(filter, todos) as todo (todo.id)}
-        <li class="todo">
-          <Todo {todo} />
-        </li>
-      {:else}
-        <li>Nothing to do here!</li>
-      {/each}
-    </ul>
-    ```
+   ```html
+   <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading">
+     {#each filterTodos(filter, todos) as todo (todo.id)}
+       <li class="todo">
+         <Todo {todo} />
+       </li>
+     {:else}
+       <li>Nothing to do here!</li>
+     {/each}
+   </ul>
+   ```
 
 The list of to-dos is displayed on the page, and the checkboxes should work (try checking/unchecking a couple, and then observing that the filters still work as expected), but our "x out of y items completed" status heading will no longer update accordingly. That's because our `Todo` component is receiving the to-do via the prop, but it's not sending any information back to its parent. We'll fix this later on.
 
@@ -287,28 +287,28 @@ We'll edit our `Todo` component to emit a `remove` event, passing the to-do bein
 
 1. First of all, add the following lines to the top of the `Todo` component's `<script>` section:
 
-    ```js
-    import { createEventDispatcher } from 'svelte'
-    const dispatch = createEventDispatcher()
-    ```
+   ```js
+   import { createEventDispatcher } from 'svelte'
+   const dispatch = createEventDispatcher()
+   ```
 
 2. Now update the _Delete_ button in the markup section of the same file to look like so:
 
-    ```html
-    <button type="button" class="btn btn__danger" on:click={() => dispatch('remove', todo)}>
-      Delete <span class="visually-hidden">{todo.name}</span>
-    </button>
-    ```
+   ```html
+   <button type="button" class="btn btn__danger" on:click={() => dispatch('remove', todo)}>
+     Delete <span class="visually-hidden">{todo.name}</span>
+   </button>
+   ```
 
-    With `dispatch('remove', todo)` we are emitting a `remove` event, and passing as additional data the `todo` being deleted. The handler will be called with an event object available, with the additional data available in the `event.detail` property.
+   With `dispatch('remove', todo)` we are emitting a `remove` event, and passing as additional data the `todo` being deleted. The handler will be called with an event object available, with the additional data available in the `event.detail` property.
 
 3. Now we have to listen to that event from inside `Todos.svelte` and act accordingly. Go back to this file and update your `<Todo>` component call like so:
 
-    ```html
-    <Todo {todo} on:remove={(e) => removeTodo(e.detail)} />
-    ```
+   ```html
+   <Todo {todo} on:remove={(e) => removeTodo(e.detail)} />
+   ```
 
-    Our handler receives the `e` parameter (the event object), which as described before holds the to-do being deleted in the `detail` property.
+   Our handler receives the `e` parameter (the event object), which as described before holds the to-do being deleted in the `detail` property.
 
 4. At this point, if you try out your app again, you should see that the _Delete_ functionality now works again. So our custom event has worked as we hoped. In addition, the `remove` event listener is sending the data change back up to the parent, so our "x out of y items completed" status heading will now update appropriately when to-dos are deleted.
 
@@ -322,56 +322,56 @@ We still have to implement functionality to allow us to edit existing to-dos. We
 
 1. We'll need one variable to track whether we are in editing mode and another to store the name of the task being updated. Add the following variable definitions at the bottom of the `<script>` section of the `Todo` component:
 
-    ```js
-    let editing = false                     // track editing mode
-    let name = todo.name                    // hold the name of the to-do being edited
-    ```
+   ```js
+   let editing = false                     // track editing mode
+   let name = todo.name                    // hold the name of the to-do being edited
+   ```
 
 2. We have to decide what events our `Todo` component will emit:
 
-    - We could emit different events for the status toggle and editing of the name (for example, `updateTodoStatus` and `updateTodoName`).
-    - Or we could take a more generic approach and emit a single `update` event for both operations.
+   - We could emit different events for the status toggle and editing of the name (for example, `updateTodoStatus` and `updateTodoName`).
+   - Or we could take a more generic approach and emit a single `update` event for both operations.
 
-    We will take the second approach so that we can demonstrate a different technique. The advantage of this approach is that later we can add more fields to the to-dos and still handle all updates with the same event.
+   We will take the second approach so that we can demonstrate a different technique. The advantage of this approach is that later we can add more fields to the to-dos and still handle all updates with the same event.
 
-    Let's create an `update()` function that will receive the changes and will emit an update event with the modified to-do. Add the following, again to the bottom of the `<script>` section:
+   Let's create an `update()` function that will receive the changes and will emit an update event with the modified to-do. Add the following, again to the bottom of the `<script>` section:
 
-    ```js
-    function update(updatedTodo) {
-      todo = { ...todo, ...updatedTodo }    // applies modifications to todo
-      dispatch('update', todo)              // emit update event
-    }
-    ```
+   ```js
+   function update(updatedTodo) {
+     todo = { ...todo, ...updatedTodo }    // applies modifications to todo
+     dispatch('update', todo)              // emit update event
+   }
+   ```
 
-    Here we are using the [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to return the original to-do with the modifications applied to it.
+   Here we are using the [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to return the original to-do with the modifications applied to it.
 
 3. Next we'll create different functions to handle each user action. When the to-do is in editing mode, the user can save or cancel the changes. When it's not in editing mode, the user can delete the to-do, edit it, or toggle its status between completed and active.
 
-    Add the following set of functions below your previous function to handle these actions:
+   Add the following set of functions below your previous function to handle these actions:
 
-    ```js
-    function onCancel() {
-      name = todo.name                      // restores name to its initial value and
-      editing = false                       // and exit editing mode
-    }
+   ```js
+   function onCancel() {
+     name = todo.name                      // restores name to its initial value and
+     editing = false                       // and exit editing mode
+   }
 
-    function onSave() {
-      update({ name })                      // updates todo name
-      editing = false                       // and exit editing mode
-    }
+   function onSave() {
+     update({ name })                      // updates todo name
+     editing = false                       // and exit editing mode
+   }
 
-    function onRemove() {
-      dispatch('remove', todo)              // emit remove event
-    }
+   function onRemove() {
+     dispatch('remove', todo)              // emit remove event
+   }
 
-    function onEdit() {
-      editing = true                        // enter editing mode
-    }
+   function onEdit() {
+     editing = true                        // enter editing mode
+   }
 
-    function onToggle() {
-      update({ completed: !todo.completed}) // updates todo status
-    }
-    ```
+   function onToggle() {
+     update({ completed: !todo.completed}) // updates todo status
+   }
+   ```
 
 ### Updating the markup
 
@@ -464,68 +464,68 @@ We also use `todo.id` to create unique ids for the new input controls and labels
 
 1. The complete updated markup of our `Todo` component looks like the following. Update yours now:
 
-    ```html
-    <div class="stack-small">
-    {#if editing}
-      <!-- markup for editing todo: label, input text, Cancel and Save Button -->
-      <form on:submit|preventDefault={onSave} class="stack-small" on:keydown={(e) => e.key === 'Escape' && onCancel()}>
-        <div class="form-group">
-          <label for="todo-{todo.id}" class="todo-label">New name for '{todo.name}'</label>
-          <input bind:value={name} type="text" id="todo-{todo.id}" autoComplete="off" class="todo-text" />
-        </div>
-        <div class="btn-group">
-          <button class="btn todo-cancel" on:click={onCancel} type="button">
-            Cancel<span class="visually-hidden">renaming {todo.name}</span>
-            </button>
-          <button class="btn btn__primary todo-edit" type="submit" disabled={!name}>
-            Save<span class="visually-hidden">new name for {todo.name}</span>
-          </button>
-        </div>
-      </form>
-    {:else}
-      <!-- markup for displaying todo: checkbox, label, Edit and Delete Button -->
-      <div class="c-cb">
-        <input type="checkbox" id="todo-{todo.id}"
-          on:click={onToggle} checked={todo.completed}
-        >
-        <label for="todo-{todo.id}" class="todo-label">{todo.name}</label>
-      </div>
-      <div class="btn-group">
-        <button type="button" class="btn" on:click={onEdit}>
-          Edit<span class="visually-hidden"> {todo.name}</span>
-        </button>
-        <button type="button" class="btn btn__danger" on:click={onRemove}>
-          Delete<span class="visually-hidden"> {todo.name}</span>
-        </button>
-      </div>
-    {/if}
-    </div>
-    ```
-
-    > **Note:** We could further split this into two different components, one for editing the to-do and the other for displaying it. In the end, it boils down to how comfortable you feel dealing with this level of complexity in a single component. You should also consider whether splitting it further would enable reusing this component in a different context.
+   ```html
+   <div class="stack-small">
+   {#if editing}
+     <!-- markup for editing todo: label, input text, Cancel and Save Button -->
+     <form on:submit|preventDefault={onSave} class="stack-small" on:keydown={(e) => e.key === 'Escape' && onCancel()}>
+       <div class="form-group">
+         <label for="todo-{todo.id}" class="todo-label">New name for '{todo.name}'</label>
+         <input bind:value={name} type="text" id="todo-{todo.id}" autoComplete="off" class="todo-text" />
+       </div>
+       <div class="btn-group">
+         <button class="btn todo-cancel" on:click={onCancel} type="button">
+           Cancel<span class="visually-hidden">renaming {todo.name}</span>
+           </button>
+         <button class="btn btn__primary todo-edit" type="submit" disabled={!name}>
+           Save<span class="visually-hidden">new name for {todo.name}</span>
+         </button>
+       </div>
+     </form>
+   {:else}
+     <!-- markup for displaying todo: checkbox, label, Edit and Delete Button -->
+     <div class="c-cb">
+       <input type="checkbox" id="todo-{todo.id}"
+         on:click={onToggle} checked={todo.completed}
+       >
+       <label for="todo-{todo.id}" class="todo-label">{todo.name}</label>
+     </div>
+     <div class="btn-group">
+       <button type="button" class="btn" on:click={onEdit}>
+         Edit<span class="visually-hidden"> {todo.name}</span>
+       </button>
+       <button type="button" class="btn btn__danger" on:click={onRemove}>
+         Delete<span class="visually-hidden"> {todo.name}</span>
+       </button>
+     </div>
+   {/if}
+   </div>
+   ```
+
+   > **Note:** We could further split this into two different components, one for editing the to-do and the other for displaying it. In the end, it boils down to how comfortable you feel dealing with this level of complexity in a single component. You should also consider whether splitting it further would enable reusing this component in a different context.
 
 2. To get the update functionality working, we have to handle the `update` event from the `Todos` component. In its `<script>` section, add this handler:
 
-    ```js
-    function updateTodo(todo) {
-      const i = todos.findIndex((t) => t.id === todo.id)
-      todos[i] = { ...todos[i], ...todo }
-    }
-    ```
+   ```js
+   function updateTodo(todo) {
+     const i = todos.findIndex((t) => t.id === todo.id)
+     todos[i] = { ...todos[i], ...todo }
+   }
+   ```
 
-    We find the `todo` by `id` in our `todos` array, and update its content using spread syntax. In this case we could have also just used `todos[i] = todo`, but this implementation is more bullet-proof, allowing the `Todo` component to return only the updated parts of the to-do.
+   We find the `todo` by `id` in our `todos` array, and update its content using spread syntax. In this case we could have also just used `todos[i] = todo`, but this implementation is more bullet-proof, allowing the `Todo` component to return only the updated parts of the to-do.
 
 3. Next we have to listen for the `update` event on our `<Todo>` component call, and run our `updateTodo()` function when this occurs to change the `name` and `completed` status. Update your \<Todo> call like this:
 
-    ```html
-    {#each filterTodos(filter, todos) as todo (todo.id)}
-      <li class="todo">
-        <Todo {todo}
-          on:update={(e) => updateTodo(e.detail)}
-          on:remove={(e) => removeTodo(e.detail)}
-        />
-      </li>
-    ```
+   ```html
+   {#each filterTodos(filter, todos) as todo (todo.id)}
+     <li class="todo">
+       <Todo {todo}
+         on:update={(e) => updateTodo(e.detail)}
+         on:remove={(e) => removeTodo(e.detail)}
+       />
+     </li>
+   ```
 
 4. Try your app again, and you should see that you can delete, add, edit, cancel editing of, and toggle completion status of to-dos. And our "x out of y items completed" status heading will now update appropriately when to-dos are completed.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md
index 532ed9e63f56e27..772f80cd5ddc07b 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md
@@ -179,25 +179,25 @@ To deploy our app, follow these steps.
 2. Navigate to the root of your app and run `npx vercel`; the first time you do it, you'll be prompted to enter your email address, and follow the steps in the email sent to that address, for security purposes.
 3. Run `npx vercel` again, and you'll be prompted to answer a few questions, like this:
 
-    ```bash
-    > npx vercel
-    Vercel CLI 19.1.2
-    ? Set up and deploy "./mdn-svelte-tutorial"? [Y/n] y
-    ? Which scope do you want to deploy to? opensas
-    ? Link to existing project? [y/N] n
-    ? What's your project's name? mdn-svelte-tutorial
-    ? In which directory is your code located? ./
-    Auto-detected Project Settings (Svelte):
-    - Build Command: `npm run build` or `rollup -c`
-    - Output Directory: public
-    - Development Command: sirv public --single --dev --port $PORT
-    ? Want to override the settings? [y/N] n
-       Linked to opensas/mdn-svelte-tutorial (created .vercel)
-       Inspect: https://vercel.com/opensas/mdn-svelte-tutorial/[...] [1s]
-    ✅  Production: https://mdn-svelte-tutorial.vercel.app [copied to clipboard] [19s]
-       Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
-       To change the domain or build command, go to https://zeit.co/opensas/mdn-svelte-tutorial/settings
-    ```
+   ```bash
+   > npx vercel
+   Vercel CLI 19.1.2
+   ? Set up and deploy "./mdn-svelte-tutorial"? [Y/n] y
+   ? Which scope do you want to deploy to? opensas
+   ? Link to existing project? [y/N] n
+   ? What's your project's name? mdn-svelte-tutorial
+   ? In which directory is your code located? ./
+   Auto-detected Project Settings (Svelte):
+   - Build Command: `npm run build` or `rollup -c`
+   - Output Directory: public
+   - Development Command: sirv public --single --dev --port $PORT
+   ? Want to override the settings? [y/N] n
+      Linked to opensas/mdn-svelte-tutorial (created .vercel)
+      Inspect: https://vercel.com/opensas/mdn-svelte-tutorial/[...] [1s]
+   ✅  Production: https://mdn-svelte-tutorial.vercel.app [copied to clipboard] [19s]
+      Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
+      To change the domain or build command, go to https://zeit.co/opensas/mdn-svelte-tutorial/settings
+   ```
 
 4. Accept all the defaults, and you'll be fine.
 5. Once it has finished deploying, go to the "Production" URL in your browser, and you'll see the app deployed!
@@ -215,22 +215,22 @@ To demonstrate this, we will deploy our todos app to [GitLab Pages](https://abou
 1. First you'll have to [register at GitLab](https://gitlab.com/users/sign_up) and then [create a new project](https://gitlab.com/projects/new). Give you new project a short, easy name like "mdn-svelte-todo". You will have a remote URL that points to your new GitLab git repository, like `git@gitlab.com:[your-user]/[your-project].git`.
 2. Before you start to upload content to your git repository, it is a good practice to add a `.gitignore` file to tell git which files to exclude from source control. In our case we will tell git to exclude files in the `node_modules` directory by creating a `.gitignore` file in the root folder of your local project, with the following content:
 
-    ```bash
-    node_modules/
-    ```
+   ```bash
+   node_modules/
+   ```
 
 3. Now let's go back to GitLab. After creating a new repo GitLab will greet you with a message explaining different options to upload your existing files. Follow the steps listed under the _Push an existing folder_ heading:
 
-    ```bash
-    cd your_root_directory # Go into your project's root directory
-    git init
-    git remote add origin https://gitlab.com/[your-user]/mdn-svelte-todo.git
-    git add .
-    git commit -m "Initial commit"
-    git push -u origin main
-    ```
+   ```bash
+   cd your_root_directory # Go into your project's root directory
+   git init
+   git remote add origin https://gitlab.com/[your-user]/mdn-svelte-todo.git
+   git add .
+   git commit -m "Initial commit"
+   git push -u origin main
+   ```
 
-    > **Note:** You could use [the `git` protocol](https://git-scm.com/book/en/v2/Git-on-the-Server-The-Protocols#_the_git_protocol) instead of `https`, which is faster and saves you from typing your username and password every time you access your origin repo. To use it you'll have to [create an SSH key pair](https://docs.gitlab.com/ee/ssh/index.html#generating-a-new-ssh-key-pair). Your origin URL will be like this: `git@gitlab.com:[your-user]/mdn-svelte-todo.git`.
+   > **Note:** You could use [the `git` protocol](https://git-scm.com/book/en/v2/Git-on-the-Server-The-Protocols#_the_git_protocol) instead of `https`, which is faster and saves you from typing your username and password every time you access your origin repo. To use it you'll have to [create an SSH key pair](https://docs.gitlab.com/ee/ssh/index.html#generating-a-new-ssh-key-pair). Your origin URL will be like this: `git@gitlab.com:[your-user]/mdn-svelte-todo.git`.
 
 With these instructions we initialize a local git repository, then set our remote origin (where we will push our code to) as our repo on GitLab. Next we commit all the files to the local git repo, and then push those to the remote origin on GitLab.
 
@@ -240,51 +240,51 @@ Let's have a go at doing this now.
 
 1. Create a `.gitlab-ci.yml` file inside your project's root and give it the following content:
 
-    ```
-    image: node:latest
-    pages:
-      stage: deploy
-      script:
-        - npm install
-        - npm run build
-      artifacts:
-        paths:
-          - public
-      only:
-        - main
-    ```
-
-    Here we are telling GitLab to use an image with the latest version of node to build our app. Next we are declaring a `pages` job, to enable GitLab Pages. Whenever there's a push to our repo, GitLab will run `npm install` and `npm run build` to build our application. We are also telling GitLab to deploy the contents of the `public` folder. On the last line, we are configuring GitLab to redeploy our app only when there's a push to our main branch.
+   ```
+   image: node:latest
+   pages:
+     stage: deploy
+     script:
+       - npm install
+       - npm run build
+     artifacts:
+       paths:
+         - public
+     only:
+       - main
+   ```
+
+   Here we are telling GitLab to use an image with the latest version of node to build our app. Next we are declaring a `pages` job, to enable GitLab Pages. Whenever there's a push to our repo, GitLab will run `npm install` and `npm run build` to build our application. We are also telling GitLab to deploy the contents of the `public` folder. On the last line, we are configuring GitLab to redeploy our app only when there's a push to our main branch.
 
 2. Since our app will be published at a subdirectory (like `https://your-user.gitlab.io/mdn-svelte-todo`), we'll have to make the references to the JavaScript and CSS files in our `public/index.html` file relative. To do this, we just remove the leading slashes (`/`) from the `/global.css`, `/build/bundle.css`, and `/build/bundle.js` URLs, like this:
 
-    ```html
-    <title>Svelte To-Do list</title>
+   ```html
+   <title>Svelte To-Do list</title>
 
-    <link rel='icon' type='image/png' href='favicon.png'>
-    <link rel='stylesheet' href='global.css'>
-    <link rel='stylesheet' href='build/bundle.css'>
+   <link rel='icon' type='image/png' href='favicon.png'>
+   <link rel='stylesheet' href='global.css'>
+   <link rel='stylesheet' href='build/bundle.css'>
 
-    <script defer src='build/bundle.js'></script>
-    ```
+   <script defer src='build/bundle.js'></script>
+   ```
 
-    Do this now.
+   Do this now.
 
 3. Now we just have to commit and push our changes to GitLab. Do this by running the following commands:
 
-    ```bash
-    > git add public/index.html
-    > git add .gitlab-ci.yml
-    > git commit -m "Added .gitlab-ci.yml file and fixed index.html absolute paths"
-    > git push
-    Counting objects: 5, done.
-    Delta compression using up to 8 threads.
-    Compressing objects: 100% (5/5), done.
-    Writing objects: 100% (5/5), 541 bytes | 541.00 KiB/s, done.
-    Total 5 (delta 3), reused 0 (delta 0)
-    To gitlab.com:opensas/mdn-svelte-todo.git
-       7dac9f3..5725f46  main -> main
-    ```
+   ```bash
+   > git add public/index.html
+   > git add .gitlab-ci.yml
+   > git commit -m "Added .gitlab-ci.yml file and fixed index.html absolute paths"
+   > git push
+   Counting objects: 5, done.
+   Delta compression using up to 8 threads.
+   Compressing objects: 100% (5/5), done.
+   Writing objects: 100% (5/5), 541 bytes | 541.00 KiB/s, done.
+   Total 5 (delta 3), reused 0 (delta 0)
+   To gitlab.com:opensas/mdn-svelte-todo.git
+      7dac9f3..5725f46  main -> main
+   ```
 
 Whenever there's a job running GitLab will display an icon showing the process of the job. Clicking on it will let you inspect the output of the job.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md
index 509bd6c73e950b0..cacc221a6fa0134 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md
@@ -102,54 +102,54 @@ Now we'll tackle the _Check All_ and _Remove Completed_ buttons. Let's create a
 1. Create a new file, `components/MoreActions.svelte`.
 2. When the first button is clicked, we'll emit a `checkAll` event to signal that all the to-dos should be checked/unchecked. When the second button is clicked, we'll emit a `removeCompleted` event to signal that all of the completed to-dos should be removed. Put the following content into your `MoreActions.svelte` file:
 
-    ```html
-    <script>
-      import { createEventDispatcher } from 'svelte';
-      const dispatch = createEventDispatcher();
+   ```html
+   <script>
+     import { createEventDispatcher } from 'svelte';
+     const dispatch = createEventDispatcher();
 
-      let completed = true;
+     let completed = true;
 
-      const checkAll = () => {
-        dispatch('checkAll', completed);
-        completed = !completed;
-      }
+     const checkAll = () => {
+       dispatch('checkAll', completed);
+       completed = !completed;
+     }
 
-      const removeCompleted = () => dispatch('removeCompleted');
-    </script>
+     const removeCompleted = () => dispatch('removeCompleted');
+   </script>
 
-    <div class="btn-group">
-      <button type="button" class="btn btn__primary" on:click={checkAll}>{completed ? 'Check' : 'Uncheck'} all</button>
-      <button type="button" class="btn btn__primary" on:click={removeCompleted}>Remove completed</button>
-    </div>
-    ```
+   <div class="btn-group">
+     <button type="button" class="btn btn__primary" on:click={checkAll}>{completed ? 'Check' : 'Uncheck'} all</button>
+     <button type="button" class="btn btn__primary" on:click={removeCompleted}>Remove completed</button>
+   </div>
+   ```
 
-    We've also included a `completed` variable to toggle between checking and unchecking all tasks.
+   We've also included a `completed` variable to toggle between checking and unchecking all tasks.
 
 3. Back over in `Todos.svelte`, we are going to import our `MoreActions` component and create two functions to handle the events emitted by the `MoreActions` component.
 
-    Add the following import statement below the existing ones:
+   Add the following import statement below the existing ones:
 
-    ```js
-    import MoreActions from './MoreActions.svelte';
-    ```
+   ```js
+   import MoreActions from './MoreActions.svelte';
+   ```
 
 4. Then add the described functions at the end of the `<script>` section:
 
-    ```js
-    const checkAllTodos = (completed) => todos.forEach((t) => t.completed = completed);
+   ```js
+   const checkAllTodos = (completed) => todos.forEach((t) => t.completed = completed);
 
-    const removeCompletedTodos = () => todos = todos.filter((t) => !t.completed);
-    ```
+   const removeCompletedTodos = () => todos = todos.filter((t) => !t.completed);
+   ```
 
 5. Now go to the bottom of the `Todos.svelte` markup section and replace the `btn-group` `<div>` that we copied into `MoreActions.svelte` with a call to the `MoreActions` component, like so:
 
-    ```html
-    <!-- MoreActions -->
-    <MoreActions
-      on:checkAll={(e) => checkAllTodos(e.detail)}
-      on:removeCompleted={removeCompletedTodos}
-    />
-    ```
+   ```html
+   <!-- MoreActions -->
+   <MoreActions
+     on:checkAll={(e) => checkAllTodos(e.detail)}
+     on:removeCompleted={removeCompletedTodos}
+   />
+   ```
 
 6. OK, let's go back into the app and try it out. You'll find that the _Remove Completed_ button works fine, but the _Check All_/_Uncheck All_ button just silently fails.
 
@@ -161,12 +161,12 @@ To see what's happening we can log the `todos` array from the `checkAllTodos()`
 
 1. Update your existing `checkAllTodos()` function to the following:
 
-    ```js
-    const checkAllTodos = (completed) => {
-      todos.forEach((t) => t.completed = completed);
-      console.log('todos', todos);
-    }
-    ```
+   ```js
+   const checkAllTodos = (completed) => {
+     todos.forEach((t) => t.completed = completed);
+     console.log('todos', todos);
+   }
+   ```
 
 2. Go back to your browser, open your DevTools console, and click _Check All_/_Uncheck All_ a few times.
 
@@ -246,43 +246,43 @@ We will add one usability detail to our component. We'll disable the buttons whe
 
 1. Update your `MoreActions.svelte` component like this:
 
-    ```html
-    <script>
-      import { createEventDispatcher } from 'svelte';
-      const dispatch = createEventDispatcher();
+   ```html
+   <script>
+     import { createEventDispatcher } from 'svelte';
+     const dispatch = createEventDispatcher();
 
-      export let todos;
+     export let todos;
 
-      let completed = true;
+     let completed = true;
 
-      const checkAll = () => {
-        dispatch('checkAll', completed);
-        completed = !completed;
-      }
+     const checkAll = () => {
+       dispatch('checkAll', completed);
+       completed = !completed;
+     }
 
-      const removeCompleted = () => dispatch('removeCompleted');
+     const removeCompleted = () => dispatch('removeCompleted');
 
-      $: completedTodos = todos.filter((t) => t.completed).length;
-    </script>
+     $: completedTodos = todos.filter((t) => t.completed).length;
+   </script>
 
-    <div class="btn-group">
-      <button type="button" class="btn btn__primary"
-        disabled={todos.length === 0} on:click={checkAll}>{completed ? 'Check' : 'Uncheck'} all</button>
-      <button type="button" class="btn btn__primary"
-        disabled={completedTodos === 0} on:click={removeCompleted}>Remove completed</button>
-    </div>
-    ```
+   <div class="btn-group">
+     <button type="button" class="btn btn__primary"
+       disabled={todos.length === 0} on:click={checkAll}>{completed ? 'Check' : 'Uncheck'} all</button>
+     <button type="button" class="btn btn__primary"
+       disabled={completedTodos === 0} on:click={removeCompleted}>Remove completed</button>
+   </div>
+   ```
 
-    We've also declared a reactive `completedTodos` variable to enable or disable the _Remove Completed_ button.
+   We've also declared a reactive `completedTodos` variable to enable or disable the _Remove Completed_ button.
 
 2. Don't forget to pass the prop into `MoreActions` from inside `Todos.svelte`, where the component is called:
 
-    ```html
-    <MoreActions {todos}
-        on:checkAll={(e) => checkAllTodos(e.detail)}
-        on:removeCompleted={removeCompletedTodos}
-      />
-    ```
+   ```html
+   <MoreActions {todos}
+       on:checkAll={(e) => checkAllTodos(e.detail)}
+       on:removeCompleted={removeCompletedTodos}
+     />
+   ```
 
 ## Working with the DOM: focusing on the details
 
@@ -315,59 +315,59 @@ Let's begin by extracting our new to-do form out to its own component. With what
 1. Create a new file, `components/NewTodo.svelte`.
 2. Put the following contents inside it:
 
-    ```html
-    <script>
-      import { createEventDispatcher } from 'svelte';
-      const dispatch = createEventDispatcher();
+   ```html
+   <script>
+     import { createEventDispatcher } from 'svelte';
+     const dispatch = createEventDispatcher();
 
-      let name = '';
+     let name = '';
 
-      const addTodo = () => {
-        dispatch('addTodo', name);
-        name = '';
-      }
+     const addTodo = () => {
+       dispatch('addTodo', name);
+       name = '';
+     }
 
-      const onCancel = () => name = '';
+     const onCancel = () => name = '';
 
-    </script>
+   </script>
 
-    <form on:submit|preventDefault={addTodo} on:keydown={(e) => e.key === 'Escape' && onCancel()}>
-      <h2 class="label-wrapper">
-        <label for="todo-0" class="label__lg">What needs to be done?</label>
-      </h2>
-      <input bind:value={name} type="text" id="todo-0" autoComplete="off" class="input input__lg" />
-      <button type="submit" disabled={!name} class="btn btn__primary btn__lg">Add</button>
-    </form>
-    ```
+   <form on:submit|preventDefault={addTodo} on:keydown={(e) => e.key === 'Escape' && onCancel()}>
+     <h2 class="label-wrapper">
+       <label for="todo-0" class="label__lg">What needs to be done?</label>
+     </h2>
+     <input bind:value={name} type="text" id="todo-0" autoComplete="off" class="input input__lg" />
+     <button type="submit" disabled={!name} class="btn btn__primary btn__lg">Add</button>
+   </form>
+   ```
 
-    Here we are binding the `<input>` to the `name` variable with `bind:value={name}` and disabling the _Add_ button when it is empty (i.e. no text content) using `disabled={!name}`. We are also taking care of the <kbd>Escape</kbd> key with `on:keydown={(e) => e.key === 'Escape' && onCancel()}`. Whenever the <kbd>Escape</kbd> key is pressed we run `onCancel()`, which just clears up the `name` variable.
+   Here we are binding the `<input>` to the `name` variable with `bind:value={name}` and disabling the _Add_ button when it is empty (i.e. no text content) using `disabled={!name}`. We are also taking care of the <kbd>Escape</kbd> key with `on:keydown={(e) => e.key === 'Escape' && onCancel()}`. Whenever the <kbd>Escape</kbd> key is pressed we run `onCancel()`, which just clears up the `name` variable.
 
 3. Now we have to `import` and use it from inside the `Todos` component, and update the `addTodo()` function to receive the name of the new todo.
 
-    Add the following `import` statement below the others inside `Todos.svelte`:
+   Add the following `import` statement below the others inside `Todos.svelte`:
 
-    ```js
-    import NewTodo from './NewTodo.svelte';
-    ```
+   ```js
+   import NewTodo from './NewTodo.svelte';
+   ```
 
 4. And update the `addTodo()` function like so:
 
-    ```js
-    function addTodo(name) {
-      todos = [...todos, { id: newTodoId, name, completed: false }];
-    }
-    ```
+   ```js
+   function addTodo(name) {
+     todos = [...todos, { id: newTodoId, name, completed: false }];
+   }
+   ```
 
-    `addTodo()` now receives the name of the new to-do directly, so we no longer need the `newTodoName` variable to give it its value. Our `NewTodo` component takes care of that.
+   `addTodo()` now receives the name of the new to-do directly, so we no longer need the `newTodoName` variable to give it its value. Our `NewTodo` component takes care of that.
 
-    > **Note:** The `{ name }` syntax is just a shorthand for `{ name: name }`. This one comes from JavaScript itself and has nothing to do with Svelte, besides providing some inspiration for Svelte's own shorthands.
+   > **Note:** The `{ name }` syntax is just a shorthand for `{ name: name }`. This one comes from JavaScript itself and has nothing to do with Svelte, besides providing some inspiration for Svelte's own shorthands.
 
 5. Finally for this section, replace the NewTodo form markup with a call to `NewTodo` component, like so:
 
-    ```html
-    <!-- NewTodo -->
-    <NewTodo on:addTodo={(e) => addTodo(e.detail)} />
-    ```
+   ```html
+   <!-- NewTodo -->
+   <NewTodo on:addTodo={(e) => addTodo(e.detail)} />
+   ```
 
 ## Working with DOM nodes using the `bind:this={dom_node}` directive
 
@@ -414,25 +414,25 @@ The next feature will add to our `NewTodo` component will be an `autofocus` prop
 
 1. Our first attempt is as follows: let's try adding the `autofocus` prop and just call `nameEl.focus()` from the `<script>` block. Update the first part of the `NewTodo.svelte` `<script>` section (the first four lines) to look like this:
 
-    ```html
-    <script>
-      import { createEventDispatcher } from 'svelte';
-      const dispatch = createEventDispatcher();
+   ```html
+   <script>
+     import { createEventDispatcher } from 'svelte';
+     const dispatch = createEventDispatcher();
 
-      export let autofocus = false;
+     export let autofocus = false;
 
-      let name = '';
-      let nameEl; // reference to the name input DOM node
+     let name = '';
+     let nameEl; // reference to the name input DOM node
 
-      if (autofocus) nameEl.focus();
-    ```
+     if (autofocus) nameEl.focus();
+   ```
 
 2. Now go back to the `Todos` component and pass the `autofocus` prop into the `<NewTodo>` component call, like so:
 
-    ```html
-    <!-- NewTodo -->
-    <NewTodo autofocus on:addTodo={(e) => addTodo(e.detail)} />
-    ```
+   ```html
+   <!-- NewTodo -->
+   <NewTodo autofocus on:addTodo={(e) => addTodo(e.detail)} />
+   ```
 
 3. If you try your app out now, you'll see that the page is now blank, and in your DevTools web console you'll see an error along the lines of: `TypeError: nameEl is undefined`.
 
@@ -448,34 +448,34 @@ The one you'll use most frequently is `onMount()`, which lets us run a callback
 
 1. To start with, add the following line at the beginning of the `NewTodo.svelte` `<script>` section:
 
-    ```js
-    import { onMount } from 'svelte';
-    ```
+   ```js
+   import { onMount } from 'svelte';
+   ```
 
 2. And these lines at the end of it:
 
-    ```js
-    console.log('initializing:', nameEl);
-    onMount(() => {
-      console.log('mounted:', nameEl);
-    })
-    ```
+   ```js
+   console.log('initializing:', nameEl);
+   onMount(() => {
+     console.log('mounted:', nameEl);
+   })
+   ```
 
 3. Now remove the `if (autofocus) nameEl.focus()` line to avoid throwing the error we were seeing before.
 4. The app will now work again, and you'll see the following in your console:
 
-    ```
-    initializing: undefined
-    mounted: <input id="todo-0" class="input input__lg" type="text" autocomplete="off">
-    ```
+   ```
+   initializing: undefined
+   mounted: <input id="todo-0" class="input input__lg" type="text" autocomplete="off">
+   ```
 
-    As you can see, while the component is initializing, `nameEl` is undefined, which makes sense because the `<input>` node doesn't even exist yet. After the component has been mounted, Svelte assigned a reference to the `<input>` DOM node to the `nameEl` variable, thanks to the `bind:this={nameEl} directive`.
+   As you can see, while the component is initializing, `nameEl` is undefined, which makes sense because the `<input>` node doesn't even exist yet. After the component has been mounted, Svelte assigned a reference to the `<input>` DOM node to the `nameEl` variable, thanks to the `bind:this={nameEl} directive`.
 
 5. To get the autofocus functionality working, replace the previous `console.log()`/`onMount()` block you added with this:
 
-    ```js
-    onMount(() => autofocus && nameEl.focus()); // if autofocus is true, we run nameEl.focus()
-    ```
+   ```js
+   onMount(() => autofocus && nameEl.focus()); // if autofocus is true, we run nameEl.focus()
+   ```
 
 6. Go to your app again, and you'll now see the `<input>` field is focused on page load.
 
@@ -487,24 +487,24 @@ Now we will take care of the `Todo` component's focus management details. First
 
 1. Open the file `components/Todo.svelte` and add a `nameEl` variable declaration just below your editing and name declarations:
 
-    ```js
-    let nameEl; // reference to the name input DOM node
-    ```
+   ```js
+   let nameEl; // reference to the name input DOM node
+   ```
 
 2. Now update your `onEdit()` function like so:
 
-    ```js
-    function onEdit() {
-      editing = true; // enter editing mode
-      nameEl.focus(); // set focus to name input
-    }
-    ```
+   ```js
+   function onEdit() {
+     editing = true; // enter editing mode
+     nameEl.focus(); // set focus to name input
+   }
+   ```
 
 3. And finally, bind `nameEl` to the `<input>` field by updating it like so:
 
-    ```html
-    <input bind:value={name} bind:this={nameEl} type="text" id="todo-{todo.id}" autoComplete="off" class="todo-text" />
-    ```
+   ```html
+   <input bind:value={name} bind:this={nameEl} type="text" id="todo-{todo.id}" autoComplete="off" class="todo-text" />
+   ```
 
 4. However, when you try the updated app, you'll get an error along the lines of "TypeError: nameEl is undefined" in the console when you press a to-do's _Edit_ button.
 
@@ -527,19 +527,19 @@ The above solution works, but it is rather inelegant. Svelte provides a better w
 
 1. First of all, import `tick` at the top of the `<script>` section alongside your existing import:
 
-    ```js
-    import { tick } from 'svelte';
-    ```
+   ```js
+   import { tick } from 'svelte';
+   ```
 
 2. Next, call `tick()` with [`await`](/en-US/docs/Web/JavaScript/Reference/Operators/await) from an [async function](/en-US/docs/Web/JavaScript/Reference/Statements/async_function); update `onEdit()` like so:
 
-    ```js
-    async function onEdit() {
-      editing = true; // enter editing mode
-      await tick();
-      nameEl.focus();
-    }
-    ```
+   ```js
+   async function onEdit() {
+     editing = true; // enter editing mode
+     await tick();
+     nameEl.focus();
+   }
+   ```
 
 3. If you try it now you'll see that everything works as expected.
 
@@ -567,33 +567,33 @@ In our immediate use case, we will define a function called `selectOnFocus()` th
 
 1. Let's create the function `selectOnFocus()`. Add the following to the bottom of the `Todo.svelte` `<script>` section:
 
-    ```js
-    function selectOnFocus(node) {
-      if (node && typeof node.select === 'function') { // make sure node is defined and has a select() method
-        const onFocus = (event) => node.select(); // event handler
-        node.addEventListener('focus', onFocus); // when node gets focus call onFocus()
-        return {
-          destroy: () => node.removeEventListener('focus', onFocus) // this will be executed when the node is removed from the DOM
-        }
-      }
-    }
-    ```
+   ```js
+   function selectOnFocus(node) {
+     if (node && typeof node.select === 'function') { // make sure node is defined and has a select() method
+       const onFocus = (event) => node.select(); // event handler
+       node.addEventListener('focus', onFocus); // when node gets focus call onFocus()
+       return {
+         destroy: () => node.removeEventListener('focus', onFocus) // this will be executed when the node is removed from the DOM
+       }
+     }
+   }
+   ```
 
 2. Now we need to tell the `<input>` to use that function with the [`use:action`](https://svelte.dev/docs#use_action) directive:
 
-    ```html
-    <input use:selectOnFocus />
-    ```
+   ```html
+   <input use:selectOnFocus />
+   ```
 
-    With this directive we are telling Svelte to run this function, passing the DOM node of the `<input>` as a parameter, as soon as the component is mounted on the DOM. It will also be in charge of executing the `destroy` function when the component is removed from DOM. So with the `use` directive, Svelte takes care of the component's lifecycle for us.
+   With this directive we are telling Svelte to run this function, passing the DOM node of the `<input>` as a parameter, as soon as the component is mounted on the DOM. It will also be in charge of executing the `destroy` function when the component is removed from DOM. So with the `use` directive, Svelte takes care of the component's lifecycle for us.
 
-    In our case, our `<input>` would end up like so: update the component's first label/input pair (inside the edit template) as follows:
+   In our case, our `<input>` would end up like so: update the component's first label/input pair (inside the edit template) as follows:
 
-    ```html
-    <label for="todo-{todo.id}" class="todo-label">New name for '{todo.name}'</label>
-    <input bind:value={name} bind:this={nameEl} use:selectOnFocus type="text" id="todo-{todo.id}" autoComplete="off" class="todo-text"
-    />
-    ```
+   ```html
+   <label for="todo-{todo.id}" class="todo-label">New name for '{todo.name}'</label>
+   <input bind:value={name} bind:this={nameEl} use:selectOnFocus type="text" id="todo-{todo.id}" autoComplete="off" class="todo-text"
+   />
+   ```
 
 3. Let's try it out. Go to your app, press a to-do's _Edit_ button, then <kbd>Tab</kbd> to take focus away from the `<input>`. Now click on the `<input>`, and you'll see that the entire input text is selected.
 
@@ -604,23 +604,23 @@ Now let's make this function truly reusable across components. `selectOnFocus()`
 1. Create a new file, `actions.js`, inside the `src` folder.
 2. Give it the following content:
 
-    ```js
-    export function selectOnFocus(node) {
-      if (node && typeof node.select === 'function') { // make sure node is defined and has a select() method
-        const onFocus = (event) => node.select(); // event handler
-        node.addEventListener('focus', onFocus); // when node gets focus call onFocus()
-        return {
-          destroy: () => node.removeEventListener('focus', onFocus); // this will be executed when the node is removed from the DOM
-        }
-      }
-    }
-    ```
+   ```js
+   export function selectOnFocus(node) {
+     if (node && typeof node.select === 'function') { // make sure node is defined and has a select() method
+       const onFocus = (event) => node.select(); // event handler
+       node.addEventListener('focus', onFocus); // when node gets focus call onFocus()
+       return {
+         destroy: () => node.removeEventListener('focus', onFocus); // this will be executed when the node is removed from the DOM
+       }
+     }
+   }
+   ```
 
 3. Now import it from inside `Todo.svelte`; add the following import statement just below the others:
 
-    ```js
-    import { selectOnFocus } from '../actions.js';
-    ```
+   ```js
+   import { selectOnFocus } from '../actions.js';
+   ```
 
 4. And remove the `selectOnFocus()` definition from `Todo.svelte`, since we no longer need it there.
 
@@ -630,17 +630,17 @@ To demonstrate our action's reusability, let's make use of it in `NewTodo.svelte
 
 1. Import `selectOnFocus()` from `actions.js` in this file too, as before:
 
-    ```js
-    import { selectOnFocus } from '../actions.js';
-    ```
+   ```js
+   import { selectOnFocus } from '../actions.js';
+   ```
 
 2. Add the `use:selectOnFocus` directive to the `<input>`, like this:
 
-    ```html
-    <input bind:value={name} bind:this={nameEl} use:selectOnFocus
-      type="text" id="todo-0" autoComplete="off" class="input input__lg"
-    />
-    ```
+   ```html
+   <input bind:value={name} bind:this={nameEl} use:selectOnFocus
+     type="text" id="todo-0" autoComplete="off" class="input input__lg"
+   />
+   ```
 
 With a few lines of code we can add functionality to regular HTML elements in a very reusable and declarative way. It just takes an `import` and a short directive like `use:selectOnFocus` that clearly describes its purpose. And we can achieve this without the need to create a custom wrapper element like `TextInput`, `MyInput`, or similar. Moreover, you can add as many `use:action` directives as you want to an element.
 
@@ -652,23 +652,23 @@ In the previous section, while working with the `Todo` components, we had to dea
 
 1. This is how we can implement it with actions instead:
 
-    ```js
-    const focusOnInit = (node) => node && typeof node.focus === 'function' && node.focus();
-    ```
+   ```js
+   const focusOnInit = (node) => node && typeof node.focus === 'function' && node.focus();
+   ```
 
 2. And then in our markup we just need to add another `use:` directive:
 
-    ```html
-    <input bind:value={name} use:selectOnFocus use:focusOnInit>
-    ```
+   ```html
+   <input bind:value={name} use:selectOnFocus use:focusOnInit>
+   ```
 
 3. Our `onEdit()` function can now be much simpler:
 
-    ```js
-    function onEdit() {
-      editing = true; // enter editing mode
-    }
-    ```
+   ```js
+   function onEdit() {
+     editing = true; // enter editing mode
+   }
+   ```
 
 As a last example before we move on, let's go back to our `Todo.svelte` component and give focus to the _Edit_ button after the user presses _Save_ or _Cancel_.
 
@@ -679,32 +679,32 @@ That's not what we want — we want the _Edit_ button to receive focus only when
 1. So, go back to your `Todo.svelte` file.
 2. First we'll create a flag named `editButtonPressed` and initialize it to `false`. Add this just below your other variable definitions:
 
-    ```js
-    let editButtonPressed = false; // track if edit button has been pressed, to give focus to it after cancel or save
-    ```
+   ```js
+   let editButtonPressed = false; // track if edit button has been pressed, to give focus to it after cancel or save
+   ```
 
 3. Next we'll modify the _Edit_ button's functionality to save this flag, and create the action for it. Update the `onEdit()` function like so:
 
-    ```js
-    function onEdit() {
-      editButtonPressed = true; // user pressed the Edit button, focus will come back to the Edit button
-      editing = true ; // enter editing mode
-    }
-    ```
+   ```js
+   function onEdit() {
+     editButtonPressed = true; // user pressed the Edit button, focus will come back to the Edit button
+     editing = true ; // enter editing mode
+   }
+   ```
 
 4. Below it, add the following definition for `focusEditButton()`:
 
-    ```js
-    const focusEditButton = (node) => editButtonPressed && node.focus();
-    ```
+   ```js
+   const focusEditButton = (node) => editButtonPressed && node.focus();
+   ```
 
 5. Finally we `use` the `focusEditButton` action on the _Edit_ button, like so:
 
-    ```html
-    <button type="button" class="btn" on:click={onEdit} use:focusEditButton>
-      Edit<span class="visually-hidden"> {todo.name}</span>
-    </button>
-    ```
+   ```html
+   <button type="button" class="btn" on:click={onEdit} use:focusEditButton>
+     Edit<span class="visually-hidden"> {todo.name}</span>
+   </button>
+   ```
 
 6. Go back and try your app again. At this point, every time the _Edit_ button is added to the DOM, the `focusEditButton` action is executed, but it will only give focus to the button if the `editButtonPressed` flag is `true`.
 
@@ -723,34 +723,34 @@ First we'll extract the status heading to its own component.
 1. Create a new file, `components/TodosStatus.svelte`.
 2. Add the following contents to it:
 
-    ```html
-    <script>
-      export let todos;
+   ```html
+   <script>
+     export let todos;
 
-      $: totalTodos = todos.length;
-      $: completedTodos = todos.filter((todo) => todo.completed).length;
-    </script>
+     $: totalTodos = todos.length;
+     $: completedTodos = todos.filter((todo) => todo.completed).length;
+   </script>
 
-    <h2 id="list-heading">{completedTodos} out of {totalTodos} items completed</h2>
-    ```
+   <h2 id="list-heading">{completedTodos} out of {totalTodos} items completed</h2>
+   ```
 
 3. Import the file at the beginning of `Todos.svelte`, adding the following `import` statement below the others:
 
-    ```js
-    import TodosStatus from './TodosStatus.svelte';
-    ```
+   ```js
+   import TodosStatus from './TodosStatus.svelte';
+   ```
 
 4. Replace the `<h2>` status heading inside `Todos.svelte` with a call to the `TodosStatus` component, passing `todos` to it as a prop, like so:
 
-    ```html
-    <TodosStatus {todos} />
-    ```
+   ```html
+   <TodosStatus {todos} />
+   ```
 
 5. You can also do a bit of cleanup, removing the `totalTodos` and `completedTodos` variables from `Todos.svelte`. Just remove the `$: totalTodos = …` and the `$: completedTodos = …` lines, and also remove the reference to `totalTodos` when we calculate `newTodoId` and use `todos.length` instead. To do this, replace the block that begins with `let newTodoId` with this:
 
-    ```js
-    $: newTodoId = todos.length ? Math.max(...todos.map((t) => t.id)) + 1 : 1;
-    ```
+   ```js
+   $: newTodoId = todos.length ? Math.max(...todos.map((t) => t.id)) + 1 : 1;
+   ```
 
 6. Everything works as expected — we just extracted the last piece of markup to its own component.
 
@@ -783,50 +783,50 @@ With this in mind, let's go back to our use case. We'll create a function called
 
 1. Update the contents of `TodosStatus.svelte` like so:
 
-    ```html
-    <script>
-      export let todos;
+   ```html
+   <script>
+     export let todos;
 
-      $: totalTodos = todos.length;
-      $: completedTodos = todos.filter((todo) => todo.completed).length;
+     $: totalTodos = todos.length;
+     $: completedTodos = todos.filter((todo) => todo.completed).length;
 
-      let headingEl;
+     let headingEl;
 
-      export function focus() { // shorter version: export const focus = () => headingEl.focus()
-        headingEl.focus();
-      }
-    </script>
+     export function focus() { // shorter version: export const focus = () => headingEl.focus()
+       headingEl.focus();
+     }
+   </script>
 
-    <h2 id="list-heading" bind:this={headingEl} tabindex="-1">{completedTodos} out of {totalTodos} items completed</h2>
-    ```
+   <h2 id="list-heading" bind:this={headingEl} tabindex="-1">{completedTodos} out of {totalTodos} items completed</h2>
+   ```
 
-    Note that we've added a `tabindex` attribute to the `<h2>` to allow the element to receive focus programmatically.
+   Note that we've added a `tabindex` attribute to the `<h2>` to allow the element to receive focus programmatically.
 
-    As we saw earlier, using the `bind:this={headingEl}` directive gives us a reference to the DOM node in the variable `headingEl`. Then we use `export function focus()` to expose a function that gives focus to the `<h2>` heading.
+   As we saw earlier, using the `bind:this={headingEl}` directive gives us a reference to the DOM node in the variable `headingEl`. Then we use `export function focus()` to expose a function that gives focus to the `<h2>` heading.
 
-    How can we access those exported values from the parent? Just as you can bind to DOM elements with the `bind:this={dom_node}` directive, you can also bind to component instances themselves with `bind:this={component}`. So, when you use `bind:this` on an HTML element, you get a reference to the DOM node, and when you do it on a Svelte component, you get a reference to the instance of that component.
+   How can we access those exported values from the parent? Just as you can bind to DOM elements with the `bind:this={dom_node}` directive, you can also bind to component instances themselves with `bind:this={component}`. So, when you use `bind:this` on an HTML element, you get a reference to the DOM node, and when you do it on a Svelte component, you get a reference to the instance of that component.
 
 2. So to bind to the instance of `TodosStatus`, we'll first create a `todosStatus` variable in `Todos.svelte`. Add the following line below your `import` statements:
 
-    ```js
-    let todosStatus; // reference to TodosStatus instance
-    ```
+   ```js
+   let todosStatus; // reference to TodosStatus instance
+   ```
 
 3. Next, add a `bind:this={todosStatus}` directive to the call, as follows:
 
-    ```html
-    <!-- TodosStatus -->
-    <TodosStatus bind:this={todosStatus} {todos} />
-    ```
+   ```html
+   <!-- TodosStatus -->
+   <TodosStatus bind:this={todosStatus} {todos} />
+   ```
 
 4. Now we can call the `exported focus()` method from our `removeTodo()` function:
 
-    ```js
-    function removeTodo(todo) {
-      todos = todos.filter((t) => t.id !== todo.id);
-      todosStatus.focus(); // give focus to status heading
-    }
-    ```
+   ```js
+   function removeTodo(todo) {
+     todos = todos.filter((t) => t.id !== todo.id);
+     todosStatus.focus(); // give focus to status heading
+   }
+   ```
 
 5. Go back to your app. Now if you delete any to-do, the status heading will be focussed. This is useful to highlight the change in numbers of to-dos, both to sighted users and screen reader users.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_stores/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_stores/index.md
index b2f833a78ad0854..84241661a989c36 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_stores/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_stores/index.md
@@ -108,11 +108,11 @@ Let's start by creating a writable store. Any component will be able to write to
 1. Create a new file, `stores.js`, inside your `src` directory.
 2. Give it the following content:
 
-    ```js
-    import { writable } from 'svelte/store'
+   ```js
+   import { writable } from 'svelte/store'
 
-    export const alert = writable('Welcome to the to-do list app!')
-    ```
+   export const alert = writable('Welcome to the to-do list app!')
+   ```
 
 > **Note:** Stores can be defined and used outside Svelte components, so you can organize them in any way you please.
 
@@ -125,54 +125,54 @@ Let's now create our `Alert` component and see how we can read values from the s
 1. Create another new file named `src/components/Alert.svelte`.
 2. Give it the following content:
 
-    ```html
-    <script>
-      import { alert } from '../stores.js'
-      import { onDestroy } from 'svelte'
-
-      let alertContent = ''
-
-      const unsubscribe = alert.subscribe((value) => alertContent = value)
-
-      onDestroy(unsubscribe)
-    </script>
-
-    {#if alertContent}
-    <div on:click={() => alertContent = ''}>
-      <p>{ alertContent }</p>
-    </div>
-    {/if}
-
-    <style>
-    div {
-      position: fixed;
-      cursor: pointer;
-      margin-right: 1.5rem;
-      margin-left: 1.5rem;
-      margin-top: 1rem;
-      right: 0;
-      display: flex;
-      align-items: center;
-      border-radius: 0.2rem;
-      background-color: #565656;
-      color: #fff;
-      font-weight: 700;
-      padding: 0.5rem 1.4rem;
-      font-size: 1.5rem;
-      z-index: 100;
-      opacity: 95%;
-    }
-    div p {
-      color: #fff;
-    }
-    div svg {
-      height: 1.6rem;
-      fill: currentcolor;
-      width: 1.4rem;
-      margin-right: 0.5rem;
-    }
-    </style>
-    ```
+   ```html
+   <script>
+     import { alert } from '../stores.js'
+     import { onDestroy } from 'svelte'
+
+     let alertContent = ''
+
+     const unsubscribe = alert.subscribe((value) => alertContent = value)
+
+     onDestroy(unsubscribe)
+   </script>
+
+   {#if alertContent}
+   <div on:click={() => alertContent = ''}>
+     <p>{ alertContent }</p>
+   </div>
+   {/if}
+
+   <style>
+   div {
+     position: fixed;
+     cursor: pointer;
+     margin-right: 1.5rem;
+     margin-left: 1.5rem;
+     margin-top: 1rem;
+     right: 0;
+     display: flex;
+     align-items: center;
+     border-radius: 0.2rem;
+     background-color: #565656;
+     color: #fff;
+     font-weight: 700;
+     padding: 0.5rem 1.4rem;
+     font-size: 1.5rem;
+     z-index: 100;
+     opacity: 95%;
+   }
+   div p {
+     color: #fff;
+   }
+   div svg {
+     height: 1.6rem;
+     fill: currentcolor;
+     width: 1.4rem;
+     margin-right: 0.5rem;
+   }
+   </style>
+   ```
 
 Let's walk through this piece of code in detail.
 
@@ -192,20 +192,20 @@ Let's now use our component.
 
 1. In `App.svelte` we'll import the component. Add the following import statement below the existing one:
 
-    ```js
-    import Alert from './components/Alert.svelte'
-    ```
+   ```js
+   import Alert from './components/Alert.svelte'
+   ```
 
 2. Then call the `Alert` component just above the `Todos` call, like this:
 
-    ```html
-    <Alert />
-    <Todos {todos} />
-    ```
+   ```html
+   <Alert />
+   <Todos {todos} />
+   ```
 
 3. Load your test app now, and you should now see the `Alert` message on screen. You can click on it to dismiss it.
 
-    ![A simple notification in the top right-hand corner of an app saying welcome to the to-do list app](01-alert-message.png)
+   ![A simple notification in the top right-hand corner of an app saying welcome to the to-do list app](01-alert-message.png)
 
 ## Making stores reactive with the reactive `$store` syntax
 
@@ -240,17 +240,17 @@ And `$myStore` will be fully reactive. This also applies to your own custom stor
 
 1. Let's apply this to our `Alert` component. Update the `<script>` and markup sections of `Alert.svelte` as follows:
 
-    ```html
-    <script>
-      import { alert } from '../stores.js'
-    </script>
+   ```html
+   <script>
+     import { alert } from '../stores.js'
+   </script>
 
-    {#if $alert}
-    <div on:click={() => $alert = ''}>
-      <p>{ $alert }</p>
-    </div>
-    {/if}
-    ```
+   {#if $alert}
+   <div on:click={() => $alert = ''}>
+     <p>{ $alert }</p>
+   </div>
+   {/if}
+   ```
 
 2. Check your app again and you'll see that this works just like before. That's much better!
 
@@ -266,66 +266,66 @@ Writing to our store is just a matter of importing it and executing `$store = 'n
 
 1. Add the following `import` statement below the existing ones:
 
-    ```js
-    import { alert } from '../stores.js'
-    ```
+   ```js
+   import { alert } from '../stores.js'
+   ```
 
 2. Update your `addTodo()` function like so:
 
-    ```js
-    function addTodo(name) {
-      todos = [...todos, { id: newTodoId, name, completed: false }]
-      $alert = `Todo '${name}' has been added`
-    }
-    ```
+   ```js
+   function addTodo(name) {
+     todos = [...todos, { id: newTodoId, name, completed: false }]
+     $alert = `Todo '${name}' has been added`
+   }
+   ```
 
 3. Update `removeTodo()` like so:
 
-    ```js
-    function removeTodo(todo) {
-      todos = todos.filter((t) => t.id !== todo.id)
-      todosStatus.focus()             // give focus to status heading
-      $alert = `Todo '${todo.name}' has been deleted`
-    }
-    ```
+   ```js
+   function removeTodo(todo) {
+     todos = todos.filter((t) => t.id !== todo.id)
+     todosStatus.focus()             // give focus to status heading
+     $alert = `Todo '${todo.name}' has been deleted`
+   }
+   ```
 
 4. Update the `updateTodo()` function to this:
 
-    ```js
-    function updateTodo(todo) {
-      const i = todos.findIndex((t) => t.id === todo.id)
-      if (todos[i].name !== todo.name)            $alert = `todo '${todos[i].name}' has been renamed to '${todo.name}'`
-      if (todos[i].completed !== todo.completed)  $alert = `todo '${todos[i].name}' marked as ${todo.completed ? 'completed' : 'active'}`
-      todos[i] = { ...todos[i], ...todo }
-    }
-    ```
+   ```js
+   function updateTodo(todo) {
+     const i = todos.findIndex((t) => t.id === todo.id)
+     if (todos[i].name !== todo.name)            $alert = `todo '${todos[i].name}' has been renamed to '${todo.name}'`
+     if (todos[i].completed !== todo.completed)  $alert = `todo '${todos[i].name}' marked as ${todo.completed ? 'completed' : 'active'}`
+     todos[i] = { ...todos[i], ...todo }
+   }
+   ```
 
 5. Add the following reactive block beneath the block that starts with `let filter = 'all'`:
 
-    ```js
-    $: {
-      if (filter === 'all') {
-        $alert = 'Browsing all to-dos';
-      } else if (filter === 'active') {
-        $alert = 'Browsing active to-dos';
-      } else if (filter === 'completed') {
-        $alert = 'Browsing completed to-dos';
-      }
-    }
-    ```
+   ```js
+   $: {
+     if (filter === 'all') {
+       $alert = 'Browsing all to-dos';
+     } else if (filter === 'active') {
+       $alert = 'Browsing active to-dos';
+     } else if (filter === 'completed') {
+       $alert = 'Browsing completed to-dos';
+     }
+   }
+   ```
 
 6. And finally for now, update the `const checkAllTodos` and `const removeCompletedTodos` blocks as follows:
 
-    ```js
-    const checkAllTodos = (completed) => {
-      todos = todos.map((t) => ({...t, completed}))
-      $alert = `${completed ? 'Checked' : 'Unchecked'} ${todos.length} to-dos`
-    }
-    const removeCompletedTodos = () => {
-      $alert = `Removed ${todos.filter((t) => t.completed).length} to-dos`
-      todos = todos.filter((t) => !t.completed)
-    }
-    ```
+   ```js
+   const checkAllTodos = (completed) => {
+     todos = todos.map((t) => ({...t, completed}))
+     $alert = `${completed ? 'Checked' : 'Unchecked'} ${todos.length} to-dos`
+   }
+   const removeCompletedTodos = () => {
+     $alert = `Removed ${todos.filter((t) => t.completed).length} to-dos`
+     todos = todos.filter((t) => !t.completed)
+   }
+   ```
 
 7. So basically, we've imported the store and updated it on every event, which causes a new alert to show each time. Have a look at your app again, and try adding/deleting/updating a few to-dos!
 
@@ -343,38 +343,38 @@ Let's see how to do that. We'll specify a prop with the milliseconds to wait bef
 
 1. Update the `<script>` section of your `Alert.svelte` component like so:
 
-    ```js
-    import { onDestroy } from 'svelte'
-    import { alert } from '../stores.js'
+   ```js
+   import { onDestroy } from 'svelte'
+   import { alert } from '../stores.js'
 
-    export let ms = 3000
-    let visible
-    let timeout
+   export let ms = 3000
+   let visible
+   let timeout
 
-    const onMessageChange = (message, ms) => {
-      clearTimeout(timeout)
-      if (!message) {               // hide Alert if message is empty
-        visible = false
-      } else {
-        visible = true                                              // show alert
-        if (ms > 0) timeout = setTimeout(() => visible = false, ms) // and hide it after ms milliseconds
-      }
-    }
-    $: onMessageChange($alert, ms)      // whenever the alert store or the ms props changes run onMessageChange
+   const onMessageChange = (message, ms) => {
+     clearTimeout(timeout)
+     if (!message) {               // hide Alert if message is empty
+       visible = false
+     } else {
+       visible = true                                              // show alert
+       if (ms > 0) timeout = setTimeout(() => visible = false, ms) // and hide it after ms milliseconds
+     }
+   }
+   $: onMessageChange($alert, ms)      // whenever the alert store or the ms props changes run onMessageChange
 
-    onDestroy(() => clearTimeout(timeout))           // make sure we clean-up the timeout
-    ```
+   onDestroy(() => clearTimeout(timeout))           // make sure we clean-up the timeout
+   ```
 
 2. And update the `Alert.svelte` markup section like so:
 
-    ```html
-    {#if visible}
-    <div on:click={() => visible = false}>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
-      <p>{ $alert }</p>
-    </div>
-    {/if}
-    ```
+   ```html
+   {#if visible}
+   <div on:click={() => visible = false}>
+     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
+     <p>{ $alert }</p>
+   </div>
+   {/if}
+   ```
 
 Here we first create the prop `ms` with a default value of 3000 (milliseconds). Then we create an `onMessageChange()` function that will take care of controlling whether the Alert is visible or not. With `$: onMessageChange($alert, ms)` we tell Svelte to run this function whenever the `$alert` store or the `ms` prop changes.
 
@@ -410,17 +410,17 @@ First we need some way for our `Todos` component to give back the updated to-dos
 
 1. First, add the following line below your `todos` array:
 
-    ```js
-    $: console.log('todos', todos)
-    ```
+   ```js
+   $: console.log('todos', todos)
+   ```
 
 2. Next, update your `Todos` component call as follows:
 
-    ```html
-    <Todos bind:todos />
-    ```
+   ```html
+   <Todos bind:todos />
+   ```
 
-    > **Note:** `<Todos bind:todos />` is just a shortcut for `<Todos bind:todos={todos} />`.
+   > **Note:** `<Todos bind:todos />` is just a shortcut for `<Todos bind:todos={todos} />`.
 
 3. Go back to your app, try adding some to-dos, then go to your developer tools web console. You'll see that every modification we make to our to-dos is reflected in the `todos` array defined in `App.svelte` thanks to the `bind` directive.
 
@@ -433,32 +433,32 @@ So let's start by using a regular writable store to save our to-dos.
 
 1. Open the file `stores.js` and add the following store below the existing one:
 
-    ```js
-    export const todos = writable([])
-    ```
+   ```js
+   export const todos = writable([])
+   ```
 
 2. That was easy. Now we need to import the store and use it in `App.svelte`. Just remember that to access the to-dos now we have to use the `$todos` reactive `$store` syntax.
 
-    Update your `App.svelte` file like this:
+   Update your `App.svelte` file like this:
 
-    ```html
-    <script>
-      import Todos from './components/Todos.svelte'
-      import Alert from './components/Alert.svelte'
+   ```html
+   <script>
+     import Todos from './components/Todos.svelte'
+     import Alert from './components/Alert.svelte'
 
-      import { todos } from './stores.js'
+     import { todos } from './stores.js'
 
-      $todos = [
-        { id: 1, name: 'Create a Svelte starter app', completed: true },
-        { id: 2, name: 'Create your first component', completed: true },
-        { id: 3, name: 'Complete the rest of the tutorial', completed: false }
-      ]
+     $todos = [
+       { id: 1, name: 'Create a Svelte starter app', completed: true },
+       { id: 2, name: 'Create your first component', completed: true },
+       { id: 3, name: 'Complete the rest of the tutorial', completed: false }
+     ]
 
-    </script>
+   </script>
 
-    <Alert />
-    <Todos bind:todos={$todos} />
-    ```
+   <Alert />
+   <Todos bind:todos={$todos} />
+   ```
 
 3. Try it out; everything should work. Next we'll see how to define our own custom stores.
 
@@ -548,81 +548,81 @@ Moreover, because web storage only supports saving string values, we will have t
 1. Create a new file called `localStore.js`, in your `src` directory.
 2. Give it the following content:
 
-    ```js
-    import { writable } from 'svelte/store';
+   ```js
+   import { writable } from 'svelte/store';
 
-    export const localStore = (key, initial) => {                 // receives the key of the local storage and an initial value
+   export const localStore = (key, initial) => {                 // receives the key of the local storage and an initial value
 
-      const toString = (value) => JSON.stringify(value, null, 2)  // helper function
-      const toObj = JSON.parse                                    // helper function
+     const toString = (value) => JSON.stringify(value, null, 2)  // helper function
+     const toObj = JSON.parse                                    // helper function
 
-      if (localStorage.getItem(key) === null) {                   // item not present in local storage
-        localStorage.setItem(key, toString(initial))              // initialize local storage with initial value
-      }
+     if (localStorage.getItem(key) === null) {                   // item not present in local storage
+       localStorage.setItem(key, toString(initial))              // initialize local storage with initial value
+     }
 
-      const saved = toObj(localStorage.getItem(key))              // convert to object
+     const saved = toObj(localStorage.getItem(key))              // convert to object
 
-      const { subscribe, set, update } = writable(saved)          // create the underlying writable store
+     const { subscribe, set, update } = writable(saved)          // create the underlying writable store
 
-      return {
-        subscribe,
-        set: (value) => {
-          localStorage.setItem(key, toString(value))              // save also to local storage as a string
-          return set(value)
-        },
-        update
-      }
-    }
-    ```
+     return {
+       subscribe,
+       set: (value) => {
+         localStorage.setItem(key, toString(value))              // save also to local storage as a string
+         return set(value)
+       },
+       update
+     }
+   }
+   ```
 
-    - Our `localStore` will be a function that when executed initially reads its content from web storage, and returns an object with three methods: `subscribe()`, `set()`, and `update()`.
-    - When we create a new `localStore`, we'll have to specify the key of the web storage and an initial value. We then check if the value exists in web storage and, if not, we create it.
-    - We use the [`localStorage.getItem(key)`](/en-US/docs/Web/API/Storage/getItem) and [`localStorage.setItem(key, value)`](/en-US/docs/Web/API/Storage/setItem) methods to read and write information to web storage, and the [`toString()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) and `toObj()` (which uses [`JSON.parse()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)) helper functions to convert the values.
-    - Next, we convert the string content received from the web storage to an object, and save that object in our store.
-    - Finally, every time we update the contents of the store, we also update the web storage, with the value converted to a string.
+   - Our `localStore` will be a function that when executed initially reads its content from web storage, and returns an object with three methods: `subscribe()`, `set()`, and `update()`.
+   - When we create a new `localStore`, we'll have to specify the key of the web storage and an initial value. We then check if the value exists in web storage and, if not, we create it.
+   - We use the [`localStorage.getItem(key)`](/en-US/docs/Web/API/Storage/getItem) and [`localStorage.setItem(key, value)`](/en-US/docs/Web/API/Storage/setItem) methods to read and write information to web storage, and the [`toString()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) and `toObj()` (which uses [`JSON.parse()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)) helper functions to convert the values.
+   - Next, we convert the string content received from the web storage to an object, and save that object in our store.
+   - Finally, every time we update the contents of the store, we also update the web storage, with the value converted to a string.
 
-    Notice that we only had to redefine the `set()` method, adding the operation to save the value to web storage. The rest of the code is mostly initializing and converting stuff.
+   Notice that we only had to redefine the `set()` method, adding the operation to save the value to web storage. The rest of the code is mostly initializing and converting stuff.
 
 3. Now we will use our local store from `stores.js` to create our locally persisted to-dos store.
 
-    Update `stores.js` like so:
+   Update `stores.js` like so:
 
-    ```js
-    import { writable } from 'svelte/store'
-    import { localStore } from './localStore.js'
+   ```js
+   import { writable } from 'svelte/store'
+   import { localStore } from './localStore.js'
 
-    export const alert = writable('Welcome to the to-do list app!')
+   export const alert = writable('Welcome to the to-do list app!')
 
-    const initialTodos = [
-      { id: 1, name: 'Visit MDN web docs', completed: true },
-      { id: 2, name: 'Complete the Svelte Tutorial', completed: false },
-    ]
+   const initialTodos = [
+     { id: 1, name: 'Visit MDN web docs', completed: true },
+     { id: 2, name: 'Complete the Svelte Tutorial', completed: false },
+   ]
 
-    export const todos = localStore('mdn-svelte-todo', initialTodos)
-    ```
+   export const todos = localStore('mdn-svelte-todo', initialTodos)
+   ```
 
-    Using `localStore('mdn-svelte-todo', initialTodos)`, we are configuring the store to save the data in web storage under the key `mdn-svelte-todo`. We also set a couple of todos as initial values.
+   Using `localStore('mdn-svelte-todo', initialTodos)`, we are configuring the store to save the data in web storage under the key `mdn-svelte-todo`. We also set a couple of todos as initial values.
 
 4. Now let's get rid of the hardcoded to-dos in `App.svelte`. Update its contents as follows. We are basically just deleting the `$todos` array and the `console.log()` statements:
 
-    ```html
-    <script>
-      import Todos from './components/Todos.svelte'
-      import Alert from './components/Alert.svelte'
+   ```html
+   <script>
+     import Todos from './components/Todos.svelte'
+     import Alert from './components/Alert.svelte'
 
-      import { todos } from './stores.js'
-    </script>
+     import { todos } from './stores.js'
+   </script>
 
-    <Alert />
-    <Todos bind:todos={$todos} />
-    ```
+   <Alert />
+   <Todos bind:todos={$todos} />
+   ```
 
-    > **Note:** This is the only change we have to make in order to use our custom store. `App.svelte` is completely transparent in terms of what kind of store we are using.
+   > **Note:** This is the only change we have to make in order to use our custom store. `App.svelte` is completely transparent in terms of what kind of store we are using.
 
 5. Go ahead and try your app again. Create a few to-dos and then close the browser. You may even stop the Svelte server and restart it. Upon revisiting the URL, your to-dos will still be there.
 6. You can also inspect it in the DevTools console. In the web console, enter the command `localStorage.getItem('mdn-svelte-todo')`. Make some changes to your app, like pressing the _Uncheck All_ button, and check the web storage content once more. You will get something like this:
 
-    ![to-do app with web console view alongside it, showing that when a to-do is changed in the app, the corresponding entry is changed in web storage](03-persisting-todos-to-local-storage.png)
+   ![to-do app with web console view alongside it, showing that when a to-do is changed in the app, the corresponding entry is changed in web storage](03-persisting-todos-to-local-storage.png)
 
 Svelte stores provide a very simple and lightweight, but extremely powerful, way to handle complex app state from a global data store in a reactive way. And because Svelte compiles our code, it can provide the [`$store` auto-subscription syntax](https://svelte.dev/docs#4_Prefix_stores_with_%24_to_access_their_values) that allows us to work with stores in the same way as local variables. Because stores have a minimal API, it's very simple to create our custom stores to abstract away the inner workings of the store itself.
 
@@ -636,27 +636,27 @@ Let's give our `Alert` component a fly `transition`. We'll open the `Alert.svelt
 
 1. Put the following `import` statement below the existing ones:
 
-    ```js
-    import { fly } from 'svelte/transition'
-    ```
+   ```js
+   import { fly } from 'svelte/transition'
+   ```
 
 2. To use it, update your opening `<div>` tag like so:
 
-    ```html
-    <div role="alert" on:click={() => visible = false}
-      transition:fly
-    >
-    ```
+   ```html
+   <div role="alert" on:click={() => visible = false}
+     transition:fly
+   >
+   ```
 
-    Transitions can also receive parameters, like this:
+   Transitions can also receive parameters, like this:
 
-    ```html
-    <div role="alert" on:click={() => visible = false}
-      transition:fly="\{{delay: 250, duration: 300, x: 0, y: -100, opacity: 0.5}}"
-    >
-    ```
+   ```html
+   <div role="alert" on:click={() => visible = false}
+     transition:fly="\{{delay: 250, duration: 300, x: 0, y: -100, opacity: 0.5}}"
+   >
+   ```
 
-    > **Note:** The double curly braces are not special Svelte syntax. It's just a literal JavaScript object being passed as a parameter to the fly transition.
+   > **Note:** The double curly braces are not special Svelte syntax. It's just a literal JavaScript object being passed as a parameter to the fly transition.
 
 3. Try your app out again, and you'll see that the notifications now look a bit more appealing.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
index 4dfa94749cca80c..40b364aed7c3add 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
@@ -105,41 +105,41 @@ Let's create a `Todos.svelte` component. This will contain our list of to-dos.
 
 1. Create a new folder — `src/components`.
 
-    > **Note:** You can put your components anywhere inside the `src` folder, but the `components` folder is a recognized convention to follow, allowing you to find your components easily.
+   > **Note:** You can put your components anywhere inside the `src` folder, but the `components` folder is a recognized convention to follow, allowing you to find your components easily.
 
 2. Create a file named `src/components/Todos.svelte` with the following content:
 
-    ```html
-    <h1>Svelte to-do list</h1>
-    ```
+   ```html
+   <h1>Svelte to-do list</h1>
+   ```
 
 3. Change the `title` element in `public/index.html` to contain the text _Svelte to-do list_:
 
-    ```html
-    <title>Svelte to-do list</title>
-    ```
+   ```html
+   <title>Svelte to-do list</title>
+   ```
 
 4. Open `src/App.svelte` and replace its contents with the following:
 
-    ```html
-    <script>
-      import Todos from './components/Todos.svelte'
-    </script>
+   ```html
+   <script>
+     import Todos from './components/Todos.svelte'
+   </script>
 
-    <Todos />
-    ```
+   <Todos />
+   ```
 
 5. In development mode, Svelte will issue a warning in the browser console when specifying a prop that doesn't exist in the component; in this case we have a `name` prop being specified when we instantiate the `App` component inside `src/main.js`, which isn't used inside `App`. The console should currently give you a message along the lines of "\<App> was created with unknown prop 'name'". To get rid of this, remove the `name` prop from `src/main.js`; it should now look like so:
 
-    ```js
-    import App from './App.svelte'
+   ```js
+   import App from './App.svelte'
 
-    const app = new App({
-      target: document.body
-    })
+   const app = new App({
+     target: document.body
+   })
 
-    export default app
-    ```
+   export default app
+   ```
 
 Now if you check your testing server URL you'll see our `Todos.svelte` component being rendered:
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md
index 2d98043db3a0195..7ece33eace5040a 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md
@@ -228,43 +228,43 @@ We'll define a `TodoType` type to see how TypeScript enforces that anything pass
 2. Add a `todo.type.ts` file inside it.
 3. Give `todo.type.ts` the following content:
 
-    ```ts
-    export type TodoType = {
-      id: number
-      name: string
-      completed: boolean
-    }
-    ```
+   ```ts
+   export type TodoType = {
+     id: number
+     name: string
+     completed: boolean
+   }
+   ```
 
-    > **Note:** The Svelte template uses [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) 4.0.0 to support TypeScript. From that version onward you have to use `export`/`import` type syntax to import types and interfaces. Check [this section of the troubleshooting guide](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#how-do-i-import-interfaces-into-my-svelte-components-i-get-errors-after-transpilation) for more information.
+   > **Note:** The Svelte template uses [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) 4.0.0 to support TypeScript. From that version onward you have to use `export`/`import` type syntax to import types and interfaces. Check [this section of the troubleshooting guide](https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#how-do-i-import-interfaces-into-my-svelte-components-i-get-errors-after-transpilation) for more information.
 
 4. Now we'll use `TodoType` from our `Todo.svelte` component. First add the `lang="ts"` to our `<script>` tag.
 5. Let's `import` the type and use it to declare the `todo` property. Replace the `export let todo` line with the following:
 
-    ```ts
-    import type { TodoType } from "../types/todo.type";
+   ```ts
+   import type { TodoType } from "../types/todo.type";
 
-    export let todo: TodoType;
-    ```
+   export let todo: TodoType;
+   ```
 
-    > **Note:** Another reminder: When importing a `.ts` file, you have to omit the extension. Check the [`import` section](https://www.typescriptlang.org/docs/handbook/modules.html#import) of the TypeScript manual for more information.
+   > **Note:** Another reminder: When importing a `.ts` file, you have to omit the extension. Check the [`import` section](https://www.typescriptlang.org/docs/handbook/modules.html#import) of the TypeScript manual for more information.
 
 6. Now from `Todos.svelte` we will instantiate a `Todo` component with a literal object as its parameter before the call to the `MoreActions` component, like this:
 
-    ```html
-    <hr />
+   ```html
+   <hr />
 
-    <Todo todo={ { name: 'a new task with no id!', completed: false } } />
+   <Todo todo={ { name: 'a new task with no id!', completed: false } } />
 
-    <!-- MoreActions -->
-    <MoreActions {todos}
-    ```
+   <!-- MoreActions -->
+   <MoreActions {todos}
+   ```
 
 7. Add the `lang='ts'` to the `<script>` tag of the `Todos.svelte` component so that it knows to use the type checking we have specified.
 
-    We will get the following error:
+   We will get the following error:
 
-    ![type error in vscode, Todo Type object requires an id property.](08-vscode-structural-typing.png)
+   ![type error in vscode, Todo Type object requires an id property.](08-vscode-structural-typing.png)
 
 By now you should get an idea about the kind of assistance we can get from TypeScript when building Svelte projects.
 
@@ -306,45 +306,45 @@ Let's start with our `Alert.svelte` component.
 
 1. Add `lang="ts"` into your `Alert.svelte` component's `<script>` tag. You'll see some warnings in the output of the `check` script:
 
-    ```bash
-    $ npm run check -- --watch
-    > svelte-check "--watch"
+   ```bash
+   $ npm run check -- --watch
+   > svelte-check "--watch"
 
-    ./svelte-todo-typescript
-    Getting Svelte diagnostics...
-    ====================================
+   ./svelte-todo-typescript
+   Getting Svelte diagnostics...
+   ====================================
 
-    ./svelte-todo-typescript/src/components/Alert.svelte:8:7
-    Warn: Variable 'visible' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
-      let visible
+   ./svelte-todo-typescript/src/components/Alert.svelte:8:7
+   Warn: Variable 'visible' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
+     let visible
 
-    ./svelte-todo-typescript/src/components/Alert.svelte:9:7
-    Warn: Variable 'timeout' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
-      let timeout
+   ./svelte-todo-typescript/src/components/Alert.svelte:9:7
+   Warn: Variable 'timeout' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
+     let timeout
 
-    ./svelte-todo-typescript/src/components/Alert.svelte:11:28
-    Warn: Parameter 'message' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
-    Change = (message, ms) => {
+   ./svelte-todo-typescript/src/components/Alert.svelte:11:28
+   Warn: Parameter 'message' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
+   Change = (message, ms) => {
 
-    ./svelte-todo-typescript/src/components/Alert.svelte:11:37
-    Warn: Parameter 'ms' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
-    (message, ms) => {
-    ```
+   ./svelte-todo-typescript/src/components/Alert.svelte:11:37
+   Warn: Parameter 'ms' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
+   (message, ms) => {
+   ```
 
 2. You can fix these by specifying the corresponding types, like so:
 
-    ```ts
-    export let ms = 3000
+   ```ts
+   export let ms = 3000
 
-      let visible: boolean
-      let timeout: number
+     let visible: boolean
+     let timeout: number
 
-      const onMessageChange = (message: string, ms: number) => {
-        clearTimeout(timeout)
-        if (!message) {               // hide Alert if message is empty
-    ```
+     const onMessageChange = (message: string, ms: number) => {
+       clearTimeout(timeout)
+       if (!message) {               // hide Alert if message is empty
+   ```
 
-    > **Note:** There's no need to specify the `ms` type with `export let ms:number = 3000`, because TypeScript is already inferring it from its default value.
+   > **Note:** There's no need to specify the `ms` type with `export let ms:number = 3000`, because TypeScript is already inferring it from its default value.
 
 ### MoreActions.svelte
 
@@ -352,21 +352,21 @@ Now we'll do the same for the `MoreActions.svelte` component.
 
 1. Add the `lang='ts'` attribute, like before. TypeScript will warn us about the `todos` prop and the `t` variable in the call to `todos.filter((t) =>...)`.
 
-    ```
-    Warn: Variable 'todos' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
-      export let todos
+   ```
+   Warn: Variable 'todos' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
+     export let todos
 
-    Warn: Parameter 't' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
-      $: completedTodos = todos.filter((t) => t.completed).length
-    ```
+   Warn: Parameter 't' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
+     $: completedTodos = todos.filter((t) => t.completed).length
+   ```
 
 2. We will use the `TodoType` we already defined to tell TypeScript that `todos` is a `TodoType` array. Replace the `export let todos` line with the following:
 
-    ```ts
-    import type { TodoType } from "../types/todo.type";
+   ```ts
+   import type { TodoType } from "../types/todo.type";
 
-    export let todos: TodoType[];
-    ```
+   export let todos: TodoType[];
+   ```
 
 Notice that now TypeScript can infer that the `t` variable in `todos.filter((t) => t.completed)` is of type `TodoType`. Nevertheless, if we think it makes our code easier to read, we could specify it like this:
 
@@ -391,42 +391,42 @@ Now we'll take care of the `FilterButton` component.
 2. Create a `filter.enum.ts` file in the `types` folder.
 3. Give it the following contents:
 
-    ```ts
-    export enum Filter {
-      ALL = 'all',
-      ACTIVE = 'active',
-      COMPLETED = 'completed',
-    }
-    ```
+   ```ts
+   export enum Filter {
+     ALL = 'all',
+     ACTIVE = 'active',
+     COMPLETED = 'completed',
+   }
+   ```
 
 4. Now we will use this from the `FilterButton` component. Replace the content of the `FilterButton.svelte` file with the following:
 
-    ```html
-    <!-- components/FilterButton.svelte -->
-    <script lang='ts'>
-      import { Filter } from '../types/filter.enum'
-
-      export let filter: Filter = Filter.ALL
-    </script>
-
-    <div class="filters btn-group stack-exception">
-      <button class="btn toggle-btn" class:btn__primary={filter === Filter.ALL} aria-pressed={filter === Filter.ALL} on:click={() => filter = Filter.ALL} >
-        <span class="visually-hidden">Show</span>
-        <span>All</span>
-        <span class="visually-hidden">tasks</span>
-      </button>
-      <button class="btn toggle-btn" class:btn__primary={filter === Filter.ACTIVE} aria-pressed={filter === Filter.ACTIVE} on:click={() => filter = Filter.ACTIVE} >
-        <span class="visually-hidden">Show</span>
-        <span>Active</span>
-        <span class="visually-hidden">tasks</span>
-      </button>
-      <button class="btn toggle-btn" class:btn__primary={filter === Filter.COMPLETED} aria-pressed={filter === Filter.COMPLETED} on:click={() => filter = Filter.COMPLETED} >
-        <span class="visually-hidden">Show</span>
-        <span>Completed</span>
-        <span class="visually-hidden">tasks</span>
-      </button>
-    </div>
-    ```
+   ```html
+   <!-- components/FilterButton.svelte -->
+   <script lang='ts'>
+     import { Filter } from '../types/filter.enum'
+
+     export let filter: Filter = Filter.ALL
+   </script>
+
+   <div class="filters btn-group stack-exception">
+     <button class="btn toggle-btn" class:btn__primary={filter === Filter.ALL} aria-pressed={filter === Filter.ALL} on:click={() => filter = Filter.ALL} >
+       <span class="visually-hidden">Show</span>
+       <span>All</span>
+       <span class="visually-hidden">tasks</span>
+     </button>
+     <button class="btn toggle-btn" class:btn__primary={filter === Filter.ACTIVE} aria-pressed={filter === Filter.ACTIVE} on:click={() => filter = Filter.ACTIVE} >
+       <span class="visually-hidden">Show</span>
+       <span>Active</span>
+       <span class="visually-hidden">tasks</span>
+     </button>
+     <button class="btn toggle-btn" class:btn__primary={filter === Filter.COMPLETED} aria-pressed={filter === Filter.COMPLETED} on:click={() => filter = Filter.COMPLETED} >
+       <span class="visually-hidden">Show</span>
+       <span>Completed</span>
+       <span class="visually-hidden">tasks</span>
+     </button>
+   </div>
+   ```
 
 Here we are just importing the `Filter` enum and using it instead of the string values we used previously.
 
@@ -437,107 +437,107 @@ We will also use the `Filter` enum in the `Todos.svelte` component.
 1. First, add the `lang='ts'` attribute to it, as before.
 2. Next, import the `Filter` enum. Add the following `import` statement below your existing ones:
 
-    ```js
-    import { Filter } from "../types/filter.enum";
-    ```
+   ```js
+   import { Filter } from "../types/filter.enum";
+   ```
 
 3. Now we will use it whenever we reference the current filter. Replace your two filter-related blocks with the following:
 
-    ```ts
-    let filter: Filter = Filter.ALL;
-    const filterTodos = (filter: Filter, todos) =>
-      filter === Filter.ACTIVE
-        ? todos.filter((t) => !t.completed)
-        : filter === Filter.COMPLETED
-        ? todos.filter((t) => t.completed)
-        : todos;
-
-    $: {
-      if (filter === Filter.ALL) {
-        $alert = "Browsing all todos";
-      } else if (filter === Filter.ACTIVE) {
-        $alert = "Browsing active todos";
-      } else if (filter === Filter.COMPLETED) {
-        $alert = "Browsing completed todos";
-      }
-    }
-    ```
+   ```ts
+   let filter: Filter = Filter.ALL;
+   const filterTodos = (filter: Filter, todos) =>
+     filter === Filter.ACTIVE
+       ? todos.filter((t) => !t.completed)
+       : filter === Filter.COMPLETED
+       ? todos.filter((t) => t.completed)
+       : todos;
+
+   $: {
+     if (filter === Filter.ALL) {
+       $alert = "Browsing all todos";
+     } else if (filter === Filter.ACTIVE) {
+       $alert = "Browsing active todos";
+     } else if (filter === Filter.COMPLETED) {
+       $alert = "Browsing completed todos";
+     }
+   }
+   ```
 
 4. `check` will still give us some warnings from `Todos.svelte`. Let's fix them.
 
-    Start by importing the `TodoType` and telling TypeScript that our `todos` variable is an array of `TodoType`. Replace `export let todos = []` with the following two lines:
+   Start by importing the `TodoType` and telling TypeScript that our `todos` variable is an array of `TodoType`. Replace `export let todos = []` with the following two lines:
 
-    ```ts
-    import type { TodoType } from "../types/todo.type";
+   ```ts
+   import type { TodoType } from "../types/todo.type";
 
-    export let todos: TodoType[] = [];
-    ```
+   export let todos: TodoType[] = [];
+   ```
 
 5. Next we'll specify all the missing types. The variable `todosStatus`, which we used to programmatically access the methods exposed by the `TodosStatus` component, is of type `TodosStatus`. And each `todo` will be of type `TodoType`.
 
-    Update your `<script>` section to look like this:
-
-    ```ts
-    import FilterButton from './FilterButton.svelte'
-    import Todo from './Todo.svelte'
-    import MoreActions from './MoreActions.svelte'
-    import NewTodo from './NewTodo.svelte'
-    import TodosStatus from './TodosStatus.svelte'
-    import { alert } from '../stores'
-
-    import { Filter } from '../types/filter.enum'
-
-    import type { TodoType } from '../types/todo.type'
-
-    export let todos: TodoType[] = []
-
-    let todosStatus: TodosStatus                   // reference to TodosStatus instance
-
-    $: newTodoId = todos.length > 0 ? Math.max(...todos.map((t) => t.id)) + 1 : 1
-
-    function addTodo(name: string) {
-      todos = [...todos, { id: newTodoId, name, completed: false }]
-      $alert = `Todo '${name}' has been added`
-    }
-
-    function removeTodo(todo: TodoType) {
-      todos = todos.filter((t) => t.id !== todo.id)
-      todosStatus.focus()             // give focus to status heading
-      $alert = `Todo '${todo.name}' has been deleted`
-    }
-
-    function updateTodo(todo: TodoType) {
-      const i = todos.findIndex((t) => t.id === todo.id)
-      if (todos[i].name !== todo.name)            $alert = `todo '${todos[i].name}' has been renamed to '${todo.name}'`
-      if (todos[i].completed !== todo.completed)  $alert = `todo '${todos[i].name}' marked as ${todo.completed ? 'completed' : 'active'}`
-      todos[i] = { ...todos[i], ...todo }
-    }
-
-    let filter: Filter = Filter.ALL
-    const filterTodos = (filter: Filter, todos: TodoType[]) =>
-      filter === Filter.ACTIVE ? todos.filter((t) => !t.completed) :
-      filter === Filter.COMPLETED ? todos.filter((t) => t.completed) :
-      todos
-
-    $: {
-      if (filter === Filter.ALL) {
-        $alert = 'Browsing all todos';
-      } else if (filter === Filter.ACTIVE) {
-        $alert = 'Browsing active todos';
-      } else if (filter === Filter.COMPLETED) {
-        $alert = 'Browsing completed todos';
-      }
-    }
-
-    const checkAllTodos = (completed: boolean) => {
-      todos = todos.map((t) => ({...t, completed}))
-      $alert = `${completed ? 'Checked' : 'Unchecked'} ${todos.length} todos`
-    }
-    const removeCompletedTodos = () => {
-      $alert = `Removed ${todos.filter((t) => t.completed).length} todos`
-      todos = todos.filter((t) => !t.completed)
-    }
-    ```
+   Update your `<script>` section to look like this:
+
+   ```ts
+   import FilterButton from './FilterButton.svelte'
+   import Todo from './Todo.svelte'
+   import MoreActions from './MoreActions.svelte'
+   import NewTodo from './NewTodo.svelte'
+   import TodosStatus from './TodosStatus.svelte'
+   import { alert } from '../stores'
+
+   import { Filter } from '../types/filter.enum'
+
+   import type { TodoType } from '../types/todo.type'
+
+   export let todos: TodoType[] = []
+
+   let todosStatus: TodosStatus                   // reference to TodosStatus instance
+
+   $: newTodoId = todos.length > 0 ? Math.max(...todos.map((t) => t.id)) + 1 : 1
+
+   function addTodo(name: string) {
+     todos = [...todos, { id: newTodoId, name, completed: false }]
+     $alert = `Todo '${name}' has been added`
+   }
+
+   function removeTodo(todo: TodoType) {
+     todos = todos.filter((t) => t.id !== todo.id)
+     todosStatus.focus()             // give focus to status heading
+     $alert = `Todo '${todo.name}' has been deleted`
+   }
+
+   function updateTodo(todo: TodoType) {
+     const i = todos.findIndex((t) => t.id === todo.id)
+     if (todos[i].name !== todo.name)            $alert = `todo '${todos[i].name}' has been renamed to '${todo.name}'`
+     if (todos[i].completed !== todo.completed)  $alert = `todo '${todos[i].name}' marked as ${todo.completed ? 'completed' : 'active'}`
+     todos[i] = { ...todos[i], ...todo }
+   }
+
+   let filter: Filter = Filter.ALL
+   const filterTodos = (filter: Filter, todos: TodoType[]) =>
+     filter === Filter.ACTIVE ? todos.filter((t) => !t.completed) :
+     filter === Filter.COMPLETED ? todos.filter((t) => t.completed) :
+     todos
+
+   $: {
+     if (filter === Filter.ALL) {
+       $alert = 'Browsing all todos';
+     } else if (filter === Filter.ACTIVE) {
+       $alert = 'Browsing active todos';
+     } else if (filter === Filter.COMPLETED) {
+       $alert = 'Browsing completed todos';
+     }
+   }
+
+   const checkAllTodos = (completed: boolean) => {
+     todos = todos.map((t) => ({...t, completed}))
+     $alert = `${completed ? 'Checked' : 'Unchecked'} ${todos.length} todos`
+   }
+   const removeCompletedTodos = () => {
+     $alert = `Removed ${todos.filter((t) => t.completed).length} todos`
+     todos = todos.filter((t) => !t.completed)
+   }
+   ```
 
 ### TodosStatus.svelte
 
@@ -560,31 +560,31 @@ Let's fix it.
 1. Open the file `TodosStatus.svelte` and add the `lang='ts'` attribute.
 2. Then import the `TodoType` and declare the `todos` prop as an array of `TodoType`. Replace the first line of the `<script>` section with the following:
 
-    ```ts
-    import type { TodoType } from "../types/todo.type";
+   ```ts
+   import type { TodoType } from "../types/todo.type";
 
-    export let todos: TodoType[];
-    ```
+   export let todos: TodoType[];
+   ```
 
 3. We will also specify the `headingEl`, which we used to bind to the heading tag, as an `HTMLElement`. Update the `let headingEl` line with the following:
 
-    ```ts
-    let headingEl: HTMLElement;
-    ```
+   ```ts
+   let headingEl: HTMLElement;
+   ```
 
 4. Finally, you'll notice the following error reported, related to where we set the `tabindex` attribute. That's because TypeScript is type checking the `<h2>` element and expects `tabindex` to be of type `number`.
 
-    ![tabindex hint inside vs code, tabindex expects a type of number, not string](10-vscode-tabindex-hint.png)
+   ![tabindex hint inside vs code, tabindex expects a type of number, not string](10-vscode-tabindex-hint.png)
 
-    To fix it, replace `tabindex="-1"` with `tabindex={-1}`, like this:
+   To fix it, replace `tabindex="-1"` with `tabindex={-1}`, like this:
 
-    ```html
-    <h2 id="list-heading" bind:this="{headingEl}" tabindex="{-1}">
-      {completedTodos} out of {totalTodos} items completed
-    </h2>
-    ```
+   ```html
+   <h2 id="list-heading" bind:this="{headingEl}" tabindex="{-1}">
+     {completedTodos} out of {totalTodos} items completed
+   </h2>
+   ```
 
-    This way TypeScript can prevent us from incorrectly assigning it to a string variable.
+   This way TypeScript can prevent us from incorrectly assigning it to a string variable.
 
 ### NewTodo.svelte
 
@@ -593,15 +593,15 @@ Next we will take care of `NewTodo.svelte`.
 1. As usual, add the `lang='ts'` attribute.
 2. The warning will indicate that we have to specify a type for the `nameEl` variable. Set its type to `HTMLElement` like this:
 
-    ```ts
-    let nameEl: HTMLElement; // reference to the name input DOM node
-    ```
+   ```ts
+   let nameEl: HTMLElement; // reference to the name input DOM node
+   ```
 
 3. Last for this file, we need to specify the correct type for our `autofocus` variable. Update its definition like this:
 
-    ```ts
-    export let autofocus: boolean = false;
-    ```
+   ```ts
+   export let autofocus: boolean = false;
+   ```
 
 ### Todo.svelte
 
@@ -610,40 +610,40 @@ Now the only warnings that `npm run check` emits are triggered by calling the `T
 1. Open the `Todo.svelte` file, and add the `lang='ts'` attribute.
 2. Let's import the `TodoType`, and set the type of the `todo` prop. Replace the `export let todo` line with the following:
 
-    ```ts
-    import type { TodoType } from "../types/todo.type";
+   ```ts
+   import type { TodoType } from "../types/todo.type";
 
-    export let todo: TodoType;
-    ```
+   export let todo: TodoType;
+   ```
 
 3. The first warning we get is TypeScript telling us to define the type of the `update()` function's `updatedTodo` variable. This can be a little tricky because `updatedTodo` contains only the attributes of the `todo` that have been updated. That means it's not a complete `todo` — it only has a subset of a `todo`'s properties.
 
-    For these kinds of cases, TypeScript provides several [utility types](https://www.typescriptlang.org/docs/handbook/utility-types.html) to make it easier to apply these common transformations. What we need right now is the [`Partial<T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialt) utility, which allows us to represent all subsets of a given type. The partial utility returns a new type based on the type `T`, where every property of `T` is optional.
+   For these kinds of cases, TypeScript provides several [utility types](https://www.typescriptlang.org/docs/handbook/utility-types.html) to make it easier to apply these common transformations. What we need right now is the [`Partial<T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialt) utility, which allows us to represent all subsets of a given type. The partial utility returns a new type based on the type `T`, where every property of `T` is optional.
 
-    We'll use it in the `update()` function — update yours like so:
+   We'll use it in the `update()` function — update yours like so:
 
-    ```ts
-    function update(updatedTodo: Partial<TodoType>) {
-      todo = { ...todo, ...updatedTodo }; // applies modifications to todo
-      dispatch("update", todo); // emit update event
-    }
-    ```
+   ```ts
+   function update(updatedTodo: Partial<TodoType>) {
+     todo = { ...todo, ...updatedTodo }; // applies modifications to todo
+     dispatch("update", todo); // emit update event
+   }
+   ```
 
-    With this we are telling TypeScript that the `updatedTodo` variable will hold a subset of the `TodoType` properties.
+   With this we are telling TypeScript that the `updatedTodo` variable will hold a subset of the `TodoType` properties.
 
 4. Now svelte-check tells us that we have to define the type of our action function parameters:
 
-    ```bash
-    ./07-next-steps/src/components/Todo.svelte:45:24
-    Warn: Parameter 'node' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
-      const focusOnInit = (node) => node && typeof node.focus === 'function' && node.focus()
+   ```bash
+   ./07-next-steps/src/components/Todo.svelte:45:24
+   Warn: Parameter 'node' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
+     const focusOnInit = (node) => node && typeof node.focus === 'function' && node.focus()
 
-    ./07-next-steps/src/components/Todo.svelte:47:28
-    Warn: Parameter 'node' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
-      const focusEditButton = (node) => editButtonPressed && node.focus()
-    ```
+   ./07-next-steps/src/components/Todo.svelte:47:28
+   Warn: Parameter 'node' implicitly has an 'any' type, but a better type may be inferred from usage. (ts)
+     const focusEditButton = (node) => editButtonPressed && node.focus()
+   ```
 
-    We just have to define the node variable to be of type `HTMLElement`. In the two lines indicated above, replace the first instance of `node` with `node: HTMLElement`.
+   We just have to define the node variable to be of type `HTMLElement`. In the two lines indicated above, replace the first instance of `node` with `node: HTMLElement`.
 
 ### actions.js
 
@@ -651,25 +651,25 @@ Next we'll take care of the `actions.js` file.
 
 1. Rename it to `actions.ts` and add the type of the node parameter. It should end up looking like this:
 
-    ```ts
-    // actions.ts
-    export function selectOnFocus(node: HTMLInputElement) {
-      if (node && typeof node.select === "function") {
-        // make sure node is defined and has a select() method
-        const onFocus = () => node.select(); // event handler
-        node.addEventListener("focus", onFocus); // when node gets focus call onFocus()
-        return {
-          destroy: () => node.removeEventListener("focus", onFocus), // this will be executed when the node is removed from the DOM
-        };
-      }
-    }
-    ```
+   ```ts
+   // actions.ts
+   export function selectOnFocus(node: HTMLInputElement) {
+     if (node && typeof node.select === "function") {
+       // make sure node is defined and has a select() method
+       const onFocus = () => node.select(); // event handler
+       node.addEventListener("focus", onFocus); // when node gets focus call onFocus()
+       return {
+         destroy: () => node.removeEventListener("focus", onFocus), // this will be executed when the node is removed from the DOM
+       };
+     }
+   }
+   ```
 
 2. Now update `Todo.svelte` and `NewTodo.svelte` where we import the actions file. Remember that imports in TypeScript don't include the file extension. In each case it should end up like this:
 
-    ```js
-    import { selectOnFocus } from "../actions";
-    ```
+   ```js
+   import { selectOnFocus } from "../actions";
+   ```
 
 ### Migrating the stores to TypeScript
 
@@ -682,27 +682,27 @@ We'll start with `stores.js`.
 1. Rename the file to `stores.ts`.
 2. Set the type of our `initialTodos` array to `TodoType[]`. This is how the contents will end up:
 
-    ```ts
-    // stores.ts
-    import { writable } from "svelte/store";
-    import { localStore } from "./localStore.js";
-    import type { TodoType } from "./types/todo.type";
+   ```ts
+   // stores.ts
+   import { writable } from "svelte/store";
+   import { localStore } from "./localStore.js";
+   import type { TodoType } from "./types/todo.type";
 
-    export const alert = writable("Welcome to the To-Do list app!");
+   export const alert = writable("Welcome to the To-Do list app!");
 
-    const initialTodos: TodoType[] = [
-      { id: 1, name: "Visit MDN web docs", completed: true },
-      { id: 2, name: "Complete the Svelte Tutorial", completed: false },
-    ];
+   const initialTodos: TodoType[] = [
+     { id: 1, name: "Visit MDN web docs", completed: true },
+     { id: 2, name: "Complete the Svelte Tutorial", completed: false },
+   ];
 
-    export const todos = localStore("mdn-svelte-todo", initialTodos);
-    ```
+   export const todos = localStore("mdn-svelte-todo", initialTodos);
+   ```
 
 3. Remember to update the `import` statements in `App.svelte`, `Alert.svelte`, and `Todos.svelte`. Just remove the `.js` extension, like this:
 
-    ```js
-    import { todos } from "../stores";
-    ```
+   ```js
+   import { todos } from "../stores";
+   ```
 
 Now onto `localStore.js`.
 
@@ -715,59 +715,59 @@ import { localStore } from "./localStore";
 1. Start by renaming the file to `localStore.ts`.
 2. TypeScript is telling us to specify the type of the `key`, `initial`, and `value` variables. The first one is easy: the key of our local web storage should be a string.
 
-    But `initial` and `value` should be any object that could be converted to a valid JSON string with the [`JSON.stringify`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) method, meaning any JavaScript object with a couple limitations: for example, `undefined`, functions, and symbols are not valid JSON values.
+   But `initial` and `value` should be any object that could be converted to a valid JSON string with the [`JSON.stringify`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) method, meaning any JavaScript object with a couple limitations: for example, `undefined`, functions, and symbols are not valid JSON values.
 
-    So we'll create the type `JsonValue` to specify these conditions.
+   So we'll create the type `JsonValue` to specify these conditions.
 
-    Create the file `json.type.ts` in the `types` folder.
+   Create the file `json.type.ts` in the `types` folder.
 
 3. Give it the following content:
 
-    ```ts
-    export type JsonValue =
-      | string
-      | number
-      | boolean
-      | null
-      | JsonValue[]
-      | { [key: string]: JsonValue };
-    ```
+   ```ts
+   export type JsonValue =
+     | string
+     | number
+     | boolean
+     | null
+     | JsonValue[]
+     | { [key: string]: JsonValue };
+   ```
 
-    The `|` operator lets us declare variables that could store values of two or more types. A `JsonValue` could be a string, a number, a boolean, and so on. In this case we are also making use of recursive types to specify that a `JsonValue` can have an array of `JsonValue` and also an object with properties of type `JsonValue`.
+   The `|` operator lets us declare variables that could store values of two or more types. A `JsonValue` could be a string, a number, a boolean, and so on. In this case we are also making use of recursive types to specify that a `JsonValue` can have an array of `JsonValue` and also an object with properties of type `JsonValue`.
 
 4. We will import our `JsonValue` type and use it accordingly. Update your `localStore.ts` file like this:
 
-    ```ts
-    // localStore.ts
-    import { writable } from "svelte/store";
+   ```ts
+   // localStore.ts
+   import { writable } from "svelte/store";
 
-    import type { JsonValue } from "./types/json.type";
+   import type { JsonValue } from "./types/json.type";
 
-    export const localStore = (key: string, initial: JsonValue) => {
-      // receives the key of the local storage and an initial value
+   export const localStore = (key: string, initial: JsonValue) => {
+     // receives the key of the local storage and an initial value
 
-      const toString = (value: JsonValue) => JSON.stringify(value, null, 2); // helper function
-      const toObj = JSON.parse; // helper function
+     const toString = (value: JsonValue) => JSON.stringify(value, null, 2); // helper function
+     const toObj = JSON.parse; // helper function
 
-      if (localStorage.getItem(key) === null) {
-        // item not present in local storage
-        localStorage.setItem(key, toString(initial)); // initialize local storage with initial value
-      }
+     if (localStorage.getItem(key) === null) {
+       // item not present in local storage
+       localStorage.setItem(key, toString(initial)); // initialize local storage with initial value
+     }
 
-      const saved = toObj(localStorage.getItem(key)); // convert to object
+     const saved = toObj(localStorage.getItem(key)); // convert to object
 
-      const { subscribe, set, update } = writable(saved); // create the underlying writable store
+     const { subscribe, set, update } = writable(saved); // create the underlying writable store
 
-      return {
-        subscribe,
-        set: (value: JsonValue) => {
-          localStorage.setItem(key, toString(value)); // save also to local storage as a string
-          return set(value);
-        },
-        update,
-      };
-    };
-    ```
+     return {
+       subscribe,
+       set: (value: JsonValue) => {
+         localStorage.setItem(key, toString(value)); // save also to local storage as a string
+         return set(value);
+       },
+       update,
+     };
+   };
+   ```
 
 Now if we try to create a `localStore` with something that cannot be converted to JSON via `JSON.stringify()`, for example an object with a function as a property, VS Code/`validate` will complain about it:
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
index 17b3db70799038c..5c00d0fedb303c3 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
@@ -89,25 +89,25 @@ The state of our component will be represented by these three top-level variable
 
 1. Create a `<script>` section at the top of `src/components/Todos.svelte` and give it some content, as follows:
 
-    ```html
-    <script>
-      let todos = [
-        { id: 1, name: 'Create a Svelte starter app', completed: true },
-        { id: 2, name: 'Create your first component', completed: true },
-        { id: 3, name: 'Complete the rest of the tutorial', completed: false }
-      ]
-      let totalTodos = todos.length
-      let completedTodos = todos.filter((todo) => todo.completed).length
-    </script>
-    ```
-
-    Now let's do something with that information.
+   ```html
+   <script>
+     let todos = [
+       { id: 1, name: 'Create a Svelte starter app', completed: true },
+       { id: 2, name: 'Create your first component', completed: true },
+       { id: 3, name: 'Complete the rest of the tutorial', completed: false }
+     ]
+     let totalTodos = todos.length
+     let completedTodos = todos.filter((todo) => todo.completed).length
+   </script>
+   ```
+
+   Now let's do something with that information.
 
 2. Let's start by showing a status message. Find the `<h2>` heading with an `id` of `list-heading` and replace the hardcoded number of active and completed tasks with dynamic expressions:
 
-    ```html
-    <h2 id="list-heading">{completedTodos} out of {totalTodos} items completed</h2>
-    ```
+   ```html
+   <h2 id="list-heading">{completedTodos} out of {totalTodos} items completed</h2>
+   ```
 
 3. Go to the app, and you should see the "2 out of 3 items completed" message as before, but this time the information is coming from the `todos` array.
 4. To prove it, go to that array, and try changing some of the to-do object's completed property values, and even add a new to-do object. Observe how the numbers in the message are updated appropriately.
@@ -122,53 +122,53 @@ Let's give it a try.
 
 1. Replace the existing `<ul>` element with the following simplified version to get an idea of how it works:
 
-    ```html
-    <ul>
-    {#each todos as todo, index (todo.id)}
-      <li>
-        <input type="checkbox" checked={todo.completed}/> {index}. {todo.name} (id: {todo.id})
-      </li>
-    {:else}
-      Nothing to do here!
-    {/each}
-    </ul>
-    ```
+   ```html
+   <ul>
+   {#each todos as todo, index (todo.id)}
+     <li>
+       <input type="checkbox" checked={todo.completed}/> {index}. {todo.name} (id: {todo.id})
+     </li>
+   {:else}
+     Nothing to do here!
+   {/each}
+   </ul>
+   ```
 
 2. Go back to the app; you'll see something like this:
 
-    ![very simple to-do list output created using an each block](01-each-block.png)
+   ![very simple to-do list output created using an each block](01-each-block.png)
 
 3. Now that we've seen that this is working, let's generate a complete to-do item with each loop of the `{#each}` directive, and inside embed the information from the `todos` array: `id`, `name`, and `completed`. Replace your existing `<ul>` block with the following:
 
-    ```html
-    <!-- To-dos -->
-    <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading">
-      {#each todos as todo (todo.id)}
-        <li class="todo">
-          <div class="stack-small">
-            <div class="c-cb">
-              <input type="checkbox" id="todo-{todo.id}" checked={todo.completed}/>
-              <label for="todo-{todo.id}" class="todo-label">
-                {todo.name}
-              </label>
-            </div>
-            <div class="btn-group">
-              <button type="button" class="btn">
-                Edit <span class="visually-hidden">{todo.name}</span>
-              </button>
-              <button type="button" class="btn btn__danger">
-                Delete <span class="visually-hidden">{todo.name}</span>
-              </button>
-            </div>
-          </div>
-        </li>
-      {:else}
-        <li>Nothing to do here!</li>
-      {/each}
-    </ul>
-    ```
-
-    Notice how we are using curly braces to embed JavaScript expressions in HTML attributes, like we did with the `checked` and `id` attributes of the checkbox.
+   ```html
+   <!-- To-dos -->
+   <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading">
+     {#each todos as todo (todo.id)}
+       <li class="todo">
+         <div class="stack-small">
+           <div class="c-cb">
+             <input type="checkbox" id="todo-{todo.id}" checked={todo.completed}/>
+             <label for="todo-{todo.id}" class="todo-label">
+               {todo.name}
+             </label>
+           </div>
+           <div class="btn-group">
+             <button type="button" class="btn">
+               Edit <span class="visually-hidden">{todo.name}</span>
+             </button>
+             <button type="button" class="btn btn__danger">
+               Delete <span class="visually-hidden">{todo.name}</span>
+             </button>
+           </div>
+         </div>
+       </li>
+     {:else}
+       <li>Nothing to do here!</li>
+     {/each}
+   </ul>
+   ```
+
+   Notice how we are using curly braces to embed JavaScript expressions in HTML attributes, like we did with the `checked` and `id` attributes of the checkbox.
 
 We've turned our static markup into a dynamic template ready to display the tasks from our component's state. Great! We are getting there.
 
@@ -178,38 +178,38 @@ With a hardcoded list of to-dos, our `Todos` component is not very useful. To tu
 
 1. In `Todos.svelte`, replace the existing `let todos = …` block with `export let todos = []`.
 
-    ```js
-    export let todos = []
-    ```
+   ```js
+   export let todos = []
+   ```
 
-    This may feel a little weird at first. That's not how `export` normally works in JavaScript modules! This is how Svelte 'extends' JavaScript by taking valid syntax and giving it a new purpose. In this case Svelte is using the `export` keyword to mark a variable declaration as a property or prop, which means it becomes accessible to consumers of the component.
+   This may feel a little weird at first. That's not how `export` normally works in JavaScript modules! This is how Svelte 'extends' JavaScript by taking valid syntax and giving it a new purpose. In this case Svelte is using the `export` keyword to mark a variable declaration as a property or prop, which means it becomes accessible to consumers of the component.
 
-    You can also specify a default initial value for a prop. This will be used if the component's consumer doesn't specify the prop on the component — or if its initial value is undefined — when instantiating the component.
+   You can also specify a default initial value for a prop. This will be used if the component's consumer doesn't specify the prop on the component — or if its initial value is undefined — when instantiating the component.
 
-    So with `export let todos = []`, we are telling Svelte that our `Todos.svelte` component will accept a `todos` attribute, which when omitted will be initialized to an empty array.
+   So with `export let todos = []`, we are telling Svelte that our `Todos.svelte` component will accept a `todos` attribute, which when omitted will be initialized to an empty array.
 
 2. Have a look at the app, and you'll see the "Nothing to do here!" message. This is because we are currently not passing any value into it from `App.svelte`, so it's using the default value.
 3. Now let's move our to-dos to `App.svelte` and pass them to the `Todos.svelte` component as a prop. Update `src/App.svelte` as follows:
 
-    ```html
-    <script>
-      import Todos from './components/Todos.svelte'
+   ```html
+   <script>
+     import Todos from './components/Todos.svelte'
 
-      let todos = [
-        { id: 1, name: 'Create a Svelte starter app', completed: true },
-        { id: 2, name: 'Create your first component', completed: true },
-        { id: 3, name: 'Complete the rest of the tutorial', completed: false }
-      ]
-    </script>
+     let todos = [
+       { id: 1, name: 'Create a Svelte starter app', completed: true },
+       { id: 2, name: 'Create your first component', completed: true },
+       { id: 3, name: 'Complete the rest of the tutorial', completed: false }
+     ]
+   </script>
 
-    <Todos todos={todos} />
-    ```
+   <Todos todos={todos} />
+   ```
 
 4. When the attribute and the variable have the same name, Svelte allows you to just specify the variable as a handy shortcut, so we can rewrite our last line like this. Try this now.
 
-    ```html
-    <Todos {todos} />
-    ```
+   ```html
+   <Todos {todos} />
+   ```
 
 At this point your to-dos should render just like they did before, except that now we're passing them in from the `App.svelte` component.
 
@@ -219,34 +219,34 @@ Let's add some functionality to toggle the task status. Svelte has the `on:event
 
 1. Update the `<input type="checkbox">` element inside `src/components/Todos.svelte` as follows:
 
-    ```html
-    <input type="checkbox" id="todo-{todo.id}"
-      on:click={() => todo.completed = !todo.completed}
-      checked={todo.completed}
-    />
-    ```
+   ```html
+   <input type="checkbox" id="todo-{todo.id}"
+     on:click={() => todo.completed = !todo.completed}
+     checked={todo.completed}
+   />
+   ```
 
 2. Next we'll add a function to remove a to-do from our `todos` array. At the bottom of the `Todos.svelte` `<script>` section, add the `removeTodo()` function like so:
 
-    ```js
-    function removeTodo(todo) {
-      todos = todos.filter((t) => t.id !== todo.id)
-    }
-    ```
+   ```js
+   function removeTodo(todo) {
+     todos = todos.filter((t) => t.id !== todo.id)
+   }
+   ```
 
 3. We'll call it via the _Delete_ button. Update it with a `click` event, like so:
 
-    ```html
-    <button type="button" class="btn btn__danger"
-      on:click={() => removeTodo(todo)}
-    >
-      Delete <span class="visually-hidden">{todo.name}</span>
-    </button>
-    ```
+   ```html
+   <button type="button" class="btn btn__danger"
+     on:click={() => removeTodo(todo)}
+   >
+     Delete <span class="visually-hidden">{todo.name}</span>
+   </button>
+   ```
 
-    A very common mistake with handlers in Svelte is to pass the result of executing a function as a handler, instead of passing the function. For example, if you specify `on:click={removeTodo(todo)}`, it will execute `removeTodo(todo)` and the result will be passed as a handler, which is not what we had in mind.
+   A very common mistake with handlers in Svelte is to pass the result of executing a function as a handler, instead of passing the function. For example, if you specify `on:click={removeTodo(todo)}`, it will execute `removeTodo(todo)` and the result will be passed as a handler, which is not what we had in mind.
 
-    In this case you have to specify `on:click={() => removeTodo(todo)}` as the handler. If `removeTodo()` received no params, you could use `on:event={removeTodo}`, but not `on:event={removeTodo()}`. This is not some special Svelte syntax — here we are just using regular JavaScript [arrow functions](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).
+   In this case you have to specify `on:click={() => removeTodo(todo)}` as the handler. If `removeTodo()` received no params, you could use `on:event={removeTodo}`, but not `on:event={removeTodo()}`. This is not some special Svelte syntax — here we are just using regular JavaScript [arrow functions](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).
 
 Again, this is good progress — at this point, we can now delete tasks. When a to-do item's _Delete_ button is pressed, the relevant to-do is removed from the `todos` array, and the UI updates to no longer show it. In addition, we can now check the checkboxes, and the completed status of the relevant to-dos will now update in the `todos` array.
 
@@ -286,72 +286,72 @@ Now on to the next major task for this article — let's add some functionality
 
 1. First we'll create a variable to hold the text of the new to-do. Add this declaration to the `<script>` section of `Todos.svelte` file:
 
-    ```js
-    let newTodoName = ''
-    ```
+   ```js
+   let newTodoName = ''
+   ```
 
 2. Now we will use this value in the `<input>` for adding new tasks. To do that we need to bind our `newTodoName` variable to the `todo-0` input, so that the `newTodoName` variable value stays in sync with the input's `value` property. We could do something like this:
 
-    ```html
-    <input value={newTodoName} on:keydown={(e) => newTodoName = e.target.value} />
-    ```
+   ```html
+   <input value={newTodoName} on:keydown={(e) => newTodoName = e.target.value} />
+   ```
 
-    Whenever the value of the variable `newTodoName` changes, it will be reflected in the `value` attribute of the input, and whenever a key is pressed in the input, we will update the contents of the variable `newTodoName`.
+   Whenever the value of the variable `newTodoName` changes, it will be reflected in the `value` attribute of the input, and whenever a key is pressed in the input, we will update the contents of the variable `newTodoName`.
 
-    This is a manual implementation of two-way data binding for an input box. But we don't need to do this — Svelte provides an easier way to bind any property to a variable, using the [`bind:property`](https://svelte.dev/docs#bind_element_property) directive:
+   This is a manual implementation of two-way data binding for an input box. But we don't need to do this — Svelte provides an easier way to bind any property to a variable, using the [`bind:property`](https://svelte.dev/docs#bind_element_property) directive:
 
-    ```html
-    <input bind:value={newTodoName} />
-    ```
+   ```html
+   <input bind:value={newTodoName} />
+   ```
 
-    So, let's implement this. Update the `todo-0` input like so:
+   So, let's implement this. Update the `todo-0` input like so:
 
-    ```html
-    <input bind:value={newTodoName} type="text" id="todo-0" autocomplete="off" class="input input__lg" />
-    ```
+   ```html
+   <input bind:value={newTodoName} type="text" id="todo-0" autocomplete="off" class="input input__lg" />
+   ```
 
 3. An easy way to test that this works is to add a reactive statement to log the contents of `newTodoName`. Add this snippet at the end of the `<script>` section:
 
-    ```js
-    $: console.log('newTodoName: ', newTodoName)
-    ```
+   ```js
+   $: console.log('newTodoName: ', newTodoName)
+   ```
 
-    > **Note:** As you may have noticed, reactive statements aren't limited to variable declarations. You can put _any_ JavaScript statement after the `$:` sign.
+   > **Note:** As you may have noticed, reactive statements aren't limited to variable declarations. You can put _any_ JavaScript statement after the `$:` sign.
 
 4. Now try going back to `localhost:5042`, pressing <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> to open your browser console and typing something into the input field. You should see your entries logged. At this point, you can delete the reactive `console.log()` if you wish.
 5. Next up we'll create a function to add the new to-do — `addTodo()` — which will push a new `todo` object onto the `todos` array. Add this to the bottom of your `<script>` block inside `src/components/Todos.svelte`:
 
-    ```js
-    function addTodo() {
-      todos.push({ id: 999, name: newTodoName, completed: false })
-      newTodoName = ''
-    }
-    ```
+   ```js
+   function addTodo() {
+     todos.push({ id: 999, name: newTodoName, completed: false })
+     newTodoName = ''
+   }
+   ```
 
-    > **Note:** For the moment we are just assigning the same `id` to every to-do, but don't worry, we will fix that soon.
+   > **Note:** For the moment we are just assigning the same `id` to every to-do, but don't worry, we will fix that soon.
 
 6. Now we want to update our HTML so that we call `addTodo()` whenever the form is submitted. Update the NewTodo form's opening tag like so:
 
-    ```html
-    <form on:submit|preventDefault={addTodo}>
-    ```
+   ```html
+   <form on:submit|preventDefault={addTodo}>
+   ```
 
-    The [`on:eventname`](https://svelte.dev/docs#on_element_event) directive supports adding modifiers to the DOM event with the `|` character. In this case, the `preventDefault` modifier tells Svelte to generate the code to call `event.preventDefault()` before running the handler. Explore the previous link to see what other modifiers are available.
+   The [`on:eventname`](https://svelte.dev/docs#on_element_event) directive supports adding modifiers to the DOM event with the `|` character. In this case, the `preventDefault` modifier tells Svelte to generate the code to call `event.preventDefault()` before running the handler. Explore the previous link to see what other modifiers are available.
 
 7. If you try adding new to-dos at this point, the new to-dos are added to the to-dos array, but our UI is not updated. Remember that in Svelte [reactivity is triggered with assignments](https://svelte.dev/docs#2_Assignments_are_reactive). That means that the `addTodo()` function is executed, the element is added to the `todos` array, but Svelte won't detect that the push method modified the array, so it won't refresh the tasks `<ul>`.
 
-    Just adding `todos = todos` to the end of the `addTodo()` function would solve the problem, but it seems strange to have to include that at the end of the function. Instead, we'll take out the `push()` method and use [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to achieve the same result: we'll assign a value to the `todos` array equal to the `todos` array plus the new object.
+   Just adding `todos = todos` to the end of the `addTodo()` function would solve the problem, but it seems strange to have to include that at the end of the function. Instead, we'll take out the `push()` method and use [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to achieve the same result: we'll assign a value to the `todos` array equal to the `todos` array plus the new object.
 
-    > **Note:** `Array` has several mutable operations: [`push()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push), [`pop()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop), [`splice()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice), [`shift()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift), [`unshift()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift), [`reverse()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse), and [`sort()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). Using them often causes side effects and bugs that are hard to track. By using the spread syntax instead of `push()` we avoid mutating the array, which is considered a good practice.
+   > **Note:** `Array` has several mutable operations: [`push()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push), [`pop()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop), [`splice()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice), [`shift()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift), [`unshift()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift), [`reverse()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse), and [`sort()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). Using them often causes side effects and bugs that are hard to track. By using the spread syntax instead of `push()` we avoid mutating the array, which is considered a good practice.
 
-    Update your `addTodo()` function like so:
+   Update your `addTodo()` function like so:
 
-    ```js
-    function addTodo() {
-      todos = [...todos, { id: 999, name: newTodoName, completed: false }]
-      newTodoName = ''
-    }
-    ```
+   ```js
+   function addTodo() {
+     todos = [...todos, { id: 999, name: newTodoName, completed: false }]
+     newTodoName = ''
+   }
+   ```
 
 ## Giving each to-do a unique ID
 
@@ -359,29 +359,29 @@ If you try to add new to-dos in your app now, you'll be able to add a new to-do
 
 1. Let's declare a `newTodoId` variable calculated from the number of to-dos plus 1, and make it reactive. Add the following snippet to the `<script>` section:
 
-    ```js
-    let newTodoId
-      $: {
-        if (totalTodos === 0) {
-          newTodoId = 1;
-        } else {
-          newTodoId = Math.max(...todos.map((t) => t.id)) + 1;
-        }
-      }
-    ```
+   ```js
+   let newTodoId
+     $: {
+       if (totalTodos === 0) {
+         newTodoId = 1;
+       } else {
+         newTodoId = Math.max(...todos.map((t) => t.id)) + 1;
+       }
+     }
+   ```
 
-    > **Note:** As you can see, reactive statements are not limited to one-liners. The following would work too, but it is a little less readable: `$: newTodoId = totalTodos ? Math.max(...todos.map((t) => t.id)) + 1 : 1`
+   > **Note:** As you can see, reactive statements are not limited to one-liners. The following would work too, but it is a little less readable: `$: newTodoId = totalTodos ? Math.max(...todos.map((t) => t.id)) + 1 : 1`
 
 2. How does Svelte achieve this? The compiler parses the whole reactive statement, and detects that it depends on the `totalTodos` variable and the `todos` array. So whenever either of them is modified, this code is re-evaluated, updating `newTodoId` accordingly.
 
-    Let's use this in our `addTodo()` function. Update it like so:
+   Let's use this in our `addTodo()` function. Update it like so:
 
-    ```js
-    function addTodo() {
-      todos = [...todos, { id: newTodoId, name: newTodoName, completed: false }]
-      newTodoName = ''
-    }
-    ```
+   ```js
+   function addTodo() {
+     todos = [...todos, { id: newTodoId, name: newTodoName, completed: false }]
+     newTodoName = ''
+   }
+   ```
 
 ## Filtering to-dos by status
 
@@ -389,60 +389,60 @@ Finally for this article, let's implement the ability to filter our to-dos by st
 
 1. At the bottom of our `<script>` section add the following:
 
-    ```js
-    let filter = 'all'
-    const filterTodos = (filter, todos) =>
-      filter === 'active' ? todos.filter((t) => !t.completed) :
-      filter === 'completed' ? todos.filter((t) => t.completed) :
-      todos
-    ```
+   ```js
+   let filter = 'all'
+   const filterTodos = (filter, todos) =>
+     filter === 'active' ? todos.filter((t) => !t.completed) :
+     filter === 'completed' ? todos.filter((t) => t.completed) :
+     todos
+   ```
 
-    We use the `filter` variable to control the active filter: _all_, _active_, or _completed_. Just assigning one of these values to the filter variable will activate the filter and update the list of to-dos. Let's see how to achieve this.
+   We use the `filter` variable to control the active filter: _all_, _active_, or _completed_. Just assigning one of these values to the filter variable will activate the filter and update the list of to-dos. Let's see how to achieve this.
 
-    The `filterTodos()` function will receive the current filter and the list of to-dos, and return a new array of to-dos filtered accordingly.
+   The `filterTodos()` function will receive the current filter and the list of to-dos, and return a new array of to-dos filtered accordingly.
 
 2. Let's update the filter button markup to make it dynamic and update the current filter when the user presses one of the filter buttons. Update it like this:
 
-    ```html
-    <div class="filters btn-group stack-exception">
-      <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={() => filter = 'all'} >
-        <span class="visually-hidden">Show</span>
-        <span>All</span>
-        <span class="visually-hidden">tasks</span>
-      </button>
-      <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={() => filter = 'active'} >
-        <span class="visually-hidden">Show</span>
-        <span>Active</span>
-        <span class="visually-hidden">tasks</span>
-      </button>
-      <button class="btn toggle-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={() => filter = 'completed'} >
-        <span class="visually-hidden">Show</span>
-        <span>Completed</span>
-        <span class="visually-hidden">tasks</span>
-      </button>
-    </div>
-    ```
+   ```html
+   <div class="filters btn-group stack-exception">
+     <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={() => filter = 'all'} >
+       <span class="visually-hidden">Show</span>
+       <span>All</span>
+       <span class="visually-hidden">tasks</span>
+     </button>
+     <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={() => filter = 'active'} >
+       <span class="visually-hidden">Show</span>
+       <span>Active</span>
+       <span class="visually-hidden">tasks</span>
+     </button>
+     <button class="btn toggle-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={() => filter = 'completed'} >
+       <span class="visually-hidden">Show</span>
+       <span>Completed</span>
+       <span class="visually-hidden">tasks</span>
+     </button>
+   </div>
+   ```
 
-    There are a couple of things going on in this markup.
+   There are a couple of things going on in this markup.
 
-    We will show the current filter by applying the `btn__primary` class to the active filter button. To conditionally apply style classes to an element we use the `class:name={value}` directive. If the value expression evaluates to truthy, the class name will be applied. You can add many of these directives, with different conditions, to the same element. So when we issue `class:btn__primary={filter === 'all'}`, Svelte will apply the `btn__primary` class if filter equals all.
+   We will show the current filter by applying the `btn__primary` class to the active filter button. To conditionally apply style classes to an element we use the `class:name={value}` directive. If the value expression evaluates to truthy, the class name will be applied. You can add many of these directives, with different conditions, to the same element. So when we issue `class:btn__primary={filter === 'all'}`, Svelte will apply the `btn__primary` class if filter equals all.
 
-    > **Note:** Svelte provides a shortcut which allows us to shorten `<div class:active={active}>` to `<div class:active>` when the class matches the variable name.
+   > **Note:** Svelte provides a shortcut which allows us to shorten `<div class:active={active}>` to `<div class:active>` when the class matches the variable name.
 
-    Something similar happens with `aria-pressed={filter === 'all'}`: when the JavaScript expression passed between curly braces evaluates to a truthy value, the `aria-pressed` attribute will be added to the button.
+   Something similar happens with `aria-pressed={filter === 'all'}`: when the JavaScript expression passed between curly braces evaluates to a truthy value, the `aria-pressed` attribute will be added to the button.
 
-    Whenever we click on a button, we update the filter variable by issuing `on:click={() => filter = 'all'}`. Read on to find out how Svelte reactivity will take care of the rest.
+   Whenever we click on a button, we update the filter variable by issuing `on:click={() => filter = 'all'}`. Read on to find out how Svelte reactivity will take care of the rest.
 
 3. Now we just need to use the helper function in the `{#each}` loop; update it like this:
 
-    ```html
-    …
-      <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading">
-      {#each filterTodos(filter, todos) as todo (todo.id)}
-    …
-    ```
+   ```html
+   …
+     <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading">
+     {#each filterTodos(filter, todos) as todo (todo.id)}
+   …
+   ```
 
-    After analyzing our code, Svelte detects that our `filterTodos()` function depends on the variables `filter` and `todos`. And, just like with any other dynamic expression embedded in the markup, whenever any of these dependencies changes, the DOM will be updated accordingly. So whenever `filter` or `todos` changes, the `filterTodos()` function will be re-evaluated and the items inside the loop will be updated.
+   After analyzing our code, Svelte detects that our `filterTodos()` function depends on the variables `filter` and `todos`. And, just like with any other dynamic expression embedded in the markup, whenever any of these dependencies changes, the DOM will be updated accordingly. So whenever `filter` or `todos` changes, the `filterTodos()` function will be re-evaluated and the items inside the loop will be updated.
 
 > **Note:** Reactivity can be tricky sometimes. Svelte recognizes `filter` as a dependency because we are referencing it in the `filterTodos(filter, todo)` expression. `filter` is a top-level variable, so we might be tempted to remove it from the helper function params, and just call it like this: `filterTodos(todo)`. This would work, but now Svelte has no way to find out that `{#each filterTodos(todos) }` depends on `filter`, and the list of filtered to-dos won't be updated when the filter changes. Always remember that Svelte analyzes our code to find out dependencies, so it's better to be explicit about it and not rely on the visibility of top-level variables. Besides, it's a good practice to make our code clear and explicit about what information it is using.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_conditional_rendering/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_conditional_rendering/index.md
index 16f5951352d7368..9f33ce29ef88799 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_conditional_rendering/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_conditional_rendering/index.md
@@ -321,19 +321,19 @@ So, let's implement the fix:
 
 1. Remove the following line from inside our `data()` property:
 
-    ```js
-    isDone: this.done,
-    ```
+   ```js
+   isDone: this.done,
+   ```
 
 2. Add the following block below the data() { } block:
 
-    ```js
-    computed: {
-      isDone() {
-        return this.done;
-      }
-    },
-    ```
+   ```js
+   computed: {
+     isDone() {
+       return this.done;
+     }
+   },
+   ```
 
 Now when you save and reload, you'll find that the problem is solved — the checkbox state is now preserved when you switch between todo item templates.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
index c44e05c42f8ea42..1cbb1b9856a4081 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
@@ -89,14 +89,14 @@ We can now begin to add actual content to our `ToDoItem`. Vue templates are curr
 1. Add an empty `<div>` inside your component template now.
 2. Inside that `<div>`, let's add a checkbox and a corresponding label. Add an `id` to the checkbox, and a `for` attribute mapping the checkbox to the label, as shown below.
 
-    ```html
-    <template>
-      <div>
-        <input type="checkbox" id="todo-item" />
-        <label for="todo-item">My Todo Item</label>
-      </div>
-    </template>
-    ```
+   ```html
+   <template>
+     <div>
+       <input type="checkbox" id="todo-item" />
+       <label for="todo-item">My Todo Item</label>
+     </div>
+   </template>
+   ```
 
 ### Using TodoItem inside our app
 
@@ -105,9 +105,9 @@ This is all fine, but we haven't added the component to our app yet, so there's
 1. Open up `App.vue` again.
 2. At the top of your `<script>` tag, add the following to import your `ToDoItem` component:
 
-    ```js
-    import ToDoItem from './components/ToDoItem.vue';
-    ```
+   ```js
+   import ToDoItem from './components/ToDoItem.vue';
+   ```
 
 3. Inside your component object, add the `components` property, and inside it add your `ToDoItem` component to register it.
 
@@ -170,13 +170,13 @@ For this component, we'll use the object registration method.
 3. Inside this object, add two properties with the keys `label` and `done`.
 4. The `label` key's value should be an object with 2 properties (or **props**, as they are called in the context of being available to the components).
 
-    1. The first is a `required` property, which will have a value of `true`. This will tell Vue that we expect every instance of this component to have a label field. Vue will warn us if a `ToDoItem` component does not have a label field.
-    2. The second property we'll add is a `type` property. Set the value for this property as the JavaScript `String` type (note the capital "S"). This tells Vue that we expect the value of this property to be a string.
+   1. The first is a `required` property, which will have a value of `true`. This will tell Vue that we expect every instance of this component to have a label field. Vue will warn us if a `ToDoItem` component does not have a label field.
+   2. The second property we'll add is a `type` property. Set the value for this property as the JavaScript `String` type (note the capital "S"). This tells Vue that we expect the value of this property to be a string.
 
 5. Now on to the `done` prop.
 
-    1. First add a `default` field, with a value of `false`. This means that when no `done` prop is passed to a `ToDoItem` component, the `done` prop will have a value of false (bear in mind that this is not required — we only need `default` on non-required props).
-    2. Next add a `type` field with a value of `Boolean`. This tells Vue we expect the value prop to be a JavaScript boolean type.
+   1. First add a `default` field, with a value of `false`. This means that when no `done` prop is passed to a `ToDoItem` component, the `done` prop will have a value of false (bear in mind that this is not required — we only need `default` on non-required props).
+   2. Next add a `type` field with a value of `Boolean`. This tells Vue we expect the value prop to be a JavaScript boolean type.
 
 Your component object should now look like this:
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
index 149e6b3d0aadbf1..0aa9e7cf34e33b6 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
@@ -106,43 +106,43 @@ To explore various features of Vue, we will be building up a sample todo list ap
 1. In terminal, `cd` to where you'd like to create your sample app, then run `vue create moz-todo-vue`.
 2. Use the arrow keys and
 
-    <kbd>Enter</kbd>
+   <kbd>Enter</kbd>
 
-    to select the "Manually select features" option.
+   to select the "Manually select features" option.
 
 3. The first menu you'll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press
 
-    <kbd>Enter</kbd>
+   <kbd>Enter</kbd>
 
-    to proceed.
+   to proceed.
 
 4. Next, you'll select a config for the linter / formatter. Navigate to "ESLint with error prevention only" and hit
 
-    <kbd>Enter</kbd>
+   <kbd>Enter</kbd>
 
-    again. This will help us catch common errors, but not be overly opinionated.
+   again. This will help us catch common errors, but not be overly opinionated.
 
 5. Next, you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit
 
-    <kbd>Enter</kbd>
+   <kbd>Enter</kbd>
 
-    to continue.
+   to continue.
 
 6. Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's `package.json` file. Select "In dedicated config files" and push
 
-    <kbd>Enter</kbd>
+   <kbd>Enter</kbd>
 
-    .
+   .
 
 7. Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type
 
-    <kbd>y</kbd>
+   <kbd>y</kbd>
 
-    , otherwise type
+   , otherwise type
 
-    <kbd>n</kbd>
+   <kbd>n</kbd>
 
-    .
+   .
 
 The CLI will now begin scaffolding out your project, and installing all of your dependencies.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
index 2ea15e66d84bede..999cfd1e0a7bfbf 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md
@@ -60,67 +60,67 @@ We now have an app that displays a list of to-do items. However, we can't update
 1. In your components folder, create a new file called `ToDoForm.vue`.
 2. Add a blank `<template>` and a `<script>` tag like before:
 
-    ```html
-    <template></template>
+   ```html
+   <template></template>
 
-    <script>
-      export default {};
-    </script>
-    ```
+   <script>
+     export default {};
+   </script>
+   ```
 
 3. Let's add in an HTML form that lets you enter a new todo item and submit it into the app. We need a [`<form>`](/en-US/docs/Web/HTML/Element/form) with a [`<label>`](/en-US/docs/Web/HTML/Element/label), an [`<input>`](/en-US/docs/Web/HTML/Element/input), and a [`<button>`](/en-US/docs/Web/HTML/Element/button). Update your template as follows:
 
-    ```html
-    <template>
-      <form>
-        <label for="new-todo-input">
-          What needs to be done?
-        </label>
-        <input
-          type="text"
-          id="new-todo-input"
-          name="new-todo"
-          autocomplete="off"
-        />
-        <button type="submit">
-          Add
-        </button>
-      </form>
-    </template>
-    ```
-
-    So we now have a form component into which we can enter the title of a new todo item (which will become a label for the corresponding `ToDoItem` when it is eventually rendered).
+   ```html
+   <template>
+     <form>
+       <label for="new-todo-input">
+         What needs to be done?
+       </label>
+       <input
+         type="text"
+         id="new-todo-input"
+         name="new-todo"
+         autocomplete="off"
+       />
+       <button type="submit">
+         Add
+       </button>
+     </form>
+   </template>
+   ```
+
+   So we now have a form component into which we can enter the title of a new todo item (which will become a label for the corresponding `ToDoItem` when it is eventually rendered).
 
 4. Let's load this component into our app. Go back to `App.vue` and add the following `import` statement just below the previous one, inside your `<script>` element:
 
-    ```js
-    import ToDoForm from './components/ToDoForm';
-    ```
+   ```js
+   import ToDoForm from './components/ToDoForm';
+   ```
 
 5. You also need to register the new component in your `App` component — update the `components` property of the component object so that it looks like this:
 
-    ```js
-    components: {
-      ToDoItem,
-      ToDoForm
-    }
-    ```
+   ```js
+   components: {
+     ToDoItem,
+     ToDoForm
+   }
+   ```
 
 6. Finally for this section, render your `ToDoForm` component inside your app by adding the `<to-do-form />` element inside your `App`'s `<template>`, like so:
 
-    ```html
-    <template>
-      <div id="app">
-        <h1>My To-Do List</h1>
-        <to-do-form></to-do-form>
-        <ul>
-          <li v-for="item in ToDoItems" :key="item.id">
-            <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item>
-          </li>
-        </ul>
-      </div>
-    </template>
-    ```
+   ```html
+   <template>
+     <div id="app">
+       <h1>My To-Do List</h1>
+       <to-do-form></to-do-form>
+       <ul>
+         <li v-for="item in ToDoItems" :key="item.id">
+           <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item>
+         </li>
+       </ul>
+     </div>
+   </template>
+   ```
 
 Now when you view your running site, you should see the new form displayed.
 
@@ -134,46 +134,46 @@ To make a method available to the `ToDoForm` component, we need to add it to the
 
 1. In this component, we need to add an `onSubmit()` method to a `methods` property inside the `ToDoForm` component object. We'll use this to handle the submit action.
 
-    Add this like so:
+   Add this like so:
 
-    ```js
-    export default {
-       methods: {
-           onSubmit() {
-              console.log('form submitted')
-           }
-       }
-    }
-    ```
+   ```js
+   export default {
+      methods: {
+          onSubmit() {
+             console.log('form submitted')
+          }
+      }
+   }
+   ```
 
 2. Next we need to bind the method to our `<form>` element's `submit` event handler. Much like how Vue uses the [`v-bind`](https://v2.vuejs.org/v2/api/#v-bind) syntax for binding attributes, Vue has a special directive for event handling: [`v-on`](https://v2.vuejs.org/v2/api/#v-on). The `v-on` directive works via the `v-on:event="method"` syntax. And much like `v-bind`, there's also a shorthand syntax: `@event="method"`.
 
-    We'll use the shorthand syntax here for consistency. Add the `submit` handler to your `<form>` element like so:
+   We'll use the shorthand syntax here for consistency. Add the `submit` handler to your `<form>` element like so:
 
-    ```html
-    <form @submit="onSubmit">
-    ```
+   ```html
+   <form @submit="onSubmit">
+   ```
 
 3. When you run this, the app still posts the data to the server, causing a refresh. Since we're doing all of our processing on the client, there's no server to handle the postback. We also lose all local state on page refresh. To prevent the browser from posting to the server, we need to stop the event's default action while bubbling up through the page ([`Event.preventDefault()`](/en-US/docs/Web/API/Event/preventDefault), in vanilla JavaScript). Vue has a special syntax called **event modifiers** that can handle this for us right in our template.
 
-    Modifiers are appended to the end of an event with a dot like so: `@event.modifier`. Here is a list of event modifiers:
+   Modifiers are appended to the end of an event with a dot like so: `@event.modifier`. Here is a list of event modifiers:
 
-    - `.stop`: Stops the event from propagating. Equivalent to [`Event.stopPropagation()`](/en-US/docs/Web/API/Event/stopPropagation) in regular JavaScript events.
-    - `.prevent`: Prevents the event's default behavior. Equivalent to [`Event.preventDefault()`](/en-US/docs/Web/API/Event/preventDefault).
-    - `.self`: Triggers the handler only if the event was dispatched from this exact element.
-    - `{.key}`: Triggers the event handler only via the specified key. [MDN has a list of valid key values](/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values); multi-word keys just need to be converted to kebab case (e.g. `page-down`).
-    - `.native`: Listens for a native event on the root (outer-most wrapping) element on your component.
-    - `.once`: Listens for the event until it's been triggered once, and then no more.
-    - `.left`: Only triggers the handler via the left mouse button event.
-    - `.right`: Only triggers the handler via the right mouse button event.
-    - `.middle`: Only triggers the handler via the middle mouse button event.
-    - `.passive`: Equivalent to using the `{ passive: true }` parameter when creating an event listener in vanilla JavaScript using [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener).
+   - `.stop`: Stops the event from propagating. Equivalent to [`Event.stopPropagation()`](/en-US/docs/Web/API/Event/stopPropagation) in regular JavaScript events.
+   - `.prevent`: Prevents the event's default behavior. Equivalent to [`Event.preventDefault()`](/en-US/docs/Web/API/Event/preventDefault).
+   - `.self`: Triggers the handler only if the event was dispatched from this exact element.
+   - `{.key}`: Triggers the event handler only via the specified key. [MDN has a list of valid key values](/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values); multi-word keys just need to be converted to kebab case (e.g. `page-down`).
+   - `.native`: Listens for a native event on the root (outer-most wrapping) element on your component.
+   - `.once`: Listens for the event until it's been triggered once, and then no more.
+   - `.left`: Only triggers the handler via the left mouse button event.
+   - `.right`: Only triggers the handler via the right mouse button event.
+   - `.middle`: Only triggers the handler via the middle mouse button event.
+   - `.passive`: Equivalent to using the `{ passive: true }` parameter when creating an event listener in vanilla JavaScript using [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener).
 
-    In this case, we need to use the `.prevent` modifier to stop the browser's default submit action. Add `.prevent` to the `@submit` handler in your template like so:
+   In this case, we need to use the `.prevent` modifier to stop the browser's default submit action. Add `.prevent` to the `@submit` handler in your template like so:
 
-    ```html
-    <form @submit.prevent="onSubmit">
-    ```
+   ```html
+   <form @submit.prevent="onSubmit">
+   ```
 
 If you try submitting the form now, you'll notice that the page doesn't reload. If you open the console, you can see the results of the [`console.log()`](/en-US/docs/Web/API/console/log) we added inside our `onSubmit()` method.
 
@@ -185,55 +185,55 @@ The first thing we need is a `data` property in our form to track the value of t
 
 1. Add a `data()` method to our `ToDoForm` component object that returns a `label` field. We can set the initial value of the `label` to an empty string.
 
-    Your component object should now look something like this:
+   Your component object should now look something like this:
 
-    ```js
-    export default {
-      methods: {
-        onSubmit() {
-          console.log("form submitted");
-        }
-      },
-      data() {
-        return {
-          label: ""
-        };
-      }
-    };
-    ```
+   ```js
+   export default {
+     methods: {
+       onSubmit() {
+         console.log("form submitted");
+       }
+     },
+     data() {
+       return {
+         label: ""
+       };
+     }
+   };
+   ```
 
 2. We now need some way to attach the value of the `new-todo-input` `<input>` field to the `label` field. Vue has a special directive for this: [`v-model`](https://v2.vuejs.org/v2/api/#v-model). `v-model` binds to the data property you set on it and keeps it in sync with the `<input>`. `v-model` works across all the various input types, including checkboxes, radios, and select inputs. To use `v-model`, you add an attribute with the structure `v-model="variable"` to the `<input>`.
 
-    So in our case, we would add it to our `new-todo-input` field as seen below. Do this now:
+   So in our case, we would add it to our `new-todo-input` field as seen below. Do this now:
 
-    ```html
-    <input
-      type="text"
-      id="new-todo-input"
-      name="new-todo"
-      autocomplete="off"
-      v-model="label" />
-    ```
+   ```html
+   <input
+     type="text"
+     id="new-todo-input"
+     name="new-todo"
+     autocomplete="off"
+     v-model="label" />
+   ```
 
-    > **Note:** You can also sync data with `<input>` values through a combination of events and `v-bind` attributes. In fact, this is what `v-model` does behind the scenes. However, the exact event and attribute combination varies depending on input types and will take more code than just using the `v-model` shortcut.
+   > **Note:** You can also sync data with `<input>` values through a combination of events and `v-bind` attributes. In fact, this is what `v-model` does behind the scenes. However, the exact event and attribute combination varies depending on input types and will take more code than just using the `v-model` shortcut.
 
 3. Let's test out our use of `v-model` by logging the value of the data submitted in our `onSubmit()` method. In components, data attributes are accessed using the `this` keyword. So we access our `label` field using `this.label`.
 
-    Update your `onSubmit()` method to look like this:
+   Update your `onSubmit()` method to look like this:
 
-    ```js
-    methods: {
-      onSubmit() {
-        console.log('Label value: ', this.label);
-      }
-    },
-    ```
+   ```js
+   methods: {
+     onSubmit() {
+       console.log('Label value: ', this.label);
+     }
+   },
+   ```
 
 4. Now go back to your running app, add some text to the `<input>` field, and click the "Add" button. You should see the value you entered logged to your console, for example:
 
-    ```
-    Label value: My value
-    ```
+   ```
+   Label value: My value
+   ```
 
 ## Changing v-model behavior with modifiers
 
@@ -253,66 +253,66 @@ In the `onSubmit` event handler of our `ToDoForm`, let's add a `todo-added` even
 
 1. Replace the `console.log()` in the `onSubmit()` method with the following:
 
-    ```js
-    this.$emit("todo-added");
-    ```
+   ```js
+   this.$emit("todo-added");
+   ```
 
 2. Next, go back to `App.vue` and add a `methods` property to your component object containing an `addToDo()` method, as shown below. For now, this method can just log `To-do added` to the console.
 
-    ```js
-    export default {
-      name: 'app',
-      components: {
-        ToDoItem,
-        ToDoForm
-      },
-     data() {
-        return {
-          ToDoItems: [
-            { id:uniqueId('todo-'), label: 'Learn Vue', done: false },
-            { id:uniqueId('todo-'), label: 'Create a Vue project with the CLI', done: true },
-            { id:uniqueId('todo-'), label: 'Have fun', done: true },
-            { id:uniqueId('todo-'), label: 'Create a to-do list', done: false }
-          ]
-        };
-      },
-      methods: {
-        addToDo() {
-          console.log('To-do added');
-        }
-      }
-    };
-    ```
+   ```js
+   export default {
+     name: 'app',
+     components: {
+       ToDoItem,
+       ToDoForm
+     },
+    data() {
+       return {
+         ToDoItems: [
+           { id:uniqueId('todo-'), label: 'Learn Vue', done: false },
+           { id:uniqueId('todo-'), label: 'Create a Vue project with the CLI', done: true },
+           { id:uniqueId('todo-'), label: 'Have fun', done: true },
+           { id:uniqueId('todo-'), label: 'Create a to-do list', done: false }
+         ]
+       };
+     },
+     methods: {
+       addToDo() {
+         console.log('To-do added');
+       }
+     }
+   };
+   ```
 
 3. Next, add an event listener for the `todo-added` event to the `<to-do-form></to-do-form>`, which calls the `addToDo()` method when the event fires. Using the `@` shorthand, the listener would look like this: `@todo-added="addToDo"`:
 
-    ```html
-    <to-do-form @todo-added="addToDo"></to-do-form>
-    ```
+   ```html
+   <to-do-form @todo-added="addToDo"></to-do-form>
+   ```
 
 4. When you submit your `ToDoForm`, you should see the console log from the `addToDo()` method. This is good, but we're still not passing any data back into the `App.vue` component. We can do that by passing additional arguments to the `this.$emit()` function back in the `ToDoForm` component.
 
-    In this case, when we fire the event we want to pass the `label` data along with it. This is done by including the data you want to pass as another parameter in the `$emit()` method: `this.$emit("todo-added", this.label)`. This is similar to how native JavaScript events include data, except custom Vue events include no event object by default. This means that the emitted event will directly match whatever object you submit. So in our case, our event object will just be a string.
+   In this case, when we fire the event we want to pass the `label` data along with it. This is done by including the data you want to pass as another parameter in the `$emit()` method: `this.$emit("todo-added", this.label)`. This is similar to how native JavaScript events include data, except custom Vue events include no event object by default. This means that the emitted event will directly match whatever object you submit. So in our case, our event object will just be a string.
 
-    Update your `onSubmit()` method like so:
+   Update your `onSubmit()` method like so:
 
-    ```js
-    onSubmit() {
-      this.$emit('todo-added', this.label)
-    }
-    ```
+   ```js
+   onSubmit() {
+     this.$emit('todo-added', this.label)
+   }
+   ```
 
 5. To actually pick up this data inside `App.vue`, we need to add a parameter to our `addToDo()` method that includes the `label` of the new to-do item.
 
-    Go back to `App.vue` and update this now:
+   Go back to `App.vue` and update this now:
 
-    ```js
-    methods: {
-      addToDo(toDoLabel) {
-        console.log('To-do added:', toDoLabel);
-      }
-    }
-    ```
+   ```js
+   methods: {
+     addToDo(toDoLabel) {
+       console.log('To-do added:', toDoLabel);
+     }
+   }
+   ```
 
 If you test your form again, you'll see whatever text you enter logged in your console upon submission. Vue automatically passes the arguments after the event name in `this.$emit()` to your event handler.
 
@@ -322,25 +322,25 @@ Now that we have the data from `ToDoForm` available in `App.vue`, we need to add
 
 1. Update your `addToDo()` method like so:
 
-    ```js
-    addToDo(toDoLabel) {
-      this.ToDoItems.push({id:uniqueId('todo-'), label: toDoLabel, done: false});
-    }
-    ```
+   ```js
+   addToDo(toDoLabel) {
+     this.ToDoItems.push({id:uniqueId('todo-'), label: toDoLabel, done: false});
+   }
+   ```
 
 2. Try testing your form again, and you should see new to-do items get appended to the end of the list.
 3. Let's make a further improvement before we move on. If you submit the form while the input is empty, todo items with no text still get added to the list. To fix that, we can prevent the todo-added event from firing when name is empty. Since name is already being trimmed by the `.trim` modifier, we only need to test for the empty string.
 
-    Go back to your `ToDoForm` component, and update the `onSubmit()` method like so. If the label value is empty, let's not emit the `todo-added` event.
+   Go back to your `ToDoForm` component, and update the `onSubmit()` method like so. If the label value is empty, let's not emit the `todo-added` event.
 
-    ```js
-    onSubmit() {
-      if (this.label === "") {
-        return;
-      }
-      this.$emit('todo-added', this.label);
-    }
-    ```
+   ```js
+   onSubmit() {
+     if (this.label === "") {
+       return;
+     }
+     this.$emit('todo-added', this.label);
+   }
+   ```
 
 4. Try your form again. Now you will not be able to add empty items to the to-do list.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_refs_focus_management/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_refs_focus_management/index.md
index b3665df5467dcca..23e7298cb9bf463 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_refs_focus_management/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_refs_focus_management/index.md
@@ -56,22 +56,22 @@ To understand what's currently happening:
 
 1. Reload your page, then press
 
-    <kbd>Tab</kbd>
+   <kbd>Tab</kbd>
 
-    . You should see a focus outline on the input for adding new to-do items.
+   . You should see a focus outline on the input for adding new to-do items.
 
 2. Press
 
-    <kbd>Tab</kbd>
+   <kbd>Tab</kbd>
 
-    again. The focus should move to the "Add" button.
+   again. The focus should move to the "Add" button.
 
 3. Hit it again, and it'll be on the first checkbox. One more time, and focus should be on the first "Edit" button.
 4. Activate the "Edit" button by pressing
 
-    <kbd>Enter</kbd>
+   <kbd>Enter</kbd>
 
-    . The checkbox will be replaced with our edit component, but the focus outline will be gone.
+   . The checkbox will be replaced with our edit component, but the focus outline will be gone.
 
 This behavior can be jarring. In addition, what happens when you press <kbd>Tab</kbd> again varies depending on the browser you're using. Similarly, if you save or cancel your edit, focus will disappear again as you move back to the non-edit view.
 
diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.md
index 49f47277889f4e8..c62e4edb21ec175 100644
--- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.md
+++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists/index.md
@@ -91,57 +91,57 @@ To make sure that Vue can accurately compare the `key` attributes, they need to
 
 1. Import `lodash.uniqueid` into your `App` component in the same way you did with your `ToDoItem` component, using
 
-    ```js
-     import uniqueId from 'lodash.uniqueid';
-    ```
+   ```js
+    import uniqueId from 'lodash.uniqueid';
+   ```
 
 2. Next, add an `id` field to each element in your `ToDoItems` array, and assign each of them a value of `uniqueId('todo-')`.
 
-    Your `App.vue` `<script>` element contents should now look like this:
-
-    ```js
-    import ToDoItem from './components/ToDoItem.vue';
-    import uniqueId from 'lodash.uniqueid'
-
-    export default {
-      name: 'app',
-      components: {
-        ToDoItem
-      },
-      data() {
-        return {
-          ToDoItems: [
-            { id: uniqueId('todo-'), label: 'Learn Vue', done: false },
-            { id: uniqueId('todo-'), label: 'Create a Vue project with the CLI', done: true },
-            { id: uniqueId('todo-'), label: 'Have fun', done: true },
-            { id: uniqueId('todo-'), label: 'Create a to-do list', done: false }
-          ]
-        };
-      }
-    };
-    ```
+   Your `App.vue` `<script>` element contents should now look like this:
+
+   ```js
+   import ToDoItem from './components/ToDoItem.vue';
+   import uniqueId from 'lodash.uniqueid'
+
+   export default {
+     name: 'app',
+     components: {
+       ToDoItem
+     },
+     data() {
+       return {
+         ToDoItems: [
+           { id: uniqueId('todo-'), label: 'Learn Vue', done: false },
+           { id: uniqueId('todo-'), label: 'Create a Vue project with the CLI', done: true },
+           { id: uniqueId('todo-'), label: 'Have fun', done: true },
+           { id: uniqueId('todo-'), label: 'Create a to-do list', done: false }
+         ]
+       };
+     }
+   };
+   ```
 
 3. Now, add the `v-for` directive and `key` attribute to the `<li>` element in your `App.vue` template, like so:
 
-    ```html
-    <ul>
-      <li v-for="item in ToDoItems" :key="item.id">
-        <to-do-item label="My ToDo Item" :done="true"></to-do-item>
-      </li>
-    </ul>
-    ```
+   ```html
+   <ul>
+     <li v-for="item in ToDoItems" :key="item.id">
+       <to-do-item label="My ToDo Item" :done="true"></to-do-item>
+     </li>
+   </ul>
+   ```
 
-    When you make this change, every JavaScript expression between the `<li>` tags will have access to the `item` value in addition to the other component attributes. This means we can pass the fields of our item objects to our `ToDoItem` component — just remember to use the `v-bind` syntax. This is really useful, as we want our todo items to display their `label` properties as their label, not a static label of "My Todo Item". In addition, we want their checked status to reflect their `done` properties, not always be set to `done="true"`.
+   When you make this change, every JavaScript expression between the `<li>` tags will have access to the `item` value in addition to the other component attributes. This means we can pass the fields of our item objects to our `ToDoItem` component — just remember to use the `v-bind` syntax. This is really useful, as we want our todo items to display their `label` properties as their label, not a static label of "My Todo Item". In addition, we want their checked status to reflect their `done` properties, not always be set to `done="true"`.
 
 4. Update the `label="My ToDo Item"` attribute to `:label="item.label"`, and the `:done="true"` attribute to `:done="item.done"`, as seen in context below:
 
-    ```html
-    <ul>
-      <li v-for="item in ToDoItems" :key="item.id">
-         <to-do-item :label="item.label" :done="item.done"></to-do-item>
-      </li>
-    </ul>
-    ```
+   ```html
+   <ul>
+     <li v-for="item in ToDoItems" :key="item.id">
+        <to-do-item :label="item.label" :done="item.done"></to-do-item>
+     </li>
+   </ul>
+   ```
 
 Now when you look at your running app, it'll show the todo items with their proper names, and if you inspect the source code you'll see that the inputs all have unique `id`s, taken from the object in the `App` component.
 
diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
index 9e17e5adfc91fde..a88382dfcf44b9a 100644
--- a/files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
+++ b/files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
@@ -161,15 +161,15 @@ Sometimes it is not possible to avoid losing keyboard accessibility. You might h
 2. Create keyboard shortcuts via JavaScript, so functionality is activated when you press certain keys on the keyboard. See [Desktop mouse and keyboard controls](/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) for some game-related examples that can be adapted for any purpose.
 3. Use some interesting tactics to fake button behavior. Take for example our [fake-div-buttons.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) example (see [source code](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)). Here we've given our fake `<div>` buttons the ability to be focused (including via tab) by giving each one the attribute `tabindex="0"` (see WebAIM's [tabindex article](https://webaim.org/techniques/keyboard/tabindex) for more really useful details). This allows us to tab to the buttons, but not to activate them via the Enter/Return key. To do that, we had to add the following bit of JavaScript trickery:
 
-    ```js
-    document.onkeydown = function(e) {
-      if (e.keyCode === 13) { // The Enter/Return key
-        document.activeElement.onclick(e);
-      }
-    };
-    ```
-
-    Here we add a listener to the `document` object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's [keyCode](/en-US/docs/Web/API/KeyboardEvent/keyCode) property; if it is the keycode that matches Return/Enter, we run the function stored in the button's `onclick` handler using `document.activeElement.onclick()`. [`activeElement`](/en-US/docs/Web/API/Document/activeElement) gives us the element that is currently focused on the page.
+   ```js
+   document.onkeydown = function(e) {
+     if (e.keyCode === 13) { // The Enter/Return key
+       document.activeElement.onclick(e);
+     }
+   };
+   ```
+
+   Here we add a listener to the `document` object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's [keyCode](/en-US/docs/Web/API/KeyboardEvent/keyCode) property; if it is the keycode that matches Return/Enter, we run the function stored in the button's `onclick` handler using `document.activeElement.onclick()`. [`activeElement`](/en-US/docs/Web/API/Document/activeElement) gives us the element that is currently focused on the page.
 
 > **Note:** This technique will only work if you set your original event handlers via event handler properties (e.g. `onclick`). `addEventListener` won't work. This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. Better to just use the right element for the right job in the first place.
 
diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
index 44c27184593ce87..466614165a00670 100644
--- a/files/en-us/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
+++ b/files/en-us/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md
@@ -69,16 +69,16 @@ Most tools these days are based on {{Glossary("Node.js")}}, so you'll need to in
 2. Install it like you would any other program. Note that Node comes with [Node Package Manager](https://www.npmjs.com/) (npm), which allows you to easily install packages, share your own packages with others, and run useful scripts on your projects.
 3. Once the install completes, test that node is installed by typing the following into the terminal, which returns the installed versions of Node and npm:
 
-    ```bash
-    node -v
-    npm -v
-    ```
+   ```bash
+   node -v
+   npm -v
+   ```
 
 4. If you've got Node/npm already installed, you should update them to their latest versions. To update Node, the most reliable way is to download and install an updated installer package from their website (see link above). To update npm, use the following command in your terminal:
 
-    ```bash
-    npm install npm@latest -g
-    ```
+   ```bash
+   npm install npm@latest -g
+   ```
 
 > **Note:** If the above command fails with permissions errors, [Fixing npm permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions/) should sort you out.
 
@@ -88,16 +88,16 @@ For example, let's first create a test directory to allow us to play without fea
 
 1. Create a new directory somewhere sensible using your file manager UI, or, on a command line, by navigating to the location you want and running the following command:
 
-    ```bash
-    mkdir node-test
-    ```
+   ```bash
+   mkdir node-test
+   ```
 
 2. To make this directory an npm project, you just need to go inside your test directory and initialize it, with the following:
 
-    ```bash
-    cd node-test
-    npm init
-    ```
+   ```bash
+   cd node-test
+   npm init
+   ```
 
 3. This second command will ask you many questions to find out the information required to set up the project; you can just select the defaults for now.
 4. Once all the questions have been asked, it will ask you if the information entered is OK. type `yes` and press Enter/Return and npm will generate a `package.json` file in your directory.
@@ -128,34 +128,34 @@ Let's look at setting up Gulp and using it to automate some testing tools.
 2. Next, you'll need some sample HTML, CSS and JavaScript content to test your system on — make copies of our sample [index.html](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/automation/index.html), [main.js](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/automation/main.js), and [style.css](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/automation/style.css) files in a subfolder with the name `src` inside your project folder. You can try your own test content if you like, but bear in mind that such tools won't work on internal JS/CSS — you need external files.
 3. First, install gulp globally (meaning, it will be available across all projects) using the following command:
 
-    ```bash
-    npm install --global gulp-cli
-    ```
+   ```bash
+   npm install --global gulp-cli
+   ```
 
 4. Next, run the following command inside your npm project directory root to set up gulp as a dependency of your project:
 
-    ```bash
-    npm install --save-dev gulp
-    ```
+   ```bash
+   npm install --save-dev gulp
+   ```
 
 5. Now create a new file inside your project directory called `gulpfile.js`. This is the file that will run all our tasks. Inside this file, put the following:
 
-    ```js
-    const gulp = require('gulp');
+   ```js
+   const gulp = require('gulp');
 
-    exports.default = function(cb) {
-      console.log('Gulp running');
-      cb();
-    };
-    ```
+   exports.default = function(cb) {
+     console.log('Gulp running');
+     cb();
+   };
+   ```
 
-    This requires the `gulp` module we installed earlier, and then exports a default task that does nothing except for printing a message to the terminal — this is useful for letting us know that Gulp is working. Each gulp task is exported in the same basic format — `exports.taskName = taskFunction`. Each function takes one parameter — a callback to run when the task is completed.
+   This requires the `gulp` module we installed earlier, and then exports a default task that does nothing except for printing a message to the terminal — this is useful for letting us know that Gulp is working. Each gulp task is exported in the same basic format — `exports.taskName = taskFunction`. Each function takes one parameter — a callback to run when the task is completed.
 
 6. You can run your gulp's default task with the following command — try this now:
 
-    ```bash
-    gulp
-    ```
+   ```bash
+   gulp
+   ```
 
 ### Adding some real tasks to Gulp
 
@@ -173,40 +173,40 @@ To use each plugin, you need to first install it via npm, then require any depen
 
 1. Install using the following line:
 
-    ```bash
-    npm install --save-dev gulp-htmltidy
-    ```
+   ```bash
+   npm install --save-dev gulp-htmltidy
+   ```
 
-    > **Note:** `--save-dev` adds the package as a dependency to your project. If you look in your project's `package.json` file, you'll see an entry for it in the `devDependencies` property.
+   > **Note:** `--save-dev` adds the package as a dependency to your project. If you look in your project's `package.json` file, you'll see an entry for it in the `devDependencies` property.
 
 2. Add the following dependency to `gulpfile.js`:
 
-    ```js
-    const htmltidy = require('gulp-htmltidy');
-    ```
+   ```js
+   const htmltidy = require('gulp-htmltidy');
+   ```
 
 3. Add the following test to the bottom of `gulpfile.js`:
 
-    ```js
-    function html(cb) {
-      return gulp.src('src/index.html')
-            .pipe(htmltidy())
-            .pipe(gulp.dest('build'));
-        cb();
-    }
-    ```
+   ```js
+   function html(cb) {
+     return gulp.src('src/index.html')
+           .pipe(htmltidy())
+           .pipe(gulp.dest('build'));
+       cb();
+   }
+   ```
 
 4. Export the html task using:
 
-    ```js
-    exports.html = html;
-    ```
+   ```js
+   exports.html = html;
+   ```
 
 5. Change the default export to:
 
-    ```js
-    exports.default = html;
-    ```
+   ```js
+   exports.default = html;
+   ```
 
 Here we are grabbing our development `index.html` file with `gulp.src()`, which allows us to grab a source file to do something with.
 
@@ -218,58 +218,58 @@ In the input version of the file, you may have noticed that we put an empty {{ht
 
 1. Install using the following lines:
 
-    ```bash
-    npm install --save-dev gulp-autoprefixer
-    npm install --save-dev gulp-csslint
-    ```
+   ```bash
+   npm install --save-dev gulp-autoprefixer
+   npm install --save-dev gulp-csslint
+   ```
 
 2. Add the following dependencies to `gulpfile.js`:
 
-    ```js
-    const autoprefixer = require('gulp-autoprefixer');
-    const csslint = require('gulp-csslint');
-    ```
+   ```js
+   const autoprefixer = require('gulp-autoprefixer');
+   const csslint = require('gulp-csslint');
+   ```
 
 3. Add the following test to the bottom of `gulpfile.js`:
 
-    ```js
-    function css(cb) {
-        return gulp.src('src/style.css')
-            .pipe(csslint())
-            .pipe(csslint.formatter('compact'))
-            .pipe(autoprefixer({
-                cascade: false
-            }))
-            .pipe(gulp.dest('build'));
-        cb();
-    }
-    ```
+   ```js
+   function css(cb) {
+       return gulp.src('src/style.css')
+           .pipe(csslint())
+           .pipe(csslint.formatter('compact'))
+           .pipe(autoprefixer({
+               cascade: false
+           }))
+           .pipe(gulp.dest('build'));
+       cb();
+   }
+   ```
 
 4. Add the following property to `package.json`:
 
-    ```json
-    "browserslist": [
-      "last 5 versions"
-    ]
-    ```
+   ```json
+   "browserslist": [
+     "last 5 versions"
+   ]
+   ```
 
 5. Add this line after the const definitions:
 
-    ```js
-    const { series } = require('gulp');
-    ```
+   ```js
+   const { series } = require('gulp');
+   ```
 
 6. Export the css task using:
 
-    ```js
-    exports.css = css;
-    ```
+   ```js
+   exports.css = css;
+   ```
 
 7. Change the default task to:
 
-    ```js
-    exports.default = series(html, css);
-    ```
+   ```js
+   exports.default = series(html, css);
+   ```
 
 Here we grab our `style.css` file, run csslint on it (which outputs a list of any errors in your CSS to the terminal), then runs it through autoprefixer to add any prefixes needed to make nascent CSS features run in older browsers. At the end of the pipe chain, we output our modified prefixed CSS to the `build` directory. Note that this only works if csslint doesn't find any errors — try removing a curly brace from your CSS file and re-running gulp to see what output you get!
 
@@ -277,45 +277,45 @@ Here we grab our `style.css` file, run csslint on it (which outputs a list of an
 
 1. Install using the following lines:
 
-    ```bash
-    npm install --save-dev gulp-babel @babel/preset-env
-    npm install --save-dev @babel/core
-    npm install jshint gulp-jshint --save-dev
-    ```
+   ```bash
+   npm install --save-dev gulp-babel @babel/preset-env
+   npm install --save-dev @babel/core
+   npm install jshint gulp-jshint --save-dev
+   ```
 
 2. Add the following dependencies to `gulpfile.js`:
 
-    ```js
-    const babel = require('gulp-babel');
-    const jshint = require('gulp-jshint');
-    ```
+   ```js
+   const babel = require('gulp-babel');
+   const jshint = require('gulp-jshint');
+   ```
 
 3. Add the following test to the bottom of `gulpfile.js`:
 
-    ```js
-    function js(cb) {
-        return gulp.src('src/main.js')
-            .pipe(jshint())
-            .pipe(jshint.reporter('default'))
-            .pipe(babel({
-                presets: ['@babel/env']
-            }))
-            .pipe(gulp.dest('build'));
-            cb();
-    }
-    ```
+   ```js
+   function js(cb) {
+       return gulp.src('src/main.js')
+           .pipe(jshint())
+           .pipe(jshint.reporter('default'))
+           .pipe(babel({
+               presets: ['@babel/env']
+           }))
+           .pipe(gulp.dest('build'));
+           cb();
+   }
+   ```
 
 4. Export the js task using:
 
-    ```js
-    exports.js = js;
-    ```
+   ```js
+   exports.js = js;
+   ```
 
 5. Change the default task to:
 
-    ```js
-    exports.default = series(html, css, js);
-    ```
+   ```js
+   exports.default = series(html, css, js);
+   ```
 
 Here we grab our `main.js` file, run `jshint` on it and output the results to the terminal using `jshint.reporter`; we then pass the file to babel, which converts it to old style syntax and outputs the result into the `build` directory. Our original code included a [fat arrow function](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), which babel has modified into an old style function.
 
@@ -378,12 +378,12 @@ You can then step up a gear, using an API to access functionality programmatical
 Once you sign in to LambdaTest, you will be routed to the LambdaTest Dashboard. The dashboard will provide you details related to how many minutes you have consumed, how many concurrent sessions are running, your total number of tests to date, and more.
 
 1. To start off with manual testing you need to select the **"Real Time Testing"** tab from the left navigation menu.
-    ![LambdaTest Dashboard](lambdatest-dashboard.png)
+   ![LambdaTest Dashboard](lambdatest-dashboard.png)
 2. As you click on the **Real Time Testing** you will be directed to a screen where you can choose the browser configuration, browser version, OS, and screen resolution with which you want to test your website.
-    ![Real Time Testing](mark-as-bug-1.png)
+   ![Real Time Testing](mark-as-bug-1.png)
 3. As you click on the Start button, a loading screen will appear, providing you with a VM (Virtual Machine) based on your configurations. Once loaded, you can perform live, interactive cross-browser testing with a website.
-    [![Mark as bug](mark-as-bug-2.png)](https://web.archive.org/web/20210608014707if_/https://www.lambdatest.com/support/docs/wp-content/uploads/2019/03/mark-as-bug-2.png)
-    If you notice an issue with the UI, then you can share it with your colleagues by capturing a screenshot of your VM with the screenshot button. You can also record a video of your test session by hitting the recorder button in your test session.
+   [![Mark as bug](mark-as-bug-2.png)](https://web.archive.org/web/20210608014707if_/https://www.lambdatest.com/support/docs/wp-content/uploads/2019/03/mark-as-bug-2.png)
+   If you notice an issue with the UI, then you can share it with your colleagues by capturing a screenshot of your VM with the screenshot button. You can also record a video of your test session by hitting the recorder button in your test session.
 4. With the in-built image editor, highlight your screenshot before you push it to your colleagues.![Highlight a bug](mark-as-bug-3.png)
 5. Using the mark as bug button you can push bugs to numerous third-party tools such as Jira, Asana, Trello, and more. That way you can log a bug directly from your test session on LambdaTest to your project management instance. Check out all the [third-party LambdaTest integrations](https://www.lambdatest.com/integrations).
 
@@ -408,11 +408,11 @@ The [Sauce Labs dashboard](https://app.saucelabs.com/dashboard/manual) has a lot
 4. When loading has finished, you can then start to remotely test the web site running in the chosen browser.![](sauce-test-running.png)
 5. From here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc. The top menu allows you to:
 
-    - Stop the session
-    - Give someone else a URL so they can observe the test remotely.
-    - Copy text/notes to a remote clipboard.
-    - Take a screenshot.
-    - Test in full screen mode.
+   - Stop the session
+   - Give someone else a URL so they can observe the test remotely.
+   - Copy text/notes to a remote clipboard.
+   - Take a screenshot.
+   - Test in full screen mode.
 
 Once you stop the session, you'll return to the Manual Tests tab, where you'll see an entry for each of the previous manual sessions you started. Clicking on one of these entries shows more data for the session. In here you can download any screenshots you took, watch a video of the session, view data logs, and more.
 
@@ -429,47 +429,47 @@ Let's have a brief look at how we'd access the API using Node.js and [node-sauce
 1. First, set up a new npm project to test this out, as detailed in [Setting up Node and npm](#setting_up_node_and_npm). Use a different directory name than before, like `sauce-test` for example.
 2. Install the Node Sauce Labs wrapper using the following command:
 
-    ```
-    npm install saucelabs
-    ```
+   ```
+   npm install saucelabs
+   ```
 
 3. Create a new file inside your project root called `call_sauce.js`. give it the following contents:
 
-    ```js
-    const SauceLabs = require('saucelabs');
-
-    let myAccount = new SauceLabs({
-      username: "your-sauce-username",
-      password: "your-sauce-api-key"
-    });
-
-    myAccount.getAccountDetails((err, res) => {
-      console.log(res);
-      myAccount.getServiceStatus((err, res) => {
-        // Status of the Sauce Labs services
-        console.log(res);
-        myAccount.getJobs((err, jobs) => {
-          // Get a list of all your jobs
-          for (const job of jobs) {
-            myAccount.showJob(job.id, (err, res) => {
-              let str = `${res.id}: Status: ${res.status}`;
-              if (res.error) {
-                str += `\x1b[31m Error: ${res.error}\x1b[0m`;
-              }
-              console.log(str);
-            });
-          }
-        });
-      });
-    });
-    ```
+   ```js
+   const SauceLabs = require('saucelabs');
+
+   let myAccount = new SauceLabs({
+     username: "your-sauce-username",
+     password: "your-sauce-api-key"
+   });
+
+   myAccount.getAccountDetails((err, res) => {
+     console.log(res);
+     myAccount.getServiceStatus((err, res) => {
+       // Status of the Sauce Labs services
+       console.log(res);
+       myAccount.getJobs((err, jobs) => {
+         // Get a list of all your jobs
+         for (const job of jobs) {
+           myAccount.showJob(job.id, (err, res) => {
+             let str = `${res.id}: Status: ${res.status}`;
+             if (res.error) {
+               str += `\x1b[31m Error: ${res.error}\x1b[0m`;
+             }
+             console.log(str);
+           });
+         }
+       });
+     });
+   });
+   ```
 
 4. You'll need to fill in your Sauce Labs username and API key in the indicated places. These can be retrieved from your [User Settings](https://app.saucelabs.com/user-settings) page. Fill these in now.
 5. Make sure everything is saved, and run your file like so:
 
-    ```bash
-    node call_sauce
-    ```
+   ```bash
+   node call_sauce
+   ```
 
 #### Advanced: Automated tests
 
@@ -538,38 +538,38 @@ Let's have a brief look at how we'd access the API using Node.js.
 1. First, set up a new npm project to test this out, as detailed in [Setting up Node and npm](#setting_up_node_and_npm). Use a different directory name than before, like `bstack-test` for example.
 2. Create a new file inside your project root called `call_bstack.js`. give it the following contents:
 
-    ```js
-    const request = require("request");
-
-    const bsUser = "BROWSERSTACK_USERNAME";
-    const bsKey = "BROWSERSTACK_ACCESS_KEY";
-    const baseUrl = `https://${bsUser}:${bsKey}@www.browserstack.com/automate/`;
-
-    function getPlanDetails() {
-      request({ uri: `${baseUrl}plan.json` }, (err, res, body) => {
-        console.log(JSON.parse(body));
-      });
-      /* Response:
-        {
-          automate_plan: <string>,
-          parallel_sessions_running: <int>,
-          team_parallel_sessions_max_allowed: <int>,
-          parallel_sessions_max_allowed: <int>,
-          queued_sessions: <int>,
-          queued_sessions_max_allowed: <int>
-        }
-      */
-    }
-
-    getPlanDetails();
-    ```
+   ```js
+   const request = require("request");
+
+   const bsUser = "BROWSERSTACK_USERNAME";
+   const bsKey = "BROWSERSTACK_ACCESS_KEY";
+   const baseUrl = `https://${bsUser}:${bsKey}@www.browserstack.com/automate/`;
+
+   function getPlanDetails() {
+     request({ uri: `${baseUrl}plan.json` }, (err, res, body) => {
+       console.log(JSON.parse(body));
+     });
+     /* Response:
+       {
+         automate_plan: <string>,
+         parallel_sessions_running: <int>,
+         team_parallel_sessions_max_allowed: <int>,
+         parallel_sessions_max_allowed: <int>,
+         queued_sessions: <int>,
+         queued_sessions_max_allowed: <int>
+       }
+     */
+   }
+
+   getPlanDetails();
+   ```
 
 3. You'll need to fill in your BrowserStack username and API key in the indicated places. These can be retrieved from your [BrowserStack automation dashboard](https://www.browserstack.com/automate). Fill these in now.
 4. Make sure everything is saved, and run your file like so:
 
-    ```bash
-    node call_bstack
-    ```
+   ```bash
+   node call_bstack
+   ```
 
 Below we've also provided some other ready-made functions you might find useful when working with the BrowserStack restful API.
 
@@ -708,16 +708,16 @@ The [TestingBot dashboard](https://app.saucelabs.com/dashboard/manual) lists the
 
 1. Enter the URL of the page you want to test.
 2. Choose the browser/OS combination you want to test by selecting the combination in the grid.
-    ![](screen_shot_2019-04-19_at_14.55.33.png)
+   ![](screen_shot_2019-04-19_at_14.55.33.png)
 3. When you click _Start Browser_, a loading screen will then appear, which spins up a virtual machine running the combination you chose.
 4. When loading has finished, you can then start to remotely test the web site running in the chosen browser.
 5. From here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc. The side menu allows you to:
 
-    - Stop the session
-    - Change the screen resolution
-    - Copy text/notes to a remote clipboard
-    - Take, edit, and download screenshots
-    - Test in full screen mode.
+   - Stop the session
+   - Change the screen resolution
+   - Copy text/notes to a remote clipboard
+   - Take, edit, and download screenshots
+   - Test in full screen mode.
 
 Once you stop the session, you'll return to the _Live Web Testing_ page, where you'll see an entry for each of the previous manual sessions you started. Clicking on one of these entries shows more data for the session. Here you can download any screenshots you took, watch a video of the test, and view logs for the session.
 
@@ -732,31 +732,31 @@ Below is an example on how to interact with the TestingBot API with the NodeJS c
 1. First, set up a new npm project to test this out, as detailed in [Setting up Node and npm](#setting_up_node_and_npm). Use a different directory name than before, like `tb-test` for example.
 2. Install the Node TestingBot wrapper using the following command:
 
-    ```
-    npm install testingbot-api
-    ```
+   ```
+   npm install testingbot-api
+   ```
 
 3. Create a new file inside your project root called `tb.js`. give it the following contents:
 
-    ```js
-    const TestingBot = require('testingbot-api');
+   ```js
+   const TestingBot = require('testingbot-api');
 
-    let tb = new TestingBot({
-      api_key: "your-tb-key",
-      api_secret: "your-tb-secret"
-    });
+   let tb = new TestingBot({
+     api_key: "your-tb-key",
+     api_secret: "your-tb-secret"
+   });
 
-    tb.getTests(function (err, tests) {
-      console.log(tests);
-    });
-    ```
+   tb.getTests(function (err, tests) {
+     console.log(tests);
+   });
+   ```
 
 4. You'll need to fill in your TestingBot Key and Secret in the indicated places. You can find these in the [TestingBot dashboard](https://testingbot.com/members/user/edit).
 5. Make sure everything is saved, and run the file:
 
-    ```bash
-    node tb.js
-    ```
+   ```bash
+   node tb.js
+   ```
 
 #### Advanced: Automated tests
 
diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
index af532b8f5c021bb..c1cef742e5fdc2c 100644
--- a/files/en-us/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
+++ b/files/en-us/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
@@ -79,26 +79,26 @@ Let's implement something that demonstrates this, although we'll keep it simple
 1. Start by making local copies of our [`css-feature-detect.html`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/feature-detection/css-feature-detect.html), [`flex-layout.css`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/feature-detection/flex-layout.css), [`float-layout.css`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/feature-detection/float-layout.css), and [`basic-styling.css`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/feature-detection/basic-styling.css) files. Save them in a new directory.
 2. We will add the HTML5 Shiv to our example too so that the HTML5 semantic elements will style properly in older versions of IE. Download the latest version (see [Manual installation](https://github.com/aFarkas/html5shiv#manual-installation)), unzip the ZIP file, copy the `html5shiv-printshiv.min.js` and `html5shiv.min.js` files into your example directory, and link to one of the files by putting the following under your {{htmlelement("title")}} element:
 
-    ```html
-    <script src="html5shiv.min.js"></script>
-    ```
+   ```html
+   <script src="html5shiv.min.js"></script>
+   ```
 
-    > **Note:** This step is no longer needed. All modern browsers are able to render semantic elements.
+   > **Note:** This step is no longer needed. All modern browsers are able to render semantic elements.
 
 3. Have a look at your example CSS files — you'll see that `basic-styling.css` handles all the styling that we want to give to every browser, whereas the other two CSS files contain the CSS we want to selectively apply to browsers depending on their support levels. You can look at the different effects these two files have by manually changing the CSS file referred to by the second {{htmlelement("link")}} element, but let's instead implement some JavaScript to automatically swap them as needed.
 4. First, remove the contents of the second `<link>` element's `href` attribute. We will fill this in dynamically later on.
 5. Next, add a `<script></script>` element at the bottom of your body (just before the closing `</body>` tag).
 6. Give it the following contents:
 
-    ```js
-    const conditional = document.querySelector('.conditional');
-    const testElem = document.createElement('div');
-    if (testElem.style.flex !== undefined && testElem.style.flexFlow !== undefined) {
-      conditional.setAttribute('href', 'flex-layout.css');
-    } else {
-      conditional.setAttribute('href', 'float-layout.css');
-    }
-    ```
+   ```js
+   const conditional = document.querySelector('.conditional');
+   const testElem = document.createElement('div');
+   if (testElem.style.flex !== undefined && testElem.style.flexFlow !== undefined) {
+     conditional.setAttribute('href', 'flex-layout.css');
+   } else {
+     conditional.setAttribute('href', 'float-layout.css');
+   }
+   ```
 
 Here we are grabbing a reference to the second `<link>` element, and creating a `<div>` element as part of our test. In our conditional statement, we test that the {{cssxref("flex")}} and {{cssxref("flex-flow")}} properties exist in the browser. Note how the JavaScript representations of those properties that are stored inside the {{domxref("HTMLElement.style")}} object use lower camel case, not hyphens, to separate the words.
 
@@ -272,21 +272,21 @@ Let's have a look at how Modernizr works in terms of selectively applying CSS.
 1. First, make a copy of [`supports-feature-detect.html`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/feature-detection/supports-feature-detect.html) and [`supports-styling.css`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/feature-detection/supports-styling.css). Save them as `modernizr-css.html` and `modernizr-css.css`.
 2. Update your {{htmlelement("link")}} element in your HTML so it points to the correct CSS file (you should also update your {{htmlelement("title")}} element to something more suitable!):
 
-    ```html
-    <link href="modernizr-css.css" rel="stylesheet">
-    ```
+   ```html
+   <link href="modernizr-css.css" rel="stylesheet">
+   ```
 
 3. Above this `<link>` element, add a {{htmlelement("script")}} element to apply the Modernizr library to the page, as shown below. This needs to be applied to the page before any CSS (or JavaScript) that might make use of it.
 
-    ```html
-    <script src="modernizr-custom.js"></script>
-    ```
+   ```html
+   <script src="modernizr-custom.js"></script>
+   ```
 
 4. Now edit your opening `<html>` tag, so that it looks like this:
 
-    ```html
-    <html class="no-js">
-    ```
+   ```html
+   <html class="no-js">
+   ```
 
 At this point, try loading your page, and you'll get an idea of how Modernizr works for CSS features. If you look at the DOM inspector of your browser's developer tools, you'll see that Modernizr has updated your `<html>` `class` value like so:
 
@@ -366,27 +366,27 @@ Let's look at an example to show how you'd use those properties.
 3. Next, fill in the `YOUR-API-KEY` placeholder text in the second `<script>` element (as it is now) with a valid Google Maps API key. To get a key, sign in to a Google account, go to the [Get a Key/Authentication](https://developers.google.com/maps/documentation/javascript/get-api-key) page, then click the blue _Get a Key_ button and follow the instructions.
 4. Finally, add another `<script>` element at the bottom of the HTML body (just before the `</body>` tag), and put the following script inside the tags:
 
-    ```js
-    if (Modernizr.geolocation) {
-
-      navigator.geolocation.getCurrentPosition(function(position) {
-
-        let latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
-        let myOptions = {
-          zoom: 8,
-          center: latlng,
-          mapTypeId: google.maps.MapTypeId.TERRAIN,
-          disableDefaultUI: true
-        }
-        let map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
-      });
-
-    } else {
-      const para = document.createElement('p');
-      para.textContent = 'Argh, no geolocation!';
-      document.body.appendChild(para);
-    }
-    ```
+   ```js
+   if (Modernizr.geolocation) {
+
+     navigator.geolocation.getCurrentPosition(function(position) {
+
+       let latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+       let myOptions = {
+         zoom: 8,
+         center: latlng,
+         mapTypeId: google.maps.MapTypeId.TERRAIN,
+         disableDefaultUI: true
+       }
+       let map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
+     });
+
+   } else {
+     const para = document.createElement('p');
+     para.textContent = 'Argh, no geolocation!';
+     document.body.appendChild(para);
+   }
+   ```
 
 Try your example out! Here we use the `Modernizr.geolocation` test to check whether geolocation is supported by the current browser. If it is, we run some code that gets your device's current location, and plots it on a Google Map.
 
diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
index 64a8d8f5eb6b5ee..94034338c9a8acb 100644
--- a/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
+++ b/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
@@ -253,16 +253,16 @@ Try this simple example:
 3. Look for a feature you can use to select that element. For example, at the time of writing, the main Google logo had an ID of `hplogo`.
 4. Store a reference to this element in a variable, for example:
 
-    ```js
-    const test = document.getElementById('hplogo');
-    ```
+   ```js
+   const test = document.getElementById('hplogo');
+   ```
 
 5. Now try to set a new value for the CSS property you are interested in on that element; you can do this using the [style](/en-US/docs/Web/API/HTMLElement/style) property of the element, for example try typing these into the JavaScript console:
 
-    ```js
-    test.style.transform = 'rotate(90deg)'
-    test.style.webkitTransform = 'rotate(90deg)'
-    ```
+   ```js
+   test.style.transform = 'rotate(90deg)'
+   test.style.webkitTransform = 'rotate(90deg)'
+   ```
 
 As you start to type the property name representation after the second dot (note that in JavaScript, CSS property names are written in lower camel case, not hyphenated), the JavaScript console should begin to autocomplete the names of the properties that exist in the browser and match what you've written so far. This is useful for finding out what versions of the property are implemented in that browser.
 
diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/javascript/index.md
index ef745de3a033ded..706e09839eb017f 100644
--- a/files/en-us/learn/tools_and_testing/cross_browser_testing/javascript/index.md
+++ b/files/en-us/learn/tools_and_testing/cross_browser_testing/javascript/index.md
@@ -327,27 +327,27 @@ Let's work through an exercise — in this example we will use a Fetch polyfill
 2. Next, save a copy of the [Fetch polyfill](https://raw.githubusercontent.com/github/fetch/master/fetch.js) in the same directory as the HTML.
 3. Apply the polyfill scripts to the page using the following code — place these above the existing {{htmlelement("script")}} element so they will be available on the page already when we start trying to use Fetch (we are also loading a Promise polyfill from a CDN, as IE11 does support promises, which fetch requires):
 
-    ```html
-    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
-    <script src="fetch.js"></script>
-    ```
+   ```html
+   <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
+   <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
+   <script src="fetch.js"></script>
+   ```
 
 4. Inside the original {{htmlelement("script")}}, add the following code:
 
 5. ```js
-    const myImage = document.querySelector('.my-image');
+   const myImage = document.querySelector('.my-image');
 
-    fetch('flowers.jpg').then((response) => {
-      response.blob().then((myBlob) => {
-        const objectURL = URL.createObjectURL(myBlob);
-        myImage.src = objectURL;
-      });
-    });
-    ```
+   fetch('flowers.jpg').then((response) => {
+     response.blob().then((myBlob) => {
+       const objectURL = URL.createObjectURL(myBlob);
+       myImage.src = objectURL;
+     });
+   });
+   ```
 
 6. If you load it in a browser that doesn't support [Fetch](/en-US/docs/Web/API/fetch), you should still see the flower image appear — cool!
-    ![heading reading fetch basic example with a photo of purple flowers](fetch-image.jpg)
+   ![heading reading fetch basic example with a photo of purple flowers](fetch-image.jpg)
 
 > **Note:** You can find our finished version at [fetch-polyfill-finished.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) (see also the [source code](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)).
 
diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
index 9e646a18353f3f1..7f4560deef262f8 100644
--- a/files/en-us/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
+++ b/files/en-us/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
@@ -237,11 +237,11 @@ To use a Virtual Box, you need to:
 4. To create a new virtual machine, press the _New_ button in the top left-hand corner.
 5. Follow the instructions and fill in the following dialog boxes as appropriate. You'll:
 
-    1. Provide a name for the new virtual machine
-    2. Choose which operating system and version you are installing on it
-    3. Set how much RAM should be allocated (we'd recommend something like 2048MB, or 2GB)
-    4. Create a virtual hard disk (choose the default options across the three dialog boxes containing _Create a virtual hard disk now_, _VDI (virtual disk image)_, and _Dynamically allocated_).
-    5. Choose the file location and size for the virtual hard disk (choose a sensible name and location to keep it, and for the size specify around 50GB, or as much as you are comfortable with specifying).
+   1. Provide a name for the new virtual machine
+   2. Choose which operating system and version you are installing on it
+   3. Set how much RAM should be allocated (we'd recommend something like 2048MB, or 2GB)
+   4. Create a virtual hard disk (choose the default options across the three dialog boxes containing _Create a virtual hard disk now_, _VDI (virtual disk image)_, and _Dynamically allocated_).
+   5. Choose the file location and size for the virtual hard disk (choose a sensible name and location to keep it, and for the size specify around 50GB, or as much as you are comfortable with specifying).
 
 Now the new virtual box should appear in the left-hand menu of the main Virtual Box UI window. At this point, you can double-click to open it — it will start to boot up the virtual machine, but it won't yet have the operating system (OS) installed. At this point you need to point the dialog box at the installer image/disk, and it will run through the steps to install the OS just like on a physical machine.
 
diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
index f0accd013a9d140..d4a924b746ee1da 100644
--- a/files/en-us/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
+++ b/files/en-us/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md
@@ -65,9 +65,9 @@ We will cover writing and running Selenium tests using Node.js, as it is quick a
 1. To start with, set up a new npm project, as discussed in [Setting up Node and npm](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#setting_up_node_and_npm) in the last chapter. Call it something different, like `selenium-test`.
 2. Next, we need to install a framework to allow us to work with Selenium from inside Node. We are going to choose selenium's official [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver), as the documentation seems fairly up-to-date and it is well-maintained. If you want different options, [webdriver.io](https://webdriver.io/) and [nightwatch.js](https://nightwatchjs.org/) are also good choices. To install selenium-webdriver, run the following command, making sure you are inside your project folder:
 
-    ```bash
-    npm install selenium-webdriver
-    ```
+   ```bash
+   npm install selenium-webdriver
+   ```
 
 > **Note:** It is still a good idea to follow these steps even if you previously installed selenium-webdriver and downloaded the browser drivers. You should make sure that everything is up-to-date.
 
@@ -83,25 +83,25 @@ To set your `PATH` variable on a macOS system and on most Linux systems:
 
 1. If you're not already using the `bash` shell (for example, on macOS systems, the default is the `zsh` shell, not `bash`), switch to the `bash` shell:
 
-    ```bash
-    exec bash
-    ```
+   ```bash
+   exec bash
+   ```
 
 2. Open your `.bash_profile` (or `.bashrc`) file (if you can't see hidden files, you'll need to display them, see [Show/Hide hidden files in macOS](https://ianlunn.co.uk/articles/quickly-showhide-hidden-files-mac-os-x-mavericks/) or [Show hidden folders in Ubuntu](https://askubuntu.com/questions/470837/how-to-show-hidden-folders-in-file-manager-nautilus-on-ubuntu)).
 3. Paste the following into the bottom of your file (updating the path as it actually is on your machine):
 
-    ```bash
-    #Add WebDriver browser drivers to PATH
+   ```bash
+   #Add WebDriver browser drivers to PATH
 
-    export PATH=$PATH:/Users/bob
-    ```
+   export PATH=$PATH:/Users/bob
+   ```
 
 4. Save and close this file, then restart your Terminal/command prompt to reapply your Bash configuration.
 5. Check that your new paths are in the `PATH` variable by entering the following into your terminal:
 
-    ```bash
-    echo $PATH
-    ```
+   ```bash
+   echo $PATH
+   ```
 
 6. You should see it printed out in the terminal.
 
@@ -112,42 +112,42 @@ OK, let's try a quick test to make sure everything is working.
 1. Create a new file inside your project directory called `google_test.js`:
 2. Give it the following contents, then save it:
 
-    ```js
-    const webdriver = require('selenium-webdriver');
-    const By = webdriver.By;
-    const until = webdriver.until;
+   ```js
+   const webdriver = require('selenium-webdriver');
+   const By = webdriver.By;
+   const until = webdriver.until;
 
-    const driver = new webdriver.Builder()
-      .forBrowser('firefox')
-      .build();
+   const driver = new webdriver.Builder()
+     .forBrowser('firefox')
+     .build();
 
-    driver.get('http://www.google.com');
+   driver.get('http://www.google.com');
 
-    driver.findElement(By.name('q')).sendKeys('webdriver');
+   driver.findElement(By.name('q')).sendKeys('webdriver');
 
-    driver.sleep(1000).then(() => {
-      driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
-    });
+   driver.sleep(1000).then(() => {
+     driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
+   });
 
-    driver.findElement(By.name('btnK')).click();
+   driver.findElement(By.name('btnK')).click();
 
-    driver.sleep(2000).then(() => {
-      driver.getTitle().then((title) => {
-        if (title === 'webdriver - Google Search') {
-          console.log('Test passed');
-        } else {
-          console.log('Test failed');
-        }
-        driver.quit();
-      });
-    });
-    ```
+   driver.sleep(2000).then(() => {
+     driver.getTitle().then((title) => {
+       if (title === 'webdriver - Google Search') {
+         console.log('Test passed');
+       } else {
+         console.log('Test failed');
+       }
+       driver.quit();
+     });
+   });
+   ```
 
 3. In terminal, make sure you are inside your project folder, then enter the following command:
 
-    ```bash
-    node google_test
-    ```
+   ```bash
+   node google_test
+   ```
 
 You should see an instance of Firefox automatically open up! Google should automatically be loaded in a tab, "webdriver" should be entered in the search box, and the search button will be clicked. WebDriver will then wait for 2 seconds; the document title is then accessed, and if it is "webdriver - Google Search", we will return a message to claim the test is passed. WebDriver will then close down the Firefox instance and stop.
 
@@ -158,52 +158,52 @@ There is also nothing to stop you running the test on multiple browsers simultan
 1. Create another new file inside your project directory called `google_test_multiple.js`. You can feel free to change the references to some of the other browsers we added, remove them, etc., depending on what browsers you have available to test on your operating system. You'll need to make sure you have the right browser drivers set up on your system. In terms of what string to use inside the `.forBrowser()` method for other browsers, see the [Browser enum](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Browser.html) reference page.
 2. Give it the following contents, then save it:
 
-    ```js
-    const webdriver = require('selenium-webdriver');
-    const By = webdriver.By;
-    const until = webdriver.until;
+   ```js
+   const webdriver = require('selenium-webdriver');
+   const By = webdriver.By;
+   const until = webdriver.until;
 
-    let driver_fx = new webdriver.Builder()
-      .forBrowser('firefox')
-      .build();
+   let driver_fx = new webdriver.Builder()
+     .forBrowser('firefox')
+     .build();
 
-    let driver_chr = new webdriver.Builder()
-      .forBrowser('chrome')
-      .build();
+   let driver_chr = new webdriver.Builder()
+     .forBrowser('chrome')
+     .build();
 
-    searchTest(driver_fx);
-    searchTest(driver_chr);
+   searchTest(driver_fx);
+   searchTest(driver_chr);
 
-    function searchTest(driver) {
-      driver.get('http://www.google.com');
-      driver.findElement(By.name('q')).sendKeys('webdriver');
+   function searchTest(driver) {
+     driver.get('http://www.google.com');
+     driver.findElement(By.name('q')).sendKeys('webdriver');
 
-      driver.sleep(1000).then(() => {
-        driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
-      });
+     driver.sleep(1000).then(() => {
+       driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
+     });
 
-      driver.findElement(By.name('btnK')).click();
+     driver.findElement(By.name('btnK')).click();
 
-      driver.sleep(2000).then(() => {
-        driver.getTitle().then((title) => {
+     driver.sleep(2000).then(() => {
+       driver.getTitle().then((title) => {
 
-          if (title === 'webdriver - Google Search') {
-            console.log('Test passed');
-          } else {
-            console.log('Test failed');
-          }
-          driver.quit();
-        });
-      });
+         if (title === 'webdriver - Google Search') {
+           console.log('Test passed');
+         } else {
+           console.log('Test failed');
+         }
+         driver.quit();
+       });
+     });
 
-    }
-    ```
+   }
+   ```
 
 3. In terminal, make sure you are inside your project folder, then enter the following command:
 
-    ```bash
-    node google_test_multiple
-    ```
+   ```bash
+   node google_test_multiple
+   ```
 
 4. If you are using a Mac and do decide to test Safari, you might get an error message along the lines of "Could not create a session: You must enable the 'Allow Remote Automation' option in Safari's Develop menu to control Safari via WebDriver." If you get this, follow the given instruction and try again.
 
@@ -422,15 +422,15 @@ In addition, we should mention test results/reporting — we've been reporting r
 1. For example, try making a local copy of our [`mocha_test.js`](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/selenium/mocha_test.js) example inside your project directory. Put it inside a subfolder called `test`. This example uses a long chain of promises to run all the steps required in our test — the promise-based methods WebDriver uses need to resolve for it to work properly.
 2. Install the mocha test harness by running the following command inside your project directory:
 
-    ```bash
-    npm install --save-dev mocha
-    ```
+   ```bash
+   npm install --save-dev mocha
+   ```
 
 3. You can now run the test (and any others you put inside your `test` directory) using the following command:
 
-    ```bash
-    npx mocha --no-timeouts
-    ```
+   ```bash
+   npx mocha --no-timeouts
+   ```
 
 4. You should include the `--no-timeouts` flag to make sure your tests don't end up failing because of Mocha's arbitrary timeout (which is 3 seconds).
 
@@ -449,72 +449,72 @@ Let's write an example:
 1. Inside your project directory, create a new file called `lambdatest_google_test.js`
 2. Give it the following contents:
 
-    ```js
-    const webdriver = require('selenium-webdriver');
-    const By = webdriver.By;
-    const until = webdriver.until;
-
-    // username: Username can be found at automation dashboard
-    const USERNAME = '{username}';
-
-    // AccessKey: AccessKey can be generated from automation dashboard or profile section
-    const KEY = '{accessKey}';
-
-    // gridUrl: gridUrl can be found at automation dashboard
-    const GRID_HOST = 'hub.lambdatest.com/wd/hub';
-
-    function searchTextOnGoogle() {
-      // Setup Input capabilities
-      const capabilities = {
-        platform: 'windows 10',
-        browserName: 'chrome',
-        version: '67.0',
-        resolution: '1280x800',
-        network: true,
-        visual: true,
-        console: true,
-        video: true,
-        name: 'Test 1', // name of the test
-        build: 'NodeJS build' // name of the build
-        };
-
-      // URL: https://{username}:{accessToken}@hub.lambdatest.com/wd/hub
-      const gridUrl = `https://${USERNAME}:${KEY}@${GRID_HOST}`;
-
-      // setup and build selenium driver object
-      const driver = new webdriver.Builder()
-        .usingServer(gridUrl)
-        .withCapabilities(capabilities)
-        .build();
-
-      // navigate to a URL, search for a text and get title of page
-      driver.get('https://www.google.com/ncr').then(function() {
-        driver.findElement(webdriver.By.name('q')).sendKeys('LambdaTest\n').then(function() {
-          driver.getTitle().then((title) => {
-            setTimeout(() => {
-              console.log(title);
-              driver.quit();
-              }, 5000);
-            });
-          });
-        });
-      }
-
-    searchTextOnGoogle();
-    ```
+   ```js
+   const webdriver = require('selenium-webdriver');
+   const By = webdriver.By;
+   const until = webdriver.until;
+
+   // username: Username can be found at automation dashboard
+   const USERNAME = '{username}';
+
+   // AccessKey: AccessKey can be generated from automation dashboard or profile section
+   const KEY = '{accessKey}';
+
+   // gridUrl: gridUrl can be found at automation dashboard
+   const GRID_HOST = 'hub.lambdatest.com/wd/hub';
+
+   function searchTextOnGoogle() {
+     // Setup Input capabilities
+     const capabilities = {
+       platform: 'windows 10',
+       browserName: 'chrome',
+       version: '67.0',
+       resolution: '1280x800',
+       network: true,
+       visual: true,
+       console: true,
+       video: true,
+       name: 'Test 1', // name of the test
+       build: 'NodeJS build' // name of the build
+       };
+
+     // URL: https://{username}:{accessToken}@hub.lambdatest.com/wd/hub
+     const gridUrl = `https://${USERNAME}:${KEY}@${GRID_HOST}`;
+
+     // setup and build selenium driver object
+     const driver = new webdriver.Builder()
+       .usingServer(gridUrl)
+       .withCapabilities(capabilities)
+       .build();
+
+     // navigate to a URL, search for a text and get title of page
+     driver.get('https://www.google.com/ncr').then(function() {
+       driver.findElement(webdriver.By.name('q')).sendKeys('LambdaTest\n').then(function() {
+         driver.getTitle().then((title) => {
+           setTimeout(() => {
+             console.log(title);
+             driver.quit();
+             }, 5000);
+           });
+         });
+       });
+     }
+
+   searchTextOnGoogle();
+   ```
 
 3. Visit your [LambdaTest automation dashboard](https://www.lambdatest.com/selenium-automation), to fetch your LambdaTest's username and access key by clicking on the **key** icon on the top-right(see _Username and Access Keys_). Replace the `{username}` and `{accessKey}` placeholders in the code with your actual user name and access key values (and make sure you keep them secure).
 4. Run the below command in your terminal to execute your test:
 
-    ```bash
-    node lambdatest_google_test
-    ```
+   ```bash
+   node lambdatest_google_test
+   ```
 
-    The test will be sent to LambdaTest, and the output of your test will be reflected on your LambdaTest console.
-    If you wish to extract these results for reporting purpose from LambdaTest platform then you can do so by using [LambdaTest restful API](https://www.lambdatest.com/blog/lambdatest-launches-api-for-selenium-automation/).
+   The test will be sent to LambdaTest, and the output of your test will be reflected on your LambdaTest console.
+   If you wish to extract these results for reporting purpose from LambdaTest platform then you can do so by using [LambdaTest restful API](https://www.lambdatest.com/blog/lambdatest-launches-api-for-selenium-automation/).
 
 5. Now if you go to your [LambdaTest Automation dashboard](https://www.lambdatest.com/selenium-automation), you'll see your test listed; from here you'll be able to see videos, screenshots, and other such data.
-    [![LambdaTest Automation Dashboard](automation-logs-1.jpg)](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/Automation-logs-1.jpg)You can retrieve network, command, exception, and Selenium logs for every test within your test build. You will also find a video recording of your Selenium script execution.
+   [![LambdaTest Automation Dashboard](automation-logs-1.jpg)](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/Automation-logs-1.jpg)You can retrieve network, command, exception, and Selenium logs for every test within your test build. You will also find a video recording of your Selenium script execution.
 
 > **Note:** The _HELP_ button on LambdaTest Automation Dashboard will provide you with an ample amount of information to help you get started with LambdaTest automation. You can also follow our documentation about [running first Selenium script in Node JS](https://www.lambdatest.com/support/docs/quick-guide-to-run-node-js-tests-on-lambdatest-selenium-grid/).
 
@@ -526,15 +526,15 @@ When executing numerous automation tests, marking their status as passed or fail
 
 1. Use the below command for marking a status as **passed** on LambdaTest.
 
-    ```bash
-    driver.executeScript("lambda-status=passed");
-    ```
+   ```bash
+   driver.executeScript("lambda-status=passed");
+   ```
 
 2. Use the below command for marking a status as **failed** on LambdaTest.
 
-    ```bash
-    driver.executeScript("lambda-status=failed");
-    ```
+   ```bash
+   driver.executeScript("lambda-status=failed");
+   ```
 
 ### BrowserStack
 
@@ -545,62 +545,62 @@ Let's write an example:
 1. Inside your project directory, create a new file called `bstack_google_test.js`.
 2. Give it the following contents:
 
-    ```js
-    const webdriver = require('selenium-webdriver');
-    const By = webdriver.By;
-    const until = webdriver.until;
-
-    // Input capabilities
-    const capabilities = {
-      'browserName' : 'Firefox',
-      'browser_version' : '56.0 beta',
-      'os' : 'OS X',
-      'os_version' : 'Sierra',
-      'resolution' : '1280x1024',
-      'browserstack.user' : 'YOUR-USER-NAME',
-      'browserstack.key' : 'YOUR-ACCESS-KEY',
-      'browserstack.debug' : 'true',
-      'build' : 'First build'
-    };
-
-    const driver = new webdriver.Builder()
-      .usingServer('http://hub-cloud.browserstack.com/wd/hub')
-      .withCapabilities(capabilities)
-      .build();
-
-    driver.get('http://www.google.com');
-    driver.findElement(By.name('q')).sendKeys('webdriver');
-
-    driver.sleep(1000).then(() => {
-      driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
-    });
-
-    driver.findElement(By.name('btnK')).click();
-
-    driver.sleep(2000).then(() => {
-      driver.getTitle().then((title) => {
-        if (title === 'webdriver - Google Search') {
-          console.log('Test passed');
-        } else {
-          console.log('Test failed');
-        }
-      });
-    });
-
-    driver.quit();
-    ```
+   ```js
+   const webdriver = require('selenium-webdriver');
+   const By = webdriver.By;
+   const until = webdriver.until;
+
+   // Input capabilities
+   const capabilities = {
+     'browserName' : 'Firefox',
+     'browser_version' : '56.0 beta',
+     'os' : 'OS X',
+     'os_version' : 'Sierra',
+     'resolution' : '1280x1024',
+     'browserstack.user' : 'YOUR-USER-NAME',
+     'browserstack.key' : 'YOUR-ACCESS-KEY',
+     'browserstack.debug' : 'true',
+     'build' : 'First build'
+   };
+
+   const driver = new webdriver.Builder()
+     .usingServer('http://hub-cloud.browserstack.com/wd/hub')
+     .withCapabilities(capabilities)
+     .build();
+
+   driver.get('http://www.google.com');
+   driver.findElement(By.name('q')).sendKeys('webdriver');
+
+   driver.sleep(1000).then(() => {
+     driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
+   });
+
+   driver.findElement(By.name('btnK')).click();
+
+   driver.sleep(2000).then(() => {
+     driver.getTitle().then((title) => {
+       if (title === 'webdriver - Google Search') {
+         console.log('Test passed');
+       } else {
+         console.log('Test failed');
+       }
+     });
+   });
+
+   driver.quit();
+   ```
 
 3. From your [BrowserStack automation dashboard](https://www.browserstack.com/automate), get your user name and access key (see _Username and Access Keys_). Replace the `YOUR-USER-NAME` and `YOUR-ACCESS-KEY` placeholders in the code with your actual user name and access key values (and make sure you keep them secure).
 4. Run your test with the following command:
 
-    ```bash
-    node bstack_google_test
-    ```
+   ```bash
+   node bstack_google_test
+   ```
 
-    The test will be sent to BrowserStack, and the test result will be returned to your console. This shows the importance of including some kind of result reporting mechanism!
+   The test will be sent to BrowserStack, and the test result will be returned to your console. This shows the importance of including some kind of result reporting mechanism!
 
 5. Now if you go back to the [BrowserStack automation dashboard](https://www.browserstack.com/automate) page, you'll see your test listed:
-    ![](bstack_automated_results.png)
+   ![](bstack_automated_results.png)
 
 If you click on the link for your test, you'll get to a new screen where you will be able to see a video recording of the test, and multiple detailed logs of information pertaining to it.
 
@@ -616,49 +616,49 @@ Let's update our `bstack_google_test.js` demo, to show how these features work:
 
 1. First, we'll need to import the node request module, so we can use it to send requests to the REST API. Add the following line at the very top of your code:
 
-    ```js
-    const request = require("request");
-    ```
+   ```js
+   const request = require("request");
+   ```
 
 2. Now we'll update our `capabilities` object to include a project name — add the following line before the closing curly brace, remembering to add a comma at the end of the previous line (you can vary the build and project names to organize the tests in different windows in the BrowserStack automation dashboard):
 
-    ```js
-    'project' : 'Google test 2'
-    ```
+   ```js
+   'project' : 'Google test 2'
+   ```
 
 3. Next we need to access the `sessionId` of the current session, so we know where to send the request (the ID is included in the request URL, as you'll see later). Include the following lines just below the block that creates the `driver` object (`let driver …`) :
 
-    ```js
-    let sessionId;
+   ```js
+   let sessionId;
 
-    driver.session_.then((sessionData) =>{
-      sessionId = sessionData.id_;
-    });
-    ```
+   driver.session_.then((sessionData) =>{
+     sessionId = sessionData.id_;
+   });
+   ```
 
 4. Finally, update the `driver.sleep(2000)` block near the bottom of the code to add REST API calls (again, replace the `YOUR-USER-NAME` and `YOUR-ACCESS-KEY` placeholders in the code with your actual user name and access key values):
 
-    ```js
-    driver.sleep(2000).then(() => {
-      driver.getTitle().then((title) => {
-        if (title === 'webdriver - Google Search') {
-          console.log('Test passed');
-          request({ 
-            uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`,
-            method: "PUT",
-            form: { "status": "passed", "reason": "Google results showed correct title" }
-          });
-        } else {
-          console.log('Test failed');
-          request({
-            uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`,
-            method: "PUT",
-            form: { "status": "failed", "reason": "Google results showed wrong title" }
-          });
-        }
-      });
-    });
-    ```
+   ```js
+   driver.sleep(2000).then(() => {
+     driver.getTitle().then((title) => {
+       if (title === 'webdriver - Google Search') {
+         console.log('Test passed');
+         request({
+           uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`,
+           method: "PUT",
+           form: { "status": "passed", "reason": "Google results showed correct title" }
+         });
+       } else {
+         console.log('Test failed');
+         request({
+           uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`,
+           method: "PUT",
+           form: { "status": "failed", "reason": "Google results showed wrong title" }
+         });
+       }
+     });
+   });
+   ```
 
 These are fairly intuitive — once the test completes, we send an API call to BrowserStack to update the test with a passed or failed status, and a reason for the result.
 
@@ -675,58 +675,58 @@ Let's write an example:
 1. Inside your project directory, create a new file called `sauce_google_test.js`.
 2. Give it the following contents:
 
-    ```js
-    const webdriver = require('selenium-webdriver');
-    const By = webdriver.By;
-    const until = webdriver.until;
-    const username = "YOUR-USER-NAME";
-    const accessKey = "YOUR-ACCESS-KEY";
-
-    const driver = new webdriver.Builder()
-      .withCapabilities({
-        browserName: 'chrome',
-        platform: 'Windows XP',
-        version: '43.0',
-        username,
-        accessKey,
-      })
-      .usingServer(`https://${username}:${accessKey}@ondemand.saucelabs.com:443/wd/hub`)
-      .build();
-
-    driver.get('http://www.google.com');
-
-    driver.findElement(By.name('q')).sendKeys('webdriver');
-
-    driver.sleep(1000).then(() => {
-      driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
-    });
-
-    driver.findElement(By.name('btnK')).click();
-
-    driver.sleep(2000).then(() => {
-      driver.getTitle().then((title) => {
-        if (title === 'webdriver - Google Search') {
-          console.log('Test passed');
-        } else {
-          console.log('Test failed');
-        }
-      });
-    });
-
-    driver.quit();
-    ```
+   ```js
+   const webdriver = require('selenium-webdriver');
+   const By = webdriver.By;
+   const until = webdriver.until;
+   const username = "YOUR-USER-NAME";
+   const accessKey = "YOUR-ACCESS-KEY";
+
+   const driver = new webdriver.Builder()
+     .withCapabilities({
+       browserName: 'chrome',
+       platform: 'Windows XP',
+       version: '43.0',
+       username,
+       accessKey,
+     })
+     .usingServer(`https://${username}:${accessKey}@ondemand.saucelabs.com:443/wd/hub`)
+     .build();
+
+   driver.get('http://www.google.com');
+
+   driver.findElement(By.name('q')).sendKeys('webdriver');
+
+   driver.sleep(1000).then(() => {
+     driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
+   });
+
+   driver.findElement(By.name('btnK')).click();
+
+   driver.sleep(2000).then(() => {
+     driver.getTitle().then((title) => {
+       if (title === 'webdriver - Google Search') {
+         console.log('Test passed');
+       } else {
+         console.log('Test failed');
+       }
+     });
+   });
+
+   driver.quit();
+   ```
 
 3. From your [Sauce Labs user settings](https://app.saucelabs.com/user-settings), get your user name and access key. Replace the `YOUR-USER-NAME` and `YOUR-ACCESS-KEY` placeholders in the code with your actual user name and access key values (and make sure you keep them secure).
 4. Run your test with the following command:
 
-    ```bash
-    node sauce_google_test
-    ```
+   ```bash
+   node sauce_google_test
+   ```
 
-    The test will be sent to Sauce Labs, and the test result will be returned to your console. This shows the importance of including some kind of result reporting mechanism!
+   The test will be sent to Sauce Labs, and the test result will be returned to your console. This shows the importance of including some kind of result reporting mechanism!
 
 5. Now if you go to your [Sauce Labs Automated Test dashboard](https://app.saucelabs.com/dashboard/tests) page, you'll see your test listed; from here you'll be able to see videos, screenshots, and other such data.
-    ![](sauce_labs_automated_test.png)
+   ![](sauce_labs_automated_test.png)
 
 > **Note:** Sauce Labs' [Platform Configurator](https://saucelabs.com/platform/platform-configurator#/) is a useful tool for generating capability objects to feed to your driver instances, based on what browser/OS you want to test on.
 
@@ -740,55 +740,55 @@ To do this, you need to:
 
 1. Install the Node Sauce Labs wrapper using the following command (if you've not already done it for this project):
 
-    ```bash
-    npm install saucelabs --save-dev
-    ```
+   ```bash
+   npm install saucelabs --save-dev
+   ```
 
 2. Require saucelabs — put this at the top of your `sauce_google_test.js` file, just below the previous variable declarations:
 
-    ```js
-    const SauceLabs = require('saucelabs');
-    ```
+   ```js
+   const SauceLabs = require('saucelabs');
+   ```
 
 3. Create a new instance of SauceLabs, by adding the following just below that:
 
-    ```js
-    const saucelabs = new SauceLabs({
-      username : "YOUR-USER-NAME",
-      password : "YOUR-ACCESS-KEY"
-    });
-    ```
+   ```js
+   const saucelabs = new SauceLabs({
+     username : "YOUR-USER-NAME",
+     password : "YOUR-ACCESS-KEY"
+   });
+   ```
 
-    Again, replace the `YOUR-USER-NAME` and `YOUR-ACCESS-KEY` placeholders in the code with your actual user name and access key values (note that the saucelabs npm package rather confusingly uses `password`, not `accessKey`). Since you are using these twice now, you may want to create a couple of helper variables to store them in.
+   Again, replace the `YOUR-USER-NAME` and `YOUR-ACCESS-KEY` placeholders in the code with your actual user name and access key values (note that the saucelabs npm package rather confusingly uses `password`, not `accessKey`). Since you are using these twice now, you may want to create a couple of helper variables to store them in.
 
 4. Below the block where you define the `driver` variable (just below the `build()` line), add the following block — this gets the correct driver `sessionID` that we need to write data to the job (you can see it action in the next code block):
 
-    ```js
-    driver.getSession().then((sessionid) => {
-      driver.sessionID = sessionid.id_;
-    });
-    ```
+   ```js
+   driver.getSession().then((sessionid) => {
+     driver.sessionID = sessionid.id_;
+   });
+   ```
 
 5. Finally, replace the `driver.sleep(2000)` block near the bottom of the code with the following:
 
-    ```js
-    driver.sleep(2000).then(() => {
-      driver.getTitle().then((title) => {
-        let testPassed = false;
-        if (title === 'webdriver - Google Search') {
-          console.log('Test passed');
-          testPassed = true;
-        } else {
-          console.error('Test failed');
-        }
-
-        saucelabs.updateJob(driver.sessionID, {
-          name: 'Google search results page title test',
-          passed: testPassed
-        });
-      });
-    });
-    ```
+   ```js
+   driver.sleep(2000).then(() => {
+     driver.getTitle().then((title) => {
+       let testPassed = false;
+       if (title === 'webdriver - Google Search') {
+         console.log('Test passed');
+         testPassed = true;
+       } else {
+         console.error('Test failed');
+       }
+
+       saucelabs.updateJob(driver.sessionID, {
+         name: 'Google search results page title test',
+         passed: testPassed
+       });
+     });
+   });
+   ```
 
 Here we've set a `testPassed` variable to `true` or `false` depending on whether the test passed or fails, then we've used the `saucelabs.updateJob()` method to update the details.
 
@@ -804,11 +804,11 @@ If you don't want to use a service like Sauce Labs or BrowserStack, you can alwa
 2. Next, download the latest [Selenium standalone server](https://selenium-release.storage.googleapis.com/index.html) — this acts as a proxy between your script and the browser drivers. Choose the latest stable version number (i.e. not a beta), and from the list choose a file starting with "selenium-server-standalone". When this has downloaded, put it in a sensible place, like in your home directory. If you've not already added the location to your `PATH`, do so now (see the [Setting up Selenium in Node](#setting_up_selenium_in_node) section).
 3. Run the standalone server by entering the following into a terminal on your server computer
 
-    ```bash
-    java -jar selenium-server-standalone-3.0.0.jar
-    ```
+   ```bash
+   java -jar selenium-server-standalone-3.0.0.jar
+   ```
 
-    (update the `.jar` filename) so it matches exactly what file you've got.
+   (update the `.jar` filename) so it matches exactly what file you've got.
 
 4. The server will run on [`http://localhost:4444/wd/hub`](http://localhost:4444/wd/hub) — try going there now to see what you get.
 
@@ -817,18 +817,18 @@ Now we've got the server running, let's create a demo test that will run on the
 1. Create a copy of your `google_test.js` file, and call it `google_test_remote.js`; put it in your project directory.
 2. Update the second code block (which starts with `let driver = …`) like so
 
-    ```js
-    let driver = new webdriver.Builder()
-      .forBrowser('firefox')
-      .usingServer('http://localhost:4444/wd/hub')
-      .build();
-    ```
+   ```js
+   let driver = new webdriver.Builder()
+     .forBrowser('firefox')
+     .usingServer('http://localhost:4444/wd/hub')
+     .build();
+   ```
 
 3. Run your test, and you should see it run as expected; this time however you will be running it on the standalone server:
 
-    ```bash
-    node google_test_remote.js
-    ```
+   ```bash
+   node google_test_remote.js
+   ```
 
 So this is pretty cool. We have tested this locally, but you could set this up on just about any server along with the relevant browser drivers, and then connect your scripts to it using the URL you choose to expose it at.
 
diff --git a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md
index f95a246e2c011e4..a7b508a46c43a09 100644
--- a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md
+++ b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md
@@ -78,36 +78,36 @@ We're going to add the build command to our `package.json` file as an npm script
 1. Open the `package.json` file in your project's root directory, and find the `scripts` property.
 2. We'll add a `build` command that we can run to build our code. Add the following line to your project now:
 
-    ```json
-    "scripts": {
-      // …
-      "build": "parcel build src/index.html"
-    }
-    ```
+   ```json
+   "scripts": {
+     // …
+     "build": "parcel build src/index.html"
+   }
+   ```
 
-    > **Note:** If the `scripts` property already has a command inside it, put a comma at the end of it. Keep the JSON valid.
+   > **Note:** If the `scripts` property already has a command inside it, put a comma at the end of it. Keep the JSON valid.
 
 3. You should now be able to run the following command in the root of your project directory to run the production build step (first quit the running process with <kbd>Ctrl</kbd> + <kbd>C</kbd> if you need to):
 
-    ```bash
-    npm run build
-    ```
+   ```bash
+   npm run build
+   ```
 
-    This should give you an output like the following, showing you the production files that were created, how big they are, and how long they took to build:
+   This should give you an output like the following, showing you the production files that were created, how big they are, and how long they took to build:
 
-    ```bash
-    dist/src.99d8a31a.js.map       446.15 KB     63ms
-    dist/src.99d8a31a.js           172.51 KB    5.55s
-    dist/stars.7f1dd035.svg          6.31 KB    145ms
-    dist/asteroid2.3ead4904.svg      3.51 KB    155ms
-    dist/asteroid1.698d75e9.svg       2.9 KB    153ms
-    dist/src.84f2edd1.css.map        2.57 KB      3ms
-    dist/src.84f2edd1.css            1.25 KB    1.53s
-    dist/bg.084d3fd3.svg               795 B    147ms
-    dist/index.html                    354 B    944ms
-    ```
+   ```bash
+   dist/src.99d8a31a.js.map       446.15 KB     63ms
+   dist/src.99d8a31a.js           172.51 KB    5.55s
+   dist/stars.7f1dd035.svg          6.31 KB    145ms
+   dist/asteroid2.3ead4904.svg      3.51 KB    155ms
+   dist/asteroid1.698d75e9.svg       2.9 KB    153ms
+   dist/src.84f2edd1.css.map        2.57 KB      3ms
+   dist/src.84f2edd1.css            1.25 KB    1.53s
+   dist/bg.084d3fd3.svg               795 B    147ms
+   dist/index.html                    354 B    944ms
+   ```
 
-    Try it now!
+   Try it now!
 
 For you to create your own instance of this project you will need to host this project's code in your own git repository. Our next step is to push the project to GitHub.
 
@@ -131,51 +131,51 @@ Now we have three tasks ahead of us:
 
 1. To add changes, run the following command:
 
-    ```bash
-    git add .
-    ```
+   ```bash
+   git add .
+   ```
 
-    Note the period at the end, it means "everything in this directory". The `git add .` command is a bit of a sledgehammer approach — it will add all local changes you've worked on in one go. If you want finer control over what you add, then use `git add -p` for an interactive process, or add individual files using `git add path/to/file`.
+   Note the period at the end, it means "everything in this directory". The `git add .` command is a bit of a sledgehammer approach — it will add all local changes you've worked on in one go. If you want finer control over what you add, then use `git add -p` for an interactive process, or add individual files using `git add path/to/file`.
 
 2. Now all the code is staged, we can commit; run the following command:
 
-    ```bash
-    git commit -m 'committing initial code'
-    ```
+   ```bash
+   git commit -m 'committing initial code'
+   ```
 
-    > **Note:** Although you're free to write whatever you wish in the commit message, there's some useful tips around the web on good commit messages. Keep them short, concise, and descriptive, so they clearly describe what the change does.
+   > **Note:** Although you're free to write whatever you wish in the commit message, there's some useful tips around the web on good commit messages. Keep them short, concise, and descriptive, so they clearly describe what the change does.
 
 3. Finally the code needs to be pushed to your GitHub hosted repository. Let's do that now.
 
-    Over at GitHub, visit <https://github.com/new> and create your own repository to host this code.
+   Over at GitHub, visit <https://github.com/new> and create your own repository to host this code.
 
 4. Give your repository a short, memorable name, without spaces in it (use hyphens to separate words), and a description, then click _Create repository_ at the bottom of the page.
 
-    You should now have a "remote" URL that points to your new GitHub repo.
+   You should now have a "remote" URL that points to your new GitHub repo.
 
-    ![GitHub screenshot showing remote URLs you can use to deploy code to a GitHub repo](github-quick-setup.png)
+   ![GitHub screenshot showing remote URLs you can use to deploy code to a GitHub repo](github-quick-setup.png)
 
 5. This remote location needs to be added to our local git repository before we can push it up there, otherwise it won't be able to find it. You'll need to run a command with the following structure (use the provided HTTPS option for now — especially if you are new to GitHub — not the SSH option):
 
-    ```bash
-    git remote add github https://github.com/yourname/repo-name.git
-    ```
+   ```bash
+   git remote add github https://github.com/yourname/repo-name.git
+   ```
 
-    So if your remote URL was `https://github.com/remy/super-website.git`, as in the screenshot above, your command would be
+   So if your remote URL was `https://github.com/remy/super-website.git`, as in the screenshot above, your command would be
 
-    ```bash
-    git remote add github https://github.com/remy/super-website.git
-    ```
+   ```bash
+   git remote add github https://github.com/remy/super-website.git
+   ```
 
-    Change the URL to your own repository, and run it now.
+   Change the URL to your own repository, and run it now.
 
 6. Now we're ready to push our code to GitHub; run the following command now:
 
-    ```bash
-    git push github main
-    ```
+   ```bash
+   git push github main
+   ```
 
-    At this point you'll be prompted to enter a username and password before Git will allow the push to be sent. This is because we used the HTTPS option rather than the SSH option, as seen in the screenshot earlier. For this you need your GitHub username and then — if you do not have two-factor authentication (2FA) turned on — your GitHub password. We would always encourage you to use 2FA if possible, but bear in mind that if you do, you'll also need to use a "personal access token". GitHub help pages has an [excellent and simple walkthrough covering how to get one](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token).
+   At this point you'll be prompted to enter a username and password before Git will allow the push to be sent. This is because we used the HTTPS option rather than the SSH option, as seen in the screenshot earlier. For this you need your GitHub username and then — if you do not have two-factor authentication (2FA) turned on — your GitHub password. We would always encourage you to use 2FA if possible, but bear in mind that if you do, you'll also need to use a "personal access token". GitHub help pages has an [excellent and simple walkthrough covering how to get one](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token).
 
 > **Note:** If you are interested in using the SSH option, thereby avoiding the need to enter your username and password every time you push to GitHub, [this tutorial walks you through how](https://docs.github.com/en/authentication/connecting-to-github-with-ssh).
 
@@ -196,30 +196,30 @@ Let's get this done:
 1. Go to <https://app.netlify.com/start>.
 2. Press the GitHub button underneath the _Continuous Deployment_ heading. "Continuous Deployment" means that whenever the code repository changes, Netlify will (try) to deploy the code, thus it being "continuous".
 
-    ![netlify deployment options, as described in the surrounding text](netlify-deploy.png)
+   ![netlify deployment options, as described in the surrounding text](netlify-deploy.png)
 
 3. Depending on whether you authorized Netlify before, you might need to authorize Netlify with GitHub, and choose what account you want to authorize it for (if you have multiple GitHub accounts or orgs). Choose the one you pushed your project to.
 4. Netlify will prompt you with a list of the GitHub repositories it can find. Select your project repository and proceed to the next step.
 5. Since we've connected Netlify to our GitHub account and given it access to deploy the project repository, Netlify will ask _how_ to prepare the project for deployment and _what_ to deploy.
 
-    You should enter the command `npm run build` for the _Build command_, and specify the `dist` directory for the _Publish directory_ — this contains the code that we want to make public.
+   You should enter the command `npm run build` for the _Build command_, and specify the `dist` directory for the _Publish directory_ — this contains the code that we want to make public.
 
 6. To finish up, click _Deploy site_.
 
-    ![netlify distribution options, as described in the surrounding text](netlify-dist.png)
+   ![netlify distribution options, as described in the surrounding text](netlify-dist.png)
 
 7. After a short wait for the deployment to occur, you should get a URL that you can go to, to see your published site — try it out!
 8. And even better, whenever we make a change and _push_ the change to our remote git repository (on GitHub), this will trigger a notification to Netlify which will then run our specified build task and then deploy the resulting `dist` directory to our published site.
 
-    Try it now — make a small change to your app, and then push it to GitHub using these commands:
+   Try it now — make a small change to your app, and then push it to GitHub using these commands:
 
-    ```bash
-    git add .
-    git commit -m 'simple netlify test'
-    git push github main
-    ```
+   ```bash
+   git add .
+   git commit -m 'simple netlify test'
+   git push github main
+   ```
 
-    You should see your published site update with the change — this might take a few minutes to publish, so have a little patience.
+   You should see your published site update with the change — this might take a few minutes to publish, so have a little patience.
 
 That's it for Netlify. We can optionally change the name of the Netlify project or specify to use our own domain name, which Netlify offers some [excellent documentation](https://docs.netlify.com/) on.
 
@@ -251,57 +251,57 @@ Let's get started.
 1. Go to your `package.json` file and open it up.
 2. Find your `scripts` member, and update it so that it contains the following test and build commands:
 
-    ```json
-    "scripts": {
-      …
-      "test": "node tests/*.js",
-      "build": "npm run test && parcel build src/index.html"
-    }
-    ```
+   ```json
+   "scripts": {
+     …
+     "test": "node tests/*.js",
+     "build": "npm run test && parcel build src/index.html"
+   }
+   ```
 
 3. Now of course we need to add the test to our codebase; create a new directory in your root directory called tests:
 
-    ```bash
-    mkdir tests
-    ```
+   ```bash
+   mkdir tests
+   ```
 
 4. Inside the new directory, create a test file:
 
-    ```bash
-    cd tests
-    touch nasa-feed.test.js
-    ```
+   ```bash
+   cd tests
+   touch nasa-feed.test.js
+   ```
 
 5. Open this file, and add the contents of [nasa-feed.test.js](https://raw.githubusercontent.com/remy/mdn-will-it-miss/master/tests/nasa-feed.test.js) to it:
 6. This test uses the axios package to fetch the data feed we want to test; to install this dependency, run the following command:
 
-    ```bash
-    npm install --save-dev axios
-    ```
+   ```bash
+   npm install --save-dev axios
+   ```
 
-    We need to manually install axios because Parcel won't help us with this dependency. Our tests are outside of Parcel's view of our system — since Parcel never sees nor runs any of the test code, we're left to install the dependency ourselves.
+   We need to manually install axios because Parcel won't help us with this dependency. Our tests are outside of Parcel's view of our system — since Parcel never sees nor runs any of the test code, we're left to install the dependency ourselves.
 
 7. Now to manually run the test, from the command line we can run:
 
-    ```bash
-    npm run test
-    ```
+   ```bash
+   npm run test
+   ```
 
-    The result, if successful, is … nothing. This is considered a success. In general we only want tests to be noisy if there's something wrong. The test also exited with a special signal that tells the command line that it was successful — an exit signal of 0. If there's a failure the test fails with an exit code of 1 — this is a system-level value that says "something failed".
+   The result, if successful, is … nothing. This is considered a success. In general we only want tests to be noisy if there's something wrong. The test also exited with a special signal that tells the command line that it was successful — an exit signal of 0. If there's a failure the test fails with an exit code of 1 — this is a system-level value that says "something failed".
 
-    The `npm run test` command will use node to run all the files that are in the tests directory that end with `.js`.
+   The `npm run test` command will use node to run all the files that are in the tests directory that end with `.js`.
 
-    In our build script, `npm run test` is called, then you see the string `&&` — this means "if the thing on the left succeeded (exited with zero), then do this thing on the right". So this translates into: if the tests pass, then build the code.
+   In our build script, `npm run test` is called, then you see the string `&&` — this means "if the thing on the left succeeded (exited with zero), then do this thing on the right". So this translates into: if the tests pass, then build the code.
 
 8. You'll have to upload your new code to GitHub, using similar commands to what you used before:
 
-    ```bash
-    git add .
-    git commit -m 'adding test'
-    git push github main
-    ```
+   ```bash
+   git add .
+   git commit -m 'adding test'
+   git push github main
+   ```
 
-    In some cases you might want to test the result of the built code (since this isn't quite the original code we wrote), so the test might need to be run after the build command. You'll need to consider all these individual aspects whilst you're working on your own projects.
+   In some cases you might want to test the result of the built code (since this isn't quite the original code we wrote), so the test might need to be run after the build command. You'll need to consider all these individual aspects whilst you're working on your own projects.
 
 Now, finally, a minute or so after pushing, Netlify will deploy the project update. But only if it passes the test that was introduced.
 
diff --git a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md
index 130f48815afda54..78bfe1826e767f1 100644
--- a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md
+++ b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/introducing_complete_toolchain/index.md
@@ -225,34 +225,34 @@ OK, let's get the initial project setup out of the way.
 1. Start off by opening your terminal, and navigating to a place that you'll be able to find and get to easily. The Desktop perhaps, or your home or documents folder?
 2. Next, run the following commands to create a folder to keep your project in, and go inside the folder:
 
-    ```bash
-    mkdir will-it-miss
-    cd will-it-miss
-    ```
+   ```bash
+   mkdir will-it-miss
+   cd will-it-miss
+   ```
 
 3. Now we will create a new directory for all of our web site's development code to live in. Run the following now:
 
-    ```bash
-    mkdir src
-    ```
+   ```bash
+   mkdir src
+   ```
 
-    Code organization tends to be quite subjective from team to team. For this project, the source code will live in `src`.
+   Code organization tends to be quite subjective from team to team. For this project, the source code will live in `src`.
 
 4. Making sure you are inside the root of the `will-it-miss` directory, enter the following command to start git's source control functionality working on the directory:
 
-    ```bash
-    git init
-    ```
+   ```bash
+   git init
+   ```
 
-    This means that you'll now be able to start storing revisions to the folder's contents, saving it to a remote repository, etc. More on this later!
+   This means that you'll now be able to start storing revisions to the folder's contents, saving it to a remote repository, etc. More on this later!
 
 5. Next, enter the following command to turn your directory into an npm package, with the advantages that we discussed in the previous article:
 
-    ```bash
-    npm init --force
-    ```
+   ```bash
+   npm init --force
+   ```
 
-    This will create a default `package.json` file that we can configure later on if desired. The `--force` flag causes the command to instantly create a default `package.json` file without asking you all the usual questions about what contents you want it to have (as we saw previously). We only need the defaults for now, so this saves us a bit of time.
+   This will create a default `package.json` file that we can configure later on if desired. The `--force` flag causes the command to instantly create a default `package.json` file without asking you all the usual questions about what contents you want it to have (as we saw previously). We only need the defaults for now, so this saves us a bit of time.
 
 #### Getting the project code files
 
@@ -260,7 +260,7 @@ At this point, we'll get hold of the project's code files (HTML, CSS, JavaScript
 
 1. To get hold of the code files, visit <https://github.com/remy/mdn-will-it-miss> and download and unzip the contents of this repo onto your local drive somewhere. You can download the entire project as a zip file by selecting _Clone or download_ > _Download ZIP_.
 
-    ![The GitHub will it miss repo](github-will-it-miss.png)
+   ![The GitHub will it miss repo](github-will-it-miss.png)
 
 2. Now copy the contents of the project's `src` directory to your currently empty `src` directory.
 
@@ -289,72 +289,72 @@ In the root of the project (not in the `src` directory), we will add configurati
 1. First of all, create a file in the root of your `will-it-miss` directory called `.prettierrc.json`.
 2. To configure Prettier, give `.prettierrc.json` the following contents:
 
-    ```json
-    {
-      "singleQuote": true,
-      "trailingComma": "es5"
-    }
-    ```
+   ```json
+   {
+     "singleQuote": true,
+     "trailingComma": "es5"
+   }
+   ```
 
-    With these settings, when Prettier formats JavaScript for you it will use single quotes for all your quoted values, and it won't use trailing commas (a newer feature of ECMAScript that will cause errors in older browsers). You can find more about [configuring Prettier](https://prettier.io/docs/en/configuration.html) in its documentation.
+   With these settings, when Prettier formats JavaScript for you it will use single quotes for all your quoted values, and it won't use trailing commas (a newer feature of ECMAScript that will cause errors in older browsers). You can find more about [configuring Prettier](https://prettier.io/docs/en/configuration.html) in its documentation.
 
 3. Next up, we'll configure ESLint — create another file in the root of your `will-it-miss` directory called `.eslintrc.json`, and give it the following contents:
 
-    ```json
-    {
-      "env": {
-        "es6": true,
-        "browser": true
-      },
-      "extends": "eslint:recommended",
-      "parserOptions": {
-        "ecmaVersion": 6,
-        "sourceType": "module"
-      },
-      "rules": {
-        "no-console": 0
-      }
-    }
-    ```
-
-    The above ESLint configuration says that we want to use the "recommended" ESLint settings, that we're going to allow usage of ES6 features (such as [`map()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) or [`Set()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set)), that we can use module [`import`](/en-US/docs/Web/JavaScript/Reference/Statements/import) statements, and that using [`console.log()`](/en-US/docs/Web/API/console/log) is allowed.
+   ```json
+   {
+     "env": {
+       "es6": true,
+       "browser": true
+     },
+     "extends": "eslint:recommended",
+     "parserOptions": {
+       "ecmaVersion": 6,
+       "sourceType": "module"
+     },
+     "rules": {
+       "no-console": 0
+     }
+   }
+   ```
+
+   The above ESLint configuration says that we want to use the "recommended" ESLint settings, that we're going to allow usage of ES6 features (such as [`map()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) or [`Set()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set)), that we can use module [`import`](/en-US/docs/Web/JavaScript/Reference/Statements/import) statements, and that using [`console.log()`](/en-US/docs/Web/API/console/log) is allowed.
 
 4. However, in the project's source files we are using React JSX syntax (for your real projects you might use React or Vue or any other framework, or no framework at all!).
 
-    Putting JSX syntax in the middle of our JavaScript is going to cause ESLint to complain pretty quickly with the current configuration, so we'll need to add a little more configuration to the ESLint settings to get it to accept JSX features.
-
-    The final config file should look like this — add in the bolded parts and save it:
-
-    ```json
-    {
-      "env": {
-        "es6": true,
-        "browser": true
-      },
-      "extends": ["eslint:recommended", "plugin:react/recommended"],
-      "parserOptions": {
-        "ecmaVersion": 6,
-        "sourceType": "module",
-        "ecmaFeatures": {
-          "jsx": true
-        }
-      },
-      "plugins": ["react"],
-      "rules": {
-        "semi": "error",
-        "no-console": 0,
-        "react/jsx-uses-vars": "error"
-      }
-    }
-    ```
-
-    As the configuration now uses a plugin called "React", this development dependency also needs to be installed, so that the code is there to actually run that part of the linting process.
+   Putting JSX syntax in the middle of our JavaScript is going to cause ESLint to complain pretty quickly with the current configuration, so we'll need to add a little more configuration to the ESLint settings to get it to accept JSX features.
+
+   The final config file should look like this — add in the bolded parts and save it:
+
+   ```json
+   {
+     "env": {
+       "es6": true,
+       "browser": true
+     },
+     "extends": ["eslint:recommended", "plugin:react/recommended"],
+     "parserOptions": {
+       "ecmaVersion": 6,
+       "sourceType": "module",
+       "ecmaFeatures": {
+         "jsx": true
+       }
+     },
+     "plugins": ["react"],
+     "rules": {
+       "semi": "error",
+       "no-console": 0,
+       "react/jsx-uses-vars": "error"
+     }
+   }
+   ```
+
+   As the configuration now uses a plugin called "React", this development dependency also needs to be installed, so that the code is there to actually run that part of the linting process.
 
 5. Run the following terminal command in the root of your project folder:
 
-    ```bash
-    npm install --save-dev eslint-plugin-react
-    ```
+   ```bash
+   npm install --save-dev eslint-plugin-react
+   ```
 
 There's a complete [list of ESLint rules](https://eslint.org/docs/rules/) that you can tweak and configure to your heart's content and many companies and teams have published their [own ESLint configurations](https://www.npmjs.com/search?q=keywords:eslintconfig), which can sometimes be useful either to get inspiration or to select one that you feel suits your own standards. A forewarning though: ESLint configuration is a very deep rabbit hole!
 
@@ -393,15 +393,15 @@ Let's use the [postcss-preset-env](https://preset-env.cssdb.org/), which lets us
 1. Add a single file called `.postcssrc` to the root of your project directory.
 2. Add the following contents to the new file, which will automagically give us full access to the latest CSS features:
 
-    ```json
-    {
-      "plugins": {
-        "postcss-preset-env": {
-          "stage": 0
-        }
-      }
-    }
-    ```
+   ```json
+   {
+     "plugins": {
+       "postcss-preset-env": {
+         "stage": 0
+       }
+     }
+   }
+   ```
 
 That's all we need to do — remember that Parcel installs the dependencies for us by default!
 
@@ -415,22 +415,22 @@ To start working with our project, we'll run the Parcel server on the command li
 
 1. To start Parcel off in the background, go to your terminal and run the following command:
 
-    ```bash
-    npx parcel src/index.html
-    ```
+   ```bash
+   npx parcel src/index.html
+   ```
 
-    You should see an output like this (once the dependencies have been installed):
+   You should see an output like this (once the dependencies have been installed):
 
-    ```bash
-    Server running at http://localhost:1234
-    ✨  Built in 129ms.
-    ```
+   ```bash
+   Server running at http://localhost:1234
+   ✨  Built in 129ms.
+   ```
 
-    Parcel also installs the dependencies that we will use in our code, including react, react-dom, react-async-hook, date-fns, and format-number. This first run will therefore be longer than a typical run of Parcel.
+   Parcel also installs the dependencies that we will use in our code, including react, react-dom, react-async-hook, date-fns, and format-number. This first run will therefore be longer than a typical run of Parcel.
 
-    > **Note:** if you run Parcel on this project and are faced with an error that reads `Error: ENOENT: no such file or directory`, stop the process using <kbd>Ctrl</kbd> + <kbd>C</kbd> and then try re-running it.
+   > **Note:** if you run Parcel on this project and are faced with an error that reads `Error: ENOENT: no such file or directory`, stop the process using <kbd>Ctrl</kbd> + <kbd>C</kbd> and then try re-running it.
 
-    The server is now running on the URL that was printed (in this case localhost:1234).
+   The server is now running on the URL that was printed (in this case localhost:1234).
 
 2. Go to this URL in your browser and you will see the example app running!
 
diff --git a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/overview/index.md b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/overview/index.md
index 0e5901868eb7707..60b3a558ba77537 100644
--- a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/overview/index.md
+++ b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/overview/index.md
@@ -109,14 +109,14 @@ Generally web development is thought of as three languages: [HTML](/en-US/docs/L
 
 1. The ability to write code using the latest language features and have that transformed into code that works on everyday devices. For example, you might want to write JavaScript using cutting-edge new language features, but still have your final production code work on older browsers that don't support those features. Good examples here include:
 
-    - [Babel](https://babeljs.io/): A JavaScript compiler that allows developers to write their code using cutting-edge JavaScript, which Babel then takes and converts into old-fashioned JavaScript that more browsers can understand. Developers can also write and publish [plugins for Babel](https://babeljs.io/docs/en/plugins).
-    - [PostCSS](https://postcss.org/): Does the same kind of thing as Babel, but for cutting-edge CSS features. If there isn't an equivalent way to do something using older CSS features, PostCSS will install a JavaScript polyfill to emulate the CSS effect you want.
+   - [Babel](https://babeljs.io/): A JavaScript compiler that allows developers to write their code using cutting-edge JavaScript, which Babel then takes and converts into old-fashioned JavaScript that more browsers can understand. Developers can also write and publish [plugins for Babel](https://babeljs.io/docs/en/plugins).
+   - [PostCSS](https://postcss.org/): Does the same kind of thing as Babel, but for cutting-edge CSS features. If there isn't an equivalent way to do something using older CSS features, PostCSS will install a JavaScript polyfill to emulate the CSS effect you want.
 
 2. The option to write your code in an entirely different language and have it transformed into a web-compatible language. For example:
 
-    - [Sass/SCSS](https://sass-lang.com/): This CSS extension allows you to use variables, nested rules, mixins, functions, and many other features, some of which are available in native CSS (such as variables), and some of which aren't.
-    - [TypeScript](https://www.typescriptlang.org/): TypeScript is a superset of JavaScript that offers a bunch of additional features. The TypeScript compiler converts TypeScript code to JavaScript when building for production.
-    - Frameworks such as [React](https://reactjs.org/), [Ember](https://emberjs.com/), and [Vue](https://vuejs.org/): Frameworks provide a lot of functionality for free and allow you to use it via custom syntax built on top of vanilla JavaScript. In the background, the framework's JavaScript code works hard to interpret this custom syntax and render it as a final web app.
+   - [Sass/SCSS](https://sass-lang.com/): This CSS extension allows you to use variables, nested rules, mixins, functions, and many other features, some of which are available in native CSS (such as variables), and some of which aren't.
+   - [TypeScript](https://www.typescriptlang.org/): TypeScript is a superset of JavaScript that offers a bunch of additional features. The TypeScript compiler converts TypeScript code to JavaScript when building for production.
+   - Frameworks such as [React](https://reactjs.org/), [Ember](https://emberjs.com/), and [Vue](https://vuejs.org/): Frameworks provide a lot of functionality for free and allow you to use it via custom syntax built on top of vanilla JavaScript. In the background, the framework's JavaScript code works hard to interpret this custom syntax and render it as a final web app.
 
 ### Post development
 

From 9b14194f51799041a635f715ea05a0176b42e82f Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Sun, 11 Sep 2022 02:17:52 -0400
Subject: [PATCH 2/7] fix: re-escape tags in alt for Markdownlint

---
 files/en-us/learn/forms/other_form_controls/index.md          | 2 +-
 .../introduction_to_html/the_head_metadata_in_html/index.md   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/en-us/learn/forms/other_form_controls/index.md b/files/en-us/learn/forms/other_form_controls/index.md
index 2f863afdcba5d20..9a235bfb4df018a 100644
--- a/files/en-us/learn/forms/other_form_controls/index.md
+++ b/files/en-us/learn/forms/other_form_controls/index.md
@@ -59,7 +59,7 @@ Visually, the text entered wraps and the form control is by default resizable. M
 
 The following screenshots show default, focused, and disabled `<textarea>` elements in Firefox 71 and Safari 13 on macOS, and Edge 18, Yandex 14, Firefox 71 and Chrome 79 on Windows 10.
 
-![The default, focused, and disabled <textarea> element in Firefox 71 and Safari 13 on Mac OSX and Edge 18, Yandex 14, Firefox and Chrome on Windows 10.](textarea_basic.png)
+![The default, focused, and disabled \<textarea> element in Firefox 71 and Safari 13 on Mac OSX and Edge 18, Yandex 14, Firefox and Chrome on Windows 10.](textarea_basic.png)
 
 > **Note:** You can find a slightly more interesting example of text area usage in the [example](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html) we put together in the first article of the series ([see the source code also](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html)).
 
diff --git a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index 05d300e8d7eff44..b65d063b68c9ecd 100644
--- a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -82,13 +82,13 @@ We've already seen the {{htmlelement("title")}} element in action — this can b
 
 2. Now open the file in your browser. You should see something like this:
 
-   ![A simple web page with the title set to <title> element, and the <h1> set to <h1> element.](title-example.png)It should now be completely obvious where the `<h1>` content appears, and where the `<title>` content appears!
+   ![A simple web page with the title set to \<title> element, and the \<h1> set to \<h1> element.](title-example.png)It should now be completely obvious where the `<h1>` content appears, and where the `<title>` content appears!
 
 3. You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it.
 
 The `<title>` element contents are also used in other ways. For example, if you try bookmarking the page (_Bookmarks > Bookmark This Page_ or the star icon in the URL bar in Firefox), you will see the `<title>` contents filled in as the suggested bookmark name.
 
-![A webpage being bookmarked in Firefox; the bookmark name has been automatically filled in with the contents of the <title> element ](bookmark-example.png)
+![A webpage being bookmarked in Firefox; the bookmark name has been automatically filled in with the contents of the \<title> element ](bookmark-example.png)
 
 The `<title>` contents are also used in search results, as you'll see below.
 

From 7cf2ebcb9c827978b28deca3ce34821f40bbb9aa Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Sun, 11 Sep 2022 12:45:25 -0400
Subject: [PATCH 3/7] Update
 files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md

Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
---
 .../introduction_to_html/the_head_metadata_in_html/index.md   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index b65d063b68c9ecd..1e8735347ecca96 100644
--- a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -82,7 +82,9 @@ We've already seen the {{htmlelement("title")}} element in action — this can b
 
 2. Now open the file in your browser. You should see something like this:
 
-   ![A simple web page with the title set to \<title> element, and the \<h1> set to \<h1> element.](title-example.png)It should now be completely obvious where the `<h1>` content appears, and where the `<title>` content appears!
+   ![A simple web page with the title set to \<title> element, and the \<h1> set to \<h1> element.](title-example.png)
+   
+   It should now be completely obvious where the `<h1>` content appears and where the `<title>` content appears!
 
 3. You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it.
 

From 927c931c90c98e4a435365752f5607b0041ecf46 Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Sun, 11 Sep 2022 12:45:34 -0400
Subject: [PATCH 4/7] Update
 files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md

Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
---
 .../common_questions/what_are_browser_developer_tools/index.md   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md b/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md
index d16ca60f45a20e2..7c05f669388062c 100644
--- a/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md
+++ b/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md
@@ -109,7 +109,6 @@ You'll notice a number of clickable tabs at the top of the CSS Viewer:
 Find out more about the Inspector in different browsers:
 
 - [Firefox Page inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html)
-- [IE DOM Explorer](<https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/samples/dn255008(v=vs.85)>)
 - [Chrome DOM inspector](https://developer.chrome.com/docs/devtools/dom/) (Opera's inspector works the same as this)
 - [Safari DOM inspector and style explorer](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1)
 

From 664a721fa2524634172d07c871c2c4de93547afb Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Sun, 11 Sep 2022 12:45:41 -0400
Subject: [PATCH 5/7] Update
 files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md

Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
---
 .../common_questions/what_are_browser_developer_tools/index.md   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md b/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md
index 7c05f669388062c..d4a2e5a60aa1eb2 100644
--- a/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md
+++ b/files/en-us/learn/common_questions/what_are_browser_developer_tools/index.md
@@ -220,7 +220,6 @@ You'll start to see the kind of errors that the browser returns. Often these err
 Find out more about the JavaScript console in different browsers:
 
 - [Firefox Web Console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)
-- [IE JavaScript console](<https://docs.microsoft.com/previous-versions/windows/internet-explorer/ie-developer/samples/dn255006(v=vs.85)>)
 - [Chrome JavaScript Console](https://developer.chrome.com/docs/devtools/console/) (Opera's inspector works the same as this)
 - [Safari Console](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1)
 

From e215db56cbfec85b5e6d0146194381e921f4dda0 Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Sun, 11 Sep 2022 12:49:27 -0400
Subject: [PATCH 6/7] fix: replace HTML only alt text

---
 .../learn/html/introduction_to_html/getting_started/index.md    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/index.md b/files/en-us/learn/html/introduction_to_html/getting_started/index.md
index a000480cad6cdec..00a635e997bd147 100644
--- a/files/en-us/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/en-us/learn/html/introduction_to_html/getting_started/index.md
@@ -263,7 +263,7 @@ This would output the following:
 
 Elements can also have attributes. Attributes look like this:
 
-![&amp;amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;amp;lt;/p>](grumpy-cat-attribute-small.png)
+![paragraph tag with 'class="editor-note"' attribute emphasized](grumpy-cat-attribute-small.png)
 
 Attributes contain extra information about the element that won't appear in the content. In this example, the **`class`** attribute is an identifying name used to target the element with style information.
 

From 1bf564c5c0137d9ab491a5daa6dd48033b1f28cc Mon Sep 17 00:00:00 2001
From: Jean-Yves Perrier <jypenator@gmail.com>
Date: Sun, 11 Sep 2022 19:13:11 +0200
Subject: [PATCH 7/7] Remove extra trailing spaces

---
 .../introduction_to_html/the_head_metadata_in_html/index.md     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index 1e8735347ecca96..cea37faa440e0e0 100644
--- a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -83,7 +83,7 @@ We've already seen the {{htmlelement("title")}} element in action — this can b
 2. Now open the file in your browser. You should see something like this:
 
    ![A simple web page with the title set to \<title> element, and the \<h1> set to \<h1> element.](title-example.png)
-   
+
    It should now be completely obvious where the `<h1>` content appears and where the `<title>` content appears!
 
 3. You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it.