For this assignment, you will be performing a task that is relatively common within web design: creating a layout consisting of a header, three columns of content, and a footer.
Specifically, you will be creating a menu for a restaurant. The header will contain the name of your restaurant, the columns will contain sections of menu items, and the footer will contain disclaimers and extra information.
While such a layout seems as though it should be trivially easy to create, it is rather cumbersome to do with standard CSS functionality. This is where libraries like Bootstrap come into play. As was discussed in class this week, Bootstrap gives its users the ability to create complex layouts, interactive pieces of functionality, and clean, consistent, professional design in very easy and intuitive ways.
The Template
We have created a template HTML file containing menu items and sections that can be downloaded here:
JSBin version (NOTE: Remember that Bootstrap’s layouts are fluid, so what you see may be affected by using smaller windows, as in JSBin.)
This file contains the CDN links necessary to incorporate Bootstrap CSS and Javascript libraries. You are free to update the menu as you wish, or create your own items.
Your task is to take this template and change it to match the format above. With Bootstrap’s grid system, this should be relatively simple as compared to standard CSS-only techniques.
Actually, your task is to try out bootstrap and make the menu nicer – at a minimum make it multi-column (as we did in class) – but try adding other stuff. Make the menu as cool as possible. Although, we understand that during exam season, doing the minimum (making it multi-column) might be all that people do.
Turn-in mechanism
Your final assignment should be a self-contained HTML file. But it doesn’t have to be (a link to anything that solves the problem is fine). JSBin links are totally fine (you might not need the debugger for this assignment, so JSBin can be fine).
We’ll turn things in via a graded discussion: on canvas. Please make a posting with a link to your menu. You can also ask questions and give feedback to your peers.
To get credit for this assignment you need to make 2 posts: one with a menu (that at least tries to get multi-column), and one either answering a question or giving someone else some feedback.
This assignment is due when exams start (December 17th) – but we will accept late assignments until we do grading (maybe on the 20th of December, maybe the 21st). I recommend you do it before the 20th in case we start early – once we’ve done grading, we can’t go back to add things.
Resources
Bootstrap’s documentation is quite thorough and can be found here: http://getbootstrap.com/getting-started/
There have also been a number of tutorials developed, including that by W3 schools: http://www.w3schools.com/bootstrap/
