Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org
10:05 Today’s Notes & Attendance
- Today is Tuesday and it is a B Day (EHS)
- SkillsUSA today and tomorrow
- Article – Unfinished Video Games are Turning into Hits
- Logan and Miah PSA Second Looks Showcase today at 2:30pm
10:10 SkillsUSA
Each team will have different work this morning based on your chosen competition:
Read your teams assignments carefully. A big part of the competition is being able to follow the guidelines that are written for each competition.
By Wednesday at 1pm– 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”
Create your folder in the discipline you are working in. DO THIS FIRST
See Mr. Cronin’s Dayplan for specifics – read carefully
See Mr. Cronin’s Dayplan for specifics – read carefully
With your partner, help our client have a website that is both desktop friendly and mobile friendly.
Our client does Henna. What is Henna? – good question, most visitors to the website won’t know either. Use some search skills and educate yourself about the website you are going to build. Also be sure to let visitors of your website know what Henna is also. You might choose to begin by learning and viewing other Henna sites out on the web to get some inspiration.
The rest of the materials for the website are in this folder. Download and Unzip.
Deliverables
- Website: Green Mountain Henna Designs
- Create a Custom Logo and make sure the logo appears on the website
- Custom Fonts
- Wireframe
- Color Palette
- Desktop Layout and a mobile layout for screens smaller than 576px
- Validate all Code
- Comment Code as necessary
- You will use (and may edit / manipulate) images in the folder
- Text included may (and probably should be edited) for readability
This project is due by 1pm on Wednesday
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 */Images in your 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%10:50 Break
11:00 English with Mx. Yopp
11:50 SkillsUSA
12:25 – 12:55 Lunch
12:55 Independent Reading
1:20 Break
1:30 Design Challenge
1:55 Production Time and Guided Support
We have three projects working at the moment:
- PSA Second Looks – Due Wednesday, March 20th
- SkillsUSA Projects due tomorrow at 1pm
- Lip Sync Project – Due April 12th (Wow – that’s in Q4!)
2:30 – 40 Logan and Miah PSA Second Looks Showcase
2:40 Dailies
Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive