Shape of the Day:

• Project Requirements
• Suggested Timeline
• Project Resources
• Project Advice

Website of the Day:

https://www.calltoidea.com/ – Here’s some inspiration for design!

1. Project Requirements

• Refer to this post to check/go over the project requirements.

2. Suggested Timeline

• Classes 1 and 2
  • Finalize website topic and outline (sketched on paper and prepare to show/explain to Mr. Chastkavich – keep this or take a picture 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.
  • Be sure to give credit for your images by referencing who’s image they are and where you got them from.
  • 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. For design purposes, you normally want to keep the backgrounds the same/similar. For this project, you are expected to use each of the three types of backgrounds and each of your pages should have at least one of the types. Think about contrast – you want your font to be 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 – push yourself to achieve as close to a 4 out of 4 as possible!

3. Project Resources

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

4. Project advice

• 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!