Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
WEEK TWELVE
Today’s Notes
- Today is an EHS A day
- Two weeks of classes until your break
- Nov. 10th: VSAC Forms Day (Round 2) From 10-12:00 in the Conference Room Register here
- Nov. 13th: Vermont Technical College Randolph Campus Info Session. Register here
- Nov. 17th: Vermont Technical College Visit to specific programs then 11:30 in the Conference Room for anyone else who has questions!
- Print my Photo Dropbox is located in Public Folders. Submission Format: Title_Lastname.jpg
- About Me is past due! This is a draft that I want to review and get back to you
- Personal headshot / portrait
- Review of what we covered last week
- Some CSS WOW
9:40 Attendance & Monday Mail
9:45 A Review of Classes and Ids
But first…
Mr. B’s Workflow – I like to work off my desktop or usb drive first, building all my folders and collecting all my assets and materials. CSS goes in the CSS folder. Images go in the images folder. HTML pages go in the root folder.
I then upload the entire folder at the end of the day to the server and rewrite the previous folder. Hey, that’s me and my workflow. You may have a different or better way.
If I am working with a client, I’ll create at least two backups of my current project. It is a pain, but if you have ever had a computer crash, file corrupt or lost your 8 page term paper in college, you’ll understand. All those things have happened to me.
Now, on with the lesson…
HTML elements provide the structure to webpages while the CSS adds the style. JavaScript makes pages interactive.
To help the HTML elements stand out, we can use “styling hooks” by adding IDs and Classes to the elements. Did you know that an element can be loaded up with many classes – handy!
IDs are unique
- Each element can have only one ID
- Each page can only have one element with that ID
Classes are not unique
- You can use the same class on multiple elements
- You can use multiple classes on the same element (just leave a space)
Let’s practice using IDs and add some smooth scrolling to create a simple, scrollable web page linked by IDs. This is a great way to create a one page website. Open CodePen and start a new pen. Name it Smooth Scroll with IDs.
We’re not going to build anything ground-breaking here, but we will get to see the concept in action.
With any remaining time we have, review the edits on your About Me page and make changes. You may then begin coding your about me page.
On the Server you should have a folder called WebPortfolio. Inside is your:
- AboutMe.html page
- Resume.html page
10:35 Mask Break
10:45 English with Ms. Yopp
11:35 Parallax Layouts
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 scroll 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.
Remember to include meta data in the head of your project. Along with author and title.
FTP your entire project to the server: Name it Parallax. This project is due Monday, November 15th.
Don’t forget to validate your HTML and CSS. Every error will incur a 1 point deduction from your project score!
12:15 Lunch
12:45 Skinny Lesson
More fun with Gradients
1:10 Mask Break
1:20 Production Time & Guided Support
- HTML Resume (now Due)
- Cawd Sweatshirt Design – Due Wednesday
- Parallax Web Project (one page website)
- About Me page (begin to code)