Box Model lesson for GA WDI OC

BoxModel.md

Positioning the Web with the Box Model

Objectives

• Explain how marigin, border, padding, and content relate to one another in the box model
• Describe the difference between block, inline, and inline-block elements
• Create a page with multicolumn layout
• Explain the difference between and use cases of static, relative, absolute, and fixed positioning

Plan

• Instructor Lead: I Do – 10 minutes
• Formative Assessment- 10 minutes
• Instructor lead: I Do-5 minutes
• Formative Assessment: We do-5 minutes
• Instructor lead: I Do-5 minutes
• Formative Assessment: We do-5 minutes
• Group Activity (Pair the students up): We do- 30 minutes
• Debrief: 5 minutes
• Summative Assessment- You do- Lab/HW

I Do – 10 minutes

• Have brief mini lecture on CSS Selectors and how they interact with the DOM
• Have a discussion about overcoming an obstacle with this, and use it to show what it takes to learn programming
• Have open floor for students to ask anything they are not comforatble with
• Have code-along: create html file, add html elements (blocks), add external stylesheet, show inline styles, chrome dev tools

Formative Assessment - 10 minutes

• ask students to pair up (we have 11 students, so 4 groups of 2, and 1 group of 3)
• have them explain in groups about everything step you have to take to set up a web page (html, css, links, structure)
• ask students to thumbs up/down for understanding on steps to get a web page live

I Do - 10 Minutes

Box Model

• open web page in browser (file:// format, open attached folder) and change the border color to red
• explain how all of the web is made of boxes, and how everything can be expressed as container/row/column across a page

CFU Thumbs

• examples of webpage structure

Live Example

• open code from the example on the page
• re-arrange boxes and change the colors of the individual boxes

Components

• Demonstrate margin, border, padding, content, box-sizing

Formative Assessment - 5 mins

• have class work on all components of box model. from starter code to working model
• Margins: all values for a single margin property works like a box: Toppx Rightpx Bottompx Leftpx;
• Borders: explore different colors, patterns, and thickness.
• Padding: explore negative values on the page.
• Height, Width, and Box-Sizing: adjust the shape of your box.

I do - 5 mins

• Show them display property, float, clear and Positioning

Formative Assessment - 5 mins

• notice what happens when you change width, height, margin, and padding for inline, block, and inline-block elements in html file
• Take 5 minutes to alter these in the Chrome Dev Tools

We do - Group Activity 30 mins

• pair students up (4 groups of 2, 1 of 3)
• In the html file you just created add a simple container div containing a single line of text

<div id="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

• set up the styling of the body and the container div, play around with the p element, set the margin(remember top, bottom,right,left), padding(same as margin TBRL).
• set the p element to be white, and margin to be red.

/* my copy, not students */

body { background: black; }

#container {
    background: gray; 
    width: 600px; 
    margin: 0px auto; 
    border: 1px solid black;
}

p { 
    background: white;
    border: 20px solid red; 
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

Talking points

• Note that we specify the top, bottom, left, and right margin and padding values separately in this example.
• This is one way to specify these values, and similar border-top (and so on) settings are available for the border.
• This allows you to clearly set any or all border, margin, and padding settings that you need.

/* For example, this is completely acceptable if you only want to specify the top and right margins: */ 
margin-top: 30px;
margin-right: 8px;

Mini-Formative Assessment

• condense everything written above into shorthand syntax
• explain shorthand vs long-form pros/cons

border: 20px solid red;
margin: 0 0 0 0;
padding: 0 0 0 0;
/* important thing to remember is: */
margin: [top] [right] [bottom] [left]

Talking points

• You have to give all four values, using 0 to indicate no margin or padding in that direction.
• Any legal CSS unit can be used, though these properties are typically set in %, px, or em values. We will learn more about this as we move along.
• back to pairing, finish assignment/lab

<!-- nested elements 
Here is the how you can add some more elements -->
<div id="container">
    <div id="none">Lorem ipsum dolor sit amet....</div>
    <div id="margin">Ut enim ad minim veniam....</div>
    <div id="padding">Duis aute irure dolor....</div>
    ...
</div>

• play around with this
• see how you can add margin, border and padding to these
• remember CSS shorthand

/* my copy */
#none {
    border: 1px solid red; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0;
}

#margin {
    border: 1px solid red; 
    margin: 20px 20px 20px 20px; 
    padding: 0 0 0 0;
}

#padding {
    border: none; 
    margin: 0 0 0 0; 
    padding: 20px 20px 20px 20px;
}    

#marginpadding {
    border: none; 
    margin: 20px 20px 20px 20px;
    padding: 20px 20px 20px 20px;
}

#marginborderpadding {
    border: 20px solid red; 
    margin: 20px 20px 20px 20px; 
    padding: 20px 20px 20px 20px;
}

Thumbs

• up/down for overall feeling on this topic (open discussion about any concerns)

Debrief and Sum Assessment + HW - 10 mins

• today we learned a fundamental building block of HTML/CSS -> the box model.
• ask someone to explain what the box model is, or call on someone
• explain different components

Sum Assessment + HW

• Puplove Profiles (this lesson feeds right into lab)