Assignment #10: Flexbox - J4502-SS19/class GitHub Wiki

Overview

This assignment will teach you how to implement Flexbox to make your site's navigation and footer responsive. This will be the start of expanding your mobile site to tablet, laptop and desktop sizes.

Due date

This is due by 5 p.m. on Friday, March 23.

Points possible

Steps to take

You'll continue to build off your individual styled site. You will implement Flexbox on your navigation, body and sidebar content.

You may need to add additional content to your site to accomplish the required tasks. This can be lorem ipsum content or actual content to make it a site that is useful for you after this class ends (a portfolio site, for example).

You must include:

A shift in the appearance of the navigation from mobile to desktop. If you have a vertical mobile menu, it should become a horizontal menu on desktop. If you use a small horizontal menu for mobile, you can right-align it with the header on desktop. Regardless, the user should see a change in the navigation from mobile to desktop.
An image that floats next to text in the main bar on desktop as opposed to stacked in the text on mobile.

Grading:

All required content there (15 points)
Coded correctly — use of flexbox to accomplish the tasks listed above in your external CSS stylesheet (20 points)
CSS validates (5 points)

Total: 40 points

Note: Assignments not turned in by their due date drop a letter grade for each day late.

Send your link from Github Pages to Rob via DM on Slack.

If you have any questions at all, feel free to ask. :+1:

tl;dr:

Make your site responsive using Flexbox (see checklist above), validate it, push it to GH-Pages, send me a link. Worth 40 points, 4 percent of your semester grade.