MS1 Interactive Video Call:

Week of 3/29

Review Challenges

Make a website where the very top is a dark color with light colored text. The top should take up 100px and have a large title that is centered.

If you finish, make a body with a picture and then text to the right of the picture that explains what the picture is. The text should be right aligned and dark gray. The background should be white.

Agenda

• Introduction and Updates

• The Box Model: Margins, Border, and Padding

• Box Model Challenges: Recreate

• Wrap up

Box Model

Border: Space lining the outside of the object

Margin: Space outside of an object

Padding: Space inside of an object

Another Visualization

Margin and Padding reading from top and then clockwise.  So the code below would put 5px of space above an object, 10px of space to the right of an object, 15px below, and 20 to the left.

Recreate the following artifact in your code editor. There are three values associated with the "border" property. What do they do? 

Add the following script to your program:

h1{
    padding: 75px 50px 100px 20px;
}

How does it change your artifact?

Recreate the image below:

What do you need to incorporate to accomplish this?

Recreation Challenge

Wrap Up