Shape of the Day:
- Project Requirements
- Suggested Timeline
- Project Resources
Website of the Day:
https://www.calltoidea.com/ – Here’s some inspiration for design!
1. 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!
2. 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.