April 4, 2019 CSS, HTML

CSS Exercise

Use the HTML and CSS to redesign Project 1. A total of five pages are required and two of them must be a home and assignments page.



  • Use a text editor to code entirely in HTML and CSS
  • You must include a stylesheet to each page called style.css – Minimum of 15 selector changes
  • Use div ids to format each page that much include: header, nav, section, footer
  • Website must have a total of five pages
  • The home page will serve as a personal bio page with image of yourself
  • The assignments page must list out course projects
  • Navigation must be in list format
  • Pages must be between 800px and 1000px wide
  • Include three type of nav links in CSS (a, a:visited, a:hover)


  • Appropriate text formatting headings to structure pages
  • Three paragraphs on each page (except assignments page)
  • Include at least one list other than the navigation
  • Include at least one photo on each page of your website (except assignments page)
  • Include at least one table on your website
  • Include at least three external links on your website (must open in new tab)
  • Include email address and last updated date on the home page (must be in footer)


  • Make sure all page names end in an html extension
  • All file names must be lowercase and do not include spaces (images and html/css files)
  • Include relevant title tags for each page

Above and Beyond

  • Additional Pages and Sections
  • Google Fonts
  • Embedded Videos
  • Social Media Widget
  • Use of Classes (5 or more)
  • Others


1. Sign into Fetch or Reclaim Hosting and open the public_html folder
2. Once in publc_html, create a new folder called p1 (no spaces and all lowercase)
3. Move all the files from Project 1 into the p1 folder (images and html files)
4. The URL for your Project should be tested by going to www.yourname.com/p1
5. Confirm this works, then add the P1 link to your CSS Exercise assignments page
6. Put all your CSS Exercise files into the public_html
6. Go to www.yourwebsite.com and check to make sure CSS Exercise is published


1. Sign into TRACS and go to Drop Box
2. Click on “Add”  and then “Add Web Links URLs”
3. Add your website URL in the following format http://www.yourwebsite.com
4. Put ‘CSS Exercise’ for the Website Name

Due: Sunday, September 29 by 11:59pm

Rubric: Download