Week 6, Basic Layouts using CSS

Learning Outcomes

After this week you should be able to

• Describe the box model
• Describe how the browser paints the page
• Describe 'flex' model

06.01

Pre-class Reading

Read up to and including the 'display property' section
- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction

Class Slides

• Week 6.1 Slides

Group Activity / Lab

• Implement the grid system template in the labs folder
• Post-class update: You can find David's solution:
  • On GitHub pages: planets-inlineBlock.html
  • In the class repo at /schedule/week-06/01/labs/planets-inlineBlock.html

Post-class Reading

Review these HTML files in the week-06/01/ folder:

• Summary.html
• Flex-box.html

06.02

Pre-class Reading

• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Group Activity / Lab

• Implement the planets template from last class, but this time use flexbox.
• Refer to this file 02/labs/planets.html and the style.css.

No Slides for This Class

Instead we'll work with this page and our prereading, then transition to lab work:
https://ist263-talley.github.io/fall2019-m01/schedule/week-06/02/flexbox.html

Project Deliverable: Wireframes

Due Sunday, October 6, 2019, 11:59pm

These are the project blue prints. You will use these as guides to implement the web pages. There are vast number of tools you can use to create wireframes. We will talk more about wireframes during class starting around Week 4. If you need inspiration try the following sites:

• dribbble.com
• awwwards.com

Refer to the Individual Project page for background information.