{"id":428,"date":"2019-09-25T14:56:41","date_gmt":"2019-09-25T14:56:41","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/?p=428"},"modified":"2019-10-30T09:59:56","modified_gmt":"2019-10-30T09:59:56","slug":"class-9-images-grid-typography","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/09\/25\/class-9-images-grid-typography\/","title":{"rendered":"Class 9: Images \/ Grid \/ Typography"},"content":{"rendered":"\n<p>Class on Wednesday, September 25<\/p>\n\n\n\n<p>Today we will work in roughly two parts.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Part 1: Review of <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/09\/11\/assignment-3-basic-css-grid\/\">Assignment 3: CSS Grid<\/a> and Assignment 4: Typographic Hierarchy<\/li><li>Part 2: Adding images and Grid to Assignment 4.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Part 1: Review of Assignment 3: CSS Grid and Assignment 4: Typographic Hierarchy<\/h3>\n\n\n\n<p>We will start by going to the <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/09\/20\/assignment-4-typographic-hierarchy\/\">Assignment 4 post<\/a> and looking at the work you have done so far. Please visit that assignment and post one of the following comments there:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A link to your pen. This can be either because you have an issue that you want us to look at or because you&#8217;ve completed it and can showcase your work.<\/li><li>A question about either typographic hierarchy in general or the assignment.<\/li><\/ul>\n\n\n\n<p>Some of the important things to know and be able to do complete the assignment are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Read the content and determine the hierarchy you want to present to viewers (what is most important and what is of lesser importance).<\/li><li>Identify each different type of text that needs a typographic treatment.<\/li><li>Use the <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/09\/16\/css-properties-for-typography\/\">CSS properties related to text<\/a> to actually give each of those different types of text a different treatment (<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/09\/16\/typographic-hierarchy\/\">size, color, weight, etc<\/a>.). Your choices here should also fit the hierarchy you determined.<\/li><\/ul>\n\n\n\n<p>Next, we will move on to look at Assignment 3 CSS Grid. If the review of Assignment 4 takes too long we will fold in the CSS Grid review into Part 2. The basic review will be to make sure you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Identify the Containing Element to which the Grid will be applied.<\/li><li>Apply CSS Grid to the containing element: <ul><li>display: grid;<\/li><li>grid-template-columns: 1fr 1fr 1fr; (or however you want to define your columns)<\/li><li>Optional: grid-gap; <\/li><\/ul><\/li><li>Apply grid-column to grid elements you want to take up more than one column.<ul><li>Example: grid-column: 1\/ span 3;<\/li><\/ul><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Part 2: Adding images and Grid to Assignment 4<\/h3>\n\n\n\n<p>In this section we will build on our work on Assignment 4. We will add a grid and then go over how to find and incorporate the images for each of the crowds.<\/p>\n\n\n\n<p>To complete this we will see how to download a CodePen as HTML\/CSS files and then we will open those files in an editor and work from there.<\/p>\n\n\n\n<p>Outline of tasks:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Download CodePen as HTML\/CSS. You can use your own pen or follow along with me.<\/li><li>Open the folder in an Editor like Brackets.<\/li><li>add an images folder<\/li><li>Begin downloading images from the LOC website and then adding in the HTML to embed the images with a credit. I will use the following Emmet code to expand into a structure we can use to add: <code>div.crowd__image&gt;img+p.image-credit<\/code><\/li><li>Update CSS for typographic hierarchy and layout to work with the images.<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Class on Wednesday, September 25 Today we will work in roughly two parts. Part 1: Review of Assignment 3: CSS Grid and Assignment 4: Typographic Hierarchy Part 2: Adding images and Grid to Assignment 4. Part 1: Review of Assignment 3: CSS Grid and Assignment 4: Typographic Hierarchy We will start by going to the [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":553,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[25,17,48],"tags":[44,52,46,54],"class_list":{"0":"post-428","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-in-class-information","8":"category-media","9":"category-typography","10":"tag-css-grid","11":"tag-images","12":"tag-typographic-hierarchy","13":"tag-typography","14":"czr-hentry"},"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/comments?post=428"}],"version-history":[{"count":7,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/428\/revisions"}],"predecessor-version":[{"id":439,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/428\/revisions\/439"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/media\/553"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/media?parent=428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/categories?post=428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/tags?post=428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}