Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org
10:05 Today’s Notes & Attendance
CCV Lunch Form – Order your Lunch– want some lunch (or chips)
Visitors tomorrow from PreTech – Looking for Volunteers – 3-5 minute rotations from 11 – 11:30am
Famous Photographer Assignment – questions? The deadline is next Wednesday. I’ll need to submit grades to CCV so do not miss this deadline. This is the last assignment for the course.
| Student | Photographer | Student | Photographer |
|---|---|---|---|
| Zander | Annie leibovitz | Peyton | Chris Burkhard |
| Tobi | Mia | Brian Skerry | |
| Gabi | Jerry Uleseman | Aidan | J. Grant Brittain |
| Braden | Neil Liefer | Isaac | Travis Burke |
| Elle | Phoenix | Brook Shaden | |
| Ben | Scotty | Alice Gao | |
This will also serve as the order of presentations
10:10 CSS Grids
CSS grid layout or CSS grid is a technique in CSS that allows web devs to create complex responsive web design layouts more easily and consistently across browsers. The layout above is very easy to accomplish with Grid!
Flexbox is a one dimensional type of layout. CSS Grid allow you to layout in TWO dimensions.
CSS Grid Property Terminology to Know
- display: grid (you’ll need a container)
- grid-template-columns: (for setting number of columns)
- grid-template-rows (for setting rows) [explicit grid]
- grid-gap (for setting the gap between the grid areas)
- nth-child ()
- fr (stands for fraction, can be used instead of percentage)
- minmax (for setting height min and max or width min and max)
There are some good inspection tools for grid. Let’s look at those too.
Let’s jump into our SandBox in Code Pen – here is a starter project – just remember to fork it –
We’ll create two basics layouts – a simple grid of spaces and a classic layout called the Pancake Stack (I love pancakes). The pancake stack (one of the most popular designs out there) is soooo easy with grid.
If you get confused, just remember that grid is all about counting the lines between the columns and rows
Hey, this is a really helpful interactive resource for CSS Grid. ProTip – Add to your Web ToolBox!
10:50 Breaks
11:00 English with Mx. Yopp
11:50 – 12:25 More CSS Grid
Grid Challenge to practice building with Grid
12:25 – 12:55 Lunch
12:55 Independent Reading
1:20 Break
1:30 Design Challenge
1:55 Production Time and Guided Support
Current Assignments:
- Past Due – Hamburger Handout – should be on your website
- HTML Resume (google classroom – place images there)
- About Me paragraph and image (google classroom)
- Parallax How To Website – Due Today!
- Famous Photographer Research (Due next Week)
2:38Dailies
Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive