{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/freecodecamp/frontend/html/fcc-challenge-25-create-a-bulleted-unordered-list/","result":{"data":{"site":{"siteMetadata":{"title":"Be Brav3"}},"markdownRemark":{"id":"3fd007bd-41df-5da4-bc8f-e7b8cb38866e","excerpt":"In Free Code Camp Challenge 25 we learn to created unordered bullet lists using HTML. HTML has a special element for creating unordered lists, or bullet point…","html":"<p>In <a href=\"https://www.freecodecamp.com/challenges/create-a-bulleted-unordered-list\">Free Code Camp Challenge 25</a> we learn to created unordered bullet lists using HTML.</p>\n<blockquote>\n<p>HTML has a special element for creating unordered lists, or bullet point-style lists.</p>\n<p>Unordered lists start with a [html]<ul>[/html] element. Then they contain some number of [html]<li>[/html] elements.</p>\n<p>For example:</p>\n</blockquote>\n<blockquote>\n<p>[html]</p>\n</blockquote>\n<blockquote>\n<ul>\n</blockquote>\n<blockquote>\n<li>milk</li>\n</blockquote>\n<blockquote>\n<li>cheese</li>\n</blockquote>\n<blockquote>\n</ul>\n</blockquote>\n<blockquote>\n<p>[/html]</p>\n<p>would create a bullet point-style list of “milk” and “cheese”.</p>\n<p>Remove the last two p elements and create an unordered list of three things that cats love at the bottom of the page. </p>\n</blockquote>\n<p>In the original code below we first need to remove the last two p elements:</p>\n<p>[html highlight=”34-35″]</p>\n<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">\n  \n<style>\n    \n.red-text {\n      \ncolor: red;\n    \n}\n<p>h2 {</p>\n<p>font-family: Lobster, Monospace;</p>\n<p>}</p>\n<p>p {</p>\n<p>font-size: 16px;</p>\n<p>font-family: Monospace;</p>\n<p>}</p>\n<p>.thick-green-border {</p>\n<p>border-color: green;</p>\n<p>border-width: 10px;</p>\n<p>border-style: solid;</p>\n<p>border-radius: 50%;</p>\n<p>}</p>\n<p>.smaller-image {</p>\n<p>width: 100px;</p>\n<p>}</p>\n</style>\n<h2 class=\"red-text\">CatPhotoApp</h2>\n<p>Click here for <a href=\"#\">cat photos</a>.</p>\n<p><a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a></p>\n<p class=\"red-text\">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>\n  \n<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>\n  \n[/html]\n<p>In the updated code below we then need to add three unordered list items:</p>\n<p>[html highlight=”34-38″]</p>\n<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">\n  \n<style>\n    \n.red-text {\n      \ncolor: red;\n    \n}\n<p>h2 {</p>\n<p>font-family: Lobster, Monospace;</p>\n<p>}</p>\n<p>p {</p>\n<p>font-size: 16px;</p>\n<p>font-family: Monospace;</p>\n<p>}</p>\n<p>.thick-green-border {</p>\n<p>border-color: green;</p>\n<p>border-width: 10px;</p>\n<p>border-style: solid;</p>\n<p>border-radius: 50%;</p>\n<p>}</p>\n<p>.smaller-image {</p>\n<p>width: 100px;</p>\n<p>}</p>\n</style>\n<h2 class=\"red-text\">CatPhotoApp</h2>\n<p>Click here for <a href=\"#\">cat photos</a>.</p>\n<p><a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a></p>\n<ul>\n  \n<li>Yarn</li>\n  \n<li>Milk</li>\n  \n<li>Sleep</li>\n  \n</ul>\n  \n[/html]","frontmatter":{"title":"FCC Challenge 25: Create a Bulleted Unordered List","date":"March 10, 2016","description":null}}},"pageContext":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-25-create-a-bulleted-unordered-list/","previous":{"fields":{"slug":"/blog/selenium/locating-a-webelement-with-selenium-webdriver/"},"frontmatter":{"title":"Locating a WebElement With Selenium WebDriver"}},"next":{"fields":{"slug":"/blog/freecodecamp/frontend/html/fcc-challenge-26-create-an-ordered-list/"},"frontmatter":{"title":"FCC Challenge 26: Create an Ordered List"}}}}}