CSS: Responsive Design and Lists due Tue 26 Sep 13:20

\begin{purpose}
This assignment provides practice with a responsive design as w...
...s more
practice in using a validating parser to check your code.
\end{purpose}

Instructions

This assignment continues the work started on lab day. Continue to refer to the diagram provided in responsivelayout.jpg.

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

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 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!)

Finish Implementing the Design (10 pts)

Take time to complete your implementation of the design to include support for the ``small'' design. To do so you'll need to:

Grading

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!

Quick Links