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.

Requirements

Foundation

  • 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

Content

  • 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

Information

  • 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

Publishing

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

Submitting

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, October 13 by 11:59pm

Rubric: Download

Share: