{"id":446,"date":"2018-05-22T23:46:06","date_gmt":"2018-05-22T23:46:06","guid":{"rendered":"https:\/\/ucsbwebdev.fzilla.com\/?p=446"},"modified":"2018-05-24T00:14:22","modified_gmt":"2018-05-24T00:14:22","slug":"exercise-midterm-prep-puzzle","status":"publish","type":"post","link":"https:\/\/ucsbwebdev.fzilla.com\/?p=446","title":{"rendered":"Exercise: Midterm Prep Puzzle"},"content":{"rendered":"<p>In the following pen, you will need to add the correct class from the pre-defined classes inside the correct elements.<\/p>\n<p><a href=\"https:\/\/codepen.io\/agrublev\/pen\/deLpaJ?editors=1100\" target=\"_blank\" rel=\"noopener\">CodePen Link<\/a><\/p>\n<p>Basically, look at the available classes, for example<\/p>\n<p id=\"ZlwzCuk\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-453 size-medium\" src=\"https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b06034edee71-300x121.png\" alt=\"\" width=\"300\" height=\"121\" srcset=\"https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b06034edee71-300x121.png 300w, https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b06034edee71.png 562w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>This would be the styling that we would want to apply to the header of our website. In the html, the following element appears to be the correct header that needs this styling:<\/p>\n<p id=\"xdHVhDs\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-454 size-medium\" src=\"https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b06038374c62-300x91.png\" alt=\"\" width=\"300\" height=\"91\" srcset=\"https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b06038374c62-300x91.png 300w, https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b06038374c62-768x233.png 768w, https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b06038374c62.png 772w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>So we would add the class two to it like this:<\/p>\n<p id=\"MaMaZVl\"><img loading=\"lazy\" decoding=\"async\" width=\"352\" height=\"104\" class=\"alignnone size-full wp-image-455 \" src=\"https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b0603a08afaa.png\" alt=\"\" srcset=\"https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b0603a08afaa.png 352w, https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b0603a08afaa-300x89.png 300w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/p>\n<p>And our preview will now look like this:<\/p>\n<p id=\"HJCLfrG\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-456\" src=\"https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b0603ca1dcf6.png\" alt=\"\" width=\"600\" height=\"169\" srcset=\"https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b0603ca1dcf6.png 1254w, https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b0603ca1dcf6-300x85.png 300w, https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b0603ca1dcf6-768x217.png 768w, https:\/\/ucsbwebdev.fzilla.com\/wp-content\/uploads\/2018\/05\/img_5b0603ca1dcf6-1024x289.png 1024w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>One class may be used many times, and some elements may\u00a0<strong>not\u00a0<\/strong>need a class at all!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the following pen, you will need to add the correct class from the pre-defined classes inside the correct elements. CodePen Link Basically, look at the available classes, for example This would be the styling that we would want to apply to the header of our website. In the html, the following element appears to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-446","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=446"}],"version-history":[{"count":4,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/446\/revisions"}],"predecessor-version":[{"id":457,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/446\/revisions\/457"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}