#100DaysOfCode: Day 14

Author: Ho Yin Cheng


Created: January 10, 2018

Series: devlog

Devlog for day 14 of my #100DaysOfCode coding challenge.

tl;dr: My resume in HTML + WYSIWYP (what you see is what you print).


Daily Requirements

Extra Tasks

Progress Report

Two days of work, just one devlog.

You may have noticed a new link in the navigation menu for Resume and that it what I’ve been working on. I converted my resume into HTML with a printable version that looks exactly like what is on each page of the resume you see at that URL (currently only one, but it works for multiple pages). It took a lot of work and I learned quite a bit about CSS which is what I’ll be writing about today.


The goal of converting my resume to HTML was to leverage:

WYSIWYP (what you see is what you print)

With that said, it wasn’t easy. The first order of business was to get the resume to display just like it would appear if you printed it. I also wanted to separate the pages in case I had a multi-page resume. The key links that helped me figure out how to do this were:

Key excerpt from StackOverflow answer:

 1 2 3 4 5 6 7 8 9101112
@page {
  size: A4;
  margin: 0;
@media print {
  body {
    width: 210mm;
    height: 297mm;
  /* ... the rest of the rules ... */

Setting a Base

With that figured out, I wanted to streamline my ability to style and design the resume itself. I decided that I wanted to completely reset and remove all styles for all elements. That way, I’d have full control over how things looked and could ignore browser quirks. I did this by utilizing:

Finding Inspiration

The initial setup to get a clean working environment running smoothly took a long time, but it was well worth it as I could iterate quickly now. This led me to a roadblock. What should my resume even look like? All the tools in the world weren’t going to help me design anything, so I did what anyone would do and set out to find inspiration.

There are two broad styles of resume layouts that I felt were most attractive:

There are others [1], but I didn’t feel like they were good layouts. I also sent a revised version of my old resume (written using LibreOffice Writer), for feedback and design advice. After some sketching and mulling about, I decided that the Header Block Style would work best.

I then did a bit more research on guidelines for resumes and these links proved to be the most useful:

And lastly, I picked some fonts I liked and font icons. These were my tools of choice:

Turning Inspiration into Reality

HTML + CSS is powerful and great for creating documents, but man are there quirks. As someone who does not regularly write CSS, it was already difficult enough for me to structure my CSS correctly and use CSS selectors in a sane manner. To handle some non-intuitive parts of CSS on top of that? That was a real drag. I was able to get everything done though and these are a collection of random links that ended up helping me get unstuck:


All of that over two full days of sitting in front on my computer == finished!

Now for the truly hard part. Finding a job.

Copyright © 2011-2020 Ho Yin Cheng