CS 257: Software Design

Web Application: Mockups in HTML and CSS

Folder: webapp/mockups

You will work with your web application partner for this assignment.

Goals

• Practice using simple HTML and CSS
• Create a draft of your website's user interface using HTML and CSS
• Include both the visual appearance and layout and the navigational structure of your website

Rubric

For this assignment, you will use HTML and CSS to render mockups of your wireframes from the wireframes assignment (or something inspired by your wireframes and your evolving ideas about your web application project). That is, you will create separate web pages showing each distinct view of your website, as close in layout and visual appearance to your vision of the final website as possible.

Your tasks

• Create an index.html file that consists of a simple list of links to your mockups
• Name your mockups mockup1.html, mockup2.html, etc.
• Put all your files (*.html and *.css) in the webapp/mockups/ directory in your repository

Notes

• If you want to edit your user stories to match new ideas about your website, go ahead.
• If you want to display data (e.g. search results) in any of your mockups, you can just hard-code some sample data in a suitable table, list, drop-down menu, etc.
• If you plan to have an interactive map or a graph or some other kind of data visualization, create an image that looks roughly like what you want to see in the final project, and use an <img> tag to include it in your mockup.

• I want your project to use simple tools. I would be delighted if you just use vanilla HTML and CSS to create your pages. I definitely do not want you to use complex frameworks like React, Angular, or Vue. The point of this prohibition is that I want you to be gaining an understanding of the most fundamental structures that underlie web pages (i.e. simple HTML, CSS, and Javascript). With a good understanding of the simplest building blocks, you'll be better equipped to use the fancier and more complicated tools intelligently.

  That said, if you're like me and not very good at choosing colors or fine-tuning an attractive layout, I am comfortable having you use the simplest parts of the (relatively) simple CSS library bootstrap. There's a startup cost to learning even something as straight-forward as bootstrap, so don't embark on it unless you have a few spare hours. But if you do want to use bootstrap, I encourage you to look at the introduction of their documentation and their examples page (in particular, the "starter template" down the page under "Frameworks"). I also have a very basic video intro to bootstrap.