Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions files/en-us/learn_web_development/core/css_layout/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup>
- : 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")}}
11 changes: 7 additions & 4 deletions files/en-us/learn_web_development/core/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup>
- : [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)<sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> also teaches the topics contained in the MDN Core modules and more!
>
> <mdn-scrim-inline url="https://scrimba.com/s06icdv" scrimtitle="Scrimba + MDN"></scrim-inline>
Original file line number Diff line number Diff line change
Expand Up @@ -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) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> 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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> 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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,9 @@ In the example below, we are matching only the `<p>` element which is inside an

{{EmbedLiveSample("descendant")}}

> [!NOTE]
> [Aside: Compound selectors](https://scrimba.com/frontend-path-c0j/~0br?via=mdn) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> 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 `<p>` elements that are direct children of `<article>` elements:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,10 @@ li {

{{EmbedLiveSample("started-types", "", "240px")}}

The following interactive lesson teaches basic CSS concepts and provides some practice.

<mdn-scrim-inline url="https://scrimba.com/frontend-path-c0j/~015" scrimtitle="Write your first lines of CSS!"></scrim-inline>

### 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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) <sup>Challenge</sup>
- : 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 <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup>
- : [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")}}
Original file line number Diff line number Diff line change
Expand Up @@ -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) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> provides a practical introduction to using Git and GitHub.

## See also

- Other useful topics covered in GitHub Docs include:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> 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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> 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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> is an interactive lesson providing a practical walkthrough of margin and padding shorthand usage.

## Positioning and styling the main page title

Now add this:
Expand Down
10 changes: 9 additions & 1 deletion files/en-us/learn_web_development/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)<sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> also teaches the topics contained in the MDN Curriculum.
>
> <mdn-scrim-inline url="https://scrimba.com/s06icdv" scrimtitle="Scrimba + MDN"></scrim-inline>

## Don't know where to get started?

- Never coded before?
Expand All @@ -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)<sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup>.
- : 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

Expand Down