[pull] main from mdn:main

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

@@ -88,7 +88,7 @@ nav ul {
 
 In this task, the list items are all different sizes, but we want them to be displayed as three equal-sized columns, no matter what content is in each item.
 
-Your final result should look like the following finished rendering:
+Your final result should look like the following rendering:
 
 {{EmbedLiveSample("flexbox2-finish", "", "300px")}}
 

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

@@ -17,9 +17,9 @@ The aim of this skill test is to help you assess whether you understand how a [g
 
 In this task, we want you to create a grid into which the four child elements will auto-place. The grid should have three columns sharing the available space equally and a 20 pixel gap between the column and row tracks. After that, try adding more child containers inside the parent container with the class of `grid` and see how they behave by default.
 
-Your final result should look like the following finished rendering:
+Your final result should look like the following rendering:
 
-{{EmbedLiveSample("grid1-finish", "", "200px")}}
+{{EmbedLiveSample("grid1-finish", "", "160px")}}
 
 ```html live-sample___grid1-start live-sample___grid1-finish
 <div class="grid">
@@ -69,7 +69,7 @@ Create a grid using `display: grid` with three columns using `grid-template-colu
 
 ## Task 2
 
-In this task, we already have a grid defined. We want you to edit the CSS rules for the two child elements, causing them to span over several grid tracks each. The second item should overlay the first as shown in the following finished rendering:
+In this task, we already have a grid defined. We want you to edit the CSS rules for the two child elements, causing them to span over several grid tracks each. The second item should overlay the first as shown in the following rendering:
 
 {{EmbedLiveSample("grid2-finish", "", "340px")}}
 
@@ -162,7 +162,7 @@ Another valid solution is to use `z-index`:
 
 In this task, there are four direct children in this grid. The starting point has them displayed using auto-placement.
 
-To complete the task, use the `grid-area` and `grid-template-areas` properties to lay the items out as shown in the following finished rendering:
+To complete the task, use the `grid-area` and `grid-template-areas` properties to lay the items out as shown in the following rendering:
 
 {{EmbedLiveSample("grid3-finish", "", "200px")}}
 

files/en-us/learn_web_development/core/styling_basics/test_your_skills/backgrounds_and_borders/index.md

@@ -29,7 +29,7 @@ To complete the task:
 
 Your final result should look like the following rendering:
 
-{{EmbedLiveSample("backgrounds1-finish", "", "200px")}}
+{{EmbedLiveSample("backgrounds1-finish", "", "160px")}}
 
 ```html live-sample___backgrounds1-start live-sample___backgrounds1-finish
 <div class="box">
@@ -62,7 +62,7 @@ h2 {
 
 This is the starting state of the task:
 
-{{EmbedLiveSample("backgrounds1-start", "", "200px")}}
+{{EmbedLiveSample("backgrounds1-start", "", "160px")}}
 
 <details>
 <summary>Click here to show the solution</summary>
@@ -135,7 +135,7 @@ h2 {
 
 This is the starting state of the task:
 
-{{EmbedLiveSample("backgrounds2-start", "", "220px")}}
+{{EmbedLiveSample("backgrounds2-start", "", "200px")}}
 
 <details>
 <summary>Click here to show the solution</summary>

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

@@ -83,7 +83,7 @@ To complete this task, add the following features to the provided box:
 
 Your final result should look like the following rendering:
 
-{{EmbedLiveSample("box-model2-finish")}}
+{{EmbedLiveSample("box-model2-finish", "100%", "140px")}}
 
 ```html live-sample___box-model2-start live-sample___box-model2-finish
 <div class="box">I use the standard box model.</div>
@@ -100,7 +100,7 @@ body {
 
 This is the starting state of the task:
 
-{{EmbedLiveSample("box-model2-start")}}
+{{EmbedLiveSample("box-model2-start", "100%", "100px")}}
 
 <details>
 <summary>Click here to show the solution</summary>
@@ -126,7 +126,7 @@ To complete this task, update the CSS to cause the size of the margin, padding,
 
 Your final result should look like the following rendering:
 
-{{EmbedLiveSample("box-model3-finish")}}
+{{EmbedLiveSample("box-model3-finish", "100%", "260px")}}
 
 ```html live-sample___box-model3-start live-sample___box-model3-finish
 <div class="box">
@@ -158,7 +158,7 @@ body {
 
 This is the starting state of the task:
 
-{{EmbedLiveSample("box-model3-start")}}
+{{EmbedLiveSample("box-model3-start", "100%", "220px")}}
 
 <details>
 <summary>Click here to show the solution</summary>

files/en-us/learn_web_development/core/styling_basics/test_your_skills/cascade/index.md

@@ -19,9 +19,9 @@ In this task, we want you to use one of the special values we looked at in the [
 
 To complete the task, write a declaration in a new rule that will reset the background color back to white, without using an actual color value.
 
-Your final result should look like the following finished rendering:
+Your final result should look like the following rendering:
 
-{{EmbedLiveSample("cascade1-finish")}}
+{{EmbedLiveSample("cascade1-finish", "100%", "110px")}}
 
 ```html live-sample___cascade1-start live-sample___cascade1-finish
 <div class="container" id="outer">
@@ -49,7 +49,7 @@ div div li a {
 
 This is the starting state of the task:
 
-{{EmbedLiveSample("cascade1-start")}}
+{{EmbedLiveSample("cascade1-start", "100%", "110px")}}
 
 <details>
 <summary>Click here to show the solution</summary>
@@ -74,9 +74,9 @@ To complete this task, manipulate the cascade layer order to color the links `re
 
 This task is a stretch goal — it requires knowledge of cascade layers, which we didn't cover in the [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) article. You can find the information you need to attempt this task at [Cascade layers > Determining the precedence based on the order of layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#determining_the_precedence_based_on_the_order_of_layers).
 
-Your final result should look like the following finished rendering:
+Your final result should look like the following rendering:
 
-{{EmbedLiveSample("cascade2-finish")}}
+{{EmbedLiveSample("cascade2-finish", "100%", "110px")}}
 
 ```html live-sample___cascade2-start live-sample___cascade2-finish
 <div class="container" id="outer">
@@ -113,7 +113,7 @@ Your final result should look like the following finished rendering:
 
 This is the starting state of the task:
 
-{{EmbedLiveSample("cascade2-start")}}
+{{EmbedLiveSample("cascade2-start", "100%", "110px")}}
 
 <details>
 <summary>Click here to show the solution</summary>

files/en-us/learn_web_development/core/styling_basics/test_your_skills/images/index.md

@@ -19,7 +19,7 @@ In this task, you have an image that is overflowing the box. We want the image t
 
 Your final result should look like the following rendering:
 
-{{EmbedLiveSample("images-forms1-finish", "", "280px")}}
+{{EmbedLiveSample("images-forms1-finish", "", "260px")}}
 
 ```html live-sample___images-forms1-start live-sample___images-forms1-finish
 <div class="box">
@@ -43,7 +43,7 @@ img {
 
 This is the starting state of the task:
 
-{{EmbedLiveSample("images-forms1-start", "", "400px")}}
+{{EmbedLiveSample("images-forms1-start", "", "260px")}}
 
 <details>
 <summary>Click here to show the solution</summary>

files/en-us/learn_web_development/core/styling_basics/test_your_skills/overflow/index.md

@@ -24,7 +24,7 @@ To complete the task:
 
 Your final result should look like the following rendering:
 
-{{EmbedLiveSample("overflow1-finish", "", "450px")}}
+{{EmbedLiveSample("overflow1-finish", "", "300px")}}
 
 ```html live-sample___overflow1-start live-sample___overflow1-finish
 <div class="box">
@@ -77,7 +77,7 @@ In this task, there is an image in the box that is bigger than the dimensions of
 
 Your final result should look like the following rendering:
 
-{{EmbedLiveSample("overflow2-finish", "", "300px")}}
+{{EmbedLiveSample("overflow2-finish", "", "260px")}}
 
 ```html live-sample___overflow2-start live-sample___overflow2-finish
 <div class="box">
@@ -100,7 +100,7 @@ body {
 
 This is the starting state of the task:
 
-{{EmbedLiveSample("overflow2-start", "", "300px")}}
+{{EmbedLiveSample("overflow2-start", "", "260px")}}
 
 <details>
 <summary>Click here to show the solution</summary>

files/en-us/learn_web_development/core/styling_basics/test_your_skills/selectors/index.md

@@ -23,7 +23,7 @@ To complete the task:
 2. Give `<h2>` headings a blue background and white text.
 3. Cause text wrapped in a `<span>` to have a font-size of `200%`.
 
-Your final result should look like the following finished rendering:
+Your final result should look like the following rendering:
 
 {{EmbedLiveSample("selectors1-finish", "", "400px")}}
 
@@ -86,7 +86,7 @@ To complete the task:
 3. If the element with a class of `alert` also has a class of `stop`, make the background red.
 4. If the element with a class of `alert` also has a class of `go`, make the background green.
 
-Your final result should look like the following finished rendering:
+Your final result should look like the following rendering:
 
 {{EmbedLiveSample("selectors2-finish", "", "480px")}}
 
@@ -153,7 +153,7 @@ To complete the task:
 2. Make the first element inside the container `font-size: 150%` and the first line of that element red.
 3. Stripe every other row in the table by selecting these rows and giving them a background color of `#333333` and foreground white.
 
-Your final result should look like the following finished rendering:
+Your final result should look like the following rendering:
 
 {{EmbedLiveSample("selectors3-finish", "", "540px")}}
 
@@ -270,7 +270,7 @@ To complete the task:
    - Remove their bullets.
    - Give them a `1px` grey bottom border.
 
-Your final result should look like the following finished rendering:
+Your final result should look like the following rendering:
 
 {{EmbedLiveSample("selectors4-finish", "", "500px")}}
 
@@ -335,7 +335,7 @@ To complete the task, provide solutions for the following challenges using attri
 2. Target the `<a>` element with an `href` attribute that contains the word `contact` somewhere in its value and make the border orange (`border-color: orange`).
 3. Target the `<a>` element with an `href` value starting with `https` and give it a green border (`border-color: green`).
 
-Your final result should look like the following finished rendering:
+Your final result should look like the following rendering:
 
 {{EmbedLiveSample("selectors5-finish", "", "300px")}}
 

files/en-us/learn_web_development/core/styling_basics/test_your_skills/sizing/index.md

@@ -25,7 +25,7 @@ To complete the task:
 
 Your final result should look like the following rendering:
 
-{{EmbedLiveSample("sizing1-finish", "", "500px")}}
+{{EmbedLiveSample("sizing1-finish", "", "460px")}}
 
 ```html live-sample___sizing1-start live-sample___sizing1-finish
 <div class="box box1">
@@ -68,7 +68,7 @@ body {
 
 This is the starting state of the task:
 
-{{EmbedLiveSample("sizing1-start", "", "500px")}}
+{{EmbedLiveSample("sizing1-start", "", "480px")}}
 
 <details>
 <summary>Click here to show the solution</summary>
@@ -98,7 +98,7 @@ To complete the task:
 
 Your final result should look like the following rendering:
 
-{{EmbedLiveSample("sizing2-finish", "", "250px")}}
+{{EmbedLiveSample("sizing2-finish", "", "220px")}}
 
 ```html live-sample___sizing2-start live-sample___sizing2-finish
 <div class="box">
@@ -134,7 +134,7 @@ body {
 
 This is the starting state of the task:
 
-{{EmbedLiveSample("sizing2-start", "", "250px")}}
+{{EmbedLiveSample("sizing2-start", "", "100px")}}
 
 <details>
 <summary>Click here to show the solution</summary>

files/en-us/web/api/navigateevent/index.md

@@ -89,7 +89,7 @@ In this example of intercepting a navigation, the `handler()` function starts by
 
 ```js
 navigation.addEventListener("navigate", (event) => {
-  if (shouldNotIntercept(navigateEvent)) return;
+  if (shouldNotIntercept(event)) return;
   const url = new URL(event.destination.url);
 
   if (url.pathname.startsWith("/articles/")) {

files/en-us/web/http/guides/cors/errors/corsdidnotsucceed/index.md

@@ -17,6 +17,17 @@ The {{Glossary("HTTP")}} request which makes use of CORS failed because the HTTP
 
 In many cases, it is caused by a browser plugin (e.g., an ad blocker or privacy protector) blocking the request.
 
+## How to fix
+
+- Check DevTools > Network to see whether the request failed due to DNS resolution, a timeout, a connection being refused, or a TLS handshake error.
+- Disable browser extensions or try a private browsing window, as ad blockers, firewalls, and privacy tools can block network requests.
+- Fix certificate or {{Glossary("TLS")}} issues, such as expired or invalid certificates.
+- Avoid mixed content: if the page is loaded over HTTPS, requests to HTTP resources can fail.
+  Serve the API over HTTPS instead.
+- Confirm that the server is responding correctly and that the endpoint returns a response.
+
+If you are using a local dev server, ensure that the correct scheme and port are used and that the service is running.
+
 Other possible causes include:
 
 - Trying to access an `https` resource that has an invalid certificate will cause this error.