Day 02 : May 27, 2015

Today we covered

HTML & CSS basics, continued

• Display Elements: Block versus Inline elements

• Commonly used units in CSS
• Why we use reset.css and Normalize, and their differences
• CSS almanac, by Chris Coyier
• Good practices: Classes and ids.
• Box model
• CSS margin property reference
• CSS padding property reference
• CSS border property reference
• CSS height property reference
• CSS class selector reference
• Margin: 0 auto; to center block elements if we add a width or max-width
• Why it’s important to create parent elements to move elements in a group

Review:

• HTML head tag reference
• Meta tags
• HTML header tag reference
• HTML div tag reference
• HTML section tag reference
• HTML footer tag reference

CodePens from class

• Floating example
• Floating example with clear-ing example

• Check out Casie’s codepen experiment

• Paragraph with image example

Third party services

• Sign up for Github Account
• Use your GH account to sign up for CodePen
• The use of ‘fork’, ‘save’, and working ‘open source’

Homework

Everyday a bit of written, audio, or video resources will be assigned to review, which will supplement class assignments. Assignments are always due by 8:00am of the following day, unless noted.

Supplemental Resources

• Aaron’s notes from the front-end class on the Box model
• Complete all the steps of LearnLayout
• CSS centering Watch Using CodePen, by Chris Coyier (video)

Assignments

• Create a 5 separate CodePens to show in class tomorrow that experiments with the box model after reading Box model. Save the pen to your own accounts, and fork every time you start a new one.

1. On the first one,

   • create a ‘container’ div that is 960px width at maximum and 90% of the screen at any size below that. Make it center, and make sure everything else you add is added INSIDE the ‘container’
   • create a div called ‘left-col’ and a div called ‘right-col’ that both have a minimum height of 200px and a width of 50%.
   • Float the ‘left-col’ to the left, make the background #9DBA7A.
   • Float the ‘right-col’ to the right, make the background #62A265.
   • Save pen, and copy the link somewhere else.

2. Start new pen, by forking the first one.

   • after forking, add another div called ‘main’ to the next line and make it’s height the same as the other divs.
   • Make the background #2A867B
   • Below ‘main’, add another ‘left-col’ and ‘right-col’
   • On the next line, add three equally spaced divs called ‘thirds’, with that all float left, with a margin of 2% on both sides of the middle div. Each ‘third’ should be 100px tall and have a background that is #2B3074.
   • Save pen, and copy the link somewhere else.

3. Start new pen, by forking the second one.

   • Clear the last ‘third’, so its on the next line, and add one more div with a 2% margin in between the third and a fourth ‘third’.
   • Save pen, and copy the link somewhere else.

4. Fork the third pen, and do the following:

   • add another row of thirds, that do not float up onto the next line.
   • You should end up with 2 on the first row, two on the second, and three on the third.
   • Add another ‘main’ div.
   • Save pen, and copy the link somewhere else.
5. Fork the fourth pen, and do the following:
   • Change all floats to float to the right, and also any clears.
   • Save pen, and copy the link somewhere else.
6. Send Sam an email with the subject line “Day 02: Homework” with all 5 links listed and numbered.

Extra Reading

• Breaking Stuff, by Laura Kalbag
• Nine pillars of successful web teams, by Jesse James Garrett