Wednesday, November 20th

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

10:05 Today’s Notes & Attendance

Today is a Wacky Wednesday

Call Backs: Ben (12:15 or when lunch ends for you)

Order your CCV Lunch – check yesterday’s dayplan for a link

FileZilla – By the end of the day – everyone should have a page like mine. I will help you – some of you got here yesterday. This will be the directory/landing page of your website so we can navigate to your web projects.

Filezilla Details:
When you FTP you are accessing your files structure on your website. For fun, imagine the mosting interesting place in the world – let’s say that is where your server lives with your files. FTP stands for file transfer protocol. When you move your files from your local machine to your web server, you are doing it through FTP. Your web server has 1 GB of space. So it must be managed.

host: ftp.geocities.ws
username: the name of your website – mine is wbohmann site address: (geocities.ws/wbohmann)
password: that I can’t help you with

10:10 Parallax Inspired Websites and positioning

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. 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.

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 Thirteen Project – Parallax Inspired Website

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. 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 on Tuesday.

If you can, take your own photos. Original content is best and it will boost your overall grade.

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

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.
This project is due at the end of the day on Tuesday, December 3rd.

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