Suggested Project Steps & Timeline:

• First and second days: Finalize your webpage topic and outline (sketched on paper)
• Second, third, and fourth days:
  • 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? Or just a background color?
• Fifth day 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.
• Extra credit- choose one or more of the following: create more than two pages; create more than one button; add more than one animation; add a favicon (refer to pages from early in the year for the code).

Project requirements

1. 2 COMPLETE pages– a homepage and a sub-page that are linked together
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, or gradient background for each page
4. A CSS layout– you can use the positioning that we learned to lay out your page (absolute, fixed, etc.) or float sections into place (header, footer, side bar, etc.). You are encouraged to use the code from past pages you’ve created; you don’t have to reinvent the wheel!
5. At least one animated element, using either Animate.css or the animation property and keyframes
6. At least one button (use the button tag and style with CSS)
7. A Google Font used on both pages
8. Must use the hover pseudo class at least once, either to style links or for another purpose.
9. Student models:
   • Personal photography site
   • Personal art work site
   • Christmas recipes
   • Personal portfolio
   • Winter Wonderland
   • Foodies
   • Twenty One Pilots

 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)
• Font Awesome icons: go to the site or here for directions
• CSS positioning: Check out this reference page and also see CSS floats
• CSS cheat sheets: CSS Cheat Sheet and CSS Reference
• Page menu: Code for vertical or horizontal menus
• Animation: Animate.css or use keyframes and the animation property (refer to past projects)
• Buttons: Code samples 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!!