Tuesday, November 15th

Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org

Week Twelve

Today’s Notes

Today is an EHS BDay
HTML Resume & Flexbox gallery – call me over when you have it

9:40 Attendance

9:45 Position Properties + Some Blending Modes + Image Basics

two colored blocks — Understanding positioning will help you be the boss of your layouts

The position property specifies the type of positioning method used for an element.

There are five different position values:

static //this is the 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 relative to itself
fixed //the element behaves the same as absolute, the 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.

We can make sense of all this by fumbling about in CodePen. That is why we use it – it’s a sandbox!

/* mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity; */

/*We'll also play with some blending modes.  To get a cool cut out effect we'll use the screen blending mode on an <h3> with a white background

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

A nice updated blog article about best image sizes for your screens and layouts

10:35 Break

10:45 English with Mx. Yopp

11:30 Parallax Website Dev

Let’s continue with our work with classes and <divs> (generic block elements). We’ll learn about:

setting background images in CSS
positioning fundamentals
setting background properties including repeat, positioning and cover
More scrolling FX – called parallax

Parallax scrolling happens when background content on a webpage moves at a different speed than the foreground content. The effect is applied using one simple CSS declaration: background-attachment.

This is a very nice way to build a multi-page website into one single website.

Activity, using the files provided, we are going to build out a procedure for making a vinaigrette. A vinaigrette is a salad dressing. The focus here is on the positioning of the divs, creating classes and using the proper CSS. Commenting will be helpful. We’ll build this together so you know what it all means.

Link to download the files to your desktop.

Week Twelve Project – Parallax

Think of a procedure or task (walking the dog, brushing teeth, learning to code, drawing a circle, making mac and cheese…..)

Then, create a 5 image parallax scrolling website documenting that procedure or task. Include the appropriate images and sections of documentation. To earn the A you should consider adding custom fonts and styling to enhance your document’s appearance.

If you can, take your own photos. Original content is best.

Remember to include meta data in the head of your project. Along with author and title.

FTP your entire project folder to the server:

Name it your folder Parallax.
This project is due Monday, November 28th.
Don’t forget to validate your HTML and CSS. Every error will incur a 1 point deduction from your project score!

Make it nice.

12:15 Lunch

12:45 Text Shadows & Other Text Effects

Fun with text shadows and CSS.

/* text-shadow requires a h value and v value and blur radius */

1:10 Break

1:20 20% Production Time & Guided Support

20% – Week Twelve
HTML Resume – Show me for credit
Flexbox PhotoGallery – Show me for credit
About Me draft – due today
About Me Headshot – due today
Parallax Website