Wednesday, December 18th

Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Today is a Wacky Wednesday
Pretty Cool use of SVGs and JavaScript – just click and draw
Two More days to vacation
Senior Portfolio Drop in Session – Thursday, Mx. Yopp 1pm.
Slight Change in Delivery today – see dayplan for time breakdown and details

Today we will have 8 visitors working with us from 11:00-11:30.
These visitors will work with seven students and me. They will rotate every 3 minutes, so you won’t have to do too much with them for too long.

Station #1: Mr. Bohmann – Unity Game Engine and Gameplay
Station #2: Tobi – Photography, Editing Photos i Camera Raw
Station #3: Gabi – JavaScript project and about CCV classes on Friday
Station $4: Ben – SkillsUSA Overview – what it is, what you did, Atlanta….
Station #5: Mia – Working with Sprites
Station #6: Phoenix – Web coding HTML/CSS / Inspecting & changing pages
Station #7: Isaac – Blender Projects showcase
Station $8: Zander – Visual Effects projects

Call Backs:

10:10 Positioning Relative & Absolute & Practical Application – Image Gallery with Overlay

Understanding positioning will help you be the boss of layouts!

When I first started learning web coding I was pretty confused by positioning properties. Especially since flexbox did not exist yet. There are times when you need to position elements and knowing how to use the property can be really helpful.

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!
The code below are different blending modes for elements that overlap or intersect with each other.

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

Now that we’ve done a little work with type scales and css variables (also known as custom properties) the next thing naturally is to put them together with another specification – called CSS calc.

Calc is a newer specification which allows you to do Math calculations in your CSS. Math, why would you want to do math?

Works well with: length
Works well with: time (animations & transitions)
Works well with: numbers and integers (like font sizes, margin and padding)
Addition +, Subtraction -, Multiplication *, Division /
Can use with different uses (like subtract 25px from 40%)
Great for setting Type Scales
Lastly, showing math is easier to understand when you see it in the code

The real power of Calc() is the ability to mix units! For Example:
transform: rotate(calc(10deg * 5)); or width:calc(1em – 25%);

:root {
  --base-size: 1rem;
  --type-scale: 1.44;
  --h5:calc(var(--base-size) * var(--type-scale));
  --h4:calc(var(--h5) * var(--type-scale));
  --h3:calc(var(--h4) * var(--type-scale));
  --h2:calc(var(--h3) * var(--type-scale));
  --h1:calc(var(--h2) * var(--type-scale));
}

Let’s revisit CSS Grid and some position properties to create an image gallery. To make it stand out a bit more, we’ll add on overlay so when you hover, some text will pop up. This might be a nice option for displaying an image gallery in your portfolio. Just an idea.
Some code below in case you get stuck or need a reference point. I made a concept in codepen

<!--   this div is doing to hold an image, text and an overlay -->
<figure>
        <img src="images/tree1.jpg" alt="trees" class="images">
          <div class="overlay">
            <div class="overlaytxt">
                <h2>Choose & Cut</h2>
                <p>Two Acres of Trees</p>
            </div>
          </div>
 </figure>

We can go even further with a little JS. Maybe we want to swap stylesheets. That’s easy to do – so let’s do that too if we have some time.

10:50 Break

11:00 – 11:30am CAWD Visitors

If you do not have visitors – I’d like you to work on:

On your website: style out your default landing page with some custom styles
Create an image gallery with overlay with your own images. Be sure to resize images so they are optimized. Upload your gallery to your website directory
Work on Purington Tree Farm
Work on Past Due work