Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Week Eleven
Today’s Notes
- Today is an EHS A Day
- Communication Check – Drawing CCV – do you have class the Friday before the November break?
- Sweatshirts – Presentations in CAWD at 9:45 for Finn, Ryan, Garrett, Schuyler
- Assignment dropboxes are now posted. Respect the due dates.
- PE is meeting in the weight room getting huge
- Tomorrow – CCV classes – reminder. Python, come prepared ready to get caught up on your work and complete the week’s assignment – Drawing, make the bus don’t forget to ask about next week.
9:40 Attendance
9:45 Graph of the Week
The size and calories of fast food menu items have changed over the past 30 years. What do you notice and wonder about these changes?
10:00 Photo Assignment – Research Project
Famous Photographers – let’s review this assignment together.
This assignment is due for presentations on Thursday, December 8th!
10:35 Break
10:45 CSS 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> or some other block level element).
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
A very good explanation of Flexbox #1 –
A very good animated explanation of Flexbox #2 –
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.
Let’s build a sample in CodePen so you can see what I mean. It’s called flex for a reason!
Activity: Create a Photo Gallery using Flexbox. Based on what we just learned, this should be pretty easy. All we need are some photos and we need to decide what direction we want our flex direction to be: row or column. I’ll help you get started.
You will need:
- A Project Folder on your desktop- Name it PhotoGallery Flexbox
- An images folder with images 6-9 of them.
- When selecting images, use ones from your LTA Photo Assignment or other photos from your photography.
- Images – you will want to adjust the size of them (pro-tip). Try 680 x 420 for this assignment
- A html document – name it flexphotogallery.html
- Don’t forget to load up the <head> tag with all that awesome meta data (author, title,description)
- A css style sheet linked to your html document
- We’ll do a gallery walk before lunch of your photo gallery.
- FTP sometime today to the server
- This is a graded assignment – I’ll look for it on the server. Ask for help if you need it.
The flex container properties are:
- flex-direction.
- flex-wrap.
- flex-flow.
- justify-content.
- align-items.
- align-content.
12:15 Lunch
12:45 Platon Photography & Game Testing 2 (if needed)
Platon is a British Photographer famous for his portrait work with celebrities, work leaders, sports figures and business titans. His work is published on all major publications. Let’s watch a short documentary about how Platon works. This short is from Abstract, available on Netflix.
Let’s help our Champlain College candidates by testing out their analog games. Testing is an important part of the development and design process. As a tester, you should provide feedback. We’ll leave it to your Game Designer’s to help us with instruction.
1:10 Break
1:20 20% Production Time & Guided Support
- HTML Resume – Call me over to review / grade / place this document in your Web Portfolio folder
- Mobile Phone Model practice – Due Friday – Dropbox
- About Me – Due Monday – rough draft – Dropbox
- About Me – Due Monday -Headshot / Photo – Dropbox