April 4, 2019 CSS, HTML, Responsive 0 Comments

Project 2

Convert your Project 1 and CSS Exercise that we did in class into a responsive site by adding media queries and fluid layout elements. You will also be using Photoshop to create a header for your website. 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
  • 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 100px wide
  • Include three type of nav links in CSS (a, a:visited, a:hover)
  • Must include all the changes we made from the CSS Exercise that was done in class
  • Update your site to contain fluid elements rather than fixed width elements
  • Add Meta Tags to the head of all your pages
  • Find a social media widget and add into sidebar and sidebar-bottom divs
  • After opening the section div add <div class=”sidebar”>WIDGET</div>
  • Before closing the section div add <div class=”sidebar-bottom”>WIDGET</div>
  • Scroll to the bottom of your stylesheet and add Sidebar Properties


  • 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 all the footers
  • Design a header in Photoshop for all div id headers
  • Design a favicon in Photoshop that displays on your main website (public_html)


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


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 Project 1 link to your Project 2 assignments page
6. Put all your Project 2 files into the public_html
6. Go to www.yourwebsite.com and check to make sure Project 2 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 ‘Project 2’ for the Website Name

Due: Sunday, March 1 by 11:59pm

Rubric: Download