CSS Properties & Flexbox

Joel Ross
Winter 2023

View of the Day

Admin Stuff
Q & A (PollEv)
Quick Fonts Demo (code together!)
CSS Layouts (PollEv)
Flexbox Demo (code together!)

Project Proposal

Telling us what you're going to build!

What are the interactive features (what does it do)?
Written as simple web page (HTML & CSS)
All group members need to commit changes
Peer Feedback (though Feedback Fruits)
- How did your teammates help you learn?
- How did your teammates communicate/manage work?
- NOT about how much code someone wrote!
- I plan to release the ("anonymous") comments afterwards

https://canvas.uw.edu/courses/1613255/assignments/7901573

https://bit.ly/informatics-tutor-info

START WORKING ON
PROBLEM SET 03 EARLY!

It's a bigger problem set (3 problems!) and will take you longer than the previous one. Don't put it off and fall behind! Start tonight!

Updating Lecture Code

# switch to starter branch to get new starter code
git checkout starter

# download new starter code
git pull

# switch back to main branch for coding
git checkout main

# merge in new starter code (use default msg)
git merge starter --no-edit

# code and enjoy!

Get the starter code from the starter branch, but do all of your work on main.

Q&A / "Review" Poll

https://pollev.com/joelross

https://fonts.google.com/

It is also possible to specify an online font that the browser will download and display.

Fonts

Fonts are installed "per computer", so not every computer has the same fonts (which is why you set a default with font-family).

p {
  font-family: 'Helvetica', 'Arial', sans-serif;
}

Use this font

If first isn't available,
use this

If nothing else,
use this style of font-face

Font Units

All browsers have a "default" font size--generally 16px. We use relative font sizing in case of variations.

Note that units are "measurement units" (think: inches)

em	relative to the parent font size	By default 2em = 32px But if the parent's font-size was 20px, then 2em = 40px
rem	relative to the root (body's) font size of 16px	2rem = 32px usually
%	relative to parent font size or dimension, can use for width or height	if parent width is 300px, then 50% = 150px
px	absolute measurement (do not use for fonts)	16px = 16px

Inline vs. Block

You can use the display property to set whether an element is block or inline (or something else).
Choose elements based on semantics, not appearance!

AVOID USING
float AND position PROPERTIES!

Box Model

Apply spacing to elements by manipulating the size of their "box".

Demo: Flexbox

Action Items!

Read: through Chapter 8
Project Proposal due Friday!!
Problem Set 03 due next week
- GET STARTED TONIGHT!

Next: Responsive Design & Media Queries

info340wi23-css-flexbox

By Joel Ross

CSS Properties & Flexbox

Joel Ross Winter 2023

View of the Day

Admin Stuff

Q & A (PollEv)

Quick Fonts Demo (code together!)

CSS Layouts (PollEv)

Flexbox Demo (code together!)