Resumes in HTML, CSS, and JS

There’s lots of guides on how to write a resume as a developer, but very few resources for actually creating one. Google for “resume template” and you’re left wading through piles of ugly Word documents that break as soon as you make a single change. If the layout isn’t quite what you wanted, you either have to continue searching or make your own.

Web developers are well acquainted with HTML for structuring documents and CSS for styling them. Why not use these technologies to craft a resume?

The CSS @page at-rule is supported by IE 8 (released in 2009)! It’s remarkably simple to style a resume using CSS. As an added bonus, you get two outputs: HTML and PDF, and using @media queries you can style them differently. This means if you want to host your resume on your personal website or on GitHub Pages, you can! You can even add some JavaScript to make it interactive.

I wrote html-resume-template to make this process even simpler for developers. It comes with a classic sidebar template and uses a combination of contentEditable page elements editable, and localStorage to save changes to the page after the page is refreshed. Here’s a sample screenshot of the output from Google Chrome:

Sample resume from html-resume-template

You can also find the source code and try a live version on GitHub.

Thinking back to CSSZenGarden, there’s a lot of variation that can come simply from changing styles alone. I hope to see pull requests with new themes and layouts to give job seekers even more choice and flexibility in showcasing themselves and their work.