Monday, November 17th

Class Hours: 10:05 – 2:40
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Welcome to Week 12
Last week before Thanksgiving vacation –
Food Drive
CCV Class Friday – some light gaming when we return to the classroom on Friday if you are fully complete with all assignments past due and due this week – that’s fair I think

10:10 Monday Mail Check

10:15 Parallax Style Websites and Positioning

Link to the list of Semantic HTML Elements and the HTML tags listed alphabetically

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

Also – let learn about Meta Data in the head element and add some cool VS Code Extensions like:

Material Icon Theme
Auto Rename Tag
Color Highlight
Peacock

Parallax scrolling happens when background content on a webpage moves at a different speed than the foreground content. We can create this effect with pure CSS. The effect is applied using one simple CSS declaration: background-attachment. However, we may come back to this project and add some JS for some added effects.

This is a very nice way to build a multi-page website into one single website because the sections provide breaks for the viewer – it’s also a nice feature for a web application.

Let’s Make Some Pizza – Activity, using the files provided, we are going to build out a procedure for making a pizza. 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.

Now that we have practiced – it is your turn….

Week Twelve Project – Parallax Inspired Website & Photography

Think of a procedure or task (walking the dog, brushing teeth, making cranberry sauce, making your bed, making mac and cheese…..)

Then, create a 5 image parallax scroll documenting that procedure or task. The images you use will come from photographs you take with your cameras.

Remember good photos have good composition, sharpness and exposure. Editing your photos may be necessary. I’d suggest changing your Camera settings to be just on .jpg (not raw) and change the size preset to Medium size in your camera’s settings.

To earn the A you should consider adding custom fonts and styling to enhance your document’s appearance. Look at a color palette. Make an attractive layout. You might also consider adding a navigation menu to get to the different sections using IDs – like we did last week.

Remember to include the meta data in the head of your project. Along with author and title – we’ve not talked about this too much, but did in our demo in class today with the pizza activity.

Don’t forget to validate your HTML and CSS. Every error will incur a 1 point deduction from your project score!

FTP your entire project folder to your server. If you don’t know how, ask me.
Name it Parallax and make it linkable from your directory (home page)
This project is due at the end of the day on Wednesday, December 3rd.

Make it nice. Don’t just repeat what I do. That is so boring.

10:50 Morning Break (10 minutes)

11:00 Monday Modeling – War Inspired Hammer

Let’s continue with some Monday Modeling. We’ll make a game asset for Unity – a Thor inspired Hammer.

Game Assets are made from models. Models have faces. The more faces – the more resource hungry your game becomes. Our goal is to create a high detail object without all of the geometry.

How can we accomplish this? UV and normal mapping.

First we’ll model a low poly hammer.
Second we’ll mark off the seams and do some UV Mapping
Third, we’ll duplicate our model and then add a high level of detail through sculpting
Fourth, we’ll create a normal map and an ambient occlusion map from our high detail model
Fifth, we’ll import the low poly hammer to Unity – and we’ll apply the high detail normal maps that we made in Blender.

If you want to be a game designer – this will be a common workflow.

For today’s session – we’ll skip around a bit. We are going to Model, Sculpt and Get Some materials.

We’ll make a duplicate before sculpting in case we want to go back and add this to a game.