Penn Week 4 – Individual Meetings and Independent Work Day
We are not meeting as a group today.
At the start of class, please share your project progress(sketches and code) in your slack channel. You should zip your entire project directory(must include index.html and assets folder) or put it up on glitch, and share your 3 sketches in the Slack channel with your name on it.
I’m going to review your project – both the design and the code. If you have specific questions, make sure to note them.
If you would like to meet via Zoom, please let me know in your channel and we can do that! I’m going to review your projects in reverse alphabetical order but if you’d like to meet via Zoom, let me know so we can do that first.
👉 While I’m reviewing your work, please review the following notes and then continue working on your project.
The last set of notes explains how you’ll upload your project and get a url. Prioritize doing this in advance of Monday in case you run into any issues!
The Box Model
All HTML elements can be considered as boxes. In CSS, the term“box model” is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
Box Model
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
If you’re ever confused about how this is working on your website, you can see an example of it in the dev tools. Open up the inspector and scroll to the bottom, you should be able to see the below, where you can hover over each item.
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
Positioning with Basic CSS
Here are some basic principles.
When you’re creating CSS layouts, you’ll often position things with one of 5 terms:
We are not meeting as a group today.
👉 While I’m reviewing your work, please review the following notes and then continue working on your project.
The last set of notes explains how you’ll upload your project and get a url. Prioritize doing this in advance of Monday in case you run into any issues!
The Box Model
Positioning with Basic CSS
div {position: static;}<!DOCTYPE html><html><head> <link rel="stylesheet" href="assets/css/main.css"></head>