Updated text formatting and inconsistencies for files in basic-html-and-html5 challenges (#19921)
This commit is contained in:
Lauren Van Sloun
committed by
Kristofer Koishigawa
Kristofer Koishigawa
parent
028c791fa6
commit
04d8e46012
@ -14,7 +14,7 @@ To do this, just add the word "checked" to the inside of an input element. For e
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Set the first of your <code>radio buttons</code> and the first of your <code>checkboxes</code> to both be checked by default.
|
||||
Set the first of your <code>radio button</code>s and the first of your <code>checkbox</code>es to both be checked by default.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
|
||||
## Description
|
||||
<section id='description'>
|
||||
Forms commonly use <code>checkboxes</code> for questions that may have more than one answer.
|
||||
Checkboxes are a type of <code>input</code>
|
||||
Checkboxes are a type of <code>input</code>.
|
||||
Each of your checkboxes can be nested within its own <code>label</code> element. By wrapping an <code>input</code> element inside of a <code>label</code> element it will automatically associate the checkbox input with the label element surrounding it.
|
||||
All related checkbox inputs should have the same <code>name</code> attribute.
|
||||
It is considered best practice to explicitly define the relationship between a checkbox <code>input</code> and its corresponding <code>label</code> by setting the <code>for</code> attribute on the <code>label</code> element to match the <code>id</code> attribute of the associated <code>input</code> element.
|
||||
|
||||
@ -7,7 +7,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cNWKvuR'
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can use <code>radio buttons</code> for questions where you want the user to only give you one answer out of multiple options.
|
||||
You can use <code>radio button</code>s for questions where you want the user to only give you one answer out of multiple options.
|
||||
Radio buttons are a type of <code>input</code>.
|
||||
Each of your radio buttons can be nested within its own <code>label</code> element. By wrapping an <code>input</code> element inside of a <code>label</code> element it will automatically associate the radio button input with the label element surrounding it.
|
||||
All related radio buttons should have the same <code>name</code> attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
|
||||
@ -19,7 +19,7 @@ It is considered best practice to set a <code>for</code> attribute on the <code>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add a pair of radio buttons to your form, each nested in its own label element. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>. Both should share the <code>name</code> attribute of <code>indoor-outdoor</code> to create a radio group.
|
||||
Add a pair of radio buttons to your form, each nested in its own <code>label</code> element. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>. Both should share the <code>name</code> attribute of <code>indoor-outdoor</code> to create a radio group.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
|
||||
## Description
|
||||
<section id='description'>
|
||||
Now let's create a web form.
|
||||
Input elements are a convenient way to get input from your user.
|
||||
<code>input</code> elements are a convenient way to get input from your user.
|
||||
You can create a text input like this:
|
||||
<code><input type="text"></code>
|
||||
Note that <code>input</code> elements are self-closing.
|
||||
|
||||
@ -7,7 +7,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Anchor elements can also be used to create internal links to jump to different sections within a webpage.
|
||||
<code>anchor</code> elements can also be used to create internal links to jump to different sections within a webpage.
|
||||
To create an internal link, you assign a link's <code>href</code> attribute to a hash symbol <code>#</code> plus the value of the <code>id</code> attribute for the element that you want to internally link to, usually further down the page. You then need to add the same <code>id</code> attribute to the element you are linking to. An <code>id</code> is an attribute that uniquely describes an element.
|
||||
Below is an example of an internal anchor link and its target element:
|
||||
<blockquote><a href="#contacts-header">Contacts</a><br>...<br><h2 id="contacts-header">Contacts</h2></blockquote>
|
||||
@ -78,4 +78,4 @@ tests:
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
</section>
|
||||
@ -14,7 +14,7 @@ Normal text is wrapped in the <code>p</code> element:<br> <code><p> Here
|
||||
Next is the <code>anchor</code> element <code><a></code> (which requires a closing tag <code></a></code>):<br> <code><a> ... </a></code>
|
||||
<code>target</code> is an anchor tag attribute that specifies where to open the link and the value <code>"_blank"</code> specifies to open the link in a new tab
|
||||
<code>href</code> is an anchor tag attribute that contains the URL address of the link:<br> <code><a href="http://freecodecamp.org"> ... </a></code>
|
||||
The text, <strong>"link to freecodecamp.org"</strong>, within the anchor element called <code>anchor text</code>, will display a link to click:<br> <code><a href=" ... ">link to freecodecamp.org</a></code>
|
||||
The text, <strong>"link to freecodecamp.org"</strong>, within the <code>anchor</code> element called <code>anchor text</code>, will display a link to click:<br> <code><a href=" ... ">link to freecodecamp.org</a></code>
|
||||
The final output of the example will look like this:<br><p>Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.</p>
|
||||
</section>
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ Remember to use <code>#</code> as your <code>a</code> element's <code>href</code
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Place the existing image element within an anchor element.
|
||||
Place the existing image element within an <code>anchor</code> element.
|
||||
Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link.
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user