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.
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, ftp your page to the following URL:
Validated & Semantic Markup: 1
Responsive Effectiveness: 2
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 system of your choice, or of your own devising.
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.
- 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.
- Raumrot.com: 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.
- Magdeleine.co: 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, 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: FormSpree.io
- A Sources page that lists the source of every image on the site, and the source of all the text. Include URLs for each resource not produced by you. This page will likely include a table that shows the image in one cell, and the URL 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. It can have links to pages that exist, and null links (#) for links that don’t exist.
- 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. To test in more browsers than we have in the lab, use the crossbrowsertesting.com service. I will demonstrate in class, and give you a free account.
Publish it at http://mylinux.langara.bc.ca/~YOUR_ID/magazine (as well as hand it into STUDENTSHARE)
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