{"id":1715,"date":"2021-09-13T17:44:00","date_gmt":"2021-09-13T21:44:00","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/?page_id=1715"},"modified":"2021-09-13T17:44:01","modified_gmt":"2021-09-13T21:44:01","slug":"css","status":"publish","type":"page","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/foundational\/css\/","title":{"rendered":"CSS"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Intro<\/h2>\n\n\n\n<p>CSS is how we create the visual design of our web sites.<\/p>\n\n\n\n<div class=\"alignwide wp-block-ugb-blog-posts ugb-blog-posts ugb-88e8406 ugb-blog-posts--v2 ugb-blog-posts--design-list ugb-blog-posts--columns-2 ugb-main-block ugb--has-custom-content-width-tablet ugb--has-custom-content-width-mobile\"><style>.ugb-88e8406 .ugb-blog-posts__title a{color:#313131 !important}.ugb-88e8406 .ugb-blog-posts__title a:hover{opacity:0.8}.ugb-88e8406 .ugb-blog-posts__readmore a{color:var(--stk-global-color-88711,#313131) !important}.ugb-88e8406 .ugb-blog-posts__readmore a:hover{color:#989898 !important}.ugb-88e8406 .ugb-blog-posts__readmore{font-family:\"Lato\",Sans-serif !important}.ugb-88e8406 .ugb-block-title{color:var(--stk-global-color-88711,#313131);text-align:center;max-width:454px !important;margin-left:auto !important;margin-right:auto !important}@media screen and (min-width:768px){.ugb-88e8406.ugb-blog-posts{padding-top:5% !important;padding-bottom:5% !important}}@media screen and (max-width:1025px){.ugb-88e8406.ugb-blog-posts > .ugb-inner-block{max-width:80% !important}}@media screen and (max-width:768px){.ugb-88e8406.ugb-blog-posts > .ugb-inner-block{max-width:90% !important}}<\/style><div class=\"ugb-inner-block\"><h2 class=\"ugb-block-title ugb-block-title--with-subtitle\">CSS Posts<\/h2><p class=\"ugb-block-description\">Below are the last six posts on our class site related to CSS. <br><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/category\/topics\/css\/\">Click here to view all CSS Posts<\/a>.<\/p><div class=\"ugb-block-content\"><article class=\"ugb-blog-posts__item\"><div class=\"ugb-blog-posts__content\"><h3 class=\"ugb-blog-posts__title\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/css\/responsive-navigation\/\">Responsive Navigation<\/a><\/h3><div class=\"ugb-blog-posts__excerpt\"><p>There are a large number of ways to do responsive navigation.&nbsp; This page contains three examples from CodePen and then links to some sites that offer navigation examples that you&#8230;<\/div><p class=\"ugb-blog-posts__readmore\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/css\/responsive-navigation\/\">Continue reading<\/a><\/p><\/div><\/article><article class=\"ugb-blog-posts__item\"><div class=\"ugb-blog-posts__content\"><h3 class=\"ugb-blog-posts__title\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/projects\/media-queries\/\">Media Queries<\/a><\/h3><div class=\"ugb-blog-posts__excerpt\"><p>In order to have a fully responsive web page you need three things: Fluid Layout: the width of the layout is set in fluid units like percent or fr units&#8230;.<\/div><p class=\"ugb-blog-posts__readmore\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/projects\/media-queries\/\">Continue reading<\/a><\/p><\/div><\/article><article class=\"ugb-blog-posts__item\"><div class=\"ugb-blog-posts__content\"><h3 class=\"ugb-blog-posts__title\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/uncategorized\/css-grid\/\">CSS Grid<\/a><\/h3><div class=\"ugb-blog-posts__excerpt\"><p>CSS Grid is relatively simple to get started but it is also deep with a lot to learn. This page has resources about CSS Grid for those just getting started&#8230;<\/div><p class=\"ugb-blog-posts__readmore\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/uncategorized\/css-grid\/\">Continue reading<\/a><\/p><\/div><\/article><article class=\"ugb-blog-posts__item\"><div class=\"ugb-blog-posts__content\"><h3 class=\"ugb-blog-posts__title\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/css\/typographic-hierarchy\/\">Typographic Hierarchy<\/a><\/h3><div class=\"ugb-blog-posts__excerpt\"><p>Most of the web is text so much of what you have to design is text.&nbsp;A typographic hierarchy helps the user to quickly scan a page and find information.&nbsp;Also,&nbsp;done right,&nbsp;it&#8230;<\/div><p class=\"ugb-blog-posts__readmore\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/css\/typographic-hierarchy\/\">Continue reading<\/a><\/p><\/div><\/article><article class=\"ugb-blog-posts__item\"><div class=\"ugb-blog-posts__content\"><h3 class=\"ugb-blog-posts__title\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/css\/typography-basics\/\">Typography Basics<\/a><\/h3><div class=\"ugb-blog-posts__excerpt\"><p>This post presents the basics of typography through a set of rules to follow. Like all rules they are made to be broken, but you should learn them first before&#8230;<\/div><p class=\"ugb-blog-posts__readmore\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/css\/typography-basics\/\">Continue reading<\/a><\/p><\/div><\/article><article class=\"ugb-blog-posts__item\"><div class=\"ugb-blog-posts__content\"><h3 class=\"ugb-blog-posts__title\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/css\/css-games\/\">CSS Games<\/a><\/h3><div class=\"ugb-blog-posts__excerpt\"><p>CSS Diner: Selectors Game Play Game: https:\/\/flukeout.github.io\/ This is a web game that requires you to write CSS Selectors. It&#8217;s a fun way to test your knowledge of writing selectors&#8230;<\/div><p class=\"ugb-blog-posts__readmore\"><a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/css\/css-games\/\">Continue reading<\/a><\/p><\/div><\/article><\/div><\/div><\/div>\n\n\n\n<div class=\"alignfull wp-block-ugb-container ugb-container ugb-3e28637 ugb-container--v2 ugb-container--design-basic ugb-main-block ugb-main-block--inner-full ugb--has-block-background ugb--has-top-separator\"><style>.ugb-3e28637-wrapper.ugb-container__wrapper{background-color:#000000 !important}.ugb-3e28637-wrapper.ugb-container__wrapper:before{background-color:#000000 !important}.ugb-3e28637 h1,.ugb-3e28637 h2,.ugb-3e28637 h3,.ugb-3e28637 h4,.ugb-3e28637 h5,.ugb-3e28637 h6{color:#FFFFFF}.ugb-3e28637 p,.ugb-3e28637 li,.ugb-3e28637 label,.ugb-3e28637 table{color:#FFFFFF}.ugb-3e28637-content-wrapper > h1,.ugb-3e28637-content-wrapper > h2,.ugb-3e28637-content-wrapper > h3,.ugb-3e28637-content-wrapper > h4,.ugb-3e28637-content-wrapper > h5,.ugb-3e28637-content-wrapper > h6{color:#FFFFFF}.ugb-3e28637-content-wrapper > p,.ugb-3e28637-content-wrapper > ol li,.ugb-3e28637-content-wrapper > ul li{color:#FFFFFF}.ugb-3e28637.ugb-container{background-color:#000000}.ugb-3e28637.ugb-container:before{background-color:#000000}.ugb-3e28637 .ugb-top-separator svg{fill:#D1DFE4}.ugb-3e28637 a,.ugb-3e28637 a:visited,.ugb-3e28637 a:focus{color:#ffffff}<\/style><div class=\"ugb-top-separator\"><div class=\"ugb-separator-wrapper\"><svg viewbox=\"0 0 1600 200\" filter=\"url(#curve-2-shadow_svg__a)\" enablebackground=\"new 0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-separator__shadow\" preserveaspectratio=\"none\" aria-hidden=\"true\"><filter id=\"curve-2-shadow_svg__a\"><feGaussianBlur in=\"SourceAlpha\" stddeviation=\"4\"><\/feGaussianBlur><feComponentTransfer><feFuncA type=\"linear\" slope=\"0.4\"><\/feFuncA><\/feComponentTransfer><feMerge><feMergeNode><\/feMergeNode><feMergeNode in=\"SourceGraphic\"><\/feMergeNode><\/feMerge><\/filter><path class=\"curve-2-shadow_svg__st2\" d=\"M1138.3 36.2c246.1 0 412 130.1 458.4 171.4h13.3S1430.8 23.8 1138.3 23.8C884 23.8 172 156.9-10 197.9v9.7H2.2C201.7 163.7 889.3 36.2 1138.3 36.2z\"><\/path><\/svg><svg viewbox=\"0 0 1600 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-separator__layer-1\" preserveaspectratio=\"none\" aria-hidden=\"true\"><path class=\"curve-2_svg__st2\" d=\"M-10 207.6h1620S1430.8 23.8 1138.3 23.8C884 23.8 234.9 140.1-10 197.9v9.7z\"><\/path><\/svg><\/div><\/div><div class=\"ugb-inner-block ugb-inner-block--full\"><div class=\"ugb-block-content\"><div class=\"ugb-container__wrapper ugb-3e28637-wrapper\"><div class=\"ugb-container__side\"><div class=\"ugb-container__content-wrapper ugb-3e28637-content-wrapper\">\n<div class=\"wp-block-ugb-heading alignfull ugb-heading ugb-360f736 ugb-main-block\"><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><h2 class=\"ugb-heading__title\">Resources<\/h2><p class=\"ugb-heading__subtitle\">These HTML resources are grouped into areas. Some are direct links to resources while others are links to posts on this site.<\/p><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-accordion ugb-accordion ugb-0ddfbc1 ugb-accordion--v2 ugb-accordion--design-basic ugb-main-block\" aria-expanded=\"false\"><style>.ugb-0ddfbc1 .ugb-accordion__title{color:#000000}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-accordion__item\"><div class=\"ugb-accordion__heading\" role=\"button\" tabindex=\"0\"><h3 class=\"ugb-accordion__title\">HTML Learning Resources<\/h3><svg viewbox=\"0 0 20 20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-accordion__arrow\" width=\"20\" height=\"20\"><path d=\"M16.7 3.3L10 10 3.3 3.4 0 6.7l10 10v-.1l10-9.9z\"><\/path><\/svg><\/div><div class=\"ugb-accordion__content\" role=\"region\"><div class=\"ugb-accordion__content-inner\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>These are resources (videos and articles mostly) about various aspects of HTML. For videos from password protected sites like LinkedIn Learning, a note has been made.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Prof Stein&#8217;s HTML Fundamentals Videos<\/h4>\n\n\n\n<p>This is a series of videos I made showing the fundamentals of HTML and how to write it. <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/html\/html-fundamentals-videos\/\" data-type=\"post\" data-id=\"526\">View Post<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Introduction_to_HTML\" target=\"_blank\">MDN&#8217;s Introductory Guides to HTML<\/a><\/h4>\n\n\n\n<p>This is a series of guides that go over the basic and important concepts and syntax of HTML. Some examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Introduction_to_HTML\/Getting_started\" target=\"_blank\" rel=\"noreferrer noopener\">Getting started with HTML<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Introduction_to_HTML\/HTML_text_fundamentals\" target=\"_blank\" rel=\"noreferrer noopener\">HTML text fundamentals<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Introduction_to_HTML\/Document_and_website_structure\" target=\"_blank\" rel=\"noreferrer noopener\">Document and website structure<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Introduction_to_HTML\/Debugging_HTML\" target=\"_blank\" rel=\"noreferrer noopener\">Debugging HTML<\/a><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">HTML Essential Training<\/h4>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.linkedin.com\/learning\/html-essential-training-4\/\" target=\"_blank\">View Course<\/a>&nbsp;(LinkedIn Learning sign on required)<br>This is a LinkedIn Learning Course by Jen Simmons who is one of the leading HTML and CSS Advocates. This course goes over everything in HTML. Most likely you will not go through the whole course. You can jump in to sections that you need to refresh. Also, this course has a quiz at the end of each chapter so this is another way that you can test your knowledge. If you get a question wrong it suggests videos to watch.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Article On When To Use HTML5 Elements<\/h4>\n\n\n\n<p>Ken Bellows\u2019s&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/dev.to\/kenbellows\/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i\" target=\"_blank\">Stop using so many divs! An intro to semantic HTML<\/a>&nbsp;article. This explains when to use the most common sectioning elements (page structure).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Interactive Online Presentation On HTML, CSS And JavaScript<\/h4>\n\n\n\n<p>Lea Verou\u2019s&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/projects.verou.me\/talks\/intro\" target=\"_blank\">Introduction to Modern Web Technologies<\/a>&nbsp;It\u2019s long but interactive. It covers HTML, CSS and JS. Don\u2019t go all through at once.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-accordion ugb-accordion ugb-669da82 ugb-accordion--v2 ugb-accordion--design-basic ugb-main-block\" aria-expanded=\"false\"><style>.ugb-669da82 .ugb-accordion__title{color:#000000}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-accordion__item\"><div class=\"ugb-accordion__heading\" role=\"button\" tabindex=\"0\"><h3 class=\"ugb-accordion__title\">Reference Sites<\/h3><svg viewbox=\"0 0 20 20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-accordion__arrow\" width=\"20\" height=\"20\"><path d=\"M16.7 3.3L10 10 3.3 3.4 0 6.7l10 10v-.1l10-9.9z\"><\/path><\/svg><\/div><div class=\"ugb-accordion__content\" role=\"region\"><div class=\"ugb-accordion__content-inner\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>These sites have reference materials you can use to look up terms and techniques. MDN stands for the Mozilla Developer Network. Mozilla makes Firefox and MDN is one of the most trusted resources.<\/p>\n\n\n\n<div class=\"wp-block-ugb-icon-list ugb-icon-list ugb-2cd07ba ugb-icon-list--v2 ugb-main-block\"><style>.ugb-2cd07ba li::before{background-image:url('data:image\/svg+xml;base64,PHN2ZyBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImV4dGVybmFsLWxpbmstYWx0IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtZXh0ZXJuYWwtbGluay1hbHQgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDogI0ZGRkZGRiAhaW1wb3J0YW50OyBjb2xvcjogI0ZGRkZGRiAhaW1wb3J0YW50Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDMyLDMyMEg0MDBhMTYsMTYsMCwwLDAtMTYsMTZWNDQ4SDY0VjEyOEgyMDhhMTYsMTYsMCwwLDAsMTYtMTZWODBhMTYsMTYsMCwwLDAtMTYtMTZINDhBNDgsNDgsMCwwLDAsMCwxMTJWNDY0YTQ4LDQ4LDAsMCwwLDQ4LDQ4SDQwMGE0OCw0OCwwLDAsMCw0OC00OFYzMzZBMTYsMTYsMCwwLDAsNDMyLDMyMFpNNDg4LDBoLTEyOGMtMjEuMzcsMC0zMi4wNSwyNS45MS0xNyw0MWwzNS43MywzNS43M0wxMzUsMzIwLjM3YTI0LDI0LDAsMCwwLDAsMzRMMTU3LjY3LDM3N2EyNCwyNCwwLDAsMCwzNCwwTDQzNS4yOCwxMzMuMzIsNDcxLDE2OWMxNSwxNSw0MSw0LjUsNDEtMTdWMjRBMjQsMjQsMCwwLDAsNDg4LDBaIiBzdHJva2U9IiNGRkZGRkYiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7IHN0cm9rZTogcmdiKDI1NSwgMjU1LCAyNTUpOyIvPjwvc3ZnPg==')}.ugb-2cd07ba.ugb-icon-list ul{columns:2}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\" target=\"_blank\">MDN HTML main page<\/a><\/li><li>MDN: <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\" target=\"_blank\">HTML Element Reference<\/a><\/li><li><a href=\"http:\/\/* https:\/\/websitesetup.org\/html5-periodical-table\/\" target=\"_blank\" rel=\"noreferrer noopener\">Periodic Table of HTML Elements<\/a><\/li><\/ul><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-accordion ugb-accordion ugb-4caf26a ugb-accordion--v2 ugb-accordion--design-basic ugb-main-block\" aria-expanded=\"false\"><style>.ugb-4caf26a .ugb-accordion__title{color:#000000}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-accordion__item\"><div class=\"ugb-accordion__heading\" role=\"button\" tabindex=\"0\"><h3 class=\"ugb-accordion__title\">Try it Out<\/h3><svg viewbox=\"0 0 20 20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ugb-accordion__arrow\" width=\"20\" height=\"20\"><path d=\"M16.7 3.3L10 10 3.3 3.4 0 6.7l10 10v-.1l10-9.9z\"><\/path><\/svg><\/div><div class=\"ugb-accordion__content\" role=\"region\"><div class=\"ugb-accordion__content-inner\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>These sites allow you to quickly try out HTML.<\/p>\n\n\n\n<div class=\"wp-block-ugb-icon-list ugb-icon-list ugb-4603c3c ugb-icon-list--v2 ugb-main-block\"><style>.ugb-4603c3c li::before{background-image:url('data:image\/svg+xml;base64,PHN2ZyBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImV4dGVybmFsLWxpbmstYWx0IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtZXh0ZXJuYWwtbGluay1hbHQgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDogI0ZGRkZGRiAhaW1wb3J0YW50OyBjb2xvcjogI0ZGRkZGRiAhaW1wb3J0YW50Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDMyLDMyMEg0MDBhMTYsMTYsMCwwLDAtMTYsMTZWNDQ4SDY0VjEyOEgyMDhhMTYsMTYsMCwwLDAsMTYtMTZWODBhMTYsMTYsMCwwLDAtMTYtMTZINDhBNDgsNDgsMCwwLDAsMCwxMTJWNDY0YTQ4LDQ4LDAsMCwwLDQ4LDQ4SDQwMGE0OCw0OCwwLDAsMCw0OC00OFYzMzZBMTYsMTYsMCwwLDAsNDMyLDMyMFpNNDg4LDBoLTEyOGMtMjEuMzcsMC0zMi4wNSwyNS45MS0xNyw0MWwzNS43MywzNS43M0wxMzUsMzIwLjM3YTI0LDI0LDAsMCwwLDAsMzRMMTU3LjY3LDM3N2EyNCwyNCwwLDAsMCwzNCwwTDQzNS4yOCwxMzMuMzIsNDcxLDE2OWMxNSwxNSw0MSw0LjUsNDEtMTdWMjRBMjQsMjQsMCwwLDAsNDg4LDBaIiBzdHJva2U9IiNGRkZGRkYiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7IHN0cm9rZTogcmdiKDI1NSwgMjU1LCAyNTUpOyIvPjwvc3ZnPg==')}.ugb-4603c3c.ugb-icon-list ul{columns:2}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\" target=\"_blank\">CodePen<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/glitch.com\/edit\" target=\"_blank\">Glitch<\/a><\/li><\/ul><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Intro CSS is how we create the visual design of our web sites. CSS Posts Below are the last six posts on our class site related to CSS. Click here to view all CSS Posts. Responsive Navigation There are a large number of ways to do responsive navigation.&nbsp; This page contains three examples from CodePen&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/foundational\/css\/\">Continue reading <span class=\"screen-reader-text\">CSS<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":1574,"parent":392,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"coauthors":[87],"class_list":["post-1715","page","type-page","status-publish","has-post-thumbnail","hentry","entry"],"featured_image_urls_v2":{"full":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash.jpg",2048,1152,false],"thumbnail":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-150x150.jpg",150,150,true],"medium":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-300x169.jpg",300,169,true],"medium_large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-768x432.jpg",750,422,true],"large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-1024x576.jpg",750,422,true],"1536x1536":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-1536x864.jpg",1536,864,true],"2048x2048":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash.jpg",2048,1152,false],"post-thumbnail":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-1568x882.jpg",1568,882,true],"gform-image-choice-sm":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash.jpg",300,169,false],"gform-image-choice-md":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash.jpg",400,225,false],"gform-image-choice-lg":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash.jpg",600,338,false]},"post_excerpt_stackable_v2":"<p>Intro CSS is how we create the visual design of our web sites. CSS PostsBelow are the last six posts on our class site related to CSS. Click here to view all CSS Posts.Responsive NavigationThere are a large number of ways to do responsive navigation.&nbsp; This page contains three examples from CodePen and then links to some sites that offer navigation examples that you&#8230;Continue readingMedia QueriesIn order to have a fully responsive web page you need three things: Fluid Layout: the width of the layout is set in fluid units like percent or fr units&#8230;.Continue readingCSS GridCSS Grid is relatively&hellip;<\/p>\n","category_list_v2":"","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":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash.jpg",2048,1152,false],"thumbnail":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-150x150.jpg",150,150,true],"medium":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-300x169.jpg",300,169,true],"medium_large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-768x432.jpg",750,422,true],"large":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-1024x576.jpg",750,422,true],"1536x1536":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-1536x864.jpg",1536,864,true],"2048x2048":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash.jpg",2048,1152,false],"post-thumbnail":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash-1568x882.jpg",1568,882,true],"gform-image-choice-sm":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash.jpg",300,169,false],"gform-image-choice-md":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash.jpg",400,225,false],"gform-image-choice-lg":["https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/08\/jackson-so-_t-l5FFH8VA-unsplash.jpg",600,338,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":"Intro CSS is how we create the visual design of our web sites. CSS Posts Below are the last six posts on our class site related to CSS. Click here to view all CSS Posts. Responsive Navigation There are a large number of ways to do responsive navigation.&nbsp; This page contains three examples from CodePen&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/pages\/1715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/types\/page"}],"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=1715"}],"version-history":[{"count":1,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/pages\/1715\/revisions"}],"predecessor-version":[{"id":1722,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/pages\/1715\/revisions\/1722"}],"up":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/pages\/392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/media\/1574"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/media?parent=1715"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/coauthors?post=1715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}