Assignment: Resume

In this assignment, you will write a version of your resume for the web, using HTML and CSS. There is no provided code; you can create your own directory and blank .html and .css files as needed.

Part 1: Basic HTML

Here is a basic resume for the famous actor Rajinikanth. Don’t bother to try to view the HTML source for the page; we’ve done horrible no-good very bad things to the HTML so that it is not human-readable.

Write a basic version of your resume in HTML, resume.html. Don’t forget to use a DOCTYPE instruction, or the html, head, or body tags, and make sure to give your web page a reasonable title, so that it can be bookmarked. The resume for Rajinikanth makes use of h1, h2, h3, img, ol, and li tags; make sure you use at least those tags in your solution. You can upload some picture of yourself to the same directory as the HTML.

Part 2: Styling

Here is a styled resume for Rajni. Write a styled version of your own resume. You should do two things first:

Create a new html file by copying the old one into a new file resume-styled.html
Create a style file resume.css. This is where you will put your css code. Within the head element of resume-styled.html add the line

<link rel="stylesheet" type="text/css" href="resume.css">

Now any style rules you put in resume.css will be applied to the HTML in resume-styled.html. Separating your CSS and HTML like this allows you to reuse the CSS for other resumes, and also makes the HTML shorter and easier to edit.

Now you need to modify your HTML code to label various pieces of the resume for styling, and write CSS rules to style those pieces.

How you style your resume is up to you, but here is a brief list of some of the changes made to style the sample resume:

Set the margins for the body element of the whole page.
Created a div for the header section of the resume.
Deleted the image, since it didn’t fit with the style. Instead, added a multimedia section to the resume at the bottom with a youtube link.
In the header, removed the bullets from the address/contact list using list-style-type: none;.
Centered the list using text-align:center;, and made the individual list elements appear inline with display: inline so that the list elements appear horizontally rather than vertically on the page.
Divided the resume into sections using section elements. (Could have used div elements with a resumeSection class.) For each of these sections, made the heading elements small-caps using the font-variant property.
Also set the margins for the sections to indent them. However, since this also indented the heading elements, set a negative margin on the heading elements to compensate.
Put the dates into a class that I called date, ( example: <span class="date"> 1975 - present</span>) and used float:right to display the dates on the right-hand side.

To repeat, you can style your resume however you like; this list just gives a few ideas. Feel free to search the internet for specifics of CSS styling tricks; just please cite sources in a comment at the top of the CSS or HTML. Keep it simple at first, and make sure you understand exactly which elements of the HTML you have selected with each new rule. A good trick is to set the selected element to a particular color (color:red;) while debugging so that you can see that the rule applies to what you think it does.