Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org
10:05 Today’s Notes & Attendance
Today is a Wacky Wednesday
Summer Job Fair – Today from 11am – 2:45pm. I will excuse you to go see what is available. There will be reps for summer jobs, jobs for graduates and part-time jobs. Just let me know and I’ll grant you 30 minutes today in lieu of Reading time.
Call Backs: Xavier – Ms. Wilson’s Class at 1pm right after your PSA Second Looks share
3D Tech Camp – Through Vermont State University – see flyer on the board
Finally – Remember that nobody comes to CAWD this Thursday and Friday, we have Step Up Day for new applicants. Enjoy your long weekend!
10:10 – 11:55 SkillsUSA or PSA if you finish
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%11:55 Lunch
12:25 Independent Reading
12:50 PSA – Second Looks (Break at 1:20)
Two Stars and a Wish – Lets see some class participation.
I really like…. and I really like… I think an opportunity or and area to work on is……
Look to Google Classroom for requirement
Presentation order will be reverse alphabetical order