Langara Outlines

WMDD 4835 + 4840 Combined Final Assignment

The combined final assignment is due Friday April 13 by noon.
The final exam in each class will take place in the last class session—not in the exam period as officially scheduled. 
The project will be a website for a business—possibly, but not necessarily, imaginary. The business type is up to you—but it could be a restaurant, other small business, or a festival of some sort.  If you know anyone who needs a website and you can convince them to let you build it, feel free to discuss the idea with me.
Each website will be produced by a team consisting of one individual from the Design stream and one individual from the Development stream.  You get to choose your partner.


If you’re making up the material, all text will be written by you. Your images will be made by you, or you can use open-source or creative commons material.

Be creative in your looking for sources. For example, if you need pictures of authors, or satisfied customers, or members of the business, there are a number of UI sites providing free photos of potential users for mockups.

One such site is; another is You can download images at either site, or with a little JavaScript you can have your site load random user data (picture, name, address, etc) from such sites. You don’t have to load random users for the assignment, but doing so is a good way to test how extensible your layout is: does it break if a name is long, for example?

The features of the site are up to you, but I want to see a site that is realistic and useful. If you made a restaurant site, as an example, I would like to see menus, reviews, directions, maybe a blog about food, pictures of dishes, a way to make reservations or to contact the manager, etc. If you have forms on the site, make sure that they are sent to you so I can test them, and make sure that their form submitted successfully messages fit in with your site design (rather than supplying a generic form from a host company or form handler, etc).

Most sites will need social components (perhaps for a restauarant’s Facebook page, but also sharing functionality). For the assignment, you don’t need to make such links work, but just have the icons as part of the UI. No need to go make a fake restaurant Facebook page, in other words.

For the HTML, you must use a Grid and/& Flexbox layout.

You may not use Bootstrap or any HTML/CSS framework. 

Things I want to see:

Portfolio-Ready Quality: Make sure that all text is concise, understandable, and consistent with the aims of the entire site. Get help with proofreading, if necessary. You don’t want spelling errors, grammar errors, or weak writing on a final assignment or portfolio piece. If you’re in doubt about how well-written a piece of text is, get classmates to look over it, or talk to me. Spellcheck. Grammar check. Do not leave this to the last minute. If you are applying for a job, and there are spelling or grammar errors in your portfolio, it will almost always destroy your chances of getting an interview.

Responsive Strategy: Does the site work regardless of device? Be sure to test your designs—using emulators and real devices.

UX: Is the site layout sensible? Is it consistent? Is there a hierarchy of content implicit in its organization? Does the UI of the site follow common conventions?

Design: Does the typography support the content? Does it contribute to the brand? Is it appropriate for the type of site? Is it easy to read at all screen widths?

Color: Does color add to or subtract from the message of the site?

Accessibility: Is your site accessible to as wide a range of people as possible? Are there barriers to people with weaker vision or color deficits, for example?

Images: Do images help tell the story of the site? Are the images sized appropriately? Even though we often use images in exercises that are bigger than they should be, do this assignment as a real, production site. The images must be open source. Here is a list of places you can find these kinds of images.

Alignments: A significant part of design is making sure things align. Make sure that this is taken care of. Few things make a graphic design look sloppier than bad alignment.

Code: Does the code validate? Is the code well-organized? Is it concise? Would it be easy to revise? Is the code commented? Is it semantic? Are class names logical and flexible? Would it be easy for new team members to understand how you’ve built the site?

Functionality: Is it easy to get in touch with the site owners? Would it be easy to share content? Are there reviews of the business? Is the product or service adequately described?

Extensibility: If the site owner needs to add a menu item, or another article, etc., will the site layout break, or is there room for the content to change?

Browser Support: the site should work well in the latest browsers, while delivering acceptable fallback content to earlier browsers.

What You Must Hand In to StudentShare:

  • A tested and working Duplicator archive + installer combination (handed into the 4840 handin folder). I will not have time to track you down if there are problems with either file. If I can’t mark it, you can probably guess what grade it will get.
  • A text file entitled GROUP, listing the two members in your group.
  • An html page listing sources of all images, including actual links to the source location. All HTML, CSS, and JS code must be written by you, apart from things like reset stylesheets or jQuery plugins, or that contained in Underscores itself or generated by any of the plugins you might be using in the site.
  • A screenshot of successful validation of your site’s css.
  • A screenshot of successful validation of the HTML of your index page.
  • Screenshots of your site front page in recent versions of Chrome, Firefox, Safari,  Edge, iOS or Android, and IE11.Remember that the site does not need to look or behave the same in each of these browsers. Rather, it needs to work and look acceptable within the capabilities of each.