{"id":2594,"date":"2022-02-07T17:32:49","date_gmt":"2022-02-07T22:32:49","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/?p=2594"},"modified":"2022-02-09T18:59:56","modified_gmt":"2022-02-09T23:59:56","slug":"week-2","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/weeks\/week-2\/","title":{"rendered":"Week 2: 2\/7 + 2\/9"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This week we will <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Monday 2\/7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Activity 1: HTML<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We will review last week and talk about the Kahoots you&#8217;ve done.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are these resources as well<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/html\/html-fundamentals-videos\/\" data-type=\"post\" data-id=\"526\">HTML Fundamentals Videos<\/a><\/li><li><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/html\/html5-periodic-table\/\" data-type=\"post\" data-id=\"524\">HTML5 Periodic Table of Elements<\/a><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Kahoots<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Here are the challenges we did last week.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">HTML Basics<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Game PIN:&nbsp;<strong>02394275<\/strong><\/li><li><a href=\"https:\/\/kahoot.it\/challenge\/02394275?challenge-id=9cb2a986-5d28-4e20-be39-7df9e016bd5e_1643838763267\" target=\"_blank\" rel=\"noreferrer noopener\">HTML Basics Game Link<\/a><\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">HTML Content Sectioning Elements<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Game PIN:&nbsp;<strong>02850126<\/strong><\/li><li><a href=\"https:\/\/kahoot.it\/challenge\/02850126?challenge-id=9cb2a986-5d28-4e20-be39-7df9e016bd5e_1643838942623\" target=\"_blank\" rel=\"noreferrer noopener\">HTML Content Sectioning Elements Game Link<\/a><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Content Sectioning<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It is helpful to learn the elements of the page that will contain other elements. Most of these are a type called Content Sectioning elements (with an exception of div noted below).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The most commonly used content sectioning elements are:<br>(each element links out to related MDN reference page)<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/main\" target=\"_blank\">main<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/nav\" target=\"_blank\">nav<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/header\" target=\"_blank\">header<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/footer\" target=\"_blank\">footer<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/article\" target=\"_blank\">article<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/aside\" target=\"_blank\">aside<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/section\" target=\"_blank\">section<\/a><\/li><li>div (not technically a content sectioning element, it is the generic block element that can contain other elements.<\/li><\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Headings &lt;h1&gt;\u2013&lt;h6&gt;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Not to be confused with the header element, headings are technically content sectioning elements but they do not contain other elements like those above.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/Heading_Elements\" target=\"_blank\" rel=\"noreferrer noopener\">MDN Heading page<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">References<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element#content_sectioning\" target=\"_blank\">Content Sectioning<\/a>&nbsp;(MDN)<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Basic Page Structure<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Many web pages share a similar structure<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Header &lt;header&gt; with site title &lt;h1&gt; and main navigation &lt;nav&gt;<ul><li>same on each page<\/li><\/ul><\/li><li>Main content of the page &lt;main&gt;<ul><li>different on each page<\/li><\/ul><\/li><li>Footer &lt;footer&gt;<ul><li>same on each page<\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For this reason it&#8217;s good to learn the elements to use for these common sections.  We are going to look at this CodePen, and then you will fork it and try adding in content sectioning elements for one of the portfolio sites you researched.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Action:<\/h3>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>[1] Review CodePen<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Basic Page Content Sectioning\" src=\"https:\/\/codepen.io\/profstein\/embed\/preview\/vYWgeEW?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=vYWgeEW#?secret=mLTIAkkMWW\" data-secret=\"mLTIAkkMWW\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>[2] Pick one of the sites you researched, look at the main areas of the page and <\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Fork my Basic Page Content Sectioning page<ol><li><a href=\"https:\/\/codepen.io\/profstein\/pen\/vYWgeEW\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/profstein\/pen\/vYWgeEW<\/a><\/li><\/ol><\/li><li>Change the <strong>title<\/strong> and <strong>nav<\/strong> to match your sites<\/li><li>Add in content section elements inside of the &lt;main&gt; for the page sections.<\/li><li>Copy and paste some of the footer content into the footer of the page (if it is a large footer you don&#8217;t have to copy and paste everything).<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Activity 2: CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We will start to learn some CSS<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Basics Presentation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.dropbox.com\/scl\/fi\/rs0vlb04ce6dgq74hwrsw\/CSS-Basics.pptx?dl=0&amp;rlkey=f3qqlwyhkr3waqwwpuf39117i\">https:\/\/www.dropbox.com\/scl\/fi\/rs0vlb04ce6dgq74hwrsw\/CSS-Basics.pptx?dl=0&amp;rlkey=f3qqlwyhkr3waqwwpuf39117i<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mozilla Developers Network: MDN<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This site sets the standard as a reference for all things web.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noreferrer noopener\">CSS: Cascading Style Sheets<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">This is the main area for all things CSS at MDN<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Syntax\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Syntax<\/a><\/h4>\n\n\n\n<h4 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\" target=\"_blank\">CSS Reference<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Activity 3: Gestalt<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We will look at this post of <a rel=\"noreferrer noopener\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/design\/gestalt-principles-and-web-design\/\" data-type=\"post\" data-id=\"1682\" target=\"_blank\">Gestalt Principles<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gestalt Activity<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Using pens and index cards we will explore Connectedness and Proximity.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WEDNESDAY 2\/9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Activity 1: CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We will look at some more selectors from the CSS Basics Presentation<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then we will do the <strong>CSS Basics Kahoot Challenge<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Game Pin<\/strong>: <strong>08114491<\/strong><\/li><li><strong>Game Link:<\/strong> <a rel=\"noreferrer noopener\" href=\"https:\/\/kahoot.it\/challenge\/08114491?challenge-id=9cb2a986-5d28-4e20-be39-7df9e016bd5e_1644445827093\" target=\"_blank\">https:\/\/kahoot.it\/challenge\/08114491?challenge-id=9cb2a986-5d28-4e20-be39-7df9e016bd5e_1644445827093<\/a> <\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Activity 2: Portfolio Brief<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We will spend the rest of the class going over the Portfolio Brief.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Scoring Rubric<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">We will use the <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/projects\/portfolio-brief\/\" data-type=\"page\" data-id=\"958\">Portfolio Brief page <\/a>to go over this<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Written Sections<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">We will talk about the written sections and have you start writing. The following sections are written:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Description<\/strong><ul><li>Describe what the project is.<\/li><\/ul><\/li><li><strong>Target Audience<\/strong><ul><li>Describe the people who will visit the site (demographic information, interests, profession etc)<\/li><\/ul><\/li><li><strong>Goals<\/strong><ul><li>Describe your goals: why are you making the site.<\/li><li>Describe the users\u2019 (target audience) goals. What do they want to see? What information are they looking for?<\/li><\/ul><\/li><li><strong>Look and Feel<\/strong><ul><li>Describe the visual design and how you want the site design to make people feel. If there are interactive elements, describe those as well.<\/li><\/ul><\/li><li><strong>Research<\/strong> (you already started this with your <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/uncategorized\/portfolio-research-2\/\" data-type=\"post\" data-id=\"2609\">research\/inspiration<\/a> post)<ul><li>Provide two to three sites that provide inspiration. For each site:<\/li><li>\u2013  name of the site<\/li><li>\u2013 link to the site (can make the name the link or show url separately)<\/li><li>\u2013 reason the site was chosen<\/li><li>\u2013 optional screenshot<\/li><\/ul><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Visualizations<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You will create two types of visualizations<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Site Map<\/li><li>Wireframes<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">We will talk about these and look at <a rel=\"noreferrer noopener\" href=\"http:\/\/www.figma.com\" target=\"_blank\">Figma<\/a> as a tool for creating them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Figma Links<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Free Wireframe UI Kit<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.figma.com\/file\/CnPg7yRagjKTEzaKe5FgT2\/Free-Wireframe-UI-Kit-(Community)?node-id=2%3A2\">https:\/\/www.figma.com\/file\/CnPg7yRagjKTEzaKe5FgT2\/Free-Wireframe-UI-Kit-(Community)?node-id=2%3A2<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Botique Travel Website Wireframes<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.figma.com\/file\/qDIcwSl5hCKkjFbKUvJcoW\/Botique-Travel-Website-Wireframes-(Community)?node-id=0%3A1\">https:\/\/www.figma.com\/file\/qDIcwSl5hCKkjFbKUvJcoW\/Botique-Travel-Website-Wireframes-(Community)?node-id=0%3A1<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Sitemap\/Wireframes<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.figma.com\/file\/v6WjroyFBbCr2wSaS4PvCg\/Sitemap%2F-Wireframes?node-id=0%3A1\">https:\/\/www.figma.com\/file\/v6WjroyFBbCr2wSaS4PvCg\/Sitemap%2F-Wireframes?node-id=0%3A1<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week we will Monday 2\/7 Activity 1: HTML We will review last week and talk about the Kahoots you&#8217;ve done. There are these resources as well HTML Fundamentals Videos HTML5 Periodic Table of Elements Kahoots Here are the challenges we did last week. HTML Basics Game PIN:&nbsp;02394275 HTML Basics Game Link HTML Content Sectioning&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/weeks\/week-2\/\">Continue reading <span class=\"screen-reader-text\">Week 2: 2\/7 + 2\/9<\/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":[],"coauthors":[87],"class_list":["post-2594","post","type-post","status-publish","format-standard","hentry","category-weeks","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 Monday 2\/7 Activity 1: HTML We will review last week and talk about the Kahoots you&#8217;ve done. There are these resources as well HTML Fundamentals VideosHTML5 Periodic Table of Elements Kahoots Here are the challenges we did last week. HTML Basics Game PIN:&nbsp;02394275HTML Basics Game Link HTML Content Sectioning Elements Game PIN:&nbsp;02850126HTML Content Sectioning Elements Game Link Content Sectioning It is helpful to learn the elements of the page that will contain other elements. Most of these are a type called Content Sectioning elements (with an exception of div noted below). The most commonly used content&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/category\/weeks\/\" rel=\"category tag\">Weeks<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/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-spring-22\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"This week we will Monday 2\/7 Activity 1: HTML We will review last week and talk about the Kahoots you&#8217;ve done. There are these resources as well HTML Fundamentals Videos HTML5 Periodic Table of Elements Kahoots Here are the challenges we did last week. HTML Basics Game PIN:&nbsp;02394275 HTML Basics Game Link HTML Content Sectioning&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts\/2594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/comments?post=2594"}],"version-history":[{"count":6,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts\/2594\/revisions"}],"predecessor-version":[{"id":2623,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts\/2594\/revisions\/2623"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/media?parent=2594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/categories?post=2594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/tags?post=2594"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/coauthors?post=2594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}