{"id":327,"date":"2012-10-29T10:53:03","date_gmt":"2012-10-29T10:53:03","guid":{"rendered":"https:\/\/digitalmediacomputing.org.uk\/?p=327"},"modified":"2012-10-30T11:27:55","modified_gmt":"2012-10-30T11:27:55","slug":"zombies-and-squished-bunnies","status":"publish","type":"post","link":"https:\/\/digitalmediacomputing.org.uk\/?p=327","title":{"rendered":"Zombies and squished bunnies"},"content":{"rendered":"<p>We have spent a fair amount of time on HTML so I felt it was a good time to move onto looking at CSS. \u00a0We talked about the content being stored in HTML and the appearance settings being in CSS code.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zen1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-331 alignnone\" title=\"Zen Garden screenshot - ocean design\" src=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zen1-300x182.png\" alt=\"Zen Garden screenshot - ocean design\" width=\"210\" height=\"127\" srcset=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zen1-300x182.png 300w, https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zen1.png 829w\" sizes=\"auto, (max-width: 210px) 100vw, 210px\" \/><\/a>\u00a0<a href=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zen2.png\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-332 alignnone\" title=\"Zen Garden screenshot - army design\" src=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zen2-300x215.png\" alt=\"Zen Garden screenshot - army design\" width=\"180\" height=\"129\" srcset=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zen2-300x215.png 300w, https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zen2.png 834w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a><\/p>\n<p>We looked at <a title=\"CSS Zen Garden\" href=\"http:\/\/www.csszengarden.com\/\" target=\"_blank\">CSS Zen Garden<\/a> and saw how different the page can look depending on the CSS file. \u00a0This is a site where the HTML page is always the same but the CSS file is very different!<\/p>\n<p><a href=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/edit.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-329\" title=\"Get Off My Lawn zombie\" src=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/edit.png\" alt=\"Get Off My Lawn zombie\" width=\"240\" height=\"147\" \/><\/a>We then looked at a couple of projects in <a title=\"Mozilla Thimble\" href=\"https:\/\/thimble.webmaker.org\/\" target=\"_blank\">Mozilla Thimble<\/a>. \u00a0First we looked at Get Off My Lawn, where you have to change the CSS positioning code to move furniture around to defend your house against zombie attack! \u00a0Later in this project you can add your barricades. \u00a0I chose a steel door. \u00a0One pupil chose a lion, which I felt would be risky as it might turn into a zombie lion!<\/p>\n<p><a href=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zombies-on-the-lawn.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright  wp-image-328\" title=\"zombies on the lawn\" src=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zombies-on-the-lawn-296x300.png\" alt=\"zombies on the lawn\" width=\"237\" height=\"240\" srcset=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zombies-on-the-lawn-296x300.png 296w, https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/zombies-on-the-lawn.png 473w\" sizes=\"auto, (max-width: 237px) 100vw, 237px\" \/><\/a>You can then customise your zombies. \u00a0I&#8217;m afraid I was boring and just added a picture of myself. \u00a0I should have zombiefied myself first but I ran out of time.<\/p>\n<p><a href=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/edit1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-330\" title=\"Save the bunny\" src=\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/10\/edit1.png\" alt=\"Bunny and Bunny Masher\" width=\"240\" height=\"147\" \/><\/a>Some pupils moved onto a different positioning project called Bunny Masher where you have to find different ways of saving a little bunny rabbit from being horribly squished by a huge bunny mashing machine.<\/p>\n<p>Positioning in CSS can be done by pixels (px), percentage (%) or &#8217;em&#8217;. \u00a0An em\u00a0is a multiple of a predefined size. The predefined size is the current font size, so 1em = current font size. \u00a0We discussed why on earth would we want to use em instead of the far easier px or %. \u00a0We thought back to our discussion the other day about accessibility and realised that if someone wanted to make the font size larger then there will be times you want to adjust positioning of graphics around the text because you can&#8217;t set the font to be a fixed size.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have spent a fair amount of time on HTML so I felt it was a good time to move onto looking at CSS. \u00a0We talked about the content being stored in HTML and the appearance settings being in CSS code. \u00a0 We looked at CSS Zen Garden and saw how different the page can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":328,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50,49,43,46,44],"tags":[],"class_list":["post-327","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-ms-farrells-blog","category-s5-6dmc","category-web-design"],"_links":{"self":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=327"}],"version-history":[{"count":3,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/327\/revisions"}],"predecessor-version":[{"id":335,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/327\/revisions\/335"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/media\/328"}],"wp:attachment":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}