Today’s goals:
- Finish planning your first webpage project
- Review project resources
- Get started!
Today’s featured website:
- Hour of Code-suggested by JJ
- Also, several holiday-related sites:
- http://christmasexperiments.com/ (you will want to keep going back to this one as each day gets updated!)
- http://www.itsashapechristmas.co.uk/
- http://www.watchyulelog.com/
Tips for getting started:
- Keep your outline handy for reference; modify if necessary
- Keep your page layout simple. Choose a layout you used in another project OR modify one.
- Consider creating a page with a header, footer, and one or two “middle” sections (similar to the last one we just worked on; you can modify the dimensions).
- Set up your home page first. Think about the impression you want to make on people visually. Does your site look nice and is it easy to figure out what it’s about and how to navigate it?
Project timeline
- Wednesday and Thursday (December 9 & 10): create page layout for home page and have menu/navigation in place for sub-pages
- By Friday, December 18: have home page completed and layouts for sub-pages created
Project techincal requirements
- Includes 3 fully complete pages- a homepage and 2 sub-pages
- All pages link to each other
- Each page has the same menu/navigation
- A consistent CSS layout is used on each page
- Incorporates things from the project resources (below), such as Font Awesome, Google fonts, stock images, etc.
Project resources
- Code for layouts, style sheets: All of the pages you’ve created in Notepad++ (use these for reference and/or to copy code)
- Colors: Color picker website and help putting colors together
- Fonts: Google Fonts- go to the site or here for the directions
- 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