Web Programming Step by Step
Discussion Section 2: Best Section!
Firebug, Page Sections and Layout

section idea and code by Stefanie Hatcher

This section is about adjusting the appearance of page sections using CSS and its Box Model, as well as debugging HTML/CSS code using the Firebug tool.

Firebug:

Firebug is an add-on for the Firefox browser that lets you dynamically examine or modify the content and styling of web pages, among many other features. After installing it, right-click any element and choose Inspect Element to get started:

Today in section, go to the main page of the course web site and use Firebug to perform some or all of the following operations:

1. Figure out what are the colors being used as the background color and border color of the box about the textbook.
2. How many pixels wide and tall is the right-hand side bar of the page? How many pixels thick is its border, and how many pixels separate the text in the sidebar from its border?
3. What is the URL of the "CSE" image in the top-left corner of the page? Figure this out, then change it to point to an image of your choice, such as this one.
4. Make all text in the green box about the textbook blink.
5. Change the bullets in the main "Announcements" list so that they have 3em of vertical spacing between them.
6. Double the left indentation of the bullets in the "Announcements" list.
7. Make the overall page's text size smaller by 2pt.
8. Make the "Syllabus" link green (without affecting the appearance of any other links).
9. Delete the two W3C validator images from the bottom-right of the page.
10. Insert a new bullet at the top of the "Announcements" list with any text of your choosing.
11. Change the part of the page that contains the instructor's contact information so that it has the following styles:
    • A dotted-line border, 2px thick, in the same color as the background from the textbook box on the page. Make it so that there is 1/2 em of space between the text and the border on all sides.
    • A larger 20pt font.
    • A light orange background color. (Not just the "orange" HTML color; lighter than that.)

Best Section Page:

Write a page that gives roughly 5 reasons why your section is the best of all sections. Start from the template in the following file:

• best.html

Then make the following changes to the appearance of the page. You will need to edit the HTML code to implement a few of these steps, but as much as possible, try to implement them by changing only the CSS.

1. Fill in the incomplete page content such as the page heading, your section number, and your 5 reasons why your section is best.
2. Pick 3 of your favorite images to put on the top of the page, showing why your section is the best.
3. Modify the CSS so that the three images appear in a line centered horizontally within the page. Each image should occupy 1/4 of the page width (the images should change size if the page is resized).
4. The overall area of the page that contains the top heading and images should have a 5px-thick dotted border.
5. Make the list of 5 reasons be centered horizontally within the page (the list itself should be centered, not the text within it). Make it so that the list occupies half of the horizontal width of the overall page.
6. Make the list of reasons appear to have a "shadow" by giving it a thick, dark border on its right and bottom sides.
7. Make the list "taller" by placing 1em of vertical spacing between each pair of neighboring list items.
8. Pick one of the five reasons in your list that is particularly persuasive. Make it stand out by giving it a thick dashed border that is 1/2 em away from the text on all sides.
9. Make the paragraph above the list have an overall background of one color, but make the actual text inside the paragraph have a different background color and be underlined.

You can also apply any colors you like to make your page look better. When you are finished, your page might look roughly like the screenshot below, which is a solution page with CSS code written by Stefanie Hatcher.