www.wd4e.com

Homework Two: Advanced Selectors

This homework is also described in a video lecture. Make sure to watch it to get a better feel for what I am looking for.

Objectives

  1. Create a style sheet and link it to the html files. (Without changing the html.)
  2. Style the sheet using the properties we covered in lecture.
  3. Consider using some elements we didn’t cover, or didn’t cover well. You can search for the options online, or you can watch the videos from Week Four for some pointers.

Background

I assume that you have finished all of the Week Two lecture videos, and you may want to watch Week Three as you complete this assignment. This assignment builds on Assignment One, but we have a new set of “After” pictures. You can see the newly styled pages here:

http://intro-webdesign.com/CSS/assignment-2/index.jpg

http://www.intro-webdesign.com/CSS/assignment-2/teams.jpg

http://www.intro-webdesign.com/CSS/assignment-2/history.jpg


Getting Started

You will use the same code as you used for Assignment One. I would recommend that you save a copy of your stylesheet for backup. The html is all still the same.

Steps

    Download the image from http://intro-webdesign.com/CSS/assignment-2/images/flywheel.jpg
    Style the following
  • The body should have padding and margin
  • The header should have a background color, background image (using a local image), and padding
  • The navigation links (and only the links in the navigation) should be styled with a new display, margin, border-radius, text-decoration, and padding
  • The link to the current page should be styled differently from the other links (using class = "active')
  • The sections should be next to each other, not one on top of the other.
  • have included a video you can watch to see a live demo of this new site. You can watch it in the next video, or link directly here https://www.coursera.org/learn/introcss/lecture/VQgU9/02-08-optional-homework-description

    Submission

      Submit your css file, we will still call it hw1.css.
      Use the peer grader to assess the work of your fellow students. This second assignment may have a number of different options. You can grade the assignment by eye, or else save the css and try applying it to the html files.

    Before