Draft PR for merging MDN Curriculum into Learning Area

files/en-us/games/tutorials/2d_breakout_game_phaser/index.md

@@ -12,7 +12,7 @@ In this step-by-step tutorial, we create a simple mobile **MDN Breakout** game w
 
 Every step has editable, live samples available to play with, so you can see what the intermediate stages should look like. You will learn the basics of using the Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, framework-specific helper functions, animations and tweens, and winning and losing states.
 
-To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) knowledge. After working through this tutorial, you should be able to build your own simple Web games with Phaser.
+To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) knowledge. After working through this tutorial, you should be able to build your own simple Web games with Phaser.
 
 ![Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives.](mdn-breakout-phaser.png)
 

files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md

@@ -12,7 +12,7 @@ In this step-by-step tutorial we create an **MDN Breakout** game written entirel
 
 Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states.
 
-To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) knowledge. After working through this tutorial you should be able to build your own Web games.
+To get the most out of this series of articles you should already have basic to intermediate [JavaScript](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) knowledge. After working through this tutorial you should be able to build your own Web games.
 
 ![Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.](mdn-breakout-gameplay.png)
 

files/en-us/glossary/advance_measure/index.md

@@ -14,5 +14,5 @@ The _advance measure_ of unit `ch` is either the width or height of character "0
 ## See also
 
 - {{cssxref("<length>")}}
