Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Notes
- Sweatshirts (need a design team). Sign up here. First sample due Monday, November 4th. AI files located in Public Folders
- Costumes are welcome for tomorrow. No face paint concealing your face or masks (school policy)
9:40 Attendance & Article
9:45 Student Council Update / Opportunity
Are you interested representing Cawd2, providing a voice for our program, be a change agent at the school (pad your college application)?
Cawd 2 is looking for a Student Council rep and president from our program. If you are interested in running as a rep for our program or president rep from our program – Please email me. Depending on interest, we’ll hold an election.
10:00am 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. Even the assignment we did with the hamburger and artichoke layouts could easily be arranged with flexbox.
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.
Break (15 Minutes)
11:00ish – 12:10 Flexbox Continued…
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.
Inside create a CSS folder and Image folder.
Create your .html file and .css files
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. Hey – maybe add a custom font to your h1 or any other design features.
When complete, upload the entire folder to your Week 10 folder call it Flexbox.
12:10 Lunch (30 Minutes)
12:40 – 1:05 Literacy in Focus
Grab your book and chill. We’ll be reading today. No computers, no talking. Sit on the couch if you like or move your chair.
1:05 Fine your way…
- Tackle a CSS Flexbox Project – Learn how to make Flexbox Cards
- If you like flexbox, checkout the Firefox Flexbox inspector and challenge yourself with Flexbox Zombies
- Of course Flexbox Froggy is a good way to challenge yourself and playing with Flexbox can also be useful, consider bookmarking this page which might help you solve the Flexbox Froggy challenges
- Work on a design for the Cawd2 Sweatshirt, first round of designs due Monday
- Complete coursework that you have not completed
2:00 Dailies
Link to Dailies and Link to Responses