Today’s Goals:

• Continue working on your webpage project AND set a goal for what you want to finish today and Friday (examples: complete both pages; finish the page menu and make sure it’s on both pages; finish up the visual design by adding a font (Google or other) and trying different color combinations before settling on one)

 Today’s Featured Site:

• http://www.datasketch.es/october/code/nadieh/– Check this out for help with your history class or if you like following the royal family

Project requirements

• 2 COMPLETE pages– a homepage and a sub-page that are linked together
• 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.
• A background color or background image for each page
• 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! You can even use the CSS photo gallery or the Thanksgiving recipe page as a template. However, if you do so, you still need to incorporate a menu.
• Models from last year (these are just screenshots):
  Andrew, Gustavo, Racquel

 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
• 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 (make sure to change 4.4.0 to 4.5.0)
• CSS positioning: Check out this reference page
• CSS cheat sheet: CSS you need to know in one place
• Page menu: Code for vertical or horizontal menus

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

 When you’re done

• Fill out the project checklist to make sure you have included everything required
• Websites are a work in progress!! Here is your chance to get some feedback on your site before it is graded. The goal is to make your page even better than you thought it possibly could be!
• Step 1- complete your own review of your webpage using this form
• Step 2- complete a review of someone else’s webpage using this form
• Step 3- make any changes to your webpage to make it better