Skip to content
Cawd Logo Cawd
  • Home
  • About
  • Assignments
  • Student Work
  • Resources
  • Contact

Week Eleven, Day 1

Week Eleven, Day 1

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

css joke

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

einstein cartoon

11:25 Lunch

pizza

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.

Download Sample Files

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

2:05 Dismissal

Cawd Instructors:

Matt Cronin

Will Bohmann

Instragram Facebook Twitter

A little about Cawd:

Serving high school students interested in Computer Animation, Game Design, and Web Development in North Western Vermont.

Students continue at:

University of Vermont Ringling School of Art and Design Northeastern University Rochester Institute of Technology Concordia University

Students find careers at:

Dealer.com Union Street Media Rovers North Prudential Investments DockYard
Navigate to top of page