Skip to content

Commit

Permalink
chore: Update macros since Learn area move
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsmth
bsmth committed Dec 31, 2024
1 parent c3750cf commit 108defe
Show file tree
Hide file tree
Showing 13 changed files with 2,520 additions and 36 deletions.
8 changes: 4 additions & 4 deletions ...nd_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,16 +62,16 @@ Try updating the live code below to recreate the finished example:
<h1>I am the eggman</h1>

<p>
Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm.
Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm
hempen halter furl.
Prow scuttle halter provost Sail ho shrouds spirits boom mizzenmast yardarm.
Pinnace holystone mizzenmast quarter crow's nest halter grog yardarm hempen
halter furl.
</p>

<h2>They are the eggman</h2>

<p>
Swab barque interloper chantey doubloon starboard grog black jack gangway
rutters.
halter.
</p>

<h2>I am the walrus</h2>
Expand Down
26 changes: 25 additions & 1 deletion files/en-us/learn_web_development/core/scripting/math/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -435,7 +435,31 @@ function updateBtn() {
}
```

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}
```html live-sample___conditional
<body>
<button>Start machine</button>
<p>The machine is stopped.</p>
</body>
```

```js live-sample___conditional
const btn = document.querySelector("button");
const txt = document.querySelector("p");

btn.addEventListener("click", updateBtn);

function updateBtn() {
if (btn.textContent === "Start machine") {
btn.textContent = "Stop machine";
txt.textContent = "The machine has started!";
} else {
btn.textContent = "Start machine";
txt.textContent = "The machine is stopped.";
}
}
```

{{EmbedLiveSample("conditional")}}

**[Open in new window](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html)**

Expand Down
2 changes: 1 addition & 1 deletion ...n-us/learn_web_development/core/scripting/test_your_skills_colon__math/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const para2 = document.createElement("p");
const finalNumberCheck =
typeof finalNumber === "number"
? "finalNumber is a number type. Well done!"
: `Ooops! finalNumber is not a number.`;
: `Oops! finalNumber is not a number.`;
para2.textContent = finalNumberCheck;

section.appendChild(para1);
Expand Down
60 changes: 59 additions & 1 deletion ...nt/core/structuring_content/test_your_skills_colon__advanced_html_text/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,65 @@ In this task, we want you to add some semantics to the provided HTML as follows:

The finished example should look like this:

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text2-finished.html", '100%', 300)}}
```html hidden live-sample___advanced-text2-finished
<body>
<h1>Advanced text semantics</h1>
<p>Let's start with a quote:</p>
<blockquote
cite="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">
<p>
<abbr title="HyperText Markup Language">HTML</abbr>, Hypertext Markup
Language is by default accessible, if used correctly.
</p>
</blockquote>
<p>
<abbr title="Cascading Style Sheets">CSS</abbr>, Cascading Style Sheets, can
also be used to make web pages more, or less, accessible.
</p>
<p>
Chemical Formulae: H<sub>2</sub>O (Water), C<sub>2</sub>H<sub>6</sub>O
(Ethanol).
</p>
<p>
Dates:
<time datetime="2019-12-25">December 25 <sup>th</sup> 2019 </time>
(Christmas Day),
<time datetime="2019-11-02">November 2<sup>nd</sup>2019</time>
(Día de los Muertos).
</p>
</body>
```

```css hidden live-sample___advanced-text2-finished
body {
background-color: #fff;
color: #333;
font:
1em / 1.4 Helvetica Neue,
Helvetica,
Arial,
sans-serif;
padding: 1em;
margin: 0;
}

h1 {
font-size: 2rem;
margin: 0;
color: purple;
}

p {
margin: 0.5em 0;
}

abbr,
time {
color: green;
}
```

{{EmbedLiveSample("advanced-text2-finished")}}

Try updating the live code below to recreate the finished example:

Expand Down
178 changes: 173 additions & 5 deletions ...ment/core/structuring_content/test_your_skills_colon__html_text_basics/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,41 @@ In this task, we want you to mark up the provided HTML using semantic heading an

The finished example should look like this:

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1-finished.html", '100%', 300)}}
```html live-sample___basic-text1-finished
<body>
<main>
<h1>Basic HTML Animals</h1>
<p>This is the first paragraph in our page. It introduces our animals.</p>
<h2>The Llama</h2>
<p>
Our Llama is a big fan of list items. When she spies a patch of them on a
web page, she will eat them like sweets, licking her lips as she goes.
</p>
<h2>The Anaconda</h2>
<p>
The crafty anaconda likes to slither around the page, traveling rapidly by
way of anchors to sneak up on his prey.
</p>
</main>
</body>
```

```css live-sample___basic-text1-finished
* {
box-sizing: border-box;
}

h1,
h2 {
color: purple;
}

p {
color: gray;
}
```

{{EmbedLiveSample("basic-text1-finished")}}

Try updating the live code below to recreate the finished example:

Expand All @@ -28,7 +62,7 @@ Basic HTML Animals This is the first paragraph in our page. It introduces our
animals. The Llama Our Llama is a big fan of list items. When she spies a patch
of them on a web page, she will eat them like sweets, licking her lips as she
goes. The Anaconda The crafty anaconda likes to slither around the page,
travelling rapidly by way of anchors to sneak up on his prey.
traveling rapidly by way of anchors to sneak up on his prey.
```

