diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md index 1610cdd4a7b..a847df6496a 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md @@ -1,19 +1,12 @@ --- id: 6729974ec29be33cb00eb54d title: How Do Forms, Labels, and Inputs Work in HTML? -challengeType: 11 -videoId: O14Wb3N4wDQ +challengeType: 19 dashedName: how-do-forms-labels-and-inputs-work-in-html --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do forms, labels, and inputs work in HTML? - The `form` element in HTML is used to gather user information, such as names and email addresses. Here is an example of a `form` element: ```html @@ -73,7 +66,7 @@ It indicates the color of the label text. ### --feedback-- -Review the middle portion of the video where the `for` attribute is discussed. +Review the middle portion of the lecture where the `for` attribute is discussed. --- @@ -85,7 +78,7 @@ It specifies the alignment of the label within its container. ### --feedback-- -Review the middle portion of the video where the `for` attribute is discussed. +Review the middle portion of the lecture where the `for` attribute is discussed. --- @@ -93,7 +86,7 @@ It defines a JavaScript function to execute when the label is clicked. ### --feedback-- -Review the middle portion of the video where the `for` attribute is discussed. +Review the middle portion of the lecture where the `for` attribute is discussed. ## --video-solution-- @@ -109,7 +102,7 @@ Which of the following is a correct value for the `type` attribute used inside i ### --feedback-- -Refer back to the beginning of the video where the example shows a valid value for the `type` attribute. +Refer back to the beginning of the lecture where the example shows a valid value for the `type` attribute. --- @@ -117,7 +110,7 @@ Refer back to the beginning of the video where the example shows a valid value f ### --feedback-- -Refer back to the beginning of the video where the example shows a valid value for the `type` attribute. +Refer back to the beginning of the lecture where the example shows a valid value for the `type` attribute. --- @@ -125,7 +118,7 @@ Refer back to the beginning of the video where the example shows a valid value f ### --feedback-- -Refer back to the beginning of the video where the example shows a valid value for the `type` attribute. +Refer back to the beginning of the lecture where the example shows a valid value for the `type` attribute. --- @@ -149,7 +142,7 @@ It specifies the type of input field. ### --feedback-- -Review the end of the video where the `placeholder` attribute was discussed. +Review the end of the lecture where the `placeholder` attribute was discussed. --- @@ -157,7 +150,7 @@ It defines the initial value displayed in the input field. ### --feedback-- -Review the end of the video where the `placeholder` attribute was discussed. +Review the end of the lecture where the `placeholder` attribute was discussed. --- @@ -165,7 +158,7 @@ It indicates the maximum length of characters allowed in the input field. ### --feedback-- -Review the end of the video where the `placeholder` attribute was discussed. +Review the end of the lecture where the `placeholder` attribute was discussed. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4cd3d59756726657efb8.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4cd3d59756726657efb8.md index bfa80e13560..7c96864ea44 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4cd3d59756726657efb8.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4cd3d59756726657efb8.md @@ -1,19 +1,12 @@ --- id: 672a4cd3d59756726657efb8 title: What Are the Different Types of Buttons, and When Should You Use Them? -challengeType: 11 -videoId: tlumOah6l4k +challengeType: 19 dashedName: what-are-the-different-types-of-buttons --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What are the different types of buttons, and when should you use them? - The `button` element is used to perform a particular action when it is activated. Here is an example of a `button` element with the button text of `Start Game`. ```html @@ -145,7 +138,7 @@ What is another element you can use to represent a button? ### --feedback-- -Review the last part of the video where this is discussed in more detail. +Review the last part of the lecture where this is discussed in more detail. --- @@ -153,7 +146,7 @@ Review the last part of the video where this is discussed in more detail. ### --feedback-- -Review the last part of the video where this is discussed in more detail. +Review the last part of the lecture where this is discussed in more detail. --- @@ -161,7 +154,7 @@ Review the last part of the video where this is discussed in more detail. ### --feedback-- -Review the last part of the video where this is discussed in more detail. +Review the last part of the lecture where this is discussed in more detail. --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4ce6dab9eb735828b48b.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4ce6dab9eb735828b48b.md index d20bbc8e057..2e6089814ff 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4ce6dab9eb735828b48b.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4ce6dab9eb735828b48b.md @@ -1,19 +1,12 @@ --- id: 672a4ce6dab9eb735828b48b title: What Is Client-Side Form Validation in HTML Forms, and What Are Some Examples? -challengeType: 11 -videoId: Mt-e0DpxGXE +challengeType: 19 dashedName: what-is-client-side-form-validation-in-html-forms --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is client-side form validation in HTML forms, and what are some examples? - When a user fills out a form on your website, it is important that they fill out all of the necessary information in the correct format. HTML form controls, like inputs, have a lot of built-in validation that you can use to check for invalid data. This will help ensure that the user fixes these mistakes before the information is submitted and processed by the server. The term "client-side" refers to everything that happens on the user's computer or device, like the part of a website or app you interact with directly. This includes the layout, design, and any interactive features. @@ -139,7 +132,7 @@ The program will crash. ### --feedback-- -Refer back to the middle of the video where this was discussed. +Refer back to the middle of the lecture where this was discussed. --- @@ -147,7 +140,7 @@ The form will submit just fine. ### --feedback-- -Refer back to the middle of the video where this was discussed. +Refer back to the middle of the lecture where this was discussed. --- @@ -155,7 +148,7 @@ Nothing will happen. ### --feedback-- -Refer back to the middle of the video where this was discussed. +Refer back to the middle of the lecture where this was discussed. --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4cf959443073a6774908.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4cf959443073a6774908.md index 0631cba07cb..dabde850038 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4cf959443073a6774908.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms/672a4cf959443073a6774908.md @@ -1,19 +1,12 @@ --- id: 672a4cf959443073a6774908 title: What Are the Different Form States, and Why Are They Important? -challengeType: 11 -videoId: 0kD-EwXqRG4 +challengeType: 19 dashedName: what-are-the-different-form-states --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What are the different form states, and why are they important? - In HTML, form controls, like inputs, can be in different stages or conditions like a `focused` state, `readonly` state, or `disabled` state. The first state would be considered the `default` state. The default state of an email address input is a blank input. That is what the email input looks like when it is first rendered on the page. At this point, the user has not input any information. @@ -130,7 +123,7 @@ When an input field is disabled and cannot be interacted with. ### --feedback-- -Refer back to the beginning of the video where the focused state was discussed. +Refer back to the beginning of the lecture where the focused state was discussed. --- @@ -138,7 +131,7 @@ When an input field is validated and shows an error message. ### --feedback-- -Refer back to the beginning of the video where the focused state was discussed. +Refer back to the beginning of the lecture where the focused state was discussed. --- @@ -150,7 +143,7 @@ When an input field has been pre-filled with default values by the browser. ### --feedback-- -Refer back to the beginning of the video where the focused state was discussed. +Refer back to the beginning of the lecture where the focused state was discussed. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md index 836f56dbf55..770cbeeb1be 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md @@ -1,19 +1,12 @@ --- id: 672a4fa7d335bc7cfb63a392 title: What Is an HTML Validator, and How Can It Help You Debug Your Code? -challengeType: 11 -videoId: gniy8iis5ok +challengeType: 19 dashedName: what-is-an-html-validator --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is an HTML validator, and how can it help you debug your code? - HTML is a very forgiving language – elements still render even when you make mistakes, like forgetting to include a closing tag. Let's say you have an `h2` element without a closing tag: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-html-tools/672a511bb408ec81c592eb68.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-html-tools/672a511bb408ec81c592eb68.md index f4f5fc64066..f9b20a740ca 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-html-tools/672a511bb408ec81c592eb68.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-html-tools/672a511bb408ec81c592eb68.md @@ -1,19 +1,12 @@ --- id: 672a511bb408ec81c592eb68 title: How to Use the DOM Inspector and DevTools to Debug and Build Your Projects -challengeType: 11 -videoId: aigMtKHvkSM +challengeType: 19 dashedName: how-to-use-the-dom-inspector-and-devtools --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do you use the DOM inspector and devtools to debug and build your projects? - When you are building out your projects, you will frequently run into issues where your programs are not working as expected. Programmers often refer to issues as bugs. The process of finding and fixing these bugs is known as debugging. @@ -68,7 +61,7 @@ Scanning. ### --feedback-- -Review the beginning of the video where this was discussed. +Review the beginning of the lecture where this was discussed. --- @@ -76,7 +69,7 @@ Building. ### --feedback-- -Review the beginning of the video where this was discussed. +Review the beginning of the lecture where this was discussed. --- @@ -88,7 +81,7 @@ Scripting. ### --feedback-- -Review the beginning of the video where this was discussed. +Review the beginning of the lecture where this was discussed. ## --video-solution-- @@ -104,7 +97,7 @@ BOM ### --feedback-- -Review the beginning of the video where this was discussed. +Review the beginning of the lecture where this was discussed. --- @@ -116,7 +109,7 @@ Python ### --feedback-- -Review the beginning of the video where this was discussed. +Review the beginning of the lecture where this was discussed. --- @@ -124,7 +117,7 @@ CSS ### --feedback-- -Review the beginning of the video where this was discussed. +Review the beginning of the lecture where this was discussed. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md index c4bbcdf0231..3c3a3dd9632 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-tables/672a4e04a24858778f57ebfe.md @@ -1,19 +1,12 @@ --- id: 672a4e04a24858778f57ebfe title: What Are HTML Tables Used For, and What Should They Not Be Used For? -challengeType: 11 -videoId: l_M9cKRPzN4 +challengeType: 19 dashedName: what-are-html-tables-used-for --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What are HTML tables used for, and what should they not be used for? - HTML tables aren't used as much these days as they used to be. But, as a frontend developer, you should still be familiar with them. Tables are one of the earliest ways devs had for displaying data in a browser way back in the 1990s. Here's an example of code used to generate a table from the U.S. Bureau of Labor Statistics: @@ -127,7 +120,7 @@ In an HTML table, which elements are contained within a `tr` element? ### --feedback-- -Refer back to the beginning of the video where the `tr` element was discussed. +Refer back to the beginning of the lecture where the `tr` element was discussed. --- @@ -139,7 +132,7 @@ Refer back to the beginning of the video where the `tr` element was discussed. ### --feedback-- -Refer back to the beginning of the video where the `tr` element was discussed. +Refer back to the beginning of the lecture where the `tr` element was discussed. --- @@ -147,7 +140,7 @@ Refer back to the beginning of the video where the `tr` element was discussed. ### --feedback-- -Refer back to the beginning of the video where the `tr` element was discussed. +Refer back to the beginning of the lecture where the `tr` element was discussed. ## --video-solution-- @@ -163,7 +156,7 @@ Which of the following are the main sections of an HTML table? ### --feedback-- -Refer back to the beginning of the video where these elements were discussed. +Refer back to the beginning of the lecture where these elements were discussed. --- @@ -171,7 +164,7 @@ Refer back to the beginning of the video where these elements were discussed. ### --feedback-- -Refer back to the beginning of the video where these elements were discussed. +Refer back to the beginning of the lecture where these elements were discussed. --- @@ -183,7 +176,7 @@ Refer back to the beginning of the video where these elements were discussed. ### --feedback-- -Refer back to the beginning of the video where these elements were discussed. +Refer back to the beginning of the lecture where these elements were discussed. ## --video-solution-- @@ -199,7 +192,7 @@ Creating page layouts. ### --feedback-- -Refer back to the end of the video where the recommended use was discussed. +Refer back to the end of the lecture where the recommended use was discussed. --- @@ -211,7 +204,7 @@ Styling with CSS. ### --feedback-- -Refer back to the end of the video where the recommended use was discussed. +Refer back to the end of the lecture where the recommended use was discussed. --- @@ -219,7 +212,7 @@ Embedding images. ### --feedback-- -Refer back to the end of the video where the recommended use was discussed. +Refer back to the end of the lecture where the recommended use was discussed. ## --video-solution--