fix(curriculum): Convert blockquote elements to triple backtick syntax for Responsive Web Design (#35993)
* fix: converted blockquotes to code fences
This commit is contained in:
Randell Dawson
committed by
Oliver Eyton-Williams
Oliver Eyton-Williams
parent
08c4807b09
commit
df8659ab8c
@ -10,7 +10,14 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
|
||||
HTML has a special element for creating <code>unordered lists</code>, or bullet point style lists.
|
||||
Unordered lists start with an opening <code><ul></code> element, followed by any number of <code><li></code> elements. Finally, unordered lists close with a <code></ul></code>
|
||||
For example:
|
||||
<blockquote><ul><br> <li>milk</li><br> <li>cheese</li><br></ul></blockquote>
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>cheese</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
would create a bullet point style list of "milk" and "cheese".
|
||||
</section>
|
||||
|
||||
|
||||
@ -12,9 +12,21 @@ 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.
|
||||
Here's an example of a radio button:
|
||||
<blockquote><label> <br> <input type="radio" name="indoor-outdoor">Indoor <br></label></blockquote>
|
||||
|
||||
```html
|
||||
<label>
|
||||
<input type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
It is considered best practice to set a <code>for</code> attribute on the <code>label</code> element, with a value that matches the value of the <code>id</code> attribute of the <code>input</code> element. This allows assistive technologies to create a linked relationship between the label and the child <code>input</code> element. For example:
|
||||
<blockquote><label for="indoor"> <br> <input id="indoor" type="radio" name="indoor-outdoor">Indoor <br></label></blockquote>
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -11,7 +11,14 @@ HTML has another special element for creating <code>ordered lists</code>, or num
|
||||
Ordered lists start with an opening <code><ol></code> element, followed by any number of <code><li></code> elements. Finally, ordered lists are closed with the <code></ol></code> tag.
|
||||
|
||||
For example:
|
||||
<blockquote><ol><br> <li>Garfield</li><br> <li>Sylvester</li><br></ol></blockquote>
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Garfield</li>
|
||||
<li>Sylvester</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
would create a numbered list of "Garfield" and "Sylvester".
|
||||
</section>
|
||||
|
||||
|
||||
@ -13,7 +13,14 @@ You tell the browser this information by adding the <code><!DOCTYPE ...></
|
||||
The <code>!</code> and uppercase <code>DOCTYPE</code> is important, especially for older browsers. The <code>html</code> is not case sensitive.
|
||||
Next, the rest of your HTML code needs to be wrapped in <code>html</code> tags. The opening <code><html></code> goes directly below the <code><!DOCTYPE html></code> line, and the closing <code></html></code> goes at the end of the page.
|
||||
Here's an example of the page structure:
|
||||
<blockquote><!DOCTYPE html><br><html><br> <!-- Your HTML code goes here --><br></html></blockquote>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Your HTML code goes here -->
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -10,7 +10,19 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
|
||||
You can add another level of organization in your HTML document within the <code>html</code> tags with the <code>head</code> and <code>body</code> elements. Any markup with information about your page would go into the <code>head</code> tag. Then any markup with the content of the page (what displays for a user) would go into the <code>body</code> tag.
|
||||
Metadata elements, such as <code>link</code>, <code>meta</code>, <code>title</code>, and <code>style</code>, typically go inside the <code>head</code> element.
|
||||
Here's an example of a page's layout:
|
||||
<blockquote><!DOCTYPE html><br><html><br> <head><br> <!-- metadata elements --><br> </head><br> <body><br> <!-- page contents --><br> </body><br></html></blockquote>
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- metadata elements -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- page contents -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -10,7 +10,14 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
|
||||
HTML5 introduces more descriptive HTML tags. These include <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>video</code>, <code>article</code>, <code>section</code> and others.
|
||||
These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility. The <code>main</code> HTML5 tag helps search engines and other developers find the main content of your page.
|
||||
Example usage, a <code>main</code> element with two child elements nested inside it:
|
||||
<blockquote><main> <br> <h1>Hello World</h1><br> <p>Hello Paragraph</p><br></main></blockquote>
|
||||
|
||||
```html
|
||||
<main>
|
||||
<h1>Hello World</h1>
|
||||
<p>Hello Paragraph</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
<strong>Note:</strong> Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
|
||||
</section>
|
||||
|
||||
|
||||
@ -10,7 +10,13 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
|
||||
<code>a</code> (<i>anchor</i>) 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>
|
||||
|
||||
```html
|
||||
<a href="#contacts-header">Contacts</a>
|
||||
...
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
When users click the Contacts link, they'll be taken to the section of the webpage with the <b>Contacts</b> header element.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,7 +8,13 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb'
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can nest links within other text elements.
|
||||
<blockquote><p><br> Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.<br></p></blockquote>
|
||||
|
||||
```html
|
||||
<p>
|
||||
Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
|
||||
</p>
|
||||
```
|
||||
|
||||
Let's break down the example:
|
||||
Normal text is wrapped in the <code>p</code> element:<br> <code><p> Here's a ... for you to follow. </p></code>
|
||||
Next is the <i>anchor</i> element <code><a></code> (which requires a closing tag <code></a></code>):<br> <code><a> ... </a></code>
|
||||
|
||||
@ -9,10 +9,16 @@ challengeType: 0
|
||||
When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type <code>radio</code> and <code>checkbox</code> report their values from the <code>value</code> attribute.
|
||||
|
||||
For example:
|
||||
<blockquote>
|
||||
<label for="indoor"> <br> <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor <br></label><br>
|
||||
<label for="outdoor"> <br> <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor <br></label>
|
||||
</blockquote>
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
<label for="outdoor">
|
||||
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
|
||||
</label>
|
||||
```
|
||||
|
||||
|
||||
Here, you have two <code>radio</code> inputs. When the user submits the form with the <code>indoor</code> option selected, the form data will include the line: <code>indoor-outdoor=indoor</code>. This is from the <code>name</code> and <code>value</code> attributes of the "indoor" input.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user