The resume assignment is our final project for the class, in lieu of a sit-down exam. You are required to update a digital copy of your resume, then copy its contents into the boilerplate. Think critically about how you’d like to present yourself visually – drawing out some sketches on paper or in Photoshop is a really good idea – and then wrap your content in the appropriate HTML, and style the page with CSS. When you’re finished, show your resume to a friend and get some feedback: what works? What doesn’t? What could you move or adjust?
GETTING STARTED
- Plan out how you want your digital resume to look: what colors, fonts, and layout strategy do you want to employ? What choices best reflect your personality and reflect the way you wish to present yourself to the professional world? Look through the Google Fonts, which one ‘fits’ with you best?
- Look up resumes online, find some inspiration. Look at the iMedia resumes made earlier this year (linked to in a previous post on this blog).
- Update the content of your resume to reflect your current status. While your resume’s content won’t affect your grade, you might as well do the project with an up-to-date resume!
GENERAL
- Adjust your content in the #wrapper with a layout strategy in mind. Consider using a fixed header, or a fixed sidebar (a fixed sidebar is just a <div> that’s floated to the left or right and set to ‘position: fixed;’.).
- Choose a good color scheme – just one or two color, plus black & white – and use it for the background color, or individual elements, the whole page, font colors, borders, anything else.
- Include a way to contact you, either via telephone, email, or social media.
- Make sure your name is very clearly visible and noticeable.
- Apply matching style and layout to similar sections (by using classes), i.e. all of your jobs should be laid out the same way, all of your schools, all of your awards – a resume is an example of design consistency. So class names like .job, .jobDates, .jobTitle are a good idea.
- Use imagery whenever possible: icons for software programs, progress bars indicating your level of expertise, etc.
- Do not include creative content, like movies or papers – this is a resume, not a portfolio.
- Make sure all of your text is wrapped in HTML tags.
- Make the page responsive.
SPECIFIC
- Use the #wrapper in the boilerplate to restrict your resume’s width to 960px.
- Link all relevant content (schools you attend / attended, jobs you’ve had, etc.) to open in a new browser window (target=_blank”).
- Choose and embed a custom font on your page.
- Give your page a title.