freeCodeCamp Responsive Web Design Certification (done with Basic HTML and HTML5)

Ace your homework & exams now with Quizwiz!

94 What does FF represent in hexcode? (full color or no color)

Full color

101 How do you create a CSS variable?

Give it a name with two dashes in front of it and assign it a value EX: --penguin-skin: gray;

58 How would you create a thin, red border around an elemet?

If we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>

93 What does 00 represent in hexcode? (full color or no color)

No color

45 If you wanted to change the color of specific elements in a document, but they did not all have the same HTML tag (ex: h1, h2, p, etc), what would you do?

Create a CSS class EX: <style> .blue-text { color: blue; } </style> You can apply a class to an HTML element like this: <h2 class="blue-text">CatPhotoApp</h2>

42 If you wanted all h2 elements in a document to be red, what would you do?

Create a style rule at the top of the document that looks like this: <style> h2 {color: red;} </style>

43 If you want to change the style of an individual element in a document, what would you do?

Set a style element inside the opening tag EX: <h2 style="color: red;">CatPhotoApp</h2>

2 Who updates HTML as time progresses

The W3 Consortium

89 In the following code, what color will the text be? <style> body { background-color: black; font-family: monospace; color: green; } #orange-text { color: orange; } .pink-text { color: pink; } .blue-text { color: blue; } </style> <h1 id="orange-text" class="pink-text blue-text" style="color: white;">Hello World!</h1>

White

49 How do you control font size with CSS?

With the "font-size" property EX: h1 { font-size: 30px; }

71 If you wanted different levels of padding on each side of an element, how might you do that?

With the padding-top, padding-right, padding-bottom, and padding-left properties.

