NOTE: I deduct marks for typos and spelling errors. Seriously.
For each assignment, please read the associated description, as well as the specific measures by which I will mark your work.
The rubric is at the bottom of each description.
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
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.
When done, ftp your page to the following URL:
Validated & Semantic Markup: 3
Overall Design: 4
Assignment 2: Domain & Hosting
Register a domain name and get hosting.
Research effective Coming Soon pages. Make one of your own and upload it to your site at the root level of the domain (ie, put it at your URL, not in a subfolder or somewhere else).
If you are convinced that you will never need your own domain and don’t want to spend the money, pitch another assignment to me.
If you already have a domain, imagine that you have a new client whose site you’re designing. Make a coming soon page for them. Post it on your site at http://yoursite.com/publ1220/ (since the root level is presumably being used for other material if you already have a site).
You can take it down after I’ve marked it—which will be within a week of the due date, so don’t worry about it showing up in google listings.
Consider both usability and beauty in the design of the page. Besides announcing that the site will be online soon, what else should or could it do, for you or your client? Contact info? A contact form? Links to social media? Sample content? Humor? Style? Clever CSS?
Your new site must work in all the browsers we have in the lab and common mobile devices.
It doesn’t have to work perfectly in all browsers. Rather it must degrade gracefully.
Domain Name & Hosting: 4
Coming Soon Page: 6
Assignment Three: 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 a “bibliography”). A link to previous student work is at the bottom of this description.
The magazine focus is up to you. Make it realistic. If you like bicycles, make it a cycling magazine. If you like soccer or food, 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 on your “bibliography” 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 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. Unless sources explicitly give you permission to use them, assume that you do not have the right to use them.
The site must have
- An index/home 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 links to each resource not produced by you. Name: sources.html.
- At least one menu. It can have links to pages that exist, and null links (#) for links that don’t exist. You do not need to make links to any of the pages in the exercise, unless it makes sense in your menu (a link to a 404 page, for example, is by definition a dumb icon).
- 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 ANYmodern browser on desktop, smartphone or tablet.
Publish it at http://mylinux.langara.bc.ca/~YOUR_ID/magazine
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