Tuesday, March 21st

Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org

Week Twenty Seven (27)

Today’s Notes

Today is an EHS B Day
We are going to jump right in to Skills practice today

9:45 SkillsUSA

By Today at lunch – Quick Sprint Deadline – create a folder with your two names on the Public inside of the weeks “skillsUSA” folder. The folder is found at Public/CAWD. For example if Mr. Cronin and Mr. Bohmann were working together the folder would be:

“croninBohmann”

See Mr. Cronin’s Dayplan for specifics – read carefully

See Mr. Cronin’s Dayplan for specifics – read carefully

There are several things that will really help your team out for the SkillsUSA competition and for web development in general. Number one is understanding Flexbox and number two is Media Queries!

With your partner complete the following tasks:

Flexbox Froggy (print screen at the end and place in your team folder)
Create an index.html page with navigation (navigation does not have to go anywhere)
- Home, Contact, Careers, Locations (layout nav using flexbox!)
- On your index.html page:
  - Create a Flexbox Photo gallery (use 12 images from Pexels or unsplash, use flexbox)
  - Style your gallery anyway you like!
  - Images should be responsive
  - Include a media query so that your images are in a column when your screen is smaller than 600px
  - Change the layout of your navigation for screens smaller than 600px

Images in our HTML Document

If the width property is set to a percentage and the height is set to auto, the images will be responsive and scale up and down. It is that simple! For example:

img {
  max-width: 100%;
  height: auto;
}

//using this property will allow the image to scale down but never up higher than 100%

Media Queries

The Viewport Meta Tag: gives the browser instructions on how to control the page dimension and scale. This code should go in every <head> element of your html web pages

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width set the width of the page to follow the screen width of the device

What makes a layout go from fluid to responsive is the use of Media Queries

@media screen and (max-width:  1000px) {
     p {
          font-size: 24px;
       }
}

/* The @media is the media rule */
/* Screen is the media type. */
/* (max-width: 1000px) is the media feature */
/* What this query means is when the browser viewport is smaller than 1000px, apply this block of CSS
If this condition is not met, then this CSS is ignored */

/*There are 4 Media types:  all, print, speech and screen */