55 To begin with, apply the monospace font to the h2 element, so that it now has two fonts - Lobster and monospace. In the last challenge, you imported the Lobster font using the link tag. Now comment out that import of the Lobster font(using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your h2 element degrades to the monospace font. [<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster; } p { font-size: 16px; font-family: monospace; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

<style> .red-text { color: red; } h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>

11 Comment out your h1 element and your p element, but not your h2 element. []

<h2>CatPhotoApp</h2> -->

38 Add a DOCTYPE tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing html tags, which wrap around an h1 element. The heading can include any text.

<!DOCTYPE html> <html> <h1> text </h1> </html>

39 Edit the markup so there's a head and a body. The head element should only include the title, and the body element should only include the h1 and p. [<!DOCTYPE html> <html> <title>The best page ever</title> <h1>The best page ever</h1> <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up 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> </html> ]

<!DOCTYPE html> <html> <head> <title>The best page ever</title> </head> <body> <h1>The best page ever</h1> <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up 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> </body> </html>

4 Change your h1 element's text to say "Hello World". [<h1>Hello</h1>]

<h1>Hello World</h1>

5 Add an h2 tag that says "CatPhotoApp" to create a second HTML element below your "Hello World" h1 element. [<h1>Hello World</h1>]

<h1>Hello World</h1> <h2>CatPhotoApp</h2>

10 Uncomment your h1, h2 and p elements. []

<h1>Hello World</h1> <h2>CatPhotoApp</h2> <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>

8 Replace the text inside your p element with the first few words of this kitty ipsum 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. [<h1>Hello World</h1> <h2>CatPhotoApp</h2> <p>Hello Paragraph</p>]

<h1>Hello World</h1> <h2>CatPhotoApp</h2> <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>

7 Create a p element below your h2 element, and give it the text "Hello Paragraph". [<h1>Hello World</h1> <h2>CatPhotoApp</h2>]

<h1>Hello World</h1> <h2>CatPhotoApp</h2> <p>Hello Paragraph</p>

46 How do you apply a class to an HTML element

<h2 class="blue-text">CatPhotoApp</h2> with the class being "blue-text"

40 Change your h2 element's style so that its text color is red. [<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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

<h2 style="color: red;">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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>

13 Create a second p element after the existing p element with the following kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Wrap the paragraphs with an opening and closing main tag. [<h2>CatPhotoApp</h2> <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>]

<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>

12 Delete your h1 element so we can simplify our view. [<h1>Hello World</h1> <h2>CatPhotoApp</h2> <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>]

<h2>CatPhotoApp</h2> <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>

20 Nest your existing a element within a new p element (just after the existing main element). The new paragraph should have text that says "View more cat photos", where "cat photos" is a link, and the rest of the text is plain text. [<h2>CatPhotoApp</h2> <main> <a href="http://freecatphotoapp.com" target="_blank">cat photos</a> <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> <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>]

<h2>CatPhotoApp</h2> <main> <p> View more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a> </p> <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> <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>

18 Change your external link to an internal link by changing the href attribute to "#footer" and the text from "cat photos" to "Jump to Bottom". Remove the target="_blank" attribute from the anchor tag since this causes the linked document to open in a new window tab. Then add an id attribute with a value of "footer" to the <footer> element at the bottom of the page. [<h2>CatPhotoApp</h2> <main> <a href="http://freecatphotoapp.com" target="_blank">cat photos</a> <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> <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. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. 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. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p> <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p> </main> <footer>Copyright Cat Photo App</footer>]

<h2>CatPhotoApp</h2> <main> <a href="#footer">Jump to Bottom</a> <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> <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. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. 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. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p> <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p> </main> <footer id="footer">Copyright Cat Photo App</footer>

16 Create an a element that links to http://freecatphotoapp.com and has "cat photos" as its anchor text. [<h2>CatPhotoApp</h2> <main> <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> <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>]

<h2>CatPhotoApp</h2> <main> <a href="http://freecatphotoapp.com">cat photos</a> <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> <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>

21 The current value of the href attribute is a link that points to "http://freecatphotoapp.com". Replace the href attribute value with a #, also known as a hash symbol, to create a dead link. For example: href="#" [<h2>CatPhotoApp</h2> <main> <p>Click here to view more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a>.</p> <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> <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>]

<h2>CatPhotoApp</h2> <main> <p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p> <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> <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>

26 Create an input element of type text below your lists. [<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </main>]

33 Add a pair of radio buttons to your form, each nested in its own label element. One should have the option of indoor and the other should have the option of outdoor. Both should share the name attribute of indoor-outdoor to create a radio group. [<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> <label> <input type="radio" name="indoor-outdoor">indoor </label> <label> <input type="radio" name="indoor-outdoor">outdoor </label> </form> </main>

31 Add a button as the last element of your form element with a type of submit, and "Submit" as its text. [<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <input type="text" placeholder="cat photo URL"> </form> </main>]

32 Make your text input a required field, so that your user can't submit the form without completing this field. Then try to submit the form without inputting any text. See how your HTML5 form notifies you that the field is required? [<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <input type="text" placeholder="cat photo URL"> <button type="submit">Submit</button> </form> </main>]

34 Add to your form a set of three checkboxes. Each checkbox should be nested within its own label element. All three should share the name attribute of personality. [<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label> <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label> <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br> <label> <input type="checkbox" name="personality">Loving </label> <label> <input type="checkbox" name="personality">purrer </label> <label> <input type="checkbox" name="personality">mean </label> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>

35 Set the first of your radio buttons and the first of your checkboxes to both be checked by default. [<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor"> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality"> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>

30 Nest your text field inside a form element, and add the action="/submit-cat-photo" attribute to the form element. [<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <input type="text" placeholder="cat photo URL"> </main>]

28 Set the placeholder value of your text input to "cat photo URL". [<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <input type="text"> </main>]

24 Create an ordered list of the top 3 things cats hate the most. [<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> </main>]

23 Remove the last two p elements and create an unordered list of three things that cats love at the bottom of the page. [<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> <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>]

36 Nest your "Things cats love" and "Things cats hate" lists all within a single div element. Hint: Try putting your opening div tag above your "Things cats love" p element and your closing div tag after your closing ol tag so that both of your lists are within one div. [<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> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

<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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>

22 Place the existing image element within an anchor 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. [<h2>CatPhotoApp</h2> <main> <p>Click here to view more <a href="#">cat photos</a>.</p> <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> <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>]

<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> <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>

14 Let's try to add an image to our website: Insert an img tag, before the h2 element. Now set the src attribute so that it points to this url: https://bit.ly/fcc-relaxing-cat Finally don't forget to give your image an alt text. [<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>]

<img src="https://bit.ly/fcc-relaxing-cat" alt="Upside down kitten" <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>

25 How do you create a text input?

53 Create a font-family CSS rule that uses the Lobster font, and ensure that it will be applied to your h2 element. (import lobster using "<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">") [<style> .red-text { color: red; } p { font-size: 16px; font-family: monospace; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

75 Give the blue box a margin of 40px on its top and left side, but only 20px on its bottom and right side. [<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: crimson; color: #fff; margin-top: 40px; margin-right: 20px; margin-bottom: 20px; margin-left: 40px; } .blue-box { background-color: blue; color: #fff; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box blue-box">padding</h5> </div>]

63 Create a class called silver-background with the background-color of silver. Assign this class to your div element. [<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">Click here to view more <a href="#">cat photos</a>.</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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

57 Create a class called thick-green-border. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo. [<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

60 Give your cat photo a border-radius of 10px. [<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">Click here to view more <a href="#">cat photos</a>.</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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

79 Using the type attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px. [<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } .silver-background { background-color: silver; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">Click here to view more <a href="#">cat photos</a>.</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> <div class="silver-background"> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo" id="cat-photo-form"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

64 Give your form element the id cat-photo-form. [<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } .silver-background { background-color: silver; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">Click here to view more <a href="#">cat photos</a>.</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> <div class="silver-background"> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

61 Give your cat photo a border-radius of 50%. [<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 10px; } .smaller-image { width: 100px; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">Click here to view more <a href="#">cat photos</a>.</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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

67 Try giving your form, which now has the id attribute of cat-photo-form, a green background. [<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } .silver-background { background-color: silver; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">Click here to view more <a href="#">cat photos</a>.</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> <div class="silver-background"> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo" id="cat-photo-form"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

56 Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide. [<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> .red-text { color: red; } h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

74 Give the blue box a padding of 40px on its top and left side, but only 20px on its bottom and right side. [<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: crimson; color: #fff; padding-top: 40px; padding-right: 20px; padding-bottom: 20px; padding-left: 40px; } .blue-box { background-color: blue; color: #fff; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box blue-box">padding</h5> </div>]

70 Try to set the margin to a negative value like the one for the red box. Change the margin of the blue box to -15px, so it fills the entire horizontal width of the yellow box around it. [<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: crimson; color: #fff; padding: 20px; margin: -15px; } .blue-box { background-color: blue; color: #fff; padding: 20px; margin: 20px; } </style> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box blue-box">padding</h5> </div>]

69 Change the margin of the blue box to match that of the red box. [<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: crimson; color: #fff; padding: 20px; margin: 20px; } .blue-box { background-color: blue; color: #fff; padding: 20px; margin: 10px; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box blue-box">padding</h5> </div>]

68 Change the padding of your blue box to match that of your red box. [<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: crimson; color: #fff; padding: 20px; } .blue-box { background-color: blue; color: #fff; padding: 10px; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box blue-box">padding</h5> </div>]

80 Add a padding property to the element with class red-box and set it to 1.5em. [<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 20px 40px 20px 40px; } .red-box { background-color: red; margin: 20px 40px 20px 40px; } .green-box { background-color: green; margin: 20px 40px 20px 40px; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box green-box">padding</h5> </div>]

78 Use Clockwise Notation to give the element with the blue-box class a margin of 40px on its top and left side, but only 20px on its bottom and right side. [<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 20px 40px 20px 40px; } .red-box { background-color: crimson; color: #fff; margin: 20px 40px 20px 40px; } .blue-box { background-color: blue; color: #fff; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box blue-box">padding</h5> </div>]

77 Use Clockwise Notation to give the ".blue-box" class a padding of 40px on its top and left side, but only 20px on its bottom and right side. [<style> .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 20px 40px 20px 40px; } .red-box { background-color: crimson; color: #fff; padding: 20px 40px 20px 40px; } .blue-box { background-color: blue; color: #fff; } </style> <h5 class="injected-text">margin</h5> <div class="box yellow-box"> <h5 class="box red-box">padding</h5> <h5 class="box blue-box">padding</h5> </div>]

102 In the penguin class, create a variable name --penguin-skin and give it a value of gray <style> .penguin { /* add code below */ /* add code above */ position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .penguin-top { top: 10%; left: 25%; background: black; width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; background: black; width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; background: black; width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; background: black; width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-cheek { top: 15%; left: 35%; background: white; width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: white; width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: white; width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .right-feet { top: 85%; left: 60%; background: orange; width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: orange; width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: orange; width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: orange; width: 16%; height: 10%; border-radius: 50%; } body { background:#c6faf1; } .penguin * { position: absolute; } </style> <div class="penguin"> <div class="penguin-bottom"> <div class="right-hand"></div> <div class="left-hand"></div> <div class="right-feet"></div> <div class="left-feet"></div> </div> <div class="penguin-top"> <div class="right-cheek"></div> <div class="left-cheek"></div> <div class="belly"></div> <div class="right-eye"> <div class="sparkle"></div> </div> <div class="left-eye"> <div class="sparkle"></div> </div> <div class="blush-right"></div> <div class="blush-left"></div> <div class="beak-top"></div> <div class="beak-bottom"></div> </div> </div>

100 In the penguin class, change the black value to gray, the gray value to white, and the yellow value to orange. <style> .penguin { /* change code below */ --penguin-skin: black; --penguin-belly: gray; --penguin-beak: yellow; /* change code above */ position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .penguin-top { top: 10%; left: 25%; background: var(--penguin-skin, gray); width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; background: var(--penguin-skin, gray); width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-cheek { top: 15%; left: 35%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: var(--penguin-belly, white); width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .right-feet { top: 85%; left: 60%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: var(--penguin-beak, orange); width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: var(--penguin-beak, orange); width: 16%; height: 10%; border-radius: 50%; } body { background:#c6faf1; } .penguin * { position: absolute; } </style> <div class="penguin"> <div class="penguin-bottom"> <div class="right-hand"></div> <div class="left-hand"></div> <div class="right-feet"></div> <div class="left-feet"></div> </div> <div class="penguin-top"> <div class="right-cheek"></div> <div class="left-cheek"></div> <div class="belly"></div> <div class="right-eye"> <div class="sparkle"></div> </div> <div class="left-eye"> <div class="sparkle"></div> </div> <div class="blush-right"></div> <div class="blush-left"></div> <div class="beak-top"></div> <div class="beak-bottom"></div> </div> </div>

105 It looks there is a problem with the variables supplied to the .penguin-top and .penguin-bottom classes. Rather than fix the typo, add a fallback value of black to the background property of the .penguin-top and .penguin-bottom classes. <style> .penguin { --penguin-skin: black; --penguin-belly: gray; --penguin-beak: yellow; position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .penguin-top { top: 10%; left: 25%; /* change code below */ background: var(--pengiun-skin); /* change code above */ width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; /* change code below */ background: var(--pengiun-skin); /* change code above */ width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; background: var(--penguin-skin, black); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; background: var(--penguin-skin, black); width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-cheek { top: 15%; left: 35%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: var(--penguin-belly, white); width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .right-feet { top: 85%; left: 60%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: var(--penguin-beak, orange); width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: var(--penguin-beak, orange); width: 16%; height: 10%; border-radius: 50%; } body { background:#c6faf1; } .penguin * { position: absolute; } </style> <div class="penguin"> <div class="penguin-bottom"> <div class="right-hand"></div> <div class="left-hand"></div> <div class="right-feet"></div> <div class="left-feet"></div> </div> <div class="penguin-top"> <div class="right-cheek"></div> <div class="left-cheek"></div> <div class="belly"></div> <div class="right-eye"> <div class="sparkle"></div> </div> <div class="left-eye"> <div class="sparkle"></div> </div> <div class="blush-right"></div> <div class="blush-left"></div> <div class="beak-top"></div> <div class="beak-bottom"></div> </div> </div>

104 How can you make sure a color is displayed on a webpage if a browser misses a variable, or are trying to debug and find out if a variable is declared.

Add a fallback variable EX: background: var(--penguin-skin, black); If the browser can't read "---penguin-skin" for some reason it will display black

103 Apply the --penguin-skin variable to the background property of the penguin-top, penguin-bottom, right-hand and left-hand classes. <style> .penguin { --penguin-skin: gray; position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .penguin-top { top: 10%; left: 25%; /* change code below */ background: black; /* change code above */ width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; /* change code below */ background: black; /* change code above */ width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; /* change code below */ background: black; /* change code above */ width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; /* change code below */ background: black; /* change code above */ width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-cheek { top: 15%; left: 35%; background: white; width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: white; width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: white; width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .right-feet { top: 85%; left: 60%; background: orange; width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: orange; width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: orange; width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: orange; width: 16%; height: 10%; border-radius: 50%; } body { background:#c6faf1; } .penguin * { position: absolute; } </style> <div class="penguin"> <div class="penguin-bottom"> <div class="right-hand"></div> <div class="left-hand"></div> <div class="right-feet"></div> <div class="left-feet"></div> </div> <div class="penguin-top"> <div class="right-cheek"></div> <div class="left-cheek"></div> <div class="belly"></div> <div class="right-eye"> <div class="sparkle"></div> </div> <div class="left-eye"> <div class="sparkle"></div> </div> <div class="blush-right"></div> <div class="blush-left"></div> <div class="beak-top"></div> <div class="beak-bottom"></div> </div> </div>

Use abbreviated hex codes to color the correct elements. Color Short Hex Code Cyan #00FFFF Green #00FF00 Red #FF0000 Fuchsia #FF00FF <style> .red-text { color: #000000; } .fuchsia-text { color: #000000; } .cyan-text { color: #000000; } .green-text { color: #000000; } </style> <h1 class="red-text">I am red!</h1> <h1 class="fuchsia-text">I am fuchsia!</h1> <h1 class="cyan-text">I am cyan!</h1> <h1 class="green-text">I am green!</h1>

96 Replace the color words in our style element with their correct hex codes. Color Hex Code Dodger Blue #1E90FF Green #00FF00 Orange #FFA500 Red #FF0000 <style> .red-text { color: black; } .green-text { color: black; } .dodger-blue-text { color: black; } .orange-text { color: black; } </style> <h1 class="red-text">I am red!</h1> <h1 class="green-text">I am green!</h1> <h1 class="dodger-blue-text">I am dodger blue!</h1> <h1 class="orange-text">I am orange!</h1>

51 Make all of your p elements use the monospace font. [<style> .red-text { color: red; } p { font-size: 16px; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

50 Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px). [<style> .red-text { color: red; } </style> <h2 class="red-text">CatPhotoApp</h2> <main> <p class="red-text">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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

48 Add a red-text class to your p element [<style> .red-text { color: red; } </style> <h2 class="red-text">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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

47 Inside your style element, change the h2 selector to .red-text and update the color's value from blue to red. Give your h2 element the class attribute with a value of 'red-text'. [<style> h2 { color: blue; } </style> <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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

99 Replace the hex codes in our style element with their correct RGB values. Color RGB Blue rgb(0, 0, 255) Red rgb(255, 0, 0) Orchid rgb(218, 112, 214) Sienna rgb(160, 82, 45) <style> .red-text { color: #000000; } .orchid-text { color: #000000; } .sienna-text { color: #000000; } .blue-text { color: #000000; } </style> <h1 class="red-text">I am red!</h1> <h1 class="orchid-text">I am orchid!</h1> <h1 class="sienna-text">I am sienna!</h1> <h1 class="blue-text">I am blue!</h1>

107 Define a variable named --penguin-belly in the :root selector and give it the value of pink. You can then see how the value will cascade down to change the value to pink, anywhere that variable is used. <style> :root { /* add code below */ /* add code above */ } body { background: var(--penguin-belly, #c6faf1); } .penguin { --penguin-skin: gray; --penguin-beak: orange; position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .right-cheek { top: 15%; left: 35%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: var(--penguin-belly, white); width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .penguin-top { top: 10%; left: 25%; background: var(--penguin-skin, gray); width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; background: var(--penguin-skin, gray); width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-feet { top: 85%; left: 60%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: var(--penguin-beak, orange); width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: var(--penguin-beak, orange); width: 16%; height: 10%; border-radius: 50%; } .penguin * { position: absolute; } </style> <div class="penguin"> <div class="penguin-bottom"> <div class="right-hand"></div> <div class="left-hand"></div> <div class="right-feet"></div> <div class="left-feet"></div> </div> <div class="penguin-top"> <div class="right-cheek"></div> <div class="left-cheek"></div> <div class="belly"></div> <div class="right-eye"> <div class="sparkle"></div> </div> <div class="left-eye"> <div class="sparkle"></div> </div> <div class="blush-right"></div> <div class="blush-left"></div> <div class="beak-top"></div> <div class="beak-bottom"></div> </div> </div>

109 In the :root selector of the media query, change it so --penguin-size is redefined and given a value of 200px. Also, redefine --penguin-skin and give it a value of black. Then resize the preview to see this change in action. <style> :root { --penguin-size: 300px; --penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange; } @media (max-width: 350px) { :root { /* add code below */ /* add code above */ } } .penguin { position: relative; margin: auto; display: block; margin-top: 5%; width: var(--penguin-size, 300px); height: var(--penguin-size, 300px); } .right-cheek { top: 15%; left: 35%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: var(--penguin-belly, white); width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .penguin-top { top: 10%; left: 25%; background: var(--penguin-skin, gray); width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; background: var(--penguin-skin, gray); width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 5%; left: 25%; background: var(--penguin-skin, black); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(130deg); z-index: -1; animation-duration: 3s; animation-name: wave; animation-iteration-count: infinite; transform-origin:0% 0%; animation-timing-function: linear; } @keyframes wave { 10% { transform: rotate(110deg); } 20% { transform: rotate(130deg); } 30% { transform: rotate(110deg); } 40% { transform: rotate(130deg); } } .left-hand { top: 0%; left: 75%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-feet { top: 85%; left: 60%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left:-23%; background: white; width: 150%; height: 100%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: var(--penguin-beak, orange); width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: var(--penguin-beak, orange); width: 16%; height: 10%; border-radius: 50%; } body { background:#c6faf1; } .penguin * { position: absolute; } </style> <div class="penguin"> <div class="penguin-bottom"> <div class="right-hand"></div> <div class="left-hand"></div> <div class="right-feet"></div> <div class="left-feet"></div> </div> <div class="penguin-top"> <div class="right-cheek"></div> <div class="left-cheek"></div> <div class="belly"></div> <div class="right-eye"> <div class="sparkle"></div> </div> <div class="left-eye"> <div class="sparkle"></div> </div> <div class="blush-right"></div> <div class="blush-left"></div> <div class="beak-top"></div> <div class="beak-bottom"></div> </div> </div>

108 Change the value of --penguin-belly to white in the penguin class. <style> :root { --penguin-skin: gray; --penguin-belly: pink; --penguin-beak: orange; } body { background: var(--penguin-belly, #c6faf1); } .penguin { /* add code below */ /* add code above */ position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .right-cheek { top: 15%; left: 35%; background: var(--penguin-belly, pink); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: var(--penguin-belly, pink); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: var(--penguin-belly, pink); width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .penguin-top { top: 10%; left: 25%; background: var(--penguin-skin, gray); width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; background: var(--penguin-skin, gray); width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-feet { top: 85%; left: 60%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: var(--penguin-beak, orange); width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: var(--penguin-beak, orange); width: 16%; height: 10%; border-radius: 50%; } .penguin * { position: absolute; } </style> <div class="penguin"> <div class="penguin-bottom"> <div class="right-hand"></div> <div class="left-hand"></div> <div class="right-feet"></div> <div class="left-feet"></div> </div> <div class="penguin-top"> <div class="right-cheek"></div> <div class="left-cheek"></div> <div class="belly"></div> <div class="right-eye"> <div class="sparkle"></div> </div> <div class="left-eye"> <div class="sparkle"></div> </div> <div class="blush-right"></div> <div class="blush-left"></div> <div class="beak-top"></div> <div class="beak-bottom"></div> </div> </div>

106 It looks like a variable is being used to set the background color of the .red-box class. Let's improve our browser compatibility by adding another background declaration right before the existing declaration and set its value to red. <style> :root { --red-color: red; } .red-box { background: var(--red-color); height: 200px; width:200px; } </style> <div class="red-box"></div>

92 Replace the word black in our body element's background-color with its hex code representation, #000000. <style> body { background-color: black; } </style>

First, create a h1 element with the text Hello World Then, let's give all elements on your page the color of green by adding color: green; to your body element's style declaration. Finally, give your body element the font-family of monospace by adding font-family: monospace; to your body element's style declaration. [<style> body { background-color: black; } </style>]

90 Add the keyword !important to your pink-text element's color declaration to make 100% sure that your h1 element will be pink. <style> body { background-color: black; font-family: monospace; color: green; } #orange-text { color: orange; } .pink-text { color: pink; } .blue-text { color: blue; } </style> <h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

88 Use an inline style to try to make our h1 element white. Leave the blue-text and pink-text classes on your h1 element. [<style> body { background-color: black; font-family: monospace; color: green; } #orange-text { color: orange; } .pink-text { color: pink; } .blue-text { color: blue; } </style> <h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>]

87 Give your h1 element the id attribute of orange-text. Leave the blue-text and pink-text classes on your h1 element. Create a CSS declaration for your orange-text id in your style element. [<style> body { background-color: black; font-family: monospace; color: green; } .pink-text { color: pink; } .blue-text { color: blue; } </style> <h1 class="pink-text blue-text">Hello World!</h1>]

84 Create a CSS class called pink-text that gives an element the color pink. Give your h1 element the class of pink-text. [<style> body { background-color: black; font-family: monospace; color: green; } </style> <h1>Hello World!</h1>]

82 Change the body background color to black

98 Replace the hex code in our body element's background color with the RGB value for black: rgb(0, 0, 0) <style> body { background-color: #F00; } </style>

44 Delete your h2 element's style attribute, and instead create a CSS style block. Add the necessary CSS to turn all h2 elements blue. [<h2 style="color: red">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> <div> <p>Things cats love:</p> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <p>Top 3 things cats hate:</p> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> </div> <form action="/submit-cat-photo"> <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <label><input type="checkbox" name="personality"> Energetic</label><br> <input type="text" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </main>]

6 What's the difference between an HTML opening tag and closing tag?

A closing tag has a "/" after the opening bracket EX: <h1> </h1>

86 In the following code, what color will the text be? [<style> body { background-color: black; font-family: monospace; color: green; } .pink-text { color: pink; } .blue-text{ color: blue; } </style> <h1 class="pink-text blue-text">Hello World!</h1>]

Blue because the blue class was declared last in the style tag

37 How do you tell the browser which version of HTML you wrote the webpage in?

By adding the <!DOCTYPE ...> tag on the first line, where the "..." part is the version of HTML. Then wrap all HTML code into <html> tags. The opening <html> goes directly below the <!DOCTYPE html> line, and the closing </html> goes at the end of the page. For HTML5, you use <!DOCTYPE html>.

29 How can you make a webform submit data to a server?

By specifying an action on your form element. EX: <form action="/url-where-you-want-to-submit-form-data"></form>

41 What does CSS stand for?

Cascading Style Sheets

76 How change an element's padding or margin, but save time by not putting "padding-top", "padding-right", "padding-bottom", "padding-left"?

Clockwise notation EX: instead of using .blue-box { background-color: blue; color: #fff; margin-top: 40px; margin-left: 40px; margin-bottom: 20px; margin-right: 20px; } use .blue-box { background-color: blue; color: #fff; margin: 40px 20px 20px 40px }

9 How do you comment in HTML

Comments begin with

52 Where can you find fonts to use in webpages?

Google Fonts library

1 What does HTML stand for?

HyperText Markup Language

81 What is the relative unit "em" relative to?

It's based on the size of an element's font.

91 In the following code, what color will the text be? <style> body { background-color: black; font-family: monospace; color: green; } #orange-text { color: orange; } .pink-text { color: pink !important; } .blue-text { color: blue; } </style> <h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

Pink

27 What is text that is displayed in a text input box before the user types anything in called?

Placeholder text EX: <input type="text" placeholder="this is placeholder text">

95 In the following hexcode, which color is pure and which color is absent? #FFA500

Pure red, blue is absent

62 If you wanted an element's background color to be green, how might you do that?

Put this within your style element: .green-background { background-color: green; }

3 Who is the W3 Consortium

The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web (abbreviated WWW or W3). The consortium is made up of member organizations which maintain full-time staff for the purpose of working together in the development of standards for the World Wide Web. The W3C also engages in education and outreach, develops software and serves as an open forum for discussion about the Web.

73 Define: margin

The amount of space between an element's border and surrounding elements.

72 Define: padding

The amount of space between the element's content and its border.

66 How do you reference a class in a style element?

Use a "." EX: .smaller-image { width: 100px; }

15 How do you make clickable words (hyperlinks) in HTML?

Use an anchor element. Anchor elements require a destination web address (called an href) and anchor text EX: <a href="https://freecodecamp.org">this links to freecodecamp.org</a> Then your browser will display the text "this links to freecodecamp.org" as a link you can click. And that link will take you to the web address https://www.freecodecamp.org.

17 How do you create a link to a specifice spot within a page?

Use href's "#" attribute. EX: <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 Contacts header element.

19 How do you specify a link should be opened in a new tab?

You add [target="_blank"] Ex: <p> Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow. </p>

54 What do you do to ensure there will be a font a browser can use even if the first choice is not available?

You can tell the browser to "degrade" to another font. For example, if you wanted an element to use the Helvetica font, but degrade to the sans-serif font when Helvetica wasn't available, you will specify it as follows: p { font-family: Helvetica, sans-serif; }

59 How do you enter multiple CSS classes into a single element?

You separate each class with a space within the parentheses EX: <img class="class1 class2">

85 If you declare green text in the body on a page and pink text in a class, which color will the text be?

freeCodeCamp Responsive Web Design Certification (done with Basic HTML and HTML5)

Related study sets

CS 324 DIY Questions

Geology 1001 Final

BIO 112 Quizzes

SB 4.1-4.5

Chapter 10 Notes

Review For Final

Ch 5 : Unit 1 - Agency Law Quiz

HR Chapter 11

MS1 Chap 9

Chapter Exam - Annuities

Ch 29 Cardiac PrepU Questions

World history test q&a #2

Digestive System: Alimentary Canal

Book 3 -- Investment Planning

PrepU Patho Ch 25

Leadership

Chapter 50: Nursing Care of Patients With Peripheral Nervous System Disorders

Marvel

AMH2097 Midterm

OLE MISS | BISC 102 - Exam 2 (Chapter 27)