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.
NOTE Feb 2020: For this term only, you do not need to FTP the files. IT has not fixed your accounts, or mine, yet. So ignore the next four lines. Just hand the project into studentshare.
When done, you need to hand in the assignment to two places: mylinux.bc.ca & studentshare.
Instructions on how to access both locations.
The live URL for this assignment must be https://mylinux.langara.bc.ca/~YOUR-LAB-ID/resume
Do not forget to test the upload. If the assignment is not at the correct URL, it will receive a mark of zero.
MARKING RUBRIC
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 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 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.
- 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 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. Start your research with this article: A UX Guide for Error Pages
- 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 for each resource not produced by you. This page might include a table that shows the image in one cell, and name of the site in a cell beside it. If using a table, be sure to make it as 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 (#), but they must have text that is realistic for the type of magazine you are protoyping.
- Icon fonts for at least one menu.
- A single CSS file. Do NOT make separate stylesheets for each page.
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 https://mylinux.langara.bc.ca/~YOUR_ID/magazine (as well as hand it into STUDENTSHARE)
Before publishing and handing the assignment in, please review this additional checklist.
MARKING RUBRIC
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