November 16th – November 20th
Class hours: 9:40 – 2:05
Mr. Bohmann | wbohmann@ewsd.org
9:40 Attendance & Notes
- Week Eleven, Go make a folder!
- No School next week – Thanksgiving!
- Remote Link for today (if you are not here) – Google Meets
9:45 CSS
Follow this Socrative link and we’ll do a little CSS review together.
CodePen Practice: Let’s take a look at the handout (Cinnamon Raisin Rye Bagel). I’ve started a version in CodePen. Together, we’ll write the HTML and CSS necessary to mimic the handout. This will be a good review from last week. We’ll learn:
- adding classes
- using empty elements
- proper semantic html layout
- importing / using custom fonts
- floats
- margin / padding
- css
10:25 Mask Break
10:35 Academics
11:25 Lunch
12:00 CSS Layouts – Flexbox & Flexbox Containers, revisited
CSS flexbox (also referred to as flexible box) provides control over how elements are positioned, aligned, and sized within their container. Remember, those elements have to be in a container (like a <div> or <section>.
Flexbox allows you to do things like, specify how elements are aligned vertically and horizontally, change their order of appearance, change the direction in which all elements are laid out, and more.
Before flexbox, elements had to be positioned and floated and complex layouts could be really challenging.
This is one of the very best simple explanations for flexbox.
CSS flexbox properties define how flex items are sized, how they wrap and which direction they go in.
Flexbox items grow and shrink depending upon how much content is needed to fit the box.
Go ahead and Follow this Link to my code on CodePen. Have a look. Try adding and removing text from the different colored <div>s. What happens to your flexbox items?
Activity: Creating a Photo Gallery using flexbox. Based on what we just learned, this should be easy. All we need is some photos and to decide what direction we want our flex direction to be: row or column. To make things look even better, we’ll add some CSS. We’ll do this together.
1:05 Mask Break
1:15 Flexbox Continued…
Flex basis shorthand and a quick example on CodePen
Activity: Today you are going to create a Flexbox Photo Gallery using some of the images you took earlier in the school year.
Create a new folder for this project – Call it Flexbox Practice.
Inside create a CSS folder and Image folder.
Create your .html file and .css file
Select 12 of your favorite photos. Rename if necessary.
Resize all of them to about 500 x 375 if they are landscape in orientation. You can batch resize in Adobe Bridge (no way!)
Feel free to use a page set up like our example earlier. Hey – maybe add a custom font to your h1 or any other design features you like. Add additional CSS
When complete, upload the entire folder to your Week 11 folder call it Flexbox Practice