Today’s Goals:
- Review your CSS questions
- Begin your first webpage project
Today’s Featured Site:
- https://quickdraw.withgoogle.com/– See if you can get the computer to figure out what you’re drawing
Your CSS Questions
Self-guided reviews:
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
Helpful Tips
- Plan your site! Create an outline of the content you will have on your home page and subpage. What info (text) will you include? What images do you need? What about links to other pages? You can write this down on a piece of paper or do a digital outline in a Google doc or somewhere on your computer.
- Create one folder on your computer for this project and save all of your files- the Notepad++ webpage files and your images- inside this folder.
- Find your images now: search (see Project Resources below for sites to use), download, save, and resize (use Pixlr.com).
- Create your page layout first (use CSS positioning or floats) and then add your content. Do this for both of your pages.
- Decide to finish something each day you’re in class (finding and downloading all images, your page layout, your menu, etc.)
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