Wednesday, December 13th

Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Today is a Wacky Wednesday

Famous Photographer presentations will be after independent reading today.

Andrew & Finn – Public Issues after presenting.

Visitors today:

John
Nick
Logan
Jerry
Richard

Photography Assignments close on Friday – check Google Classroom for the Photography section.

Cameras – you can return to me today at lunch and tomorrow.

10:10 Hero Layouts

A Hero image, text or video is common way to describe using large format images and/or text to cover the top of a webpage. This is a nice styling option that can be easily accomplished with a little CSS and some positioning.

There are a number of background positioning properties we’ll need to make this work well. We can also position with grid or flexbox the content inside the image container.

By placing the image on the CSS background property we don’t impact accessibility. It is simply a design and aesthetics choice. A lot of websites use this layout approach. It is especially popular with:

Bands – Example
Designers / Creatives – Example
Causes / Organizations – Example

We’ll make one together. Practice image

@import url('https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap');

Last week we played with some typography scales. Let’s add to our document practice this morning.

:root {
  --base-size: 1rem;
  --type-scale: 1.44;
  --h5:calc(var(--base-size) * var(--type-scale));
  --h4:calc(var(--h5) * var(--type-scale));
  --h3:calc(var(--h4) * var(--type-scale));
  --h2:calc(var(--h3) * var(--type-scale));
  --h1:calc(var(--h2) * var(--type-scale));
}

10:50 Break

11:00 Visitors or Hero Assignment or CSS Grid Team Assignment

Assignment: You’ve been hired by a small game company – Gatehouse(fictional). They are really excited about their new game that releases next month. You’ve been tasked to:

Create a one page website – hero layout – file to download assets (download your own image or select from assets)
Navigation with three links(3): About | Games | Careers (links do not have to go anywhere)
Custom Font(s) that best fit the game
At least three variables present in your CSS
A Favicon (don’t know what it is – Google it or go to https://favicon.io/ and read all about it
Pass validation
Meta Data in head tag
Uploaded to your server. Filename: Hero
Due Tuesday, December 19th

11:30 Hero Assignment or CSS Grid Team Assignment

11:55 Lunch

12:25 Independent Reading

12:50 Finish – Famous Photographer Presentations

Some tips when presenting:

Speak loud enough so we can hear you, speak slow and clear
Try not to read from your slides, use them as a guide – use note cards instead
Just relax – we all know you – Let us know about what you learned
Definitely go in to detail about the photograph you took in the style of your photographer
Ask your audience if they have questions / thank them

Student	Photographer	Student	Photographer
Jerry	Ross McGibbon	Aiden	Sheila Pree Bright
Alex	Travis Burke	Josh	Ansel Adams
Kevin	Jerry L. Day	Andrew	Duane Michals
Sparky	Sandy Skoglund	Richard	Elliot Erwitt
Nick	Jerry Uelsman	Finn	Josef Kovalka
Ariel	Mary Ellen Mark	Xavier	Alice Gao
Logan	Lyndsey Adler	John	Neil Leifer
Philip	Jay Grant	Brody	Chris Buckard