diff --git a/files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md b/files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md index 8d0e1833cdfac9b..1923e436680f942 100644 --- a/files/en-us/learn_web_development/core/css_layout/test_your_skills/flexbox/index.md +++ b/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")}} diff --git a/files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md b/files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md index 537aa199c9878a0..27ef7fc6f3ce2e5 100644 --- a/files/en-us/learn_web_development/core/css_layout/test_your_skills/grid/index.md +++ b/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
@@ -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")}} diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/backgrounds_and_borders/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/backgrounds_and_borders/index.md index 9fa5a67013cd7a0..5d7f92a315c219f 100644 --- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/backgrounds_and_borders/index.md +++ b/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
@@ -62,7 +62,7 @@ h2 { This is the starting state of the task: -{{EmbedLiveSample("backgrounds1-start", "", "200px")}} +{{EmbedLiveSample("backgrounds1-start", "", "160px")}}
Click here to show the solution @@ -135,7 +135,7 @@ h2 { This is the starting state of the task: -{{EmbedLiveSample("backgrounds2-start", "", "220px")}} +{{EmbedLiveSample("backgrounds2-start", "", "200px")}}
Click here to show the solution diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/box_model/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/box_model/index.md index 00f01cb4c40e276..7a14d2ac171ce8a 100644 --- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/box_model/index.md +++ b/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
I use the standard box model.
@@ -100,7 +100,7 @@ body { This is the starting state of the task: -{{EmbedLiveSample("box-model2-start")}} +{{EmbedLiveSample("box-model2-start", "100%", "100px")}}
Click here to show the solution @@ -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
@@ -158,7 +158,7 @@ body { This is the starting state of the task: -{{EmbedLiveSample("box-model3-start")}} +{{EmbedLiveSample("box-model3-start", "100%", "220px")}}
Click here to show the solution diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/cascade/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/cascade/index.md index 524243cb3148c21..a2ec1cec0a689d0 100644 --- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/cascade/index.md +++ b/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
@@ -49,7 +49,7 @@ div div li a { This is the starting state of the task: -{{EmbedLiveSample("cascade1-start")}} +{{EmbedLiveSample("cascade1-start", "100%", "110px")}}
Click here to show the solution @@ -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
@@ -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")}}
Click here to show the solution diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/images/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/images/index.md index 4f470b645a5600e..858b64566bb5b1d 100644 --- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/images/index.md +++ b/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
@@ -43,7 +43,7 @@ img { This is the starting state of the task: -{{EmbedLiveSample("images-forms1-start", "", "400px")}} +{{EmbedLiveSample("images-forms1-start", "", "260px")}}
Click here to show the solution diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/overflow/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/overflow/index.md index 84a7c1af78b5ecf..19979b77c819d0e 100644 --- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/overflow/index.md +++ b/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
@@ -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
@@ -100,7 +100,7 @@ body { This is the starting state of the task: -{{EmbedLiveSample("overflow2-start", "", "300px")}} +{{EmbedLiveSample("overflow2-start", "", "260px")}}
Click here to show the solution diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/selectors/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/selectors/index.md index 5498f522eae5e39..26af1cec5f2936e 100644 --- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/selectors/index.md +++ b/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 `

` headings a blue background and white text. 3. Cause text wrapped in a `` 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 `` 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 `` 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")}} diff --git a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/sizing/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/sizing/index.md index ba08ccc17845dee..03fd5f9c9751f3b 100644 --- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/sizing/index.md +++ b/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
@@ -68,7 +68,7 @@ body { This is the starting state of the task: -{{EmbedLiveSample("sizing1-start", "", "500px")}} +{{EmbedLiveSample("sizing1-start", "", "480px")}}
Click here to show the solution @@ -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
@@ -134,7 +134,7 @@ body { This is the starting state of the task: -{{EmbedLiveSample("sizing2-start", "", "250px")}} +{{EmbedLiveSample("sizing2-start", "", "100px")}}
Click here to show the solution diff --git a/files/en-us/web/api/navigateevent/index.md b/files/en-us/web/api/navigateevent/index.md index 04b5eb5acc4fe93..24dce196480a353 100644 --- a/files/en-us/web/api/navigateevent/index.md +++ b/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/")) { diff --git a/files/en-us/web/http/guides/cors/errors/corsdidnotsucceed/index.md b/files/en-us/web/http/guides/cors/errors/corsdidnotsucceed/index.md index daa06ca4e1fb14f..69d6d14e8eb8f1d 100644 --- a/files/en-us/web/http/guides/cors/errors/corsdidnotsucceed/index.md +++ b/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.