Project requirements

1. 2 COMPLETE pages– a homepage and a sub-page that are linked together, so your subpage has to be linked from your home page and your home page has to be linked from your subpage (both inside of the site menu)
2. A vertical or horizontal menu. This should include a list of other pages on your site even though you’re only doing two pages. For example, the menu could include Home, About, Contact, Latest News even though you’re only doing the homepage and the about page.
3. A background color, background image, gradient background, or background blend mode for each page
4. A CSS layout– you can use the box model properties (margins, borders, and padding); the position property (absolute, fixed, relative, static); floats; or flexbox. You’re encouraged to use the code from past pages you’ve created; you don’t have to reinvent the wheel! See the CSS spreadsheet linked under Project Resources below.
5. A Google Font used on both pages
6. Images sized and styled to fit visual theme
7. All text is readable against the background
8. At least two links that are styled and functional! One link will be to link your pages together and there needs to be one more- for example, a link to an outside site that’s related to yours. All links must be styled (see helpful code below), meaning you’re not using the browser’s default styles of blue and underlined.
9. Must use the hover pseudo class  at least once, either to style links or for another purpose.
10. Student models:
    • Personal photography site
    • Personal art work site
    • Christmas recipes
    • Personal portfolio
    • Fallout
    • Manchester City Soccer
    • Twenty One Pilots
    • Bob Ross
    • The most EPIC and EXTRA portfolio site anyone ever made in this class

 Suggested Timeline

• Classes 1 and 2: Finalize your webpage topic and outline (sketched on paper)
• Classes 3 and 4:
  • Find, download, edit, and save images you want to use (for your background and for anywhere else you will want images or graphics). Example: if you’re webpage is about the Twenty One Pilots, find images and maybe videos to use on your site. Download, save, and edit the images so they will fit into your design.
  • Create a CSS layout for your pages. You should use the same page layout for both the homepage and sub-page. You can do this by using code from pages we’ve created in class (floating and positioning practice pages might help) and from the resources listed below. Consider: where will your menu go (top, bottom, left, right)? Do you want a header? A footer? A sidebar? Some other layout?
  • Add a background– should be same on homepage and on sub-page for consistent look. Do you want a background image? A gradient? A background color? A background blend mode?
• Class 5 and beyond:
  • Finish your website menu and make sure it’s on both your homepage and your sub-page. Make sure both pages link together so you can get to your sub-page from your homepage and to your homepage from your sub-page.
  • Finish your homepage
  • Finish your sub-page
  • Check for spelling and grammar issues. Have someone else look at your page to find typos and to make any suggested edits.
  • Make sure you have all project requirements! Check the list above!
• Extra credit- choose one or more of the following: create more than two pages; add a favicon (refer to pages from early in the year for the code); add a button (code below); use unicode icons (code below); add anything that’s not required in the list above.

 Project Resources

• CSS Layout and other CSS: Our CSS Spreadsheet  (big list of all the CSS we’ve learned)
• 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 , gradient  or background blend mode 
• Links: click here  to copy/paste CSS to style links
• 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 
• Buttons: Code samples here. 
• Unicode characters: add easy to use symbols and images to spice up your design; view list here 

 Project advice from last year’s students

• Time management is critical. Don’t waste the class period! Try to make steady progress on your webpage every class.
• Pay attention to the details.
• Don’t forget the small things you’ve learned, like adding page titles, using short file names that make sense, and saving your page and images in the same place.
• Your home page makes a big, important impression on your users.
• Consistent navigation and design are important so people can figure out what your website is about and how they can get to other pages.
• Visual design really matters- page layout, fonts, color coordination- CSS makes this all happen!!