Starting CSS:
The Box Model
Starting CSS:
The Box Model
Embedded Files
The Box Model
Today's Goal
Today's Goal
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
Typing Practice
Typing Practice
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.
Box Model, Conceptually
Box Model, Conceptually
What is the box model?
Let's find out.
box-model-theory.mp4Task, p1
Task, p1
On your slide for today, in your own words, explain what the box model is.
Box Model, with code
Box Model, with code
Let's see how we can better understand the box model through working with a bit of HTML and CSS.
Task, p2
Task, p2
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.
box-css-code.mp4Box Model, weird stuff
Box Model, weird stuff
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.
border-box-end.mp4Task, p3
Task, p3
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.
Page updated
Report abuse