```css live-sample___basic-text1
Expand All @@ -54,7 +88,51 @@ In this task, we want you to turn the first un-marked up list into an unordered

The finished example should look like this:

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2-finished.html", '100%', 400)}}
```html live-sample___basic-text2-finished
<body>
<main>
<h1>Looking at lists</h1>
<p>
Turn the following list of my favorite vegetables into an unordered list.
</p>
<ul>
<li>Cucumber</li>
<li>Broccoli</li>
<li>Asparagus</li>
<li>Pepper</li>
</ul>
<p>Turn the following directions into an ordered list.</p>
<ol>
<li>First knock on the door</li>
<li>When prompted, say the magic word</li>
<li>Wait for at least 5 seconds</li>
<li>Turn the handle and push</li>
</ol>
</main>
</body>
```

```css live-sample___basic-text2-finished
* {
box-sizing: border-box;
}

ul {
border: 2px solid orange;
}

ol {
border: 2px solid purple;
}

ol,
ul {
padding: 5px 20px;
border-radius: 4px;
}
```

{{EmbedLiveSample("basic-text2-finished")}}

Try updating the live code below to recreate the finished example:

Expand Down Expand Up @@ -99,7 +177,61 @@ In this task, we want you to turn the provided animals and their definitions int

The finished example should look like this:

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text1-finished.html", '100%', 250)}}
```html live-sample___advanced-text1-finished
<body>
<h1>Advanced HTML Animals</h1>
<dl>
<dt>Llama</dt>
<dd>
Tall, woolly quadruped, pointy ears. Sometimes rideable, but grumpy and
spits a lot. Big fan of list items.
</dd>
<dt>Anaconda</dt>
<dd>
A very large constrictor snake; travels rapidly by way of anchors to sneak
up on his prey.
</dd>
<dt>Hippopotamus</dt>
<dd>His description is bottomless.</dd>
</dl>
</body>
```

```css live-sample___advanced-text1-finished
body {
background-color: #fff;
color: #333;
font:
1em / 1.4 Helvetica Neue,
Helvetica,
Arial,
sans-serif;
padding: 1em;
margin: 0;
}

h1 {
font-size: 2rem;
margin: 0;
color: purple;
}

dl {
color: gray;
margin: 0.5em 0;
}

dt {
font-weight: bold;
color: purple;
}

* {
box-sizing: border-box;
}
```

{{EmbedLiveSample("advanced-text1-finished")}}

Try updating the live code below to recreate the finished example:

Expand Down Expand Up @@ -142,7 +274,43 @@ In this task, you are provided with a paragraph, and your aim is to use some inl

The finished example should look like this:

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3-finished.html", '100%', 120)}}
```html live-sample___basic-text3-finished
<body>
<main>
<h1>Emphasis and importance</h1>
<p>
There are
<strong> two </strong>
things I care about —
<strong> music </strong>
and
<strong> friends </strong>
. Someday I
<em> might </em>
be able to get my friends interested in each other,
<em> and </em>
my music!
</p>
</main>
</body>
```

```css live-sample___basic-text3-finished
* {
box-sizing: border-box;
}

h1,
strong {
color: purple;
}

em {
color: gray;
}
```

{{EmbedLiveSample("basic-text3-finished")}}

Try updating the live code below to recreate the finished example:

Expand Down
38 changes: 36 additions & 2 deletions ...learn_web_development/extensions/client-side_apis/video_and_audio_apis/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,45 @@ The {{htmlelement("video")}} and {{htmlelement("audio")}} elements allow us to e

This creates a video player inside the browser like so:

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}
```html live-sample___multiple-video-formats
<body>
<h1>Below is a video that will play in all modern browsers</h1>
<video controls="">
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
Your browser doesn't support HTML5 video. Here is a
<a href="rabbit320.mp4"> link to the video </a>
instead.
</p>
</video>
</body>
```

{{EmbedLiveSample("multiple-video-formats")}}

You can review what all the HTML features do in the article linked above; for our purposes here, the most interesting attribute is [`controls`](/en-US/docs/Web/HTML/Element/video#controls), which enables the default set of playback controls. If you don't specify this, you get no playback controls:

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}
```html live-sample___multiple-video-formats-no-controls
<body>
<h1>Below is a video that will play in all modern browsers</h1>
<video>
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
Your browser doesn't support HTML5 video. Here is a
<a href="rabbit320.mp4"> link to the video </a>
instead.
</p>
</video>
</body>
```

```css live-sample___multiple-video-formats-no-controls
No <style> content found
```

{{EmbedLiveSample("multiple-video-formats-no-controls")}}

This is not as immediately useful for video playback, but it does have advantages. One big issue with the native browser controls is that they are different in each browser — not very good for cross-browser support! Another big issue is that the native controls in most browsers aren't very keyboard-accessible.

Expand Down
Loading

0 comments on commit 108defe

Please sign in to comment.