Building an A4 resume to add to your website (and making it printable)
Tags: html, css, beginners, webdev
Published: 2020-02-18 10:48:26

---
title: Building an A4 resume to add to your website (and making it printable)
published: true
description: Creating a HTML/CSS resume.
tags: #html #css #beginners #webdev
---

Hi, and welcome to my first ever blog post.

I'm Cooper, a developer from Melbourne that recently started looking for a new job, so while I am redesigning and building a new Portfolio Website I thought I'd share some knowledge.

One of the main goals was to build a resume into my website, but one that would be in the A4 format, making it easier for potential recruiters or employers to save as a PDF or print off (for those truly retro organisations).

**TL;DR** if you just want to see the [code](https://github.com/CoopsCodes/resume) repo, or visit the published site it's [here](https://coopscodes.github.io/resume/)

I recently learned a bit of SASS so I've used that, nested styles alone worked wonders rather than having to class up every individual div, so SASS is bae 💁🏼‍♀️.

Once it was built I transposed it to my Svelte portfolio, I won't go into detail there but I will cover the Gotcha later on that tripped me up for a few hours.

First things first, you need to create the page template, in your HTML body create a container div (I called mine resumeCanvas, but you do you), in the SCSS we create a canvas to paint our masterpiece on.

![Canvas](https://dev-to-uploads.s3.amazonaws.com/i/j2tyjse6m632txxwrgru.png)

So what's happening here?

<li> Box-sizing - border-box we ensure everything stays within the chosen dimensions. 
<li> Margin - at 0 and auto sets everything to the center.
<li> Padding - this one sets 0.3 of an inch between the border and the insides, you can add a bit more like maybe 0.5 but I ended up shortening it because I ran out of enough room in the end.
<li> Width & Height - these are the important ones, I did a bit of research and got the Width & Height for an A4 page (ok there might be a slight discrepancy but it won't matter when we set print properties).
<li> Background-color - this should be white, you could make this any colour you want but remember it should be made with printing in mind so try not to think dark mode here.
<li> Box-shadow - this give a nice little grey outline on the webpage to differentiate itself from the background page.

---
# grid me

Great! at this point, we have a nice little A4 sized page, now how do we fill it?

Well as we are using a fixed size that isn't designed to be responsive and we need a layout, a grid is the perfect solution...

Grid you say...

*Think I just heard a collective sigh*

Well, don't worry my friend because there is a superstar out there called [Sarah Drasner](https://twitter.com/sarah_edo?s=20) (who also has an amazing [portfolio](https://sarah.dev/)), that created a [grid template generator site](https://cssgrid-generator.netlify.com/) just for us.

![grid maker](https://dev-to-uploads.s3.amazonaws.com/i/abaoytvjoh938z9kxfj2.png)

As we can see above, I went for the header for my name, a left panel for all the guts, and a right panel to display all the links (this I later changed to a set pixel length as I found things moved around as I sorted out the canvas width and height over the time of the project).  But however you want to layout your project, this is how you do it.

Now go on and click that **Please may I have some code** button, and get that cheddar 🧀.

![grid code](https://dev-to-uploads.s3.amazonaws.com/i/4mhn6cw15by4nnxllyor.png)

I went on and renamed parent to gridParent, div1 to titleHeader, div2 to leftSummary and div3 to rightInfo just to help myself from getting confused. Naming conventions and all that.

Pop that into your CSS/SCSS file and create those divs in the HTML file and you're all set up to fill your HTML file with your resume data.

This is the fun part 🙊 and I'll leave that part up to you.

![spongebob 'several days later' meme](https://dev-to-uploads.s3.amazonaws.com/i/hzbnprp5kuzhsxlw2ltp.jpeg)

I won't lie, that part takes some time, not just the words but also some styling, since I hate boring black and white documents I added in some rainbow interactive elements on hover, but these won't show when a document is printed out.

---

At this stage when you have your page generated and run your OS's print command you should have a perfectly A4 sized PDF/Print page.

And it was perfect, till I transposed it into my Svelte app, then I had all sorts of problems as it didn't just grab the desired div, it started cropping from the top left-hand corner of the page.

![print offset](https://dev-to-uploads.s3.amazonaws.com/i/zx806fa3z3welaruf093.png)


This is where I learned about the print media query, and this can be done two ways but the other was a lot more heavy-handed for what I was trying to achieve.

By adding the <link> tag into your header you can create a whole different stylesheet, this would be good if you wanted to design a pretty website style resume and then have the alternate code in that style sheet that would only display when it was called to be printed off (and I'll explore this option later).

```
<link rel="stylesheet" type="text/css" href="print.css" media="print">
```

But since I just wanted to print it off as is we just add the **@media print {}** block in the **<style>** section or CSS/SCSS file of the Svelte page, and target the parent div class (what I renamed resumeCanvas) and it ignores everything higher up the tree.

The other little gotcha I mentioned earlier was getting the formatting right once I transposed everything to my Svelte app, and thanks to another CSS superstar [Rachel Andrew](https://twitter.com/rachelandrew?s=20) ([website](rachelandrew.co.uk)), I [read](https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/) that the page needs to be defined according to the dimensions we set in the Canvas, as demonstrated in the code below.

![print media code](https://dev-to-uploads.s3.amazonaws.com/i/dsuolyxp5zjgkxhowux8.png)

Setting **@page { size: 8.5in 12in; }** to match made it fit like a glove.

---

At this stage, I can't yet link the Svelte app as it's still under construction, but when it's ready it'll replace my current [website](https://cooper-codes.dev/), so maybe keep checking back.

If there are any questions, or if I could've done anything better, reach out to me.