{"id":923,"date":"2018-11-14T01:08:13","date_gmt":"2018-11-14T01:08:13","guid":{"rendered":"http:\/\/ucsbwebdev.local\/?p=923"},"modified":"2018-11-14T01:08:13","modified_gmt":"2018-11-14T01:08:13","slug":"exercises-and-references-for-css-intro-2-class-12","status":"publish","type":"post","link":"https:\/\/ucsbwebdev.fzilla.com\/?p=923","title":{"rendered":"Exercises and References for CSS Intro #2 Class 12"},"content":{"rendered":"<h2>The Website Generator<\/h2>\n<p><a href=\"http:\/\/webdevninja.surge.sh\/#\/\">http:\/\/webdevninja.surge.sh\/#\/<\/a><\/p>\n<h2>Additional CSS topics<\/h2>\n<ul>\n<li>Basics:\u00a0<a href=\"https:\/\/codetheweb.blog\/2017\/11\/15\/basic-css-properties\/\">https:\/\/codetheweb.blog\/2017\/11\/15\/basic-css-properties\/<\/a><\/li>\n<li>Borders:\u00a0<a href=\"https:\/\/codepen.io\/shayhowe\/pen\/JmtqC\">https:\/\/codepen.io\/shayhowe\/pen\/JmtqC<\/a><\/li>\n<li>Styling links:\u00a0<a href=\"https:\/\/www.smashingmagazine.com\/2010\/02\/the-definitive-guide-to-styling-web-links\/\">https:\/\/www.smashingmagazine.com\/2010\/02\/the-definitive-guide-to-styling-web-links\/<\/a><\/li>\n<li>Box shadows:\u00a0<a href=\"http:\/\/www.css3.info\/preview\/box-shadow\/\">http:\/\/www.css3.info\/preview\/box-shadow\/<\/a><\/li>\n<li>CSS Specificity:\u00a0<a href=\"https:\/\/css-tricks.com\/specifics-on-css-specificity\/\">https:\/\/css-tricks.com\/specifics-on-css-specificity\/<\/a><\/li>\n<li>Styling buttons:<a href=\"https:\/\/fvsch.com\/styling-buttons\/\">\u00a0https:\/\/fvsch.com\/styling-buttons\/<\/a><\/li>\n<li>Using the Developer Tools to learn CSS <a href=\"https:\/\/stnsvn.com\/blog\/how-to-learn-css-using-inspect-element-tool\">https:\/\/stnsvn.com\/blog\/how-to-learn-css-using-inspect-element-tool<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Practice in class:\n<ul>\n<li>Do together: <a href=\"https:\/\/flexboxfroggy.com\/\">https:\/\/flexboxfroggy.com\/<\/a><\/li>\n<li>Try yourself:\n<ul>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-a-css-class-to-style-an-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-a-css-class-to-style-an-element\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-css-selectors-to-style-elements\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-css-selectors-to-style-elements\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-a-css-class-to-style-an-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-a-css-class-to-style-an-element\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/style-multiple-elements-with-a-css-class\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/style-multiple-elements-with-a-css-class\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/change-the-font-size-of-an-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/change-the-font-size-of-an-element\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/size-your-images\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/size-your-images\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/add-borders-around-your-elements\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/add-borders-around-your-elements\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/give-a-background-color-to-a-div-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/give-a-background-color-to-a-div-element\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/adjust-the-padding-of-an-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/adjust-the-padding-of-an-element\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/adjust-the-margin-of-an-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/adjust-the-margin-of-an-element\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/add-different-padding-to-each-side-of-an-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/add-different-padding-to-each-side-of-an-element\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/add-different-margins-to-each-side-of-an-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/add-different-margins-to-each-side-of-an-element\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-clockwise-notation-to-specify-the-padding-of-an-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-clockwise-notation-to-specify-the-padding-of-an-element\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-clockwise-notation-to-specify-the-margin-of-an-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-clockwise-notation-to-specify-the-margin-of-an-element\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/style-the-html-body-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/style-the-html-body-element\/<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Advanced:\n<ul>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/inherit-styles-from-the-body-element\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/inherit-styles-from-the-body-element\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/prioritize-one-style-over-another\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/prioritize-one-style-over-another\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/override-styles-in-subsequent-css\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/override-styles-in-subsequent-css\/<\/a><\/li>\n<li class=\"p1\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/override-all-other-styles-by-using-important\/\">https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/override-all-other-styles-by-using-important\/<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Additional Practice at home:\n<ul>\n<li>https:\/\/www.codecademy.com\/courses\/learn-css\/lessons\/css-setup-selectors\/exercises\/inline-styles<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Website Generator http:\/\/webdevninja.surge.sh\/#\/ Additional CSS topics Basics:\u00a0https:\/\/codetheweb.blog\/2017\/11\/15\/basic-css-properties\/ Borders:\u00a0https:\/\/codepen.io\/shayhowe\/pen\/JmtqC Styling links:\u00a0https:\/\/www.smashingmagazine.com\/2010\/02\/the-definitive-guide-to-styling-web-links\/ Box shadows:\u00a0http:\/\/www.css3.info\/preview\/box-shadow\/ CSS Specificity:\u00a0https:\/\/css-tricks.com\/specifics-on-css-specificity\/ Styling buttons:\u00a0https:\/\/fvsch.com\/styling-buttons\/ Using the Developer Tools to learn CSS https:\/\/stnsvn.com\/blog\/how-to-learn-css-using-inspect-element-tool &nbsp; Practice in class: Do together: https:\/\/flexboxfroggy.com\/ Try yourself: https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-a-css-class-to-style-an-element\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-css-selectors-to-style-elements\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-a-css-class-to-style-an-element\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/style-multiple-elements-with-a-css-class\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/change-the-font-size-of-an-element\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/size-your-images\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/add-borders-around-your-elements\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/give-a-background-color-to-a-div-element\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/adjust-the-padding-of-an-element\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/adjust-the-margin-of-an-element\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/add-different-padding-to-each-side-of-an-element\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/add-different-margins-to-each-side-of-an-element\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-clockwise-notation-to-specify-the-padding-of-an-element\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/use-clockwise-notation-to-specify-the-margin-of-an-element\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/style-the-html-body-element\/ Advanced: https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/inherit-styles-from-the-body-element\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/prioritize-one-style-over-another\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/override-styles-in-subsequent-css\/ https:\/\/learn.freecodecamp.org\/responsive-web-design\/basic-css\/override-all-other-styles-by-using-important\/ Additional [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,7,5,18],"tags":[],"class_list":["post-923","post","type-post","status-publish","format-standard","hentry","category-class-reference","category-css","category-exercises","category-external-resources"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/923","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=923"}],"version-history":[{"count":0,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/923\/revisions"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}