{"id":1275,"date":"2023-11-02T18:53:23","date_gmt":"2023-11-02T22:53:23","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/?p=1275"},"modified":"2023-11-02T18:53:31","modified_gmt":"2023-11-02T22:53:31","slug":"learn-css-through-games","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/2023\/11\/02\/learn-css-through-games\/","title":{"rendered":"Learn CSS through Games"},"content":{"rendered":"\n

In general with web design you don’t have to memorize all of the HTML and CSS syntax but it is good to know a) what’s possible, b) the names for things (like selectors, elements, properties etc) and c) where to go to find more information and examples. One way to learn how things work is to play games. In this class the CSS Diner game that teaches selectors is as far as you need to go (and you don’t need to complete it). The other two are for layout which is a bit more advanced than you need but some may be interested in it.<\/p>\n\n\n\n

<\/p>\n\n\n\n

CSS Diner: Selectors Game<\/h2>\n\n\n\n
\"screenshot<\/figure>\n\n\n\n

Play Game: https:\/\/flukeout.github.io\/<\/a><\/p>\n\n\n\n

This is a web game that requires you to write CSS Selectors. It’s a \nfun way to test your knowledge of writing selectors for CSS. It also \nexplains the selectors so it can be a good learning tool as well. By the\n end of this class you should be able to complete the game. You won’t \nmemorize all of the selectors but instead what you want to do is to know\n that they exist and be able to use them with a little guidance.<\/p>\n\n\n\n

In general with web design you don’t have to memorize all of the HTML and CSS syntax but it is good to know a) what’s possible, b) the names for things (like selectors, elements, properties etc) and c) where to go to find more information and examples.<\/p>\n\n\n\n

CSS Grid Garden<\/h2>\n\n\n\n
\"screenshot<\/figure>\n\n\n\n

Play Game: http:\/\/cssgridgarden.com\/<\/a><\/p>\n\n\n\n

Created by the same people that made Flexbox Froggy, in this game you move water to the plants in the garden using Grid properties and values.<\/p>\n\n\n\n

Flexbox Froggy Game<\/h2>\n\n\n\n
\"screenshot<\/figure>\n\n\n\n

Play Game: https:\/\/flexboxfroggy.com\/<\/a><\/p>\n\n\n\n

This game teaches you Flexbox by having you position a frog on a lilypad using flex properties.<\/p>\n","protected":false},"excerpt":{"rendered":"

In general with web design you don’t have to memorize all of the HTML and CSS syntax but it is good to know a) what’s possible, b) the names for… Read More »Learn CSS through Games<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_themeisle_gutenberg_block_has_review":false,"openlab_post_visibility":"","footnotes":""},"categories":[27,19,23],"tags":[],"class_list":["post-1275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-resources-and-tutorials","category-web-design-module"],"uagb_featured_image_src":{"full":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2022\/11\/CSS-Diner.png",1024,713,false],"thumbnail":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2022\/11\/CSS-Diner-150x150.png",150,150,true],"medium":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2022\/11\/CSS-Diner-300x209.png",300,209,true],"medium_large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2022\/11\/CSS-Diner-768x535.png",768,535,true],"large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2022\/11\/CSS-Diner.png",1024,713,false],"1536x1536":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2022\/11\/CSS-Diner.png",1024,713,false],"2048x2048":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2022\/11\/CSS-Diner.png",1024,713,false],"neve-blog":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2022\/11\/CSS-Diner-930x620.png",930,620,true],"gform-image-choice-sm":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2022\/11\/CSS-Diner.png",300,209,false],"gform-image-choice-md":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2022\/11\/CSS-Diner.png",400,279,false],"gform-image-choice-lg":["https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2022\/11\/CSS-Diner.png",600,418,false]},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"In general with web design you don’t have to memorize all of the HTML and CSS syntax but it is good to know a) what’s possible, b) the names for… Read More »Learn CSS through Games","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/posts\/1275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/comments?post=1275"}],"version-history":[{"count":1,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/posts\/1275\/revisions"}],"predecessor-version":[{"id":1276,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/posts\/1275\/revisions\/1276"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/media\/791"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/media?parent=1275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/categories?post=1275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-json\/wp\/v2\/tags?post=1275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}