Week 2 Day 3 - February 12, 2025

CSS - The Box Model and Animations

Today we focused on the box model. We learned that there is the box model and an alternate way to measure the elements in the box model. The box model consists of the content, padding, border, and margin. .box has a margin that adds additional size but .border-box encompasses more. Inline allows the blocks to line up. If both blocks have inline they will line up with each other. Certain elements default to block like h1 and p while other elements default to inline, like span.

We also looked at using the developer tools to find the sizes of the different elements in the box model and making webpages responsive, meaning that the webpage adjusts to different screen sizes.

We also looked at media queries, the grid, and animations. It all culminated into some pretty awesome visuals in CSS.