Project 2 Redesign Personal Site

Project 2- Student Bio Redesign

Objective: Use HTML/CSS and Photoshop to redesign the personal site you made with html. You will apply Responsive Design techniques.

Requirements:

• • You will use html and css with an html editor (Brackets or other), and the graphics program, Photoshop, for this project.
  • For this and all subsequent projects, you must attach a stylesheet to each page.
  • Use divs for formatting each page.
  • Use responsive design techniques for fluid width, fluid images, media queries and viewport meta tag. Make sure your site looks the way you intend it at the smallest size. This may mean changing font sizes, changing navigation, not displaying certain divs, etc. Include media queries to control the size at least two levels (for example max-width: 480 and max-width: 768). Include the required, responsive viewport element on all pages –
    <meta name=”viewport” content=”initial-scale=1.0, width=device-width” />
  • Site must have a total of at least four pages. Add additional pages as necessary. Pages can represent separate areas of the site, like home, about, contact, links, a hobby, etc.
  • Edit, organize and improve your content.
  • Decide on an appropriate navigation strategy. Use a list styled with #nav elements in the CSS.
  • Include at least one or more appropriate photos or graphics.
    Photos must be optimized with Photoshop
  • Design your own graphics, including a site logo, in Photoshop. Add visual interest to each page.
  • Include at least three external links to relevant sites. Be sure to provide context for links in your content. Don’t just provide a random list of link. Why do you like it, what does it do, why is it interesting?
  • Page titles (what shows in title bar) – should include the name of the site and be unique with the name of the page (Cindy Royal – Links, Cindy Royal – Resume, etc)
  • Make sure you include your email address somewhere in site.
  • Add a date to the bottom of the home page. Update this every time you make a change.
  • Make sure you save the page with a .html extension.
  • Upload all associated files to the main directory of your Web site (this will overwrite the files from the first project)