{"id":1760,"date":"2023-02-14T17:35:17","date_gmt":"2023-02-14T22:35:17","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/?p=1760"},"modified":"2023-02-16T17:54:34","modified_gmt":"2023-02-16T22:54:34","slug":"week-4","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/weeks\/week-4\/","title":{"rendered":"Week 4: 2\/14 + 2\/16"},"content":{"rendered":"\n<p>This week we will work on your Responsive Personal Site projects focusing on writing HTML and CSS, Responsive Design Basics and some design concepts.<\/p>\n\n\n\n<div class=\"aligncenter wp-block-ugb-button ugb-button-wrapper ugb-fb2eb5a ugb-button--mobile-aligned ugb-main-block\"><style>.ugb-fb2eb5a .ugb-block-content{justify-content:flex-start !important}.ugb-fb2eb5a .ugb-block-content .ugb-button{border-radius:0px}.ugb-fb2eb5a .ugb-button1 .ugb-button--inner{font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\" !important;font-size:18px !important;color:#0d497a !important}.ugb-fb2eb5a .ugb-button1{border-color:#0d497a !important;border-radius:0px !important}.ugb-fb2eb5a .ugb-button1:hover{opacity:0.8}.ugb-fb2eb5a .ugb-button1:hover .ugb-button--inner{color:#0d497a !important}.ugb-fb2eb5a .ugb-button1.ugb-button--has-icon.ugb-button--has-icon svg:not(.ugb-custom-icon){color:#0d497a}.ugb-fb2eb5a .ugb-button1.ugb-button--has-icon.ugb-button--has-icon:hover svg:not(.ugb-custom-icon){color:#0d497a}.ugb-fb2eb5a .ugb-button1:before{border-radius:0px !important}.ugb-fb2eb5a .ugb-inner-block{text-align:left}@media screen and (max-width:768px){.ugb-fb2eb5a .ugb-block-content{justify-content:center !important}.ugb-fb2eb5a .ugb-inner-block{text-align:center}}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-button-container\"><a class=\"ugb-button1 ugb-button ugb-button--size-medium ugb--hover-effect-scale ugb-button--design-ghost ugb-button--has-icon\" href=\"https:\/\/bmcc-cuny.zoom.us\/meeting\/register\/tZUpde-pqT8pEtBfNoBlHQuqZ2uuqU7eyUyg\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"\"><div class=\"ugb-icon-inner-svg\"><svg data-prefix=\"fas\" data-icon=\"external-link-alt\" class=\"svg-inline--fa fa-external-link-alt fa-w-16\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg><\/div><span class=\"ugb-button--inner\">JOIN LIVE SESSION<\/span><\/a><\/div><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Thursday 2\/16<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Activity 1: CSS Grid<\/h3>\n\n\n\n<p>We will continue to look at how to Style with CSS Grid<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>My<a rel=\"noreferrer noopener\" href=\"https:\/\/profstein.github.io\/css-grid-basic-examples\/\" target=\"_blank\"> CSS Grid Examples<\/a><\/li>\n\n\n\n<li>And this <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/css\/css-grid\/\" data-type=\"post\" data-id=\"1773\">CSS Grid<\/a> Post<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Activity 2: Responsive Web Design Concepts<\/h3>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/alistapart.com\/article\/responsive-web-design\/\" target=\"_blank\">Responsive Web Design<\/a> was coined by Ethan Marcotte in a blog post for the A List Apart web site in 2010. With CSS Grid and other developments, the CSS in that post is out-of-date, but the concepts remain:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Fluid Grid<\/strong>: The width of the containing elements on your site is fluid. This normally means the width of the elements are in units like % or fr (what we will use with CSS Grid).<\/li>\n\n\n\n<li><strong>Flexible Media<\/strong>: the images and other media used on a page can adjust their size to fit the fluid grid as it changes with the browser size.<\/li>\n\n\n\n<li><strong>Responsive Layout (media queries):<\/strong> The site layout changes to match the width of the browser being used to view it (mobile, laptop, desktop etc). Media queries are what is typically used to do this. There are some other options you can also use that we will explore<\/li>\n<\/ol>\n\n\n\n<p>We will discuss the first two today and Responsive Layout more on Thursday.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/css\/responsive-images-and-video\/\" data-type=\"post\" data-id=\"1230\">Responsive Images and Video<\/a>: the CSS used in this post is in the style.css file for your Responsive Site project. This post explains that styling in more detail.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Activity 3: Fluid Grid and Layout Discussion<\/h3>\n\n\n\n<p>We will use these examples to talk more about fluid grid and different ways that the width of the containing elements can be flexible.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Fixed vs Fluid:&nbsp;<a href=\"https:\/\/codepen.io\/profstein\/pen\/vYZRrpp\">https:\/\/codepen.io\/profstein\/pen\/vYZRrpp<\/a>&nbsp;<\/li>\n\n\n\n<li>Float vs Flex vs Grid:&nbsp;<a href=\"https:\/\/codepen.io\/profstein\/pen\/mdwxajO\">https:\/\/codepen.io\/profstein\/pen\/mdwxajO<\/a>&nbsp;<\/li>\n\n\n\n<li>1 Line Layouts:&nbsp;<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/css\/one-line-layouts\/\">https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/css\/one-line-layouts\/<\/a>&nbsp;<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Activity 4: Media Queries<\/h3>\n\n\n\n<p>Media queries are a big part of how you will accomplish the Responsive Layout part of Responsive Web Design.<\/p>\n\n\n\n<p>To look at them in a hands-on way we will look at this <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/projects\/media-queries\/\" data-type=\"post\" data-id=\"1799\">Media Queries post.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tuesday 2\/14<\/h2>\n\n\n\n<p><strong>PORTFOLIO BRIEF: <\/strong>If you have not yet submitted your <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/projects\/portfolio-brief\/\" data-type=\"page\" data-id=\"958\">Portfolio Brief<\/a>, please submit it now. It is due today.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Activity 1: Project Setup<\/h3>\n\n\n\n<p>We are going to start the day by getting you set up for your project. If you have already started a repository for your project, you can copy over those files to the one we will start today. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Google Classroom<\/h4>\n\n\n\n<p>I&#8217;m going to require you to use Google Classroom to create the repository for this project. This will better allow me to track you project and give you feedback as you work on it.<\/p>\n\n\n\n<p><strong>JOIN LINK:<\/strong> because the link will allow anyone with it to join our classroom, I&#8217;m going to post it on our Profile in a <a href=\"https:\/\/openlab.bmcc.cuny.edu\/groups\/mmp-350-spring23\/forum\/topic\/responsive-personal-site-assignment-link\/\" target=\"_blank\" rel=\"noreferrer noopener\">forum post <\/a>and in Discord. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Activity 2: Start Sitemap\/Wireframes to HTML<\/h2>\n\n\n\n<p>After you get things set up, we will start the process of creating the files for your project. For this you will<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create an .html file for each of the pages of your site (as outlined in your site map).\n<ul class=\"wp-block-list\">\n<li>Keep the filenames short and understandable with no spaces in them like work.html or posterproject.html<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Add a basic <strong>nav<\/strong> element in your <strong>header<\/strong>. Make sure to link to all of your files. You do <strong>not<\/strong> have to style this yet.<\/li>\n\n\n\n<li>Begin to add page section elements to your pages. Use your wireframes as a guide and remember to use these elements to start\n<ul class=\"wp-block-list\">\n<li>header<\/li>\n\n\n\n<li>main<\/li>\n\n\n\n<li>footer<\/li>\n\n\n\n<li>nav<\/li>\n\n\n\n<li>article<\/li>\n\n\n\n<li>section<\/li>\n\n\n\n<li>aside<\/li>\n\n\n\n<li>div<\/li>\n\n\n\n<li>address<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Add as much content as you can and appropriate to the pages you have.<\/li>\n<\/ol>\n\n\n\n<p>You will continue this work outside of class as you build your site. Today the main point is to get started so you are comfortable adding more as you build your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Activity 3: CSS Grid<\/h2>\n\n\n\n<p>Depending on time, we will continue looking at CSS Grid using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>My<a href=\"https:\/\/profstein.github.io\/css-grid-basic-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\"> CSS Grid Examples<\/a><\/li>\n\n\n\n<li>And this <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/topics\/css\/css-grid\/\" data-type=\"post\" data-id=\"1773\">CSS Grid<\/a> Post<\/li>\n<\/ul>\n\n\n\n<p>I have updated the CSS Grid examples to show one that uses span. This is now the new Example 4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>This week we will work on your Responsive Personal Site projects focusing on writing HTML and CSS, Responsive Design Basics and some design concepts. JOIN LIVE SESSION Thursday 2\/16 Activity 1: CSS Grid We will continue to look at how to Style with CSS Grid Activity 2: Responsive Web Design Concepts Responsive Web Design was&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/weeks\/week-4\/\">Continue reading <span class=\"screen-reader-text\">Week 4: 2\/14 + 2\/16<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"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":"","openlab_post_visibility":"","footnotes":""},"categories":[142,8],"tags":[161,145],"coauthors":[87],"class_list":["post-1760","post","type-post","status-publish","format-standard","hentry","category-responsive-site","category-weeks","tag-media-queries","tag-responsive-site","entry"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"<p>This week we will work on your Responsive Personal Site projects focusing on writing HTML and CSS, Responsive Design Basics and some design concepts. JOIN LIVE SESSION Thursday 2\/16 Activity 1: CSS Grid We will continue to look at how to Style with CSS Grid My CSS Grid Examples And this CSS Grid Post Activity 2: Responsive Web Design Concepts Responsive Web Design was coined by Ethan Marcotte in a blog post for the A List Apart web site in 2010. With CSS Grid and other developments, the CSS in that post is out-of-date, but the concepts remain: Fluid Grid:&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/category\/projects\/responsive-site\/\" rel=\"category tag\">Responsive Site<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/category\/weeks\/\" rel=\"category tag\">Weeks<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/author\/cstein\/"},"comments_num_v2":"0 comments","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"This week we will work on your Responsive Personal Site projects focusing on writing HTML and CSS, Responsive Design Basics and some design concepts. JOIN LIVE SESSION Thursday 2\/16 Activity 1: CSS Grid We will continue to look at how to Style with CSS Grid Activity 2: Responsive Web Design Concepts Responsive Web Design was&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/1760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/comments?post=1760"}],"version-history":[{"count":13,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/1760\/revisions"}],"predecessor-version":[{"id":2647,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/posts\/1760\/revisions\/2647"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/media?parent=1760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/categories?post=1760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/tags?post=1760"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/coauthors?post=1760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}