Skip to content

Commit 57bc272

Browse files
Add 3rd set of Scrimba links, adjust other links (mdn#41617)
1 parent f3bf4e2 commit 57bc272

File tree

12 files changed

+59
-5
lines changed

12 files changed

+59
-5
lines changed

files/en-us/learn_web_development/core/css_layout/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,5 +56,7 @@ These tutorials are not part of the learning pathway, but they are interesting n
5656

5757
- [CSS layout cookbook](/en-US/docs/Web/CSS/How_to/Layout_cookbook)
5858
- : 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.
59+
- [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>
60+
- : These courses from Scrimba provide interactive lessons teaching you all you need to know about Flexbox and Grid.
5961

6062
{{NextMenu("Learn_web_development/Core/CSS_layout/Introduction", "Learn_web_development/Core")}}

files/en-us/learn_web_development/core/index.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,10 @@ In particular, if you've never done any coding before, we'd recommend the [Your
3434
- [Version control](/en-US/docs/Learn_web_development/Core/Version_control)
3535
- : 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.
3636

37-
## See also
38-
39-
- [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>
40-
- : [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.
37+
> [!CALLOUT]
38+
>
39+
> ### Try our partner video courses
40+
>
41+
> 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!
42+
>
43+
> <mdn-scrim-inline url="https://scrimba.com/s06icdv" scrimtitle="Scrimba + MDN"></scrim-inline>

files/en-us/learn_web_development/core/structuring_content/html_images/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,9 @@ Essentially, the key is to deliver a usable experience, even when the images can
125125
> [!NOTE]
126126
> 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.
127127
128+
> [!NOTE]
129+
> [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.
130+
128131
### Width and height
129132

130133
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.

files/en-us/learn_web_development/core/styling_basics/box_model/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,9 @@ p {
389389

390390
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.
391391

392+
> [!NOTE]
393+
> [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.
394+
392395
### Borders
393396

394397
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.

files/en-us/learn_web_development/core/styling_basics/combinators/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,9 @@ In the example below, we are matching only the `<p>` element which is inside an
5959

6060
{{EmbedLiveSample("descendant")}}
6161

62+
> [!NOTE]
63+
> [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.
64+
6265
## Child combinator
6366

6467
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:

files/en-us/learn_web_development/core/styling_basics/getting_started/index.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,10 @@ li {
213213

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

216+
The following interactive lesson teaches basic CSS concepts and provides some practice.
217+
218+
<mdn-scrim-inline url="https://scrimba.com/frontend-path-c0j/~015" scrimtitle="Write your first lines of CSS!"></scrim-inline>
219+
216220
### Adding a class
217221

218222
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.

files/en-us/learn_web_development/core/text_styling/index.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,9 @@ Before starting this module, you should be familiar with [HTML](/en-US/docs/Lear
2929
- [Challenge: Typesetting a community school homepage](/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage) <sup>Challenge</sup>
3030
- : In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.
3131

32+
## See also
33+
34+
- [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>
35+
- : [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.
36+
3237
{{NextMenu("Learn_web_development/Core/Text_styling/Fundamentals", "Learn_web_development/Core")}}

files/en-us/learn_web_development/core/version_control/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ This module takes you through the essentials of version control using Git and Gi
3939
> [!NOTE]
4040
> 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/).
4141
42+
> [!NOTE]
43+
> 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.
44+
4245
## See also
4346

4447
- Other useful topics covered in GitHub Docs include:

files/en-us/learn_web_development/extensions/client-side_tools/package_management/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,9 @@ Add these lines right below the `"name"`:
147147

148148
So this is the config file that defines your package. This is good for now, so let's move on.
149149

150+
> [!NOTE]
151+
> [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.
152+
150153
### Installing Vite
151154

152155
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.

files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ This HTML will render as follows in a web browser:
6262

6363
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.
6464

65+
> [!NOTE]
66+
> 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.
67+
6568
## Creating your first HTML document
6669

6770
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.

0 commit comments

Comments
 (0)