Lab 3: Flexbox Nav

Posted on | by nayeon

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

Please follow the submission requirements below carefully. You will be deducted points for not following submission requirements to the teeth.

  1. Open FileZilla and connect to the itpwebdev server as you have done in Lab 1 (click File -> Site Manager). If you forgot how to connect, follow this guide on how to connect and upload files to the itpwebdev web server.
  2. After you have successfully connected to the itpwebdev server, created a folder (aka directory) named lab03 inside the public_html folder. Then upload this assignment HTML file and images to the lab03 folder. Refer to the guide if you’re not sure how to upload the assignment file.
    1. In your browser, go to http://303.itpwebdev.com/~yourusername/lab3/flexbox-nav.html to check that the assignment file has been uploaded correctly.
  3. One last thing. In your computer, open up student_page.html that you created in Lab 1. Add a link to this assignment to student_page.html under the heading “Labs” so that the TAs can easily access your completed assignment.
  4. Upload the updated student_page.html to the itpwebdev server via FileZilla inside the public_html folder. If it asks you want to overwrite the previous file, click Yes.
  5. (Optional) If you are having trouble uploading to the server and cannot upload on time, add all files for this assignment in a folder, compress it as a .zip file and upload it to Blackboard. On Blackboard, go to Assignments -> Lab 3: Flexbox Nav. You will get some points deducted for not uploading correctly but at least you will not get a zero.