diff --git a/files/en-us/learn_web_development/core/css_layout/index.md b/files/en-us/learn_web_development/core/css_layout/index.md index a93ce0adeefbb02..34b5013b06ffcdc 100644 --- a/files/en-us/learn_web_development/core/css_layout/index.md +++ b/files/en-us/learn_web_development/core/css_layout/index.md @@ -56,5 +56,7 @@ These tutorials are not part of the learning pathway, but they are interesting n - [CSS layout cookbook](/en-US/docs/Web/CSS/Layout_cookbook) - : The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used and the choices you can make as a developer. +- [Learn Flexbox](https://scrimba.com/learn-flexbox-c0k?via=mdn) and [Learn CSS Grid](https://scrimba.com/learn-css-grid-c02k?via=mdn) [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) + - : These courses from Scrimba provide interactive lessons teaching you all you need to know about Flexbox and Grid. {{NextMenu("Learn_web_development/Core/CSS_layout/Introduction", "Learn_web_development/Core")}} diff --git a/files/en-us/learn_web_development/core/index.md b/files/en-us/learn_web_development/core/index.md index 7a8657c24f6bb4c..c9b9322c7b747c0 100644 --- a/files/en-us/learn_web_development/core/index.md +++ b/files/en-us/learn_web_development/core/index.md @@ -34,7 +34,10 @@ In particular, if you've never done any coding before, we'd recommend the [Your - [Version control](/en-US/docs/Learn_web_development/Core/Version_control) - : Version control tools are an essential part of modern workflows, for backing up and collaborating on codebases. This module takes you through the essentials of version control using Git and GitHub. -## See also - -- [The Frontend Developer Career Path](https://scrimba.com/the-frontend-developer-career-path-c0j?via=mdn) [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) - - : [Scrimba's](https://scrimba.com/?via=mdn) _Frontend Developer Career Path_ teaches all you need to know to be a competent front-end web developer, with fun interactive lessons and challenges, knowledgeable teachers, and a supportive community. Go from zero to landing your first front-end job! Many of the course components are available as standalone free versions. +> [!CALLOUT] +> +> ### Try our partner video courses +> +> Interested in an interactive video course to complement our articles? Scrimba's [Frontend Developer Career Path](https://scrimba.com/the-frontend-developer-career-path-c0j?via=mdn)[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) also teaches the topics contained in the MDN Core modules and more! +> +> diff --git a/files/en-us/learn_web_development/core/structuring_content/html_images/index.md b/files/en-us/learn_web_development/core/structuring_content/html_images/index.md index 9a58f6c2e57f1b3..c068909c640647a 100644 --- a/files/en-us/learn_web_development/core/structuring_content/html_images/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/html_images/index.md @@ -125,6 +125,9 @@ Essentially, the key is to deliver a usable experience, even when the images can > [!NOTE] > See our guide to [Text Alternatives](/en-US/docs/Learn_web_development/Core/Accessibility/HTML#text_alternatives) and [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) to learn how to use an `alt` attribute for images in various situations. +> [!NOTE] +> [HTML tags](https://scrimba.com/html-css-crash-course-c02l/~0d?via=mdn) [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) from Scrimba is an interactive lesson providing information on images, and mini-challenges. + ### Width and height You can use the [`width`](/en-US/docs/Web/HTML/Reference/Elements/img#width) and [`height`](/en-US/docs/Web/HTML/Reference/Elements/img#height) attributes to specify the width and height of your image. They are given as integers without a unit, and represent the image's width and height in pixels. diff --git a/files/en-us/learn_web_development/core/styling_basics/box_model/index.md b/files/en-us/learn_web_development/core/styling_basics/box_model/index.md index 1506798b7b1f33f..13ac9e3ef7cc829 100644 --- a/files/en-us/learn_web_development/core/styling_basics/box_model/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/box_model/index.md @@ -389,6 +389,9 @@ p { A number of rules dictate when margins do and do not collapse. For further information see the detailed page on [mastering margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing). The main thing to remember is that margin collapsing is a thing that happens if you are creating space with margins and don't get the space you expect. +> [!NOTE] +> [Learn margins via flags](https://scrimba.com/frontend-path-c0j/~01e?via=mdn) [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) from Scrimba is an interactive lesson providing some useful practice with margins. + ### Borders The border is drawn between the margin and the padding of a box. If you are using the standard box model, the size of the border is added to the `width` and `height` of the content box. If you are using the alternative box model, then the bigger the border is, the smaller the content box is, as the border takes up some of that available `width` and `height` of the element box. diff --git a/files/en-us/learn_web_development/core/styling_basics/combinators/index.md b/files/en-us/learn_web_development/core/styling_basics/combinators/index.md index b655cb63959db1b..3e9101ffeb6dd25 100644 --- a/files/en-us/learn_web_development/core/styling_basics/combinators/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/combinators/index.md @@ -59,6 +59,9 @@ In the example below, we are matching only the `

` element which is inside an {{EmbedLiveSample("descendant")}} +> [!NOTE] +> [Aside: Compound selectors](https://scrimba.com/frontend-path-c0j/~0br?via=mdn) [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) from Scrimba is an interactive lesson providing a practical treatment of descendant combinators. + ## Child combinator The **child combinator** (`>`) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendant elements further down the hierarchy don't match. For example, to select only `

` elements that are direct children of `

` elements: diff --git a/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md b/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md index 1987a2025223e9a..d75b5b6ec66f7a6 100644 --- a/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md @@ -213,6 +213,10 @@ li { {{EmbedLiveSample("started-types", "", "240px")}} +The following interactive lesson teaches basic CSS concepts and provides some practice. + + + ### Adding a class So far, we have styled elements based on their HTML element names. This works as long as you want all of the elements of that type in your document to look the same. To select a subset of the elements without changing the others, you can add a `class` to your HTML element and target that class in your CSS. diff --git a/files/en-us/learn_web_development/core/text_styling/index.md b/files/en-us/learn_web_development/core/text_styling/index.md index 8d64077a5b5a690..3a984eb1d066185 100644 --- a/files/en-us/learn_web_development/core/text_styling/index.md +++ b/files/en-us/learn_web_development/core/text_styling/index.md @@ -29,4 +29,9 @@ Before starting this module, you should be familiar with [HTML](/en-US/docs/Lear - [Challenge: Typesetting a community school homepage](/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage) Challenge - : In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage. +## See also + +- [Learn HTML and CSS](https://scrimba.com/learn-html-and-css-c0p?via=mdn), Scrimba [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) + - : [Scrimba's](https://scrimba.com/?via=mdn) _Learn HTML and CSS_ course teaches you HTML and CSS through building and deploying five awesome projects, with fun interactive lessons and challenges taught by knowledgeable teachers. + {{NextMenu("Learn_web_development/Core/Text_styling/Fundamentals", "Learn_web_development/Core")}} diff --git a/files/en-us/learn_web_development/core/version_control/index.md b/files/en-us/learn_web_development/core/version_control/index.md index 5c6a90fcc9727c8..1b279e2bbc0a32d 100644 --- a/files/en-us/learn_web_development/core/version_control/index.md +++ b/files/en-us/learn_web_development/core/version_control/index.md @@ -39,6 +39,9 @@ This module takes you through the essentials of version control using Git and Gi > [!NOTE] > As you get deeper into Git, you'll start to realize that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) and [Dangit, git!](https://dangitgit.com/). +> [!NOTE] +> Scrimba's [Intro to Git](https://scrimba.com/intro-to-git-c0l4grs2sa) [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) provides a practical introduction to using Git and GitHub. + ## See also - Other useful topics covered in GitHub Docs include: diff --git a/files/en-us/learn_web_development/extensions/client-side_tools/package_management/index.md b/files/en-us/learn_web_development/extensions/client-side_tools/package_management/index.md index af6b9e868e03cae..a79f982594b2e42 100644 --- a/files/en-us/learn_web_development/extensions/client-side_tools/package_management/index.md +++ b/files/en-us/learn_web_development/extensions/client-side_tools/package_management/index.md @@ -147,6 +147,9 @@ Add these lines right below the `"name"`: So this is the config file that defines your package. This is good for now, so let's move on. +> [!NOTE] +> [The package.json file](https://scrimba.com/intro-to-git-c0l4grs2sa) [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) from Scrimba provides a practical introduction to using `package.json` files. + ### Installing Vite We will first install Vite, the build tool for our website. It is responsible for bundling our HTML, CSS, and JavaScript files into an optimized bundle for the browser. diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md index 6c8e3d831af8281..0c0b6c1124ff2a8 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md @@ -62,6 +62,9 @@ This HTML will render as follows in a web browser: As well as structuring text, HTML has many other uses — making text or images link to other web pages, embedding images or videos, creating data tables, and so on. +> [!NOTE] +> Scrimba's [HTML tags](https://scrimba.com/frontend-path-c0j/~0g?via=mdn) [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) is an interactive lesson providing practice with HTML basics, including headings. + ## Creating your first HTML document Let's see how individual elements are combined to form an HTML page. In this section, you'll create a basic HTML file and take a look at what it's made up of. diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md index 3ab2895f20621b4..84ffaa345d79667 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md @@ -257,6 +257,20 @@ The above code sets new values for several properties of the {{htmlelement("body - `padding: 0 20px 20px 20px;`: This sets four values for padding. The goal is to put some space around the content. In this example, there is no padding on the top of the body, and 20 pixels on the right, bottom, and left. The values set top, right, bottom, and left padding, in that order. - `border: 5px solid black;`: This sets values for the width, style, and color of the border. In this case, it's a 5-pixel-wide solid black border around all sides of the body. +### An aside on shorthand properties + +CSS property values that set multiple properties in one go are called **shorthand properties**. For example, `padding: 0 20px 20px 20px` is equivalent to the following four properties: + +```css +padding-top: 0; +padding-right: 20px; +padding-bottom: 20px; +padding-left: 20px; +``` + +> [!NOTE] +> Scrimba's [Margin/padding shorthand](https://scrimba.com/frontend-path-c0j/~0g?via=mdn) [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) is an interactive lesson providing a practical walkthrough of margin and padding shorthand usage. + ## Positioning and styling the main page title Now add this: diff --git a/files/en-us/learn_web_development/index.md b/files/en-us/learn_web_development/index.md index 1c69cd533294969..b599c1f3817130e 100644 --- a/files/en-us/learn_web_development/index.md +++ b/files/en-us/learn_web_development/index.md @@ -18,6 +18,14 @@ Welcome to MDN **Learning Web Development** (also known as **Learn**). This reso > [!NOTE] > Last updated: August 2025 ([see changelog](/en-US/docs/Learn_web_development/Changelog)). +> [!CALLOUT] +> +> ### Try our partner video courses +> +> Interested in an interactive video course to complement our articles? Scrimba's [Frontend Developer Career Path](https://scrimba.com/the-frontend-developer-career-path-c0j?via=mdn)[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) also teaches the topics contained in the MDN Curriculum. +> +> + ## Don't know where to get started? - Never coded before? @@ -27,7 +35,7 @@ Welcome to MDN **Learning Web Development** (also known as **Learn**). This reso - Beyond the basics? - : Our [Extension modules](/en-US/docs/Learn_web_development/Extensions) cover useful additional skills to learn as you start to expand your knowledge and develop specialisms. Go onto these after you finish our Core. - Working at a school? - - : Use our modules to guide your teaching, check out our [Educators page](/en-US/docs/Learn_web_development/Educators) for more ideas, or enroll your students in Scrimba's [Frontend Developer Career Path](https://scrimba.com/the-frontend-developer-career-path-c0j?via=mdn)[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds). + - : Use our modules to guide your teaching, check out our [Educators page](/en-US/docs/Learn_web_development/Educators) for more ideas. ## Test your skills