Langara Outlines

WMDD 4815 Assignments

Assignment One: HTML/CSS Resumé

For assignment one, I want you to make an HTML resumé.

This will be a single page. It will list:

  • your education
  • your employment history
  • your skills
  • your interests
  • your contact info
  • anything else you think is worth including

this could include a picture, or references, links to work you have online, etc

It will be responsive, meaning that it will look equally good on phone & tablet as it does on desktop.

The main concern here is that your text is exceptionally readable. Pay attention to

  • typographic hieararchy: is it easy to understand, at a glance, the structure of your content?
  • line length & line-height: at various breakpoints, is your text easily readable?
  • color: does color add to the resumé, or distract from it?

Make sure that your HTML & CSS pass validation (it’s worth 10% of the mark).

Make sure that your page works in every browser we have in the lab, as well as on any modern phone or tablet.

When done, you need to hand in the assignment to two places: & studentshare.

Instructions on how to access both locations.

The live URL for this assignment must be

Do not forget to test the file and all links.

First, sftp your page to the following URL:


Validated & Semantic Markup: 1
Responsive Effectiveness: 2
Typography: 2
Design: 5

Examples of previous students’ work with this exercise

Assignment Two: Responsive Magazine Design Mockup

For this assignment, I want you to produce a mockup of an online magazine site. This exercise will have four pages and be based on a grid you make. You may not use Bootstrap, or any other prebuilt grid system.

The magazine focus is up to you. Make it realistic. If you like bicycles, make it a cycling magazine. If you like soccer or grass hockey, make it about that. If you like travel, consider making a travel magazine—this one might be an easier one to get great images for.

For images, you can use your own photographs, or images that you have acquired from copyright-free sources. Possible sources can include the following, or others. Just remember that you must list where images came from in your SOURCES page. Here are some other sources

  • Unsplash: very high quality images. Copyright free: No restrictions on usage. Searchable.
  • Splitshire: totally free. Some good stuff. No restrictions on usage, other than “you can’t sell the images.”
  • Pixabay: Copyright Free, Attribution not required. Searchable. Photos, Vectors, Videos, Illustrations. Backgrounds. Textures. Lots to find here.
  • MorgueFile: Some good stuff, but a lot of the images can look a bit cliché stock photo.
  • Excellent curated Flickr selection. Some of the images have CC (Creative Commons) licensing terms (typically requiring attribution and an acknowledgement if you altered the image)—so if you use images from here, read the license details. Special Sets: groups of photos joined by theme.
  • Flickr: one of the oldest photo sharing sites on the web. Not all images are free to use, however. To understand the various  licensing terms, read this article and this one, too. Each image will have licensing information listed. To get a better understanding of whether the license allows your usage, click on the license term link.
  • Licenses either Creative Commons, or Attribution Required. Useful search features.
  • NewOldStock: Vintage photos from public archives. No known copyright.
  • GratisPhotography: free of copyright. High resolution. Some high quality.
  • Jay Mantri: totally free license. Like UnSplash. Tumblr blog.
  • PickUp Image: free, no attribution required.
  • Picography: totally free.
  • LifeOfPix: Totally Public Domain. Any usage allowed.
  • Creative Commons Image Search

If you include images from copyrighted sources, you will get zero for the assignment.

The site must have

  • An index page that represents the landing page of this magazine website. The header of the site will have a logo.You will have “teaser” descriptions of articles on this page, possibly or likely accompanied by an image and other possible detail such as writer or category. You can invent this content.
  • One full article page. Give it a name of “story.html” and save it on the top level of the site.
    The article page must have at least five paragraphs of REAL text (no lorem ipsum), two headings, and two images.
  • A  404 page. Give it a name of “404.html” and save it on the top level of the site. Research good 404 pages to get some ideas of what you should include on that page.
  • A Contact page, with a form that works. Name: contact.html.
    For information on how to build a good form: Shay Howe Learn to Code HTML & CSS
    For a free form handler:
    The form must also have some conditional logic: I’ll discuss this in class.
  • A Sources page that lists the source of every image on the site, and the source of all the text. Include links for each resource not produced by you. This page will likely include a table that shows the image in one cell, and the LINK in a cell beside it. Try to make this table responsive and as elegant as the rest of the site. Name: sources.html.
  • At least one menu. All links in menu can be null links (#).
  • Icon fonts for at least one menu.

Make the site beautiful, accessible, elegant, and responsive.

The site must have a search box in the header. Don’t worry about making that work: just make it show up.

The page MUST work well on any modern browser on desktop, smartphone or tablet. 

Publish it at (as well as hand it into STUDENTSHARE)

Before publishing and handing the assignment in, please review this additional checklist.


Validated & Semantic Markup: 2
Responsive Effectiveness: 2
Typography / Readability: 2
Index Page Design: 2
Article Page Design: 2
404 Page Design: 2
Contact Page Design: 2
Image Treatments / Design: 2

Examples of previous students’ work with this exercise