Starting CSS:
The Box Model
The Box Model
Learn about the Box Model,
then style some boxes.
Completed
Basics of HTML
Starting Project Research
Revisiting Portfolios
Quiz
Basics of CSS; inline, internal, external
Today
Basics of CSS:
The Box Model
Upcoming
Survey
Block-based Programming
Start with typing:
https://shaunwegs.github.io/2024/focs/typing/index.html
Add you screenshot to your slide for today, and keep your typing log updated.
What is the box model?
Let's find out.
On your slide for today, in your own words, explain what the box model is.
Let's see how we can better understand the box model through working with a bit of HTML and CSS.
With HTML and CSS, style a 'box' using a div tag. Take a screenshot showing your box and the CSS used to create it.
He's going to do this in an external style sheet, you can use an internal style sheet if you prefer.
Keep in mind that HTML started around 1990. Keep in mind that CSS didn't start until the mid 90's, and that many designers were resistant to using it until after 2000. These languages developed over years over time, partially in response to how it was used. As such, HTML and CSS is a bit inconsistent at times. Let's hear a bit about some of the weird aspects.
With HTML and CSS, style a new box using a div tag. play with box sizing; show me how your box differs when switching the box sizing property. Do this by using either a video, or multiple screenshots. Either way is fine.
Explain how this change affects the box.