{"id":241,"date":"2019-09-09T14:27:00","date_gmt":"2019-09-09T14:27:00","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/?p=241"},"modified":"2019-11-27T03:48:47","modified_gmt":"2019-11-27T03:48:47","slug":"class-4-css-fundamentals","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/09\/09\/class-4-css-fundamentals\/","title":{"rendered":"Class 4: CSS Fundamentals and HTML Sectioning"},"content":{"rendered":"\n

Files From Class: <\/strong><\/p>\n\n\n\n

DOWNLOAD: <\/strong>Here are the files we created in class based on our sketch: https:\/\/www.dropbox.com\/s\/q5n75j2ffp1bxxp\/Bonobos-inClass-9.9.19.zip?dl=0<\/a>
Wireframe Sketch: <\/strong>here is a pic of the wireframe from the board. I converted it to a PDF. https:\/\/www.dropbox.com\/s\/vpsbsbs5mvhzvnw\/Bonobos-Wireframe-Sketch-.pdf?dl=0<\/a> <\/p>\n\n\n\n

For the homework you would upload two files like these, the HTML and a Sketch to the Assignment in Blackboard.<\/p>\n\n\n\n

\n\n\n\n

Today we will recap what we worked on Thursday and then move into the basics of CSS.<\/p>\n\n\n\n

Wireframe and HTML Section Elements<\/h3>\n\n\n\n

We are going to start by sketching out the main sections of this web page: https:\/\/bonobos.com\/<\/a><\/p>\n\n\n\n

I chose it because it is relatively straightforward and will be relatively easy to write HTML and CSS for. However, you should note that the actual markup of the page is an example of what I do NOT want you to do. They use divs for all of the major page sectioning elements.<\/p>\n\n\n\n

Instead we are going to use the HTML5 elements. For a good article on this issue and picking out the elements you should use read this: Stop Using So Many Divs: An intro to Semantic HTML<\/a><\/p>\n\n\n\n

Wireframe Sketch<\/h3>\n\n\n\n

As a class we will sketch out the page<\/p>\n\n\n\n

HTML Sectioning Elements<\/h3>\n\n\n\n

We will go through the following:<\/p>\n\n\n\n

  1. Basic Web Page:<\/strong> All of the basic elements you need before starting the content. We will see how to get this started with a simple Emmet extension ( type ! then tab on a blank page). Note: there are some other elements we will need to add to this.<\/li>
  2. Basic Page Elements:<\/strong>
    1. Header <header><\/header><\/li>
    2. Main <main><\/header><\/li>
    3. Footer <footer><\/footer> <\/li><\/ol><\/li>
    4. Other Sectioning and Grouping Elements:<\/strong> div, section, article, aside, nav<\/li><\/ol>\n\n\n\n

      CSS Fundamentals<\/h3>\n\n\n\n

      We will go through the basics of CSS and use:<\/p>\n\n\n\n