Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org
10:05 Today’s Notes & Attendance
- CCV classes on Friday
- Room will open at 9:15am on Friday. This is a good time to come in and get help or work on past due/due work.
Want to know what college freshman think of college so far? Come December 18th to learn more about the first year college experience.
Solution to Calculator
10:10 Responsive Design
This week and before break we tackled CSS Flexbox and CSS Grid. Both 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.
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 download my sample files, unzip and open in VS Code.
10:50 Breaks
11:00 Responsive Design Practice
Practicing Media Queries: The Good, The Bad, The Ugly
Begin a Mobile First approach to designing your webpage.
To get started:
- Create a folder on your Desktop and name it: ResponsiveDesign
- Inside create a css and images folder
- Use the inspector and adjust your page size to 375px. Begin your styling here.
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
- 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)
376px to 767px = Bad (we should see your bad guy here )
768px and larger = This is where we see your good guy image
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
displayproperty tonone. 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:blockwill unhide and element
https://www.purintontreefarm.com
Project Manager
Artistic Director
Coder
Website Redesign Goal: Increase visibility and sales
Today’s Deliverable:
Create a digital list of all of the ideas to improve the design of this site
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 – Past Due!
- Famous Photographer Research (Due next Week)
2:38Dailies
Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive