Quick tips to easily create a beautiful custom PDF resume with HTML and CSS

Nobody enjoys sitting down and writing their resume, right? But we do enjoy making websites (hopefully most of the time anyway)

So.... why is it normal practice to write our resumes in tools like Microsoft Word when we've got all these CSS skills just waiting to be used!

Creating a full-page, full-bleed, totally custom PDF resume from a web-page is easy, it just depends on one piece of CSS code:

@media print {
    body {
        width: 8.25in;
        height: 11.75in;
        margin: 0 0 0 0;
    }
}

This will make it so that when you print a web page within Chrome, it will print it to perfectly fit the size of an A4 piece of paper.

The only other setting you need to adjust at the print preview screen in Chrome; in 'More Settings' make sure Margin is set to None, print the page to PDF and there you have it! A custom HTML & CSS resume as a full-page digital resume.

Note: When designing your new resume, it's best to work with a custom viewport in the dev tools rather than having to go into print preview every time to see how it will look on paper - You can set it to 825 x 1175 to correspond to the paper size.

Note 2: This only works in Chrome as right now I can't see a way to do a full-bleed print to PDF in Firefox...

Final added benefits to convince you:

• All <a> tag links in your web page will still function as working links in your final PDF
• Instead of being stuck with MS Office, you can create your resume with whatever tool you're comfortable with; Sass, Tailwind, hell - even Bootstrap! (I'm definitely not saying you should, I'm just... saying that you can)
• You can have your own custom backgrounds to make your resume stand out. Go with lots of colours to funk it up, or maybe choose a textured off-white background for something a little more classy.

So there you have it! Go get creative, use those dev skills and actually enjoy writing your CV for once :-)