Week 4 – Individual Meetings, CSS Positioning Intro, Uploading our Work to GitHub
We’re going to have individual meetings today. I’d like to see your typographic explorations from last week and help you get started with programming your website.
While I’m meeting with everyone, you’ll read the notes below and work on your project. Feel free to work on the activities in small groups. When it’s your turn, please join our Zoom room. It’s possible some of the meetings might go over or end earlier, so feel free to join a minute in advance and hang out until it’s your turn.
Meeting Order
Rachel L. – 9:10
Dhriti – 9:18
Marika – 9:26
Jas – 9:34
Lindsay – 9:42
Kexuan – 9:50
Josh – 9:58
Val – 10:06
Hugo – 10:14
Natalie – 10:22
Oluschi – 10:30
Annie – 10:38
Jillian – 10:46
Rachel P. – 10:54
Raquel – 11:02
Annabelle – 11:10
Michelle – 11:18
Agathe – 11:26
Read through these notes and do the practice activities. We’ll look at The Box Model and Flexbox as a class again later in the semester, but it’s important to begin experimenting and learning independently. Feel free to work on the practice activities as pairs or small groups!
The last step(Uploading Your Work to GitHub) includes instructions on how to upload your finished interview project and get a link.
Review Typography Activity
Compare your code to mine and evaluate the differences in HTML structure and CSS:
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
Read through these notes and do the practice activities. We’ll look at The Box Model and Flexbox as a class again later in the semester, but it’s important to begin experimenting and learning independently. Feel free to work on the practice activities as pairs or small groups!
Review Typography Activity
The Box Model