Merge branch 'mdn:main' into main

meyerweb · web-flow · commit ba0e0035f0d5 · 2025-04-29T12:40:06.000-04:00
diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/common_web_layouts/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/common_web_layouts/index.md
@@ -2,10 +2,9 @@
 title: What do common web layouts contain?
 slug: Learn_web_development/Howto/Design_and_accessibility/Common_web_layouts
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 When designing pages for your website, it's good to have an idea of the most common layouts.
 
 <table class="standard-table">
diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/design_for_all_types_of_users/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/design_for_all_types_of_users/index.md
@@ -2,10 +2,9 @@
 title: How can we design for all types of users?
 slug: Learn_web_development/Howto/Design_and_accessibility/Design_for_all_types_of_users
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 This article provides basic tips to help you design websites for any kind of user.
 
 <table class="standard-table">
diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/html_features_for_accessibility/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/html_features_for_accessibility/index.md
@@ -2,10 +2,9 @@
 title: What HTML features promote accessibility?
 slug: Learn_web_development/Howto/Design_and_accessibility/HTML_features_for_accessibility
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 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
diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/index.md
@@ -2,7 +2,7 @@
 title: Design and accessibility
 slug: Learn_web_development/Howto/Design_and_accessibility
 page-type: landing-page
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 This section lists questions related to aesthetics, page structure, accessibility techniques, etc.
diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/thinking_before_coding/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/thinking_before_coding/index.md
@@ -2,10 +2,9 @@
 title: How do I start to design my website?
 slug: Learn_web_development/Howto/Design_and_accessibility/Thinking_before_coding
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 This article covers the all-important first step of every project: define what you want to accomplish with it.
 
 <table>
diff --git a/files/en-us/learn_web_development/howto/design_and_accessibility/what_is_accessibility/index.md b/files/en-us/learn_web_development/howto/design_and_accessibility/what_is_accessibility/index.md
@@ -2,10 +2,9 @@
 title: What is accessibility?
 slug: Learn_web_development/Howto/Design_and_accessibility/What_is_accessibility
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 This article introduces the basic concepts behind web accessibility.
 
 <table class="standard-table">
diff --git a/files/en-us/learn_web_development/howto/index.md b/files/en-us/learn_web_development/howto/index.md
@@ -2,17 +2,12 @@
 title: How to solve common problems
 slug: Learn_web_development/Howto
 page-type: landing-page
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 This section provides solutions to common front-end problems and answers to common questions.
 
-- [Solve common HTML problems](/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems)
-- [Solve common CSS problems](/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems)
-- [Solve common JavaScript problems](/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems)
-- [Web mechanics](/en-US/docs/Learn_web_development/Howto/Web_mechanics)
-- [Tools and setup](/en-US/docs/Learn_web_development/Howto/Tools_and_setup)
-- [Design and accessibility](/en-US/docs/Learn_web_development/Howto/Design_and_accessibility)
+{{subpageswithsummaries}}
 
 ## See also
 
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/add_a_shadow/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/add_a_shadow/index.md
@@ -1,8 +1,9 @@
 ---
 title: How to add a shadow to an element
+short-title: Add a shadow to an element
 slug: Learn_web_development/Howto/Solve_CSS_problems/Add_a_shadow
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 In this guide you can find out how to add a shadow to any box on your page.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/add_a_text_shadow/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/add_a_text_shadow/index.md
@@ -1,8 +1,9 @@
 ---
 title: How to add a shadow to text
+short-title: Add a shadow to text
 slug: Learn_web_development/Howto/Solve_CSS_problems/Add_a_text_shadow
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 In this guide you can find out how to add a shadow to any text on your page.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/center_an_item/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/center_an_item/index.md
@@ -1,8 +1,9 @@
 ---
 title: How to center an item
+short-title: Center an item
 slug: Learn_web_development/Howto/Solve_CSS_problems/Center_an_item
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 In this guide you can find out how to center an item inside another element, both horizontally and vertically.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/create_fancy_boxes/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/create_fancy_boxes/index.md
@@ -2,7 +2,7 @@
 title: Create fancy boxes
 slug: Learn_web_development/Howto/Solve_CSS_problems/Create_fancy_boxes
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 CSS boxes are the building blocks of any web page styled with CSS. Making them nice looking is both fun and challenging. It's fun because it's all about turning a design idea into working code; it's challenging because of the constraints of CSS. Let's do some fancy boxes.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md
@@ -1,8 +1,9 @@
 ---
 title: CSS FAQ
