Lab 3: Flexbox Nav

Overview

This lab is intended to give you a basic understanding of how CSS flexbox works and its benefits vs using float in previous lab/assignments.

Sample

Requirements

1. Create a brand new HTML file named flexbox-nav.html (all lowercase, no spaces).
2. You may write CSS in either an internal or external stylesheet. No inline styles.
3. Create a <div> with four <a> inside. The links do not need to go anywhere at this point. Use # as a placeholder for href, like this: <a href="#">
4. Add some basic styling, such as:
   1. A background color on all the <a>
   2. Hover effect to change background color on all the<a>
   3. Add padding top/bottom on all the <a> to create some spacing on top/bottom.
   4. text-align: center to align all the text to the center
5. Using only flexbox properties (do not use floats!), style the navigation so that:
   1. Desktop (screen sizes 992px and above):
      1. All nav items are in one row.
      2. All nav items have the same width.
      3. Text is horizontally centered.
   2. Tablet (screen sizes 768px – 991px):
      1. Two nav items per row.
      2. Each nav item takes up half the width of the row.
   3. Mobile (screen sizes 0px – 767px):
      1. One nav item per row.
6. You do not need to use flex-growth, flex-shrink, and flex-basis properties (which we did not go over in lecture). Using width is enough to satisfy the lab requirements.

Submission/Upload to the server

Until the server is fixed, submit all files to Blackboard. Follow the below steps:

1. Rename the folder that contains all your Lab3 files to: ITP303_Lab3_[usc username]
2. Compress this folder to a .zip file.
3. On Blackboard, go to Assignments -> Lab 3: Flexbox Nav and upload the .zip file here.
4. You will be able to make unlimited submissions. Only the last submission will be graded.