HW04: Flexbox and Lists due Tue 26 Sep 13:20


This assignment provides practice implementing a responsive design using flexbox. Also, it will involve highly customizing an unordered list to produce an attractive menu.


In all you do please remember that being a part of CSCI@HSU means DOING THE RIGHT THING.

So, do this assignment in a way that demonstrates integrity, develops competence, is correct, and honors God ... because what we do matters!

Allowed and Disallowed Resources

In completing this assignment you MAY use/access the following resources:

You may NOT use/access:

Failure to abide by these guidelines will result in a zero for the assignment and the incident will be reported to the university provost as a violation of the university academic integrity policy. A second incident of academic dishonesty (whether from this course or another computer science course) will result in an F in the course.

Part 1: Make Poems Page Responsive Using Flexbox (12 pts)

This assignment continues the work started on lab day. If you haven't done so already you need to complete all lab day work. Use the diagram provided in responsivelayout.jpg to guide you as you use flexbox (not floats allowed) to implement a responsive page with two breakpoints.

As with lab day instructions this diagram serves to provide the big-picture structure of the assignment while the instructions below contain the specifics.

Part 2: Make a Beautiful, Responsive Menu (10 pts)

One of the issues in our design is that in the large design the menu needs to be vertically arranged and in the medium design it needs to be horizontally arranged. It is common to use unordered lists (<ul>) for rendering menus. There are many great tutorials where you can find examples of how to create lists for this purpose. Do a web search to find several of these examples and select one or two that you especially like. Use the CSS code provided in the examples to provide a highly customized look to your menu that fits nicely with your chosen color scheme. REMEMBER: You will need a vertical arrangement for the large design and a horizontal arrangment for the medium and small designs. When looking be sure to use CSS-only solutions (i.e., no Javascript). (I'll be really sad if everyone uses the code from W3Schools ... there are lots of wonderful examples!)

Part 3: Modify Your Site to Use Flexbox (8 pts)

Modify the code on your personal web page to make use to flexbox to achieve the layout. You should not use any float properties in your CSS. You are not required to have a responsive design at this point.


Once you have the page looking the way you want. Take a moment to check the validity of your code by running it through the W3C Markup Validation Service: https://validator.w3.org/. Make whatever changes are recommended until there are no errors.

Your homework will be graded as follows:

Completeness 20 pts
Aesthetics 4 pts
Validation 2 pts
Total 26 pts

As always, have fun!