teaching machines

CS 347: Lecture 4 – Box Model

September 3, 2020 by Chris Johnson. Filed under fall-2020, lectures, webdev.

Dear students:

The CSS layout algorithm treats all our information as a set of boxes. In this lecture, we explore how we can influence the size and spacing of our boxes to produce user interfaces that cohere.

Here’s your TODO list:

• Watch Layers of the Box Model, in which we introduce the box model of CSS, focusing on the outer layers of margin, border, and padding.
• Watch Core of the Box Model, in which we examine the content box that the outer layers surround.
• Watch Block vs. Inline, in which we discuss the differences between block and inline elements and find a happy medium.
• Watch Monocolumn UI Pattern, in which we apply knowledge of the box model to produce a single column layout.
• Watch Forecast Cards, in which we apply knowledge of the box model to build a horizontal card display.
• Watch Haiku, in which we take a poetic aside.
• Read chapter 6 of Client-side Web Development.
• Play CSS Diner.
• Post any questions and comments you have regarding the videos and readings on the course Slack.

See you next time.

Sincerely,