Title: U8L2 Assignment: City Website - Checkpoint 6
Course: BC - Web Development 10 - 1.0 > Section: Unit 8 - Responsive Website Design

You will work from a copy of your U7-City Website folder and improve the layout of your site by implementing the code you learned through this unit.

- Title your new folder U8-City Website.
- For this assignment, be sure to use the dev tools and Responsive Design Mode / Device Mode in your browser.
- Also, be sure to keep your media queries in appropriate order based on their max-widths.

To begin:

Open up your new folder and make the following changes.

- Add a viewport meta tag to both the homepage and attractions page.
- In your CSS, add a min-width of 320px to the body.
- Find a new image of your city and add it as a background image to your header.
  - Make sure the image covers the entire background and doesn't repeat.
  - If there's a part of the image that serves as a focal point, set the background position so it will stay in view at all screen sizes.
  - If you find your header's text is hard to read with the background image, adjust the text colour. You could also look up the text-shadow property and see if that would help. Getting text to look good on a background image can be difficult, so for this assignment don't worry if it isn't perfect.
  - For this assignment, you can add the citation for your image as a CSS comment next to your background-image declaration.
- Add a font-size in px to the html element, then change all your other font-sizes to use em or rem.

The homepage:

After making the above changes, you're going to start making your overall layout responsive. To start with, just focus on your homepage. After that's complete, we'll move on to the attractions page.

- First, set overflow-x: hidden; on the main element.
  - We need this so the max-width settings on the elements inside will work. Otherwise, the main element will simply expand to fit its contents.
- Use max-width where needed inside of the main element so the contents reduce in width with the screen size.
- In your browser, reduce the viewport width until you think the design no longer looks good. Add a media query for this width (or slightly before it). In this media query, reduce the font-size on the html element. Also reduce whatever paddings, margins, etc., you believe will help the design look better at this size.
- Once more in your browser, reduce the viewport width until you think the design no longer looks good. Add a media query here. In this media query you'll stack the nav and main elements on top of each other.
  - Assuming the parent element of the main and nav elements is set to display: flex; you'll want to change that in this media query to display: block;.
  - If you've set a width on either the nav or main elements, change it here to 100%.
- Again, view the page in your browser, and ensure it looks good down to 320px wide. If you need to, add another media query and make further adjustments until you're satisfied.

The attractions page:

Now view the attractions page in your browser. You'll see that at smaller sizes the right side of the table will be pushed off the side of the screen.

- First, for the images in the table, set max-width: 100%;. This will cause the images to shrink as the table reduces in size.
- Also set a min-width in px. You choose the size, but this will be the smallest size the images can shrink to.
- You can also use a media query to reduce font size, padding, etc., in the table for narrower viewports.

Your table will still be sticking off the screen when the viewport is too narrow, so to solve this, we're going to wrap it in a div and allow the user to scroll sideways to see the whole table.

- Wrap the table in a div with class="table".
- For this div, add the declaration overflow: auto;.
- Check and ensure the sideways scrolling behaviour is working.

Check your site:

Give your site a final look-over. Adjust any styles you feel would help, and be sure your site looks good from fullscreen down to a width of 320px.

If you're stuck on any point, be sure to reach out to your teacher for help.

After you're finished, place your folder, containing all your html, css, and image files in a zip file named U8-City Website.zip and submit it.

Assessment:

- 5 - Font sizes in em/rem, and font sizes reduces at one or more breakpoints.
- 5 - Nav section stacks on top of main content at an appropriate breakpoint. Once stacked, the nav section is full width.
- 5 - Images in the attractions page table reduce in size for smaller screens. When the table can't fit on screen, it can be scrolled sideways to see all content.
- 5 - Design is responsive from 1920px down to 320px width.

Total: /20