{"id":1810,"date":"2021-10-04T19:07:17","date_gmt":"2021-10-04T23:07:17","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/?p=1810"},"modified":"2021-11-03T18:04:41","modified_gmt":"2021-11-03T22:04:41","slug":"week-6","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/weeks\/week-6\/","title":{"rendered":"Week 6: 10\/4 + 10\/6"},"content":{"rendered":"\n<p>This week is much like last week: we will be doing more work on the Portfolios, writing the HTML and CSS to turn your wireframes into actual web pages. We will also talk about design and work on color and typography for the sites. Along the way you will learn some Git basics and work with GitHub.<\/p>\n\n\n\n<p>The difference is that hopefully you are a bit further along with your projects and have specific questions for me.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Before Class: LEARN<\/h2>\n\n\n\n<p><strong>DO THIS:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Fill out the&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/forms.office.com\/r\/9k9geFBTyE\" target=\"_blank\">Project Status Form<\/a><\/li><li>Work on your project. Roughly in this order<ol><li>wireframes complete<\/li><li>create HTML for each page of your site. Focus on elmeents for the major sections of your page. It\u2019s OK if you don\u2019t get all of the paragraphs, lists etc.<\/li><li>Make sure to determine your sitewide header and footer. You can put off the navigation for now, but leave at least a &lt;nav&gt; element.<\/li><li>write the CSS for the small (mobile) layout from you wireframes<\/li><li>use media queries to create the other layouts<\/li><li>Complete the content for each page.<\/li><\/ol><\/li><\/ul>\n\n\n\n<p>In case you need it, here are videos I put up from last week:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.dropbox.com\/s\/jozz356vue57r6a\/install-git-vscode.mp4?dl=0\" target=\"_blank\">Installing VS Code and Git<\/a> [5m 40s]<ol><li>If you already have them installed you don&#8217;t have to watch this one<\/li><\/ol><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.dropbox.com\/s\/z353rkvterculhp\/clone-repo.mp4?dl=0\" target=\"_blank\">Creating a Repository on GitHub and cloning it in VS Code<\/a> [4m 25s]<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.dropbox.com\/s\/0rob1tbrxa3o8j8\/add-base-files-folders.mp4?dl=0\" target=\"_blank\">Adding basic files and folders<\/a> [3m 32s] <ol><li>this shows how to do what&#8217;s in the bullet points above.<\/li><\/ol><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.dropbox.com\/s\/n69vmxcc2ss59f5\/layout-html-css.mp4?dl=0\" target=\"_blank\">Starting to convert wireframes to HTML and CSS<\/a> [11m 49s]<ol><li>This is optional. We&#8217;ll be working on this on Monday, but you can get started ahead of time.<\/li><\/ol><\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">In Class: EXPLORE<\/h2>\n\n\n\n<p><strong>DO THIS:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#live\">Join the Live Class Sessions<\/a><\/li><\/ul>\n\n\n\n<p>The Join link is the same for all live sessions. There is a registration form and a waiting room to help avoid bombing. View Live Sessions below for more info<\/p>\n\n\n\n<section class=\"wp-block-uagb-columns uagb-columns__wrap uagb-columns__background-undefined uagb-columns__stack-mobile uagb-columns__valign-undefined uagb-columns__gap-10 alignfull uagb-block-c9c77846\"><div class=\"uagb-columns__overlay\"><\/div><div class=\"uagb-columns__inner-wrap uagb-columns__columns-3\">\n<div class=\"wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-9f677514\"><div class=\"uagb-column__overlay\"><\/div><div class=\"uagb-column__inner-wrap\">\n<h2 class=\"wp-block-heading\" id=\"live\">Live Sessions<\/h2>\n\n\n\n<div class=\"alignwide wp-block-ugb-button ugb-button-wrapper ugb-9f39f6d ugb-button--mobile-aligned ugb-main-block\"><style>.ugb-9f39f6d .ugb-block-content{justify-content:flex-start !important}.ugb-9f39f6d .ugb-block-content .ugb-button{border-radius:0px}.ugb-9f39f6d .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-9f39f6d .ugb-button1{border-color:#0d497a !important;border-radius:0px !important}.ugb-9f39f6d .ugb-button1:hover{opacity:0.8}.ugb-9f39f6d .ugb-button1:hover .ugb-button--inner{color:#0d497a !important}.ugb-9f39f6d .ugb-button1.ugb-button--has-icon.ugb-button--has-icon svg:not(.ugb-custom-icon){color:#0d497a}.ugb-9f39f6d .ugb-button1.ugb-button--has-icon.ugb-button--has-icon:hover svg:not(.ugb-custom-icon){color:#0d497a}.ugb-9f39f6d .ugb-button1:before{border-radius:0px !important}.ugb-9f39f6d .ugb-inner-block{text-align:left}@media screen and (max-width:768px){.ugb-9f39f6d .ugb-block-content{justify-content:center !important}.ugb-9f39f6d .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\/tZUude-vpj8oGNWYtmbO9AbG-83cG0mODkpK\" 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<\/div><\/div>\n\n\n\n<div class=\"wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-8f270807\"><div class=\"uagb-column__overlay\"><\/div><div class=\"uagb-column__inner-wrap\">\n<h4 class=\"wp-block-heading\">Session 1: CSS-Ready Project<\/h4>\n\n\n\n<p><strong>Monday, October 4 at 7:30p\u20139:10p<\/strong><\/p>\n\n\n\n<p>In this class I want you all to get your projects ready for CSS. This means writing HTML for all of the pages for your site. Some of you are part of the way there but I think everyone could do with some more attention to their HTML.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Topics for Class Session<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Intro<\/li><li>Fill out the&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/forms.office.com\/r\/9k9geFBTyE\" target=\"_blank\">Project Status Form<\/a> if you haven&#8217;t already done so.<\/li><li><a href=\"https:\/\/miro.com\/app\/board\/o9J_luICl5Q=\/?invite_link_id=238347043845\" target=\"_blank\" rel=\"noreferrer noopener\">Web Project Process<\/a> Miro<\/li><li>Git Basics: Miro Board on <a rel=\"noreferrer noopener\" href=\"https:\/\/miro.com\/app\/board\/o9J_lOnEtSE=\/\" target=\"_blank\">Git Daily Process<\/a><\/li><li>Breakout Rooms to Work on Projects<\/li><\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-616bb3db\"><div class=\"uagb-column__overlay\"><\/div><div class=\"uagb-column__inner-wrap\">\n<h4 class=\"wp-block-heading\">Session 2: Responsive Design<\/h4>\n\n\n\n<p><strong>Wednesday, October 6 at 7:30p\u20139:10p<\/strong><\/p>\n\n\n\n<p>Based on how we progress on Monday, I&#8217;ll update this page.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Topics for Class Session<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>intro<\/li><li><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/projects\/responsive-site\/\" data-type=\"page\" data-id=\"1818\">Responsive Site Rubric<\/a><\/li><li><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/dev-environment\/getting-started\/\" data-type=\"post\" data-id=\"1825\">Getting Started Post<\/a><\/li><\/ul>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"afterclass\">After Class:<\/h2>\n\n\n\n<p>After Monday<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Complete the the&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/forms.office.com\/r\/9k9geFBTyE\" target=\"_blank\">Project Status Form<\/a>. You must do this if you haven&#8217;t yet. You can do it again if things have changed a lot.<\/li><li>Push your changes to GitHub.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">After Wednesday<\/h3>\n\n\n\n<p>Reminder that there will be no class on Monday, October 11.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week is much like last week: we will be doing more work on the Portfolios, writing the HTML and CSS to turn your wireframes into actual web pages. We will also talk about design and work on color and typography for the sites. Along the way you will learn some Git basics and work&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/weeks\/week-6\/\">Continue reading <span class=\"screen-reader-text\">Week 6: 10\/4 + 10\/6<\/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":[8],"tags":[106,145,160],"coauthors":[87],"class_list":["post-1810","post","type-post","status-publish","format-standard","hentry","category-weeks","tag-layout","tag-responsive-site","tag-typography","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 is much like last week: we will be doing more work on the Portfolios, writing the HTML and CSS to turn your wireframes into actual web pages. We will also talk about design and work on color and typography for the sites. Along the way you will learn some Git basics and work with GitHub. The difference is that hopefully you are a bit further along with your projects and have specific questions for me. Before Class: LEARN DO THIS: Fill out the&nbsp;Project Status FormWork on your project. Roughly in this orderwireframes completecreate HTML for each page of&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/category\/weeks\/\" rel=\"category tag\">Weeks<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/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-fall-21\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"This week is much like last week: we will be doing more work on the Portfolios, writing the HTML and CSS to turn your wireframes into actual web pages. We will also talk about design and work on color and typography for the sites. Along the way you will learn some Git basics and work&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/1810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/comments?post=1810"}],"version-history":[{"count":3,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/1810\/revisions"}],"predecessor-version":[{"id":1839,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/1810\/revisions\/1839"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/media?parent=1810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/categories?post=1810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/tags?post=1810"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/coauthors?post=1810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}