Wednesday, December 3rd

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

10:05 Today’s Notes & Attendance

Visitors from PreTech Today
Penny Wars – bring in some pennies
SLC meeting today for Sebastian and Lion
PreTech 2 Visitors today. (11am-11:30am) We’ll do 5 minute rotations. During your rotations you can share with them the projects you’ve worked on while in the GAWD/2 Program and your passion projects you might be working on. Show them what you are interested in and what you like to do while you are here.
Mid Quarter Meetings today after 12pm with Mr. B and Mrs. Charron
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.
1pm – Student Services for Call Backs
- Adrian
- Sebastian

10:10 Responsive Design

Before break we tackled CSS Flexbox. I’ve also talked briefly although we have not explored the other responsive design technique called CSS Grid. Both are modern approaches that provide improved ways to create web pages and to layout web content and web applications.
Both options also allow for lots of flexibility for changing the design without heavy code changes.

Today, we’ll begin to look at Responsive Design. Responsive design allows web developers to improve the web experience by designing for multiple screen sizes. And there are many. Knowing how your users access web applications should be part of your planning and design process.

Common Screen Resolutions for Mobile Devices

Responsive Design consists of three characteristics:

Media Queries
Images that resize
Fluid Layouts (using Grid, Flexbox or % for widths)

There are two schools of thought about responsive design:

Mobile First
Desktop First

So, given the graphic, what responsive design school of thought should we begin to adopt?

Responsive Design: Characteristic #1 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 */

School of Thought #1 Mobile First
A mobile first approach means writing your CSS to cater to smaller screen sizes. Media queries are then used to make changes for bigger screens. This approach usually uses min-width media queries.

School of Thought #2 Desktop First
When writing CSS, you write for the desktop and then add media queries for smaller screens. This is probably the more familiar practice to you and the one you likely did last year. This approach usually uses max-width media queries.

Using min-width (mobile first approach) features are added at each breakpoint

// Small devices (portrait phones, 375px and up)
@media (min-width: 375px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Using max-width (desktop first approach – and what you are probably used to)

@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

Activity:
Today we’ll do a coding walk-through of setting up a responsive page to refresh your memory. Let’s start with the Mobile First approach. Please navigate to my GitHub repository and look inside the Responsive Design folder for the index.html file. Download it or copy it. Set up the usual folders and files in VS Code.

Github? Yeah I know what that is / I don’t know what that is…

GitHub is a web-based platform that helps developers store, manage, and collaborate on software projects using a system called Git for version control. In simple terms, it’s like a shared, smart hard drive for programming projects. If you work with code or software, you are going to learn Github and Git!

10:50 Break

11:00 PreTech 2 Visitors

If you are not working with visitors – you are working on a project……

What to Do (Deliverables): Build a webpage that changes as the screen size changes.
We’ll call this assignment The Good, The Bad and The Ugly

Your website will include:

H1 that changes
1 Good Guy image with paragraph (can be lorem ipsum)
1 Bad Guy image with paragraph
1 Ugly image with paragraph
You are going to want to learn about display:block and display:none! see below
When you design for the small screen, chances are your design is minimal, but keep in mind that when you get to the big screen, there is a lot of space to fill. Style accordingly.
FTP your entire folder to your webpage and link to this site

Default starting point is Ugly (this is on your smallest screen size) and this is the only image we see

376px to 767px = Bad (we should see only your bad guy here !)

768px and larger = This is where we see your good guy image and no other images!

Check your HTML and CSS for Validation. Copyrighted images are ok for this assignment.
FTP the entire folder to the server when you are complete. This project is today – by end of day!

Hide an Element – display:none or visibility:hidden?

Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:
visibility:hidden; also hides an element, however, the element will still take up the same space as before. The element will be hidden, but still affect the layout.
display:block will unhide and element

11:35 Lunch

12:05 Purinton Tree Farm Work Session | Mid Quarter Meetings

With your team, consider what design choices and feature you plan to have. Are you in agreement? Do you have a color palette? What about a wireframe? Think a wireframe would be useful? Probably a good idea to save on time don’t you think…..

Individual Student Meetings (We will meet 1:1 in Mr. Cronin’s Room – enter through far door):

Adrian
Sebastian
Lion
Collin
MJ
Jacob
Sylvie

12:25 Production Time and Guided Support

Parallax “How To” Web Project – Due TODAY, December 3rd
Hard Surface Modeling – SciFi or Classic shipping container – Due Tuesday, December 9th
Famous Photographer Project – Due Wednesday, December 10th
Decorative Silhouette in Photoshop – Due Wednesday, December 11th
Purinton Tree Farm – new website – Due Wednesday, December 17th

1:00 Afternoon Break (15 minutes) or heading to Student Services

1:15 Dailies

1:20 Independent Reading