2017

Class Tuesday, January 3, 2017

 Today’s Goals:

  • Continue creating your first webpage

 Today’s Featured Sites:

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