In-class Practice

The Box Model

Part 1

Returning to the DCI Web Conference site, let's add some CSS to make the home page

  1. Open the practice site in VSCode: Open VSCode
  2. Open a tab so you can preview your site as you work: View Your Practice Site
  3. At the top of your style.css file, let's set the default box sizing to account for borders and padding. The code should look like this:
    * {
      box-sizing: border-box;
    }
    

    The * selector applies this setting to every possible thing that can be selected.

  4. In CSS, add a selector for a class called container that will apply some default margins, padding, and width to blocks that contain sets of content. The selector should set the following properties:
    1. margin of 0 on the top & bottom and auto on the left & right
    2. padding of 1.75em on the left and right only
    3. width of 95%
  5. In your index.html file, add a class attribute with the value container to the body's header, all four section elements, and the footer.

    Remember that there can only be one class attribute per opening tag. Adding a second class requires you to separate class names within a single attribute. For example:

    <section id="speakers" class="conference-info container">
  6. Go through your other HTML files (speakers, schedule, venue, register) and apply the same class attribute to the header and footer elements.
  7. Back in CSS, create a selector for all h3 and p elements that has a margin on the bottom of 1.5em.
  8. Add two more selectors in CSS for a class of button and a class of button-alt. .button should include:
    1. border-radius of 4px
    2. display of inline-block
    3. margin on all sides of 0

    .button-alt should include:

    1. border on all sides of 1px width, solid style, and #dfe2e5 color
    2. padding of 10px on the top & bottom and 30px on the left & right
  9. In HTML, add the values button and button-alt to the existing class attribute for the link labelled "Register Now".
  10. Add some extra padding to the introductory section in CSS. Select the id with the value introduction and set its padding to:
    1. 22px on top
    2. 80px on the left & right
    3. 66px on the bottom

If you entered everything correctly, your HTML and CSS files should look like this:

And your output should look like this:

Part 2

Having done some initial box model setup, let's further refine the box model and begin to position content to make the page's layout more interesting.

In the index.html file:

  1. Add a class attribute with the value siteheader to the body's header.
  2. Add a class attribute with the value sitefooter to the body's footer.
  3. Add a new div element with a class attribute of logo to the top of the body's header that contains a hyperlink to /index.html. The text of the link should read "Future DCI Web Conference Logo".
  4. Add a div element around the header's h1, h2, and nav elements with a class attribute of titlemenu.
  5. Add a class attribute to the ul in both the body's header and footer with the value sitemenu.
  6. To the first section element, add a class value of clearfix.
  7. In the first seection element, above its header, add an aside element that has a class with the value quote. Then, within the aside tags, add the following HTML:

    <p>"Last year was a blast! I can't wait to see this year's sessions." &mdash; A Happy Attendee</p>

  8. Surrounding all three of following section elements (ids of "speakers", "schedule" and "venue"), add a div element with a class of container.
  9. Finally, from the three section elements in the previous step, remove the value container from their class attributes.

Your HTML should now look like this:

In the style.css file:

  1. Select the body and assign it a margin of 0 on all sides.
  2. Make the class of siteheader fixed to the top left of the screen and 150px tall.
  3. Add the following properties to the .conference-info selector:
    1. display set to inline-block
    2. vertical-align set to top
    3. width of 32.5%
    4. padding of 1em only on the left and right
    5. margin of 0 on the top/bottom and auto on the left/right
  4. Set the top margin for #introduction to 150px.
  5. Set both the left padding and left margin of .sitemenu to 0.
  6. Select all li elements, and make them display as inline-block and have right padding of 1em.
  7. Select the class of logo and give it the following properties:
    1. display set to inline-block
    2. vertical-align set to middle
    3. width of 15%
    4. height of 100%
    5. border that is 2px wide, solid, and black
  8. Select the class of titlemenu and give it the following properties:
    1. display set to inline-block
    2. vertical-align set to middle
    3. width of 84%
    4. padding that is 1em only on the left side
  9. Select both the .siteheader and .sitefooter simultaneously and set their left and right margins to auto.
  10. Then select the .sitefooter independently, and set text-align to center.
  11. Select the class of quote and give it the following properties:
    1. float set to right
    2. width of 250px
    3. padding of 0 on the top/bottom and .5em on the left/right
    4. border that is 4px wide, double, and light grey
    5. margin of .5em on the left and 1em on the top.
  12. Add the following CSS to end the float created by the previous step (we'll discuss the details in a later class):
      .clearfix:after {
        display: table;
        content: "";
        clear: both;
      }
    

Your CSS should now look like this:

Final Output

Below is approximately how your final output should look: