CSc 302 Assignment 3

Bar The Way


Sep 18
50 pts
Sep 27

Use CSS and HTML to create a bar graph. Mine looks like the image shown at the right (only the top is visible). You can use any real data you like, or you can make some up. (You should be clear if it's real or not, either because the the title is silly, or by just saying so.) You may do what you like, under the following:

  1. Follow proper HTML5 document structure.
  2. Use only HTML and CSS. Don't use images, and don't use the HTML table tag.
  3. The bars should be a percentage width so they vary with the width of the page.
  4. Create at least ten bars.
  5. Use at least one Google font.
  6. Choose fonts and colors as you like to make the page look nice. (Feel free to be fancier than mine.)
  7. If you use real data, include a link to the source if you can. (I have one, but it's at the bottom of the page so it doesn't show in the picture.)

Don't feel like you need to follow my layout exactly. There are other places to put the numbers, and all sorts of more interesting labeling might be possible.

I made the bars with divs inside divs. The outer divs are the same length, and the inner is a percentage reflecting the underlying data.

If you want to make a graph with vertical bars instead, feel free.

When you're ready, post your page on Sandbox, then go here and enter the URL of the page.