greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added extra headings and solutions to "Create a Bulleted Unordered List" (#34680) 

* Added extra headings and solutions to "Create a Bulleted Unordered List"

* Remove problem
pull/28612/head^2
Kevin Trang 2019-03-27 01:59:40 +11:00 committed by Randell Dawson
parent d63ea99e3f
commit 07c9173ad4
1 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
guide/english/certifications/responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list/index.md
View File

@ -25,3 +25,62 @@ Not correct:
```
Good luck!
### Solution
Firstly, we need to remove the `<p>` elements and replace it with `<li>`, as well as add a third `<li>` as shown below:
#### Before removal of `<p>` and replacement with `<li>`
```html
<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>
```
#### After removal of `<p>` and replacement with `<li>`
```html
<li>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</li>
<li>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</li>
<li> Your third sentence. </li>
```
Afterwards, we need to place a `<ul>` element with a closing `<li>` tag inside these 3 `<li>` elements within the `<main>` element as shown below:
#### Before adding `<ul>` element
```html
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<li>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</li>
<li>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</li>
<li> Your third sentence. </li>
</main>
```
#### After adding `<ul>` element
```html
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<ul> <!-- The <ul> element has been added -->
<li>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</li>
<li>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</li>
<li> Your third sentence. </li>
</ul> <!-- The <ul> closing tag has been added -->
</main>
```
### Final Solution
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<ul>
<li>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</li>
<li>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</li>
<li> Your third sentence. </li>
</ul>
</main>
```