Building a CV with HTML and CSS

The end of my stint at Flatiron School is fast approaching, and that means that the time has come to begin seriously preparing myself for the job market. That’s not to say that I haven’t been keeping half an eye on job postings the past couple of months, but until quite recently I wouldn’t have felt ready to apply for a sweet job posting if I saw one. So, now that I’m feeling more technically able, the remaining hurdle is having a suitable CV to send to prospective employers.


The last time I sat down and put together a CV was roughly a year ago. I was coming to the end of my Religious Studies degree and pondering a future in UX design. As such, I felt I needed a designer’s CV. So, taking advantage of its generous educational discount, I bought Sketch and used it to lay out my CV. This was a good opportunity to learn a tool that I’d read was industry standard, and I enjoyed experimenting with unconventional layouts and agonising over pixel-perfect alignment.

Sketch, then, was the first tool I picked up when revisiting the task of putting together a CV. It makes irresistible the urge to sink hours into the task of presentation before the question of content. I soon ran into trouble. Sketch offers a wonderfully liberating blank canvas, with the possibility to put any block of text anywhere on the page with ease. This, in a twist that will surprise absolutely nobody, turned out to be more of a curse than a blessing when trying to decide how my CV should be laid out before properly deciding on its content.


Having learned my lesson, I sat down with org mode (an emacs major mode “for keeping notes, maintaining TODO lists, planning projects, and authoring documents with a fast and effective plain-text system”) and hashed out each section (education, projects, and experience) with a slew of nested bullet points. This got me thinking, “wouldn’t it be nice if I had my CV in a format that was easy to iterate?” I’d seen a friend’s CV typeset in LaTeX and thought it looked pretty neat, so I had a look online and found a website with a nice-looking template and pasted in the contents of my bullet points. The result was decent, but there were a few adjustments I wanted to make to the layout. Alas, although I had some prior experience with LaTeX (I used it to typeset my undergraduate dissertation), I wasn’t quite up to the task of wading through the surprisingly verbose output of the website which generated the files I was working with.


Finally, it occurred to me. I was getting increasingly frustrated at my inability to figure out where I could adjust the page margins in the thicket of LaTeX code before me, and I found myself thinking “this would be so easily if only it were styled with CSS!” So I made my CV using HTML and CSS. This approach ticked all of my boxes; the files are all plain-text, so it’s easy to version-control them (unlike Word or Sketch), and the styling is easy to manage. An additional bonus is that it clearly separates content and presentation. With the HTML concerned exclusively with the semantic structure of the CV content (wrapped in the occasional extra div to make styling easier), and the CSS concerned exclusively with the styling of the page, it’s much more difficult to get sidetracked with styling when you ought really to be working on the content. It certainly isn’t for everyone, though, and even developers familiar with CSS might be scratching their heads wondering how to go about styling HTML for the specific output of A4 printing. Here’s how I went about it.


Between the section, paragraph, and unordered list tags, it isn’t too difficult to imagine how you encapsulate the content of your CV in HTML. The styling is another matter. I, for one, haven’t ever optimised the styling of a web-page for print, and I certainly haven’t faced the task of constraining a specific block of HTML into the exact area of an A4 sheet. So I searched something along the lines of “how to make an A4 sheet in CSS” and lo and behold, I quickly stumbled across a package called paper-css, “for happy printing”. The package supports A5, A4, and A3, in either portrait or landscape orientation, and can be enabled with the addition of few lines in the <head> of your HTML, along with a couple of class names like A4 and sheet in the <body>. The instructions in the repo are pretty clear, even explaining how to build a pdf with electron-pdf!, but if you’re more interested in seeing concrete examples, here are some links to a skeleton document I put together on CodePen, and my current CV. Good luck!