{"id":10034,"date":"2018-03-19T13:19:37","date_gmt":"2018-03-19T20:19:37","guid":{"rendered":"http:\/\/pasadena-library.net\/kids\/?p=10034"},"modified":"2018-03-19T13:38:53","modified_gmt":"2018-03-19T20:38:53","slug":"web-design-with-html-and-css-kids-coding-club","status":"publish","type":"post","link":"https:\/\/pasadena-library.net\/kids\/2018\/web-design-with-html-and-css-kids-coding-club\/","title":{"rendered":"Web Design with HTML and CSS: Kids&#8217; Coding Club"},"content":{"rendered":"<p><a href=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-28-43-PM.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-28-43-PM-765x1024.jpg\" alt=\"\" width=\"765\" height=\"1024\" class=\"aligncenter size-large wp-image-10035\" srcset=\"https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-28-43-PM-765x1024.jpg 765w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-28-43-PM-224x300.jpg 224w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-28-43-PM.jpg 1936w\" sizes=\"auto, (max-width: 765px) 100vw, 765px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-48-46-PM.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-48-46-PM-765x1024.jpg\" alt=\"\" width=\"765\" height=\"1024\" class=\"aligncenter size-large wp-image-10037\" srcset=\"https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-48-46-PM-765x1024.jpg 765w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-48-46-PM-224x300.jpg 224w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-48-46-PM.jpg 1936w\" sizes=\"auto, (max-width: 765px) 100vw, 765px\" \/><\/a><\/p>\n<p>On Thursday, March 15, kids came to the Studio on 4th at Pasadena Central Library to learn about HTML and CSS, and build a website that would be an interactive birthday card or greeting for a friend. We used the <a href=\"https:\/\/code.org\/educate\/weblab\" rel=\"noopener\" target=\"_blank\">WebLab<\/a> at Code.org which allows you to see your webpage appear simultaneously in a side viewer. It&#8217;s a great tool for teaching kids how to code! We got a long way through the presentation we had prepared, and completed all our work with HTML. But we didn&#8217;t get through much of the CSS in the hour time we had allotted. So we had a file loaded onto our library laptops to give the kids a basic CSS stylesheet to plug into their webpage.<\/p>\n<p><a href=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-28-56-PM.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-28-56-PM-765x1024.jpg\" alt=\"\" width=\"765\" height=\"1024\" class=\"aligncenter size-large wp-image-10036\" srcset=\"https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-28-56-PM-765x1024.jpg 765w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-28-56-PM-224x300.jpg 224w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/Photo-Mar-15-4-28-56-PM.jpg 1936w\" sizes=\"auto, (max-width: 765px) 100vw, 765px\" \/><\/a><\/p>\n<p>Here is what a few of the kids came up with! Click the images to see the webpages they created. (They are best viewed in Internet Explorer, because other browsers change the font.)<\/p>\n<p><a href=\"https:\/\/codeprojects.org\/QFdHSd6nttM4jsxOSU8jR9lBXK3TqDqp8PWw16vuJ9A\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/get-well-soon.png\" alt=\"\" width=\"1009\" height=\"809\" class=\"aligncenter size-full wp-image-10038\" srcset=\"https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/get-well-soon.png 1009w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/get-well-soon-300x241.png 300w\" sizes=\"auto, (max-width: 1009px) 100vw, 1009px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/codeprojects.org\/6JN2kNZJimQP0-Qa7JtshzJ9aDpsB-65Nvx6iD6FQTU\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/hbday.png\" alt=\"\" width=\"546\" height=\"544\" class=\"aligncenter size-full wp-image-10039\" srcset=\"https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/hbday.png 546w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/hbday-150x150.png 150w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/hbday-300x300.png 300w\" sizes=\"auto, (max-width: 546px) 100vw, 546px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/codeprojects.org\/RVClqRiFwuXd2TsTVpzFA43qCm0d1TyFu_NJloHMufo\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/mariah.png\" alt=\"\" width=\"543\" height=\"859\" class=\"aligncenter size-full wp-image-10040\" srcset=\"https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/mariah.png 543w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/mariah-190x300.png 190w\" sizes=\"auto, (max-width: 543px) 100vw, 543px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/codeprojects.org\/zGD-8AgJgAgfSL3ZUPL3QAAnasMSuD2BhT8cl9Ali0k\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/slamdunk.png\" alt=\"\" width=\"923\" height=\"849\" class=\"aligncenter size-full wp-image-10041\" srcset=\"https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/slamdunk.png 923w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/slamdunk-300x276.png 300w\" sizes=\"auto, (max-width: 923px) 100vw, 923px\" \/><\/a><\/p>\n<p>Here are the slides I made, so that you can go through and learn the CSS stuff that we didn&#8217;t have time to finish:<\/p>\n<div style=\"margin-bottom:5px\"> <strong> <a href=\"\/\/www.slideshare.net\/annmarieppl\/web-design-basics-for-kids-html-css-90697250\" title=\"Web Design Basics for Kids: HTML &amp; CSS\" target=\"_blank\">Web Design Basics for Kids: HTML &amp; CSS<\/a> <\/strong> from <strong><a href=\"https:\/\/www.slideshare.net\/annmarieppl\" target=\"_blank\">AnnMarie Ppl<\/a><\/strong> <\/div>\n<p>And here is the handout I made:<\/p>\n<p><a href=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/css.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/css.png\" alt=\"\" width=\"615\" height=\"804\" class=\"aligncenter size-full wp-image-10042\" srcset=\"https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/css.png 615w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/css-229x300.png 229w\" sizes=\"auto, (max-width: 615px) 100vw, 615px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/html-tags.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/html-tags.png\" alt=\"\" width=\"616\" height=\"802\" class=\"aligncenter size-large wp-image-10043\" srcset=\"https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/html-tags.png 616w, https:\/\/pasadena-library.net\/kids\/wp-content\/blogs.dir\/10\/files\/sites\/10\/2018\/03\/html-tags-230x300.png 230w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>On Thursday, March 15, kids came to the Studio on 4th at Pasadena Central Library to learn about HTML and CSS, and build a website that would be an interactive birthday card or greeting for a friend. We used the WebLab at Code.org which allows you to see your webpage [&hellip;]<\/p>\n","protected":false},"author":27,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4,222],"tags":[76,266,265,267],"class_list":["post-10034","post","type-post","status-publish","format-standard","hentry","category-events","category-stem","tag-coding","tag-css","tag-html","tag-kids-coding-club"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p71KT0-2BQ","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/pasadena-library.net\/kids\/wp-json\/wp\/v2\/posts\/10034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pasadena-library.net\/kids\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pasadena-library.net\/kids\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pasadena-library.net\/kids\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/pasadena-library.net\/kids\/wp-json\/wp\/v2\/comments?post=10034"}],"version-history":[{"count":3,"href":"https:\/\/pasadena-library.net\/kids\/wp-json\/wp\/v2\/posts\/10034\/revisions"}],"predecessor-version":[{"id":10046,"href":"https:\/\/pasadena-library.net\/kids\/wp-json\/wp\/v2\/posts\/10034\/revisions\/10046"}],"wp:attachment":[{"href":"https:\/\/pasadena-library.net\/kids\/wp-json\/wp\/v2\/media?parent=10034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pasadena-library.net\/kids\/wp-json\/wp\/v2\/categories?post=10034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pasadena-library.net\/kids\/wp-json\/wp\/v2\/tags?post=10034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}