+short-title: FAQ
 slug: Learn_web_development/Howto/Solve_CSS_problems/CSS_FAQ
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 In this article, you'll find some frequently-asked questions (FAQs) about CSS, along with answers that may help you on your quest to become a web developer.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/fill_a_box_with_an_image/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/fill_a_box_with_an_image/index.md
@@ -1,8 +1,9 @@
 ---
 title: How to fill a box with an image without distorting it
+short-title: Fill a box with an image
 slug: Learn_web_development/Howto/Solve_CSS_problems/Fill_a_box_with_an_image
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 In this guide you can learn a technique for causing an HTML image to completely fill a box.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/generated_content/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/generated_content/index.md
@@ -1,8 +1,9 @@
 ---
-title: Using CSS generated content
+title: Use CSS generated content
+short-title: Use generated content
 slug: Learn_web_development/Howto/Solve_CSS_problems/Generated_content
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 This article describes some ways in which you can use CSS to add content when a document is displayed. You modify your stylesheet to add text content or images.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/highlight_first_line/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/highlight_first_line/index.md
@@ -1,8 +1,9 @@
 ---
 title: How to highlight the first line of a paragraph
+short-title: Highlight the first line of a paragraph
 slug: Learn_web_development/Howto/Solve_CSS_problems/Highlight_first_line
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 In this guide you will find out how to highlight the first line of text in a paragraph, even if you don't know how long that line will be.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/highlight_first_para/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/highlight_first_para/index.md
@@ -1,8 +1,9 @@
 ---
 title: How to highlight the first paragraph
+short-title: Highlight the first paragraph
 slug: Learn_web_development/Howto/Solve_CSS_problems/Highlight_first_para
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 In this guide you can find out how to highlight the first paragraph inside a container.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/highlight_para_after_h1/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/highlight_para_after_h1/index.md
@@ -1,8 +1,9 @@
 ---
 title: How to highlight a paragraph that comes after a heading
+short-title: Highlight a paragraph after a heading
 slug: Learn_web_development/Howto/Solve_CSS_problems/Highlight_para_after_h1
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 In this guide you can find out how to highlight a paragraph that comes directly after a heading.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/index.md
@@ -3,7 +3,7 @@ title: Solve common CSS problems
 short-title: Common CSS problems
 slug: Learn_web_development/Howto/Solve_CSS_problems
 page-type: landing-page
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 This page rounds up questions and answers, and other material on the MDN site that can help you to solve common CSS problems.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/make_box_transparent/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/make_box_transparent/index.md
@@ -1,8 +1,9 @@
 ---
 title: How to make a box semi-transparent
+short-title: Make a box semi-transparent
 slug: Learn_web_development/Howto/Solve_CSS_problems/Make_box_transparent
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 This guide will help you to understand the ways to make a box semi-transparent using CSS.
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/transition_button/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/transition_button/index.md
@@ -1,8 +1,9 @@
 ---
 title: How to fade a button on hover
