Website Project Day 3 – 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.

Time management – Try your best not to waste class time. If you continue to make steady progress, it won’t feel like such a daunting task.
Try to pay attention to the details
Try not to forget any of the small useful things you’ve learned – page titles, short file names that make sense, save your page/work on one drive, ensure images are in the same folder
Remember that your home page makes the first, most important impression to your viewers.
Consistent navigation and design help people find out what your website is about and how to access things
Visual design matters – page layout, fonts, color coordination – CSS is the magic behind all of that!