gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(challenge): update text to give an explanation of wrapping (#34811)

Browse Source 
* fix(challenge): update text to give an explanation of wrapping

* fix(challenge): simplify challenge text

* fix(challenge): update challenge text add solution

* fix(challenge): remove line breaks

* fix(challenge): make second instruction more clear
This commit is contained in:
lasjorg
2019-04-05 04:49:21 +02:00
committed by Manish Giri
parent 881d2ab072
commit f91dea9b5c
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.english.md
View File

@ -7,16 +7,17 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/c4Ep9Am'
## Description ## Description
<section id='description'> <section id='description'>
HTML5 introduces more descriptive HTML tags. These include <code>header</code>, <code>footer</code>, <code>nav</code>, <code>video</code>, <code>article</code>, <code>section</code> and others. 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 make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility. 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.
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>&#60;main&#62; <br>&nbsp;&nbsp;&#60;h1&#62;Hello World&#60;/h1&#62;<br>&nbsp;&nbsp;&#60;p&#62;Hello Paragraph&#60;/p&#62;<br>&#60;/main&#62;</blockquote>
<strong>Note:</strong> Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section. <strong>Note:</strong> Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Create a second <code>p</code> element after the existing <code>p</code> element with the following kitty ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code> Create a second <code>p</code> element after the existing <code>p</code> element with the following kitty ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>
Wrap the paragraphs with an opening and closing <code>main</code> tag. Then, create a <code>main</code> element and nest the two <code>p</code> elements inside the <code>main</code> element.
</section> </section>
## Tests ## Tests
@ -63,7 +64,11 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <h2>CatPhotoApp</h2>
<main>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
``` ```
</section> </section>