Module 2 Project: CSS

The purpose of this project is to practice writing basic CSS (and HTML). Here’s what you need to know to get started:

  • No JavaScript is permitted! If you already know how to use JavaScript, that’s great, but we want to give those who are new to the web the same chance to do well.
  • All web pages must be created by you, and by hand. Do not use any web pages written by anyone else, and do not use any tools to help create the web pages (other than a programming text editor).
  • All styles must be created by you, and by hand. Do not copy any significant amount of styling from other pages or sources.
  • All web pages you create must have a head and body wrapped inside <html> tags. Every page needs a title element, and should specify that it uses the UTF-8 character set.
  • All images must have sensible alt text in case they cannot be displayed.
  • Format your HTML and CSS source code so that it is easy for humans to read.
  • Make sure your HTML is valid. Check it with an HTML validator.
  • Work that technically does what is asked but is considered very low-effort by the marker will probably not get full marks.

Submitting Your Project

Put all your files for for this project into a folder named project2. This folder should have two sub-folders: part1, containing just a file named part1.css containing your answer for part 1, and part2 containing all the files for the website in part 2.

For the part1 folder, the only thing in it should be a file named part1.css, and nothing else.

For the part2 folder, make sure that the file index.html is the main page into your website (that’s the one the marker will open when they start marking your work).

When you are ready to submit it, compress your project2 folder as a zip file named project2.zip, and then submit it on Canvas.

Part 1: Styling a Resume

Here’s a made-up resume.html, and the associated image me.png, of a well-known character. Your task is to use CSS to make his resume look much better.

Don’t make any changes to these two files! The HTML in resume.html, and the image me.png must remain exactly as they are. Put all your CSS into a file named part1.css (see the head section of resume.html).

Some specific things we want to see styled include:

  • The first h1 header with the name should be bigger than other titles, and visually stand out in some way.
  • The contact information near the top needs to be much more neatly spaced and formatted.
  • The email address and Twitter feed address should use a visually distinctive font/style different than other fonts on the page.
  • Use different fonts for headers and for text in lists.
  • The image should not be on its own line. It should either be beside the contact information, or perhaps beside the education section. The choice is yours — but make it look good!
  • Decrease the space between the section headers and the lists underneath them.
  • For the sake of variety, use at least three different kinds of bullet points in the lists (items within the same list should have the same kind of bullet point).
  • Use lines in some visually pleasing way, e.g. lines before/after each section might look good.
  • The years for education and employment should have their own visually distinctive style.
  • Please add some other styles of your own choice. Try to make it look as good as possible!

Part 2: Styling Your Website

For this part, your task is to re-do your project 1 website using CSS styles to make it look nicer. Make a copy of your project 1 website so that you can use it as a starting point.

Make sure to use relative URLs for all internal links!

The marker will be looking for the following:

  • Every page should be a two-column (or more columns, if you like) layout. One column should contain the main text of the page, and the other column should be an index linking to every page in this site.

    The index column should look the same on every page, and should have a link to every page on your site.

    Since this index appears on every page, your original index.html file should now become your site’s “Home Page” (but still name the file index.html). Please modify your original index.html so that it is now an appropriate home page, e.g. it could briefly explain what this project is about, say who you are, that this is your project 2 website for CMPT 165, etc.

  • Add a new page called “Acknowledgments” that lists all the help you had for this project. This should include links to all web resources or books you used, and also the names of any people who helped you (including the TAs, the instructor, friends, etc.).

  • Your logo should appear on every page, with the extra requirement that when you click on it you are taken to you site’s home page.

  • All heading elements, emphasis elements, etc. should have a unique style so that your website has a distinct and original visual look that is all your own.

  • The footer should still appear on every page, and should have the same information as the original footer from project 1. It is your decision exactly where to put it and how to style it.

  • Your list of favourite movies must be styled in a non-trivial and visually pleasing way.

  • Your table of favourite vacation spots must be styled in a non-trivial and visually pleasing way. Please put some extra effort into styling this table: make it look really good.

  • All styles are in external .css files in a “styles” folder. Do not use any internal styles or inline styles.