Contents:
So, where to start? Well, an easy way to start is with a responsive template. Personally, I’m a big fan of the Skeleton template. It’s got enough enough to get us started, and not so much as to bog us down. This is a good chance to think about semantic markup.
Why not download the code before starting so you can follow along at home.
Of course we’ll start off with a header or maybe an hgroup with your name and job title and all that stuff, but let’s look at the basic organization for a the page then at a single work experience entry:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<section id="experience" class="eleven columns alpha"> <h2>Experience</h2> <article class="work"> <hgroup> <h3 class="title">Type-Thai Developer</h3> <h3 class="employer">Self-employed</h3> </hgroup> <span class="date start">Dec. 2011</span> <span class="date end">Present</span> <p>Taught English ICT including the use of MS Excel, Powerpoint, Word, Access, and Adobe Photoshop, as well as...</p> <footer> <h3>Key Skills</h3> <ul> <li>MS Office</li> <li>Photoshop</li> <li>...</li> </ul> </footer> </article> etc... </section> |
OK, the big thing here, that it seems a lot of people have trouble with, is the article element vs the section element. Basically, the article element should contain a single self-contained item (usually with a header and footer), whereas sections should contain a group of logically or thematically similar items (usually with a header). In those terms, it’s clear that the “work” section should be a section as it is a group so many logically similar items.
Each of those items is self-contained, so it is wrapped in an article tag. We start the article with a header group, and then the dates, a paragraph or two, and then a footer. The footer is a list of skills, so we’ll represent it as such and then we’ll style it later to look good. This is important for a few reasons involving the interactivity of the resume. Speaking of styling, here’s what I did to make the skills look beautiful:
|
1 2 3 4 5 6 7 8 9 10 |
.skills h3, .skills ul, .skills ul li { display: inline;} .skills h3:after { content: ': ';} .skills ul li:after { content: ', ';} .skills ul li:nth-last-child(2):after { content: ', and ';} .skills ul li:nth-last-child(1):after { content: '.';} |
I used a lot of of :before and :afters to get the look I was going for, and a heavy use of the new nth-last-child selectors. The same goes for the dates:
|
1 2 3 4 5 6 7 8 9 10 |
.date { float: right; } .date.start:before { content: 'From: '; } .date.end:before { content: 'To: '; } .date.end { clear: right; } .date:before { color: #31a8ca; } |
In terms of styling and coloring, I followed quite closely from the style used in the original A List Apart article, which is clean, clear, and easy to edit if you want. Oh, and don’t forget the print stylesheet, remember that we’re trying to replace PDFs and Word docs, here. Resumes are prime candidates for printing, so they’d better look nice when it’s done. I’ve just overridden the basics at the bottom of the CV stylesheet with an @media print query.
One key point, is that I used David Walsh’s trick for displaying URLs in the print stylesheet so you needn’t worry about typing them twice. Make sure you don’t display a URL twice, though, if the link text is already the URL.
Next writing we’ll look at actually adding some dynamism to our online CV so it’s not just a prettied up, accessible PDF.
Leave a Reply