Website Project Day 5 – Mr. Chastkavich's Website

Shape of the Day:

3 Complete pages – All pages should be linked together
A vertical or horizontal menu
A background color, image, or gradient background for each page.
A CSS layout – box model properties; position property; floats; or flexbox
At least one animated element – utilize Animate.css (this will only work with the previously used stylesheet), the animation property and @keyframes rule or Animista.net
At least one button (using the button tag and style it with CSS)
A google font must be used on all pages
The hover pseudo class must be used at least once to style a link or for another purpose

Classes 1 and 2
- Finalize website topic and outline (sketched on paper and shown to Mr. Chastkavich – keep this for when you hand in your project)
Classes 3 and 4
- Search, collect, edit and save the images you want to use for your website (background and other graphics).Ensure you save your images on your One Drive folder
- Create the CSS layout for your pages. Use the same page layout for all three pages. Consider where your menu will go,If you want a header or sidebar. What your footer will be styled like.
- Add a background – ensure it’s on each page in some way to stay consistent. This can be an image, a colour or a gradient. Think about contrast – you want your font to legible on the page!
Class 5 until due
- Finish website menu – ensure it’s on all pages – this will allow each page to be linked together. You must save all the .html files and images in the same folder to ensure they are all accessible within the home page of the website .
- Finish your home page
- Finish both sub-pages
- Check for spelling and grammar. Have a peer look over the work for a peer edit.
- Utilize the project requirements – ensure that all 8 are included!

Code: All of the pages you’ve created in Notepad++ (use these for reference and/or to copy code). Also try W3Schools for HTML and CSS code samples.
Colors: Color picker website
CSS Background: Background image and background color , or gradient
Fonts: Google Fonts- go to the site and when you find one you like, click the plus sign in the red circle. Then, click on Family Selected at the bottom of the webpage. Copy and paste the link href code in your head section below your title tag. Then, copy and paste the font-family declaration in your body section in your style sheet.
Images: https://unsplash.com/ , https://www.pexels.com/ , or Bing.com (do image search, then search for free to share and use)
CSS positioning: Check out this reference page and also see CSS floats and/or flexbox
CSS cheat sheets: CSS Cheat Sheet and CSS Reference
Page menu: Code for vertical or horizontal menus
Animation: Animate.css , keyframes and the animation property (refer to past projects), or use Animista.net
Buttons: Code samples here.