Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Today’s Notes
- Today is an EHS B day
- Nov. 10th: VSAC Forms Day (Round 2) From 10-12:00 in the Conference Room Register here
- Nov. 17th: Vermont Technical College Visit to specific programs then 11:30 in the Conference Room for anyone else who has questions!
9:40 Attendance
9:45 Position Property and Some Image Basics
The position property specifies the type of positioning method used for an element.
There are five different position values:
- static //Default, element renders in order as they appear in the flow of the document
- relative //element is positioned relative to the normal position it would be in
- fixed //element is positioned relative to the browser window
- absolute //the element is positioned relative to its first positioned ancestor element
- sticky //The element is positioned based on the user’s scroll position
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
Image Format Summary
JPG
- photographs
- Smooth transitions between colors
- No Transparency Support
PNG
- Images with flat colors or hard edges
- Logos and illustrations without gradients
- Images with transparency. 8 bit can provide one color transparency and 24 bit for variable transparency
- File size correlates with the number of colors used: 2,4,8,16,32,64,128,256
Image Dimensions
- Your image has to fit on your screen – check your monitor at DPI Love
- Common display widths range from 1920 to 2560 pixels.
- A good rule is to make everything fit into a 1024 pixel display screen. (The exception if you are using large or full page width background images)
- Usually your images are much smaller in size
- In almost all cases, larger image sizes result in larger image files
Image Optimization
- All images should be optimized before we put them in our websites. In Photoshop we use the Save for Web process.
- Did you Know that most digital phones save photos at much higher resolution than we need on the web
- Pay attention to the pixel dimensions of the image, you can see this in Photoshop by going to image>image Size
- Compress your Images further than Photoshop using Tiny PNG or Kraken
- Use the right file format for the image
I have a sample file we can play with in Public Folders
10:35 Mask Break
10:45 English with Ms. Yopp
11:35 Flexbox Trading Cards
Let’s tackle a little flexbox project and then add some interactivity to it with some basic JavaScript.
First, lets learn how to make some nice Flexbox Cards together. Then, it is your turn.
Flexbox Trading Card Project:
Choose a card style of your choice and make at least 4 trading cards. Your topic can be about Video Game Characters, Power Ups, Family Members, Pets, Thanksgiving menu items, original characters… Hey, what about your fall foliage photos!
- Create at least 4 cards, feel free to do more
- Display the cards in a row and space as you wish using CSS Flexbox
- Include an image
- Include a Title
- Include a description
To organize yourself, create a folder and place the entire project in this folder. We’ll call it Flexbox Trading Cards.
My advice to you is… don’t just cut and paste. Work on writing the code yourself and commenting as you go. Stay organized, try to understand what the code is doing.
Add more to your cards, hover, transitions, background, etc…
Don’t forget your meta data in the <head> element. Validate!
Validate your HTML, CSS and upload the entire folder (Flexbox Trading Cards) to the Webserver.
12:15 Lunch
12:45 Font Challenge
That’s my secret, Captain. I’m always angry.
Hulk
1:10 Mask Break
1:20 Production Time & Guided Support
- AboutMe.html
- Resume.html
- Parallax Project
- Flexbox Trading Cards
- CAWD Sweatshirt Design – due tomorrow