Title: U6L2 Assignment: City Website - Checkpoint 4
Course: BC - Web Development 10 - 1.0 > Section: Unit 6 - Structural Building Blocks

You will use work from your Unit 5 CSS Coding assignment and potentially from your Unit 3 City Website Checkpoint 3 assignment to complete this assignment. Remember, if your teacher provided feedback to improve those assignments, it would be wise to make any necessary changes to your work first. Read through the instructions of the assignment very carefully so you don’t miss any important details.

Set up your folder:

- Copy your U5-Rome folder from the Unit 5 Lesson 2 assignment, and name it U6-City Website
- All your CSS should be in one file: main.css.

Determine the city you will focus on:

- At this point, you can decide to use Rome as your city of choice (as was done in the U5L2 CSS Coding assignment), or you can revert back to the city you were exploring in previous City Website assignments.
- If you choose to revert back to your previous city, you will need to change the information, images, links, etc., in your Rome HTML file prior to moving forward with this Unit 6 assignment.

Implement Unit 6 components:

- In your CSS, add box-sizing: border-box; on all items, using the universal selector.
- On the main page, index.html, besides your main headings, you should have at least:
  - One picture of your city and a paragraph about it.
  - A link to the city’s official visitors or tourism website with another picture and a block quote.
  - A picture of an attraction and a brief paragraph about it.
- Put each of the above sets into separate divs.
- Give the divs at least a width, margin, border, padding, and background-color.
  - Add any additional styles you'd like to make the page attractive and cohesive.
- Add a second page, and name the HTML file attractions.html.
- On the attractions page, place a table with three major attractions:
  - Include caption "Major Attractions"
  - In the first row, place an empty cell followed by four headings (fact 1, fact 2, fact 3, photo).
  - In each following row include:
    - The name of an attraction (e.g., Louvre Museum).
    - Three brief characteristics/facts for that attraction (e.g., largest museum in the world; built between 1163 and 1245; on an island in Paris).
    - A photo for the attraction (be sure to include a citation).
- Give the table at least a background colour, and borders and padding on the <th>s and <td>s
  - Hint: Use border-collapse: collapse; on the table, to remove the space between the cell borders
  - Add any additional styles you'd like.

Wrap it up:

- Download and place all images in a folder called images, and link them via relative paths.
  - Be sure each of your images is no larger than 400px wide or high. If you're not sure how to resize an image on your computer, just do a web search for "online image resizer" and you'll find lots of options.
- Include a "Back  to top" link on each page that will bring the user to the top of the page when clicked.
- Include a link to the attractions page on your main page and then a link from the attractions page to your main page (i.e., Home page).
- Place your website files and folders (both HTML pages, main.css, and your images folder) into a zip file called U6-City Website.zip and upload it.

Assessment:

- 5 - for completing all content and style changes to create attractive, cohesive pages
- 5 - for correct use of divs with proper formatting
- 5 - for second page, including a properly formatted table, cited photos, working links
- 5 - for proper use of files and folders

Total:  /20