{"id":3740,"date":"2023-07-18T01:03:57","date_gmt":"2023-07-18T01:03:57","guid":{"rendered":"https:\/\/nmi.cool\/advweb\/?page_id=3740"},"modified":"2026-01-18T23:52:31","modified_gmt":"2026-01-18T23:52:31","slug":"exercise-basic-box-stuff","status":"publish","type":"page","link":"https:\/\/nmi.cool\/advweb\/unit-one-html-css\/week-three\/exercise-basic-box-stuff\/","title":{"rendered":"Exercise: Basic Box Stuff"},"content":{"rendered":"\n

Exercise<\/h3>\n\n\n\n

In several of the steps, I ask you to changes to do something new that erases whatever you did in the previous step. Don’t worry about it! Just go through all of the steps and submit whatever you end up with by linking to the page and (of course) uploading it.<\/p>\n\n\n\n

    \n
  1. Start with a new html file. You choose the name.<\/li>\n\n\n\n
  2. Create a div tag with an id set to central (<div id=”central”>).<\/li>\n\n\n\n
  3. Use css to set the width and height of #central to 30rem, but the ACTUAL (as in pixel) width and height in pixels should be equal to 300px.  For this to happen, you must set the root element (html {} ) to a pixel value. Your first challenge\/job is to figure out the appropriate pixel value for the html element and to set it. This technique was explained in an earlier lesson.This page<\/a> is a good starting point for the remainder of this exercise.<\/strong><\/li>\n\n\n\n
  4. Add this background image<\/a> to #central.<\/li>\n\n\n\n
  5. Change your CSS so that the background image appears just one time, but in the very center of #central.<\/li>\n\n\n\n
  6. Change the size of the background image with CSS so that it is twice as large in all dimensions (200%).<\/li>\n\n\n\n
  7. Change the size again so that the background image completely fills #central. It will be pixelated but don’t worry about that.<\/li>\n\n\n\n
  8. Get rid of the background image and use linear-gradient to create a shocking background that you really can’t stand. Take a look at it.<\/li>\n\n\n\n
  9. Use border-radius to turn the #central div into a circle.<\/li>\n\n\n\n
  10. Get rid of that linear gradient and create a\u00a0radial gradient<\/a>\u00a0that you do like.<\/li>\n\n\n\n
  11. Change the default property of the radial gradient so that it  becomes circular as well, instead of elliptical.<\/li>\n\n\n\n
  12. Still have time? Create a link, it doesn’t matter what it links to. Use CSS to set things up so that a black, 15 pixel outline appears around the link when a user mouses over it.<\/li>\n\n\n\n
  13. Optional Challenge:<\/strong> Finished that and still have time?!! Clearly you need a challenge. Figure out how to change the background properties of #central by clicking on a button (javascript of course). But only if you are looking for a challenge. This one is optional.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    Exercise In several of the steps, I ask you to changes to do something new that erases whatever you did in the previous step. Don’t worry about it! Just go through all of the steps and submit whatever you end up with by linking to the page and (of course) uploading it.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3688,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3740","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3740"}],"version-history":[{"count":4,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3740\/revisions"}],"predecessor-version":[{"id":4763,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3740\/revisions\/4763"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3688"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}