PrintCSS: A basic CV example
In this article you will learn how to create your own CV PDF with HTML, CSS. To render the actual PDF we will use PagedJS an open-source tool to create PDF documents from HTML.
Before we start with the CV, let us think about the structure we want. So in this example we will create a multi-page CV and on each of the pages we will have our main details in a header section.
After the header there will be a short section for a introduction text. Then following a section for the employment history, the education and further skills.
For all sections there will be sub-sections for the different jobs or achievements. On the left side we will put the dates and right the content so what we actually did in that time period.
The header section
For the header let us first define the HTML structure. Our heading will be the first and last name in an H1 element. Next we want to put some links to important websites, like our LinkedIn or GitHub Profile. That these links look nice you can include FontAwesome and add a small icon in front of every link. Last we should put more information about ourselves, like the birthdate, phone number and address.
The profile section
The profile section or introduction text will be our first section. Here we already define the split of left and right content in the sub-sections. We will use the same code in all following sections. Let’s put the sections title in an H2 element and for the left/right sub-sections we will use a flex layout. To do so you need to set the display property of the element to ‘flex’. The left element should have a minimum width and the right element will take the rest of the space.
As the right element has paragraphs or further headlines (H3 elements) inside you should set their margin top to 0. This way they start at the same level as the left sides content.
The other sections
All other sections in your CV document will have the same HTML structure and CSS styling. Have a look at the complete sample below to see how these sections are added.
You can see the complete sample including the resulting PDF document on my GitHub repository for print CSS samples.
If you want to try recreating this CV or create your own one you can use printcss.live to render your PDF. This will save you the time of installing one of the rendering tools on your own dev environment.
If you want a more detailed explanation of the above sample check the Video about the same on YouTube.