-- [Learn: CSS values and units](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [Learn: CSS values and units](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units)
 - [TextMetrics API](/en-US/docs/Web/API/TextMetrics)

files/en-us/glossary/alpha/index.md

@@ -17,7 +17,7 @@ As you can see, the color without an alpha channel completely blocks the backgro
 ## See also
 
 - [CSS colors](/en-US/docs/Web/CSS/CSS_colors)
-- [CSS values and units introduction](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [Learn: Values and units](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units)
 - [Image file type and format guide](/en-US/docs/Web/Media/Formats/Image_types)
 - [Alpha compositing](https://en.wikipedia.org/wiki/Alpha_compositing) on Wikipedia
 - [RGBA color model](https://en.wikipedia.org/wiki/RGBA_color_model) on Wikipedia

files/en-us/glossary/css/index.md

@@ -29,7 +29,7 @@ p {
 
 ## See also
 
-- [Learn CSS](/en-US/docs/Learn/CSS)
+- [Learn CSS](/en-US/docs/Learn_web_development/Core/Styling_basics)
 - [The CSS documentation](/en-US/docs/Web/CSS)
 - [CSS](https://en.wikipedia.org/wiki/CSS) on Wikipedia
 - [The CSS Working Group current work](https://www.w3.org/Style/CSS/current-work)

files/en-us/glossary/css_selector/index.md

@@ -60,7 +60,7 @@ The resulting page content is styled like this:
 
 ## See also
 
-- [Learn more about CSS selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors) in our introduction to CSS.
+- [Learn more about CSS selectors](/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) in our introduction to CSS.
 - Basic selectors
 
   - [Type selectors](/en-US/docs/Web/CSS/Type_selectors) `elementname`

files/en-us/glossary/element/index.md

@@ -14,6 +14,6 @@ Elements and {{glossary("tag", "tags")}} are _not_ the same things. Tags begin o
 
 ## See also
 
-- [Getting started with HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
+- [Basic HTML Syntax](/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax)
 - [Defining custom elements](/en-US/docs/Web/API/Web_components/Using_custom_elements)
 - The {{domxref("Element")}} interface, representing an element in the DOM.

files/en-us/glossary/head/index.md

@@ -11,4 +11,4 @@ The **Head** is the part of an {{glossary("HTML")}} document that contains {{glo
 ## See also
 
 - {{htmlelement("head")}} element reference on MDN
-- [The HTML \<head>](/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) on the MDN Learning Area
+- [What's in the head? Webpage metadata](/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) on the MDN Learning Area

files/en-us/glossary/hyperlink/index.md

@@ -11,7 +11,7 @@ Hyperlinks connect webpages or data items to one another. In HTML, {{HTMLElement
 ## See also
 
 - [Hyperlink](https://en.wikipedia.org/wiki/Hyperlink) on Wikipedia
-- The [Hyperlink](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) guide on MDN
+- [Creating links](/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links)
 - [Links in HTML Documents - W3C](https://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html)
 - [HTML a - hyperlink - W3C](https://w3c.github.io/html-reference/a.html)
 - [`<a>` on MDN](/en-US/docs/Web/HTML/Element/a)

files/en-us/glossary/ink_overflow/index.md

@@ -10,7 +10,7 @@ The **ink overflow** of a box refers to the part of the box and its contents tha
 
 Ink overflow is the overflow of painting effects such as [box shadows](/en-US/docs/Web/CSS/box-shadow), [border images](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), [text decoration](/en-US/docs/Web/CSS/CSS_text_decoration), [outlines](/en-US/docs/Web/CSS/outline), etc. that do not affect layout or otherwise extend the scrollable overflow area. Ink overflow is also the overhanging of glyphs, such as ascenders and descenders extending outside the em box.
 
-As [replaced elements](/en-US/docs/Web/CSS/Replaced_element) always establish an independent [formatting context](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts), any overflow of replaced content is always ink overflow (as opposed to [scrollable overflow](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content)).
+As [replaced elements](/en-US/docs/Web/CSS/Replaced_element) always establish an independent [formatting context](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts), any overflow of replaced content is always ink overflow (as opposed to [scrollable overflow](/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow)).
 
 ## See also
 

files/en-us/glossary/intrinsic_size/index.md

@@ -6,7 +6,7 @@ page-type: glossary-definition
 
 {{GlossarySidebar}}
 
-In CSS, the _intrinsic size_ of an element is the size it would be based purely on its content without taking into account the effects of the context it appears in. For example, the sizing applied by CSS [box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) properties. An element's intrinsic sizes are represented by its {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes.
+In CSS, the _intrinsic size_ of an element is the size it would be based purely on its content without taking into account the effects of the context it appears in. For example, the sizing applied by CSS [box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties. An element's intrinsic sizes are represented by its {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes.
 
 Inline elements are sized intrinsically: [sizing](/en-US/docs/Web/CSS/CSS_box_sizing) and [box](/en-US/docs/Web/CSS/CSS_box_model) properties including {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, and {{cssxref("padding-block")}} and {{cssxref("margin-block")}} have no impact on them ( though {{cssxref("margin-inline")}} and {{cssxref("padding-inline")}} do).
 

files/en-us/glossary/media/css/index.md

@@ -16,5 +16,5 @@ CSS offers several features that allow you to tweak your document's styles—or
 
 - [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
 - [Media queries](/en-US/docs/Web/CSS/CSS_media_queries)
-- {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/At-rule): Conditionally apply part of a [stylesheet](/en-US/docs/Learn/CSS/First_steps/How_CSS_works#applying_css_to_the_dom), based on the result of a media query.
+- {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/At-rule): Conditionally apply part of a CSS stylesheet, based on the result of a media query.
 - {{domxref("Window.matchMedia()")}}: Test the viewing device against a media query

files/en-us/glossary/metadata/index.md

@@ -10,6 +10,6 @@ page-type: glossary-definition
 
 ## See also
 
-- [Learn: metadata](/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#metadata_the_meta_element)
+- [Learn: metadata](/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#metadata_the_meta_element)
 - [metadata](https://en.wikipedia.org/wiki/Metadata) on Wikipedia
 - The {{htmlelement("meta")}} element on MDN

files/en-us/glossary/property/css/index.md

@@ -26,6 +26,6 @@ div {
 
 ## See also
 
-- [Learn CSS](/en-US/docs/Learn/CSS)
+- [Learn CSS](/en-US/docs/Learn_web_development/Core/Styling_basics)
 - [The CSS reference on MDN](/en-US/docs/Web/CSS/Reference)
 - [The CSS Working Group current work](https://www.w3.org/Style/CSS/current-work)

files/en-us/glossary/scroll_container/index.md

@@ -18,7 +18,7 @@ The scrollport is the visible part of a scroll container and coincides with the
 
 ## See also
 
-- [CSS building blocks: overflowing content](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content)
+- [Learn: Overflowing content](/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow)
 - [Scroll snapping](/en-US/docs/Glossary/Scroll_snap), including [scroll snap container](/en-US/docs/Glossary/Scroll_snap#scroll_snap_container)
 - [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module
 - [CSS overscroll behavior](/en-US/docs/Web/CSS/CSS_overscroll_behavior) module

files/en-us/glossary/stylesheet/index.md

@@ -12,5 +12,5 @@ External stylesheets are generally preferred because they allow you to control t
 
 ## See also
 
-- [CSS first steps](/en-US/docs/Learn/CSS/First_steps)
+- [CSS Styling basics](/en-US/docs/Learn_web_development/Core/Styling_basics)
 - Stylesheets on [Wikipedia](<https://en.wikipedia.org/wiki/Style_sheet_(web_development)>)

files/en-us/learn/accessibility/css_and_javascript/index.md

@@ -81,7 +81,7 @@
 - Make sure your headings stand out from your body text, typically big and bold like the default styling. Your lists should look like lists.
 - Your text color should contrast well with your background color.
 
-See [HTML text fundamentals](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) and [Styling text](/en-US/docs/Learn/CSS/Styling_text) for more information.
+See [Headings and paragraphs in HTML](/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) and [Styling text](/en-US/docs/Learn/CSS/Styling_text) for more information.
 
 #### Emphasized text
 
@@ -104,7 +104,7 @@
 }
 ```
 
-You will however rarely need to style emphasis elements in any significant way. The standard conventions of bold and italic text are very recognizable, and changing the style can cause confusion. For more on emphasis, see [Emphasis and importance](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#emphasis_and_importance).
+You will however rarely need to style emphasis elements in any significant way. The standard conventions of bold and italic text are very recognizable, and changing the style can cause confusion. For more on emphasis, see [Emphasis and importance](/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance).
 
 #### Abbreviations
 
@@ -125,7 +125,7 @@
 }
 ```
 
-The recognized styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this. For more on abbreviations, see [Abbreviations](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations).
+The recognized styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this. For more on abbreviations, see [Abbreviations](/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#abbreviations).
 
 #### Links
 
@@ -201,7 +201,7 @@
 
 ### Hiding things
 
-There are many instances where a visual design will require that not all content is shown at once. For example, in our [Tabbed info box example](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/tabbed-info-box.html) (see [source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabbed-info-box.html)) we have three panels of information, but we are [positioning](/en-US/docs/Learn/CSS/CSS_layout/Positioning) them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use Tab and Enter/Return to select them).
+There are many instances where a visual design will require that not all content is shown at once. For example, in our [Tabbed info box example](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/tabbed-info-box.html) (see [source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabbed-info-box.html)) we have three panels of information, but we are [positioning](/en-US/docs/Learn_web_development/Core/CSS_layout/Positioning) them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use Tab and Enter/Return to select them).
 
 ![Three tab interface with Tab 1 selected and only its contents are displayed. The contents of other tabs are hidden. If a tab is selected, then it's text-color changes from black to white and the background-color changes from orange-red to saddle brown.](tabbed-info-box.png)
 

files/en-us/learn/accessibility/html/index.md

@@ -14,7 +14,7 @@
       <th scope="row">Prerequisites:</th>
       <td>
         A basic understanding of HTML (see
         <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"
           >Introduction to HTML</a
         >), and an understanding of
         <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility"
@@ -396,7 +396,7 @@
 ```
 
 > [!NOTE]
-> You can find a lot more about link implementation and best practices in our [Creating hyperlinks](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) article. You can also see some good and bad examples at [good-links.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) and [bad-links.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html).
+> You can find a lot more about link implementation and best practices in our [Creating links](/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) article. You can also see some good and bad examples at [good-links.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) and [bad-links.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html).
 
 Form labels are also important for giving you a clue about what you need to enter into each form input. The following seems like a reasonable enough example:
 
@@ -465,7 +465,7 @@
 - The {{htmlelement("caption")}} element and the `<table>` element's `summary` attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. The `<caption>` element is generally preferred as it makes it's content accessible to sighted users too, who might also find it useful. You don't really need both.
 
 > [!NOTE]
-> See our [HTML table advanced features and accessibility](/en-US/docs/Learn/HTML/Tables/Advanced) article for more details about accessible data tables.
+> See our [HTML table accessibility](/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility) article for more details about accessible data tables.
 
 ## Text alternatives
 
@@ -511,7 +511,7 @@
 One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, and thus have no meaning. If they are decorative, it is better to write an empty text as a value for `alt` attribute (see [Empty alt attributes](#empty_alt_attributes)) or to just include them in the page as CSS background images.
 
 > [!NOTE]
-> Read [Images in HTML](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) and [Responsive images](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) for a lot more information about image implementation and best practices.
+> Read [HTML images](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images) and [Responsive images](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) for a lot more information about image implementation and best practices.
 
 If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a `title` attribute, as shown above. In this case, most screen readers will read out the alt text, the title attribute, and the filename. In addition, browsers display title text as tooltips when moused over.
 

files/en-us/learn/accessibility/index.md

@@ -6,7 +6,7 @@ page-type: learn-module
 
 {{LearnSidebar}}
 
-Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies **responsibly** so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the [HTML](/en-US/docs/Learn/HTML), [CSS](/en-US/docs/Learn/CSS), and [JavaScript](/en-US/docs/Learn/JavaScript) topics), [cross browser testing](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing), and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.
+Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies **responsibly** so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the [HTML](/en-US/docs/Learn/HTML), [CSS](/en-US/docs/Learn_web_development/Core/Styling_basics), and [JavaScript](/en-US/docs/Learn/JavaScript) topics), [cross browser testing](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing), and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.
 
 ## Overview
 
@@ -24,7 +24,7 @@ The Firefox Accessibility Inspector is a very useful tool for checking out acces
 
 ## Prerequisites
 
-To get the most out of this module, it would be a good idea to either work through at least the first two modules of the [HTML](/en-US/docs/Learn/HTML), [CSS](/en-US/docs/Learn/CSS), and [JavaScript](/en-US/docs/Learn/JavaScript) topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.
+To get the most out of this module, it would be a good idea to either work through at least the first two modules of the [HTML](/en-US/docs/Learn/HTML), [CSS](/en-US/docs/Learn_web_development/Core/Styling_basics), and [JavaScript](/en-US/docs/Learn/JavaScript) topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.
 
 > [!NOTE]
 > If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/).