Zach’s ugly mug (his face) Zach Leatherman

Writing a Front End Engineer’s Resume (or CV)

September 04, 2008

In the United States, we usually call this document a resume, but it would appear that the international term is actually CV. There are differences, but the tips used here can be applied to both.

Everyone is trying to sell something nowadays, and the most important product you can sell is yourself. My high school counselor used to tell all of her students that same advice, and unfortunately most of them became hookers. But if you’re not into prostitution, by now you’ve probably realized why so many people have said that blogs are the new resume. It’s true – I’ve had a few pretty meaty hooks dangled in front of my fish brain since I started this web site, and a lot of large companies are using blogs as a means of finding new talent.

But a blog will only get you in the front door, many employers still want to see a real resume prior to entry into the screening process. So, why not kick your resume up a notch? Let’s iron its pages, shave its hairy regions, and spray some web-based musk on that bad boy.

Tips for Putting your Resume on the Web

  1. Don’t use anything that generates code (that means no DreamWeaver or heaven forbid, Microsoft Word). You want your “view source” to look like a marine’s hair cut: everything should be indented uniformly.

  2. Sprinkle some microformats in there! There is even a specific hresume microformat. Some other good microformats to use are: hcard (like a personal business card, but can also be used to describe an organization as well), hcalendar (for any dates, or date ranges: like when you were employed), XFN (to describe relationships between people, think references), adr (for addresses).
    Of course, the good part about microformats it that there is overlap between them. hcard uses adr and hcalendar, and hresume uses hcard, etc.

    Some social web sites have already provided some microformats that you can use as a starting point: Linked-in has an hresume for every profile, and twitter has a hcard that you can pilfer.

  3. Add a favicon. As the Yahoo Performance team suggests, the browser is still going to request one, even if one isn’t in the markup, so you might as well have one.

  4. Pick your DOCTYPE carefully. Make sure it’s not one of the “loose” ones, for obvious prostitution-based reasons described above — the stricter the better. Whatever DOCTYPE you decide to use, make sure your markup validates properly. No mistakes here. I chose to serve my document using HTML 4.01 Strict as text/html with UTF-8 encoding.

  5. Your handwritten CSS should validate as well. If you have some library code that misses the mark in a few places, I think that’s okay. Remember: a good coder codes, a great coder re-uses.

  6. Make sure it looks good when your future employer prints out 500 copies to pass around the company as an example of the best resume he’s ever laid his eyes on. Add a media=”print” stylesheet to beautify the print layout.

  7. Make sure it all validates, loads fast, and doesn’t have any broken links. I like to use YSlow to test my page weight and see my ranking.

Bombs away! Those are the tips I followed to create my web-based resume. It has a YSlow score of 89, is 17.2K in size with 5 HTTP requests, and validates as HTML 4.01 Strict, and my non-library CSS is valid CSS 2.1 (I’m also using YUI CSS for layout, which doesn’t validate).

Once you’re finished, hresume even has a public wiki page where they let you post your resume. Have fun, or get rich trying!

Update: grammar.

< Newer
Fight Registrastination. Register to vote!
Older >
Emulating onhashchange without setInterval

Zach Leatherman IndieWeb Avatar for a builder for the web and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 81 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

  1. Jacques Chester Disqus

    05 Sep 2008
    I also helps to get some grammar nazis to cull excess apostrophes.
  2. zack Disqus

    05 Sep 2008
    Good tips. Here's mine: I really like your use of microformats for dates and locations, I think I need to add that. I'd suggest though that you also offer a PDF version (easily created if you have a decent print stylesheet), and plaintext.
  3. Zach Leatherman Disqus

    05 Sep 2008
    Well put Jacques.Pretty slick zack, does the Blueprint CSS framework have any better luck with W3 CSS validation?
  4. Adam Darowski Disqus

    05 Sep 2008
    As the 'blog is the new resume' guy, you'd think I'd keep an online resume. But I don't. As I chronicled here, I just use LinkedIn (and yay for "save to PDF"!).Yours is quite slick. My favorite little detail? Populating the abbr of "Present" with today's date. I'm sure most wouldn't think to do that. Looks great!
  5. zack Disqus

    12 Sep 2008
    Hm, I actually hadn't checked the CSS validation. few minor problems, but not too terrible! I guess I'd say yes, for the most part Blueprint helped.
  6. essay on time service Disqus

    13 Sep 2015
    Writing this kind of resume may be a bit challenging for some people who doesn't have enough idea and knowledge in terms of writing. From this, they can surely get a good idea and technique in creating this kind of writing.
Shamelessly plug your related post

These are webmentions via the IndieWeb and

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)