Updated text formatting and inconsistencies for files in basic-html-and-html5 challenges (#19921)

This commit is contained in:
Lauren Van Sloun
2018-11-12 05:23:12 -05:00
committed by Kristofer Koishigawa
parent 028c791fa6
commit 04d8e46012
8 changed files with 9 additions and 10 deletions

View File

@ -14,7 +14,7 @@ To do this, just add the word "checked" to the inside of an input element. For e
## Instructions ## Instructions
<section id='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> </section>
## Tests ## Tests

View File

@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
## Description ## Description
<section id='description'> <section id='description'>
Forms commonly use <code>checkboxes</code> for questions that may have more than one answer. 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. 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. 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. 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.

View File

@ -7,7 +7,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cNWKvuR'
## Description ## Description
<section id='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>. 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. 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. 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 ## Instructions
<section id='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> </section>
## Tests ## Tests

View File

@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
## Description ## Description
<section id='description'> <section id='description'>
Now let's create a web form. 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: You can create a text input like this:
<code>&#60;input type="text"&#62;</code> <code>&#60;input type="text"&#62;</code>
Note that <code>input</code> elements are self-closing. Note that <code>input</code> elements are self-closing.

View File

@ -7,7 +7,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
## Description ## Description
<section id='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. 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: Below is an example of an internal anchor link and its target element:
<blockquote>&lt;a href="#contacts-header"&gt;Contacts&lt;/a&gt;<br>...<br>&lt;h2 id="contacts-header"&gt;Contacts&lt;/h2&gt;</blockquote> <blockquote>&lt;a href="#contacts-header"&gt;Contacts&lt;/a&gt;<br>...<br>&lt;h2 id="contacts-header"&gt;Contacts&lt;/h2&gt;</blockquote>

View File

@ -14,7 +14,7 @@ Normal text is wrapped in the <code>p</code> element:<br> <code>&#60;p&#62; Here
Next is the <code>anchor</code> element <code>&#60;a&#62;</code> (which requires a closing tag <code>&#60;/a&#62;</code>):<br> <code>&#60;a&#62; ... &#60;/a&#62;</code> Next is the <code>anchor</code> element <code>&#60;a&#62;</code> (which requires a closing tag <code>&#60;/a&#62;</code>):<br> <code>&#60;a&#62; ... &#60;/a&#62;</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>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>&#60;a href="http://freecodecamp.org"> ... &#60;/a&#62;</code> <code>href</code> is an anchor tag attribute that contains the URL address of the link:<br> <code>&#60;a href="http://freecodecamp.org"> ... &#60;/a&#62;</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>&#60;a href=" ... "&#62;link to freecodecamp.org&#60;/a&#62;</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>&#60;a href=" ... "&#62;link to freecodecamp.org&#60;/a&#62;</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> 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> </section>

View File

@ -15,7 +15,7 @@ Remember to use <code>#</code> as your <code>a</code> element's <code>href</code
## Instructions ## Instructions
<section id='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. 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> </section>

View File

@ -15,4 +15,3 @@ Blender is free and open source software, released under the *GNU General Publi
* [Blender Official Website](https://www.blender.org) * [Blender Official Website](https://www.blender.org)
* [Blender Documentation](https://docs.blender.org/) * [Blender Documentation](https://docs.blender.org/)
* [The Blender Foundation](https://www.blender.org/foundation/) * [The Blender Foundation](https://www.blender.org/foundation/)