mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-24 23:01:18 +08:00
fix(curriculum): remove videos and references from forms, tables, and html tools lectures (#61582)
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Alex Goldsmith
co-authored by
Huyen Nguyen
Huyen Nguyen
parent
cd85e85c3e
commit
e071900771
+10
-17
@@ -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--
|
||||
|
||||
|
||||
+4
-11
@@ -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.
|
||||
|
||||
---
|
||||
|
||||
|
||||
+4
-11
@@ -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.
|
||||
|
||||
---
|
||||
|
||||
|
||||
+4
-11
@@ -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--
|
||||
|
||||
|
||||
+1
-8
@@ -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:
|
||||
|
||||
+7
-14
@@ -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--
|
||||
|
||||
|
||||
+10
-17
@@ -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--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user