+short-title: Fade a button on hover
 slug: Learn_web_development/Howto/Solve_CSS_problems/Transition_button
 page-type: learn-faq
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 In this guide you can find out how to do a gentle fade between two colors when hovering over a button.
diff --git a/files/en-us/learn_web_development/howto/solve_html_problems/index.md b/files/en-us/learn_web_development/howto/solve_html_problems/index.md
@@ -3,7 +3,7 @@ title: Solve common HTML problems
 short-title: Common HTML problems
 slug: Learn_web_development/Howto/Solve_HTML_problems
 page-type: landing-page
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 The following links point to solutions to common everyday problems you'll need to solve with HTML.
diff --git a/files/en-us/learn_web_development/howto/solve_javascript_problems/index.md b/files/en-us/learn_web_development/howto/solve_javascript_problems/index.md
@@ -3,7 +3,7 @@ title: Solve common JavaScript problems
 short-title: Common JavaScript problems
 slug: Learn_web_development/Howto/Solve_JavaScript_problems
 page-type: landing-page
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 The following links point to solutions to common problems you may encounter when writing JavaScript.
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/available_text_editors/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/available_text_editors/index.md
@@ -2,10 +2,9 @@
 title: What text editors are available?
 slug: Learn_web_development/Howto/Tools_and_setup/Available_text_editors
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 In this article we highlight some things to think about when installing a text editor for web development.
 
 <table class="standard-table">
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md
@@ -2,10 +2,9 @@
 title: How do you make sure your website works properly?
 slug: Learn_web_development/Howto/Tools_and_setup/Checking_that_your_web_site_is_working_properly
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 In this article, we go over various troubleshooting steps for a website and some basic actions to take in order to solve these issues.
 
 <table>
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md
@@ -2,10 +2,9 @@
 title: How do you host your website on Google App Engine?
 slug: Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 [Google App Engine](https://cloud.google.com/appengine) is a powerful platform that lets you build and run applications on Google's infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. Here's a step-by-step guide to hosting your website on Google App Engine.
 
 ## Creating a Google Cloud Platform project
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/how_much_does_it_cost/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/how_much_does_it_cost/index.md
@@ -2,10 +2,9 @@
 title: How much does it cost to do something on the Web?
 slug: Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 Getting involved on the Web isn't as cheap as it looks. In this article we discuss how much you may have to spend, and why.
 
 <table>
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/index.md
@@ -2,7 +2,7 @@
 title: Tools and setup
 slug: Learn_web_development/Howto/Tools_and_setup
 page-type: landing-page
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 This section lists questions related to the tools/software you can use to build websites.
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/set_up_a_local_testing_server/index.md
@@ -2,10 +2,9 @@
 title: How do you set up a local testing server?
 slug: Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.
 
 <table>
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/upload_files_to_a_web_server/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/upload_files_to_a_web_server/index.md
@@ -2,10 +2,9 @@
 title: How do you upload your files to a web server?
 slug: Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 This article shows you how to publish your site online using file transfer tools.
 
 <table>
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/using_github_pages/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/using_github_pages/index.md
@@ -2,10 +2,9 @@
 title: How do I use GitHub Pages?
 slug: Learn_web_development/Howto/Tools_and_setup/Using_GitHub_pages
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 [GitHub](https://github.com/) is a "social coding" site. It allows you to upload code repositories for storage in the [Git](https://git-scm.com/) **version control system.** You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. You can do that with other people's code too! This article provides a basic guide to publishing content using GitHub's gh-pages feature.
 
 ## Publishing content
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/what_are_browser_developer_tools/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/what_are_browser_developer_tools/index.md
@@ -2,10 +2,9 @@
 title: What are browser developer tools?
 slug: Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser's devtools.
 
 > [!NOTE]
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/what_software_do_i_need/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/what_software_do_i_need/index.md
@@ -2,10 +2,9 @@
 title: What software do I need to build a website?
 slug: Learn_web_development/Howto/Tools_and_setup/What_software_do_I_need
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 In this article, we lay out which software components you need when you're editing, uploading, or viewing a website.
 
 <table class="standard-table">
diff --git a/files/en-us/learn_web_development/howto/web_mechanics/how_does_the_internet_work/index.md b/files/en-us/learn_web_development/howto/web_mechanics/how_does_the_internet_work/index.md
@@ -2,10 +2,9 @@
 title: How does the Internet work?
 slug: Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 This article discusses what the Internet is and how it works.
 
 <table>
diff --git a/files/en-us/learn_web_development/howto/web_mechanics/index.md b/files/en-us/learn_web_development/howto/web_mechanics/index.md
@@ -2,7 +2,7 @@
 title: Web mechanics
 slug: Learn_web_development/Howto/Web_mechanics
 page-type: landing-page
-sidebar: learnsidebar
+sidebar: learn-how-to
 ---
 
 This section covers questions relating to general knowledge of the web ecosystem and how it works.
diff --git a/files/en-us/learn_web_development/howto/web_mechanics/what_are_hyperlinks/index.md b/files/en-us/learn_web_development/howto/web_mechanics/what_are_hyperlinks/index.md
@@ -2,10 +2,9 @@
 title: What are hyperlinks?
 slug: Learn_web_development/Howto/Web_mechanics/What_are_hyperlinks
 page-type: learn-faq
+sidebar: learn-how-to
 ---
 
-{{QuicklinksWithSubPages("/en-US/docs/Learn_web_development/Howto")}}
-
 In this article, we'll go over what hyperlinks are and why they matter.
 
 <table>
diff --git a/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_domain_name/index.md b/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_domain_name/index.md
diff --git a/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_url/index.md b/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_url/index.md
diff --git a/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md b/files/en-us/learn_web_development/howto/web_mechanics/what_is_a_web_server/index.md
diff --git a/files/en-us/mdn/writing_guidelines/howto/write_an_api_reference/index.md b/files/en-us/mdn/writing_guidelines/howto/write_an_api_reference/index.md
diff --git a/files/en-us/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md b/files/en-us/mdn/writing_guidelines/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md
diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md
diff --git a/files/en-us/mozilla/firefox/releases/138/index.md b/files/en-us/mozilla/firefox/releases/138/index.md
diff --git a/files/en-us/web/progressive_web_apps/manifest/reference/id/index.md b/files/en-us/web/progressive_web_apps/manifest/reference/id/index.md
diff --git a/files/sidebars/learn-how-to.yaml b/files/sidebars/learn-how-to.yaml
diff --git a/files/sidebars/learnsidebar.yaml b/files/sidebars/learnsidebar.yaml
