Exercise 5

The goal of this exercise is the practice columns, floating and list styling.

Due Date and Time

Exercise 5 is due by 12:59pm on October 2nd, 2018. I will disable submission at the start of class.

Instructions

Setup

  1. Download the exercise files from the Box Folder named CS0134-Exercise-5-<username> that I shared with you.
  2. Unzip and copy the ‘CS0134-Exercise-5-<username>’ folder onto your flash drive.
  3. Open VSCode and open the ‘CS0134-Exercise-5-<username>’ folder.
    1. ‘File’ -> ‘Open Folder…’
    2. Open the ‘CS0134-Exercise-5-<username>’ folder on your flash drive.

Goals

Each goal is worth 1 point.

Place all style rules in the style.css file.

  • Rearrange the HTML in index.html so that the ul element is in an aside element that is a sibling of the main element.
  • Remove <h2>Destination Categories</h2>
  • Float the globe image to the left
  • Add a 20px right margin to the globe image
  • Remove the bullets from the li elements
  • Set the left padding for the ul element to 0
  • Float the aside element to the left
  • Set the width for the aside element to 170px
  • Float the main element to the right
  • Set the width of the main element to 570px
  • Set the padding for both the main and aside elements to 0 for top and bottom and 15px for left and right
  • Clear the floating in both directions for the footer element

Results

Your site should look similar to the following.

index.html after Exercise 5

How to Submit Your Work

Upload your index.html and style.css file to the ‘CS0134-Exercise-5-<username>’ Box folder.

Note: When you want to upload a new version of one of your exercise files, click on the file in box and select “Upload New Version”.

I highly recommend that each time you work on this or any other exercise, that you upload your files to Box even if you are not done with the exercise. In this way, if something happens before the submission deadline that keeps you from uploading the finished exercise, there is still something to be graded.