Power Up Your CV With CSS(Part 1)

Impress employers with an accustomed and interactive experience

Published in

Geek Culture

8 min readMay 1, 2021

The recruitment domain has been advancing by more accurate employers and employees matching using Machine Learning algorithms in recent years. Ridiculously when we get into the details of the candidates, the information presented in the old A4 MS Word format is still enormously popular.

Google Doc is a viable option to create a blank new CV. Unfortunately, if you have been working for a while, updating the current CV written in MS Word is a more direct approach. However, transforming formats from one tool to others can screw you up when you manage the sophisticated page break, section break, header and footer, text and images alignment, multi-column layout, fonts compatibility, etc. Don’t mention the cost of purchasing an Office license if you have moved away to a new laptop without Office or on Mac and Linux.

Many software developers run personal websites presenting their remarkable projects and experience, which really stand out from competitors. But when one talk with recruiters, a standard format of CV is expected. The very fantastic website become a kind of supplementary information. What a pity!

Time is precious to the candidates, recruiters, and employers. Would it be more productive for every party to share more information at a single place in a modern, presentable, convenient and consistent format?

Today I want to show you a brilliant way to impress your audience in an accustomed but more informative fashion, in plain HTML and CSS, and a small amount of Javascript. It involves a bit of programming exercise. Don’t panic. If you have a basic understanding of programming, follow the steps, and you can definitely beat it in minutes.

Let’s have a glance on the final product 👈 in Part 1.

I hope you like it. This sample is developer-centric. However, there is no limitation for any domain and position. The whole idea is to present more information on the extraordinary dull and boring standard A4 format! It is 2021, isn’t it? Now let’s review what features we have discovered.

The A4 like CV is presented as a webpage. It can be shared with a link instead of sending back and forth the Word/ PDF document. If you want to print it in an A4 format, simply click on the print button on the sidebar. The content will be print WYSIWYG with all the fancy effects turned off.

To eliminate the barrier of the old fashioned CV, let’s roll up our sleeves now.

In part 1, our goal is to build a CV as a web page in A4 format, publish to Github Page, and generate plain A4 printout.

In part 2, we will add the interactive elements to the web CV and host it on a personalised domain.

Part 1

Though it is not a complex technical project, let’s spend a few seconds on what we’re going to use.

Github
Github Page
HTML
CSS
Javascript

Of course, you may implement the idea with other sophisticated web frameworks. But for the sake of demonstrating the features, CSS will be our meat in the tutorial.

Second, we need to be clear that the CV layout is consistent across various screen sizes. Because we wish to retain the accustomed CV experience in an A4 format, no matter you are on a laptop or a mobile phone.

I assume you have a Github account and Git installed. Don’t panic if you don’t. Check out the tutorial to get started.

Github Page allows us to host a website from a Github repository for free. It best fits a static website without sensitive information like the CV web page we’re going to create.

Table of Content

Section 1: Create new project in Github

Section 2: Header

Section 3: Polishing the header

Section 4: Career profile

Section 5: Certification and status

Section 6: Publish to Github Pages

Section 1: Create a new project in Github

Login to your Github account, navigate to Repositories and press the New button. Pick a unique, short and sensible project name. It will be a part of the URL of your CV website hosted on the Github Page. SelectAdd a README file. Use the default setting for the rest.

Git clone the project to your local machine.

git clone git@github.com:YOUR_GITHUB_ACCOUNT_NAME/cv.git

Open the project with your favourite IDE. If you don’t have one, I highly recommend using VS Code.

❤️ Thanks to the open-source project HTML-Sheets-of-Paper, we will base on index.html, css/sheets-of-paper.css and css/sheets-of-paper-a4.css in the first step. Create these three files in your projects. Now you open the index.html with the browser, and an editable A4 formatted web page is rendered. Check out the source code in Step 1 👈.

Cool, a good warm-up with the basic layout. We’re gonna dive into the content. Fasten your seat belt.

Section 2: Header

A simple header will be created in this section.

First thing first, turn off the editable flag to false in index.html to make it read-only bycontenteditable="false".

To lay down name and contact information horizontally, we’ll use CSS properties display: grid and grid-template-columns: 50% 50%. The values of the 50–50 percentage specified two equal-width columns. To implement a multi-column layout, we have to make our first CSS style. Create a grid.css under folder css with below CSS code.

To have a sharp and attractive name, we’re gonna decorate it with a new CSS class cv-name. Create header.css under the CSS folder with the followed styles, where we create a professional tone.

Tell index.html to use the new CSS classes by adding it in the <head> section.

As you might notice the font family Tinos is specified here. This is a Google Fonts not natively supported by the browser. So we need to tell index.html to load this font file during runtime.

Time to put the candidate nameJohn Doe on the left column. On the right column, three different contact methods are listed.

The skeleton of the header (👉 step 2 source code) is done. We’ll polish it next.

Section 3: Polishing the header

Let’s remove the ugly bullet points by list-style: none; and align them to the right by float: right;. Stylecontact-item is applied to the three items.

header.css

Add above styles to header.cssand wrap the three items with <span> and style contact-item.

We’re gonna use an open-source icons library Ion Icons, to help readers to locate crucial information quickly. In front of the three items, the corresponding icons are placed. Here is an email example.

Remember to import the reference in the index.html.

A one-line summary is powerful to picture yourself to the audience. Wrap the summary in a <p> tag and decorated it with a remarkable font-family. In this case, Google Fonts Niconne is used. We import the Google Font, and style the summary the same way we just learnt for the candidate name. Easy, right?

Check out the source code for section 3. 👈

We’ve just experienced how granular and precise positioning CSS offers, while Word processors never provide the same level of controls. In the next section, we will add competencies, education, and job history.

Section 4: Career Profile

Here’s come our main course in this section, where we’ll present the competencies, education, job history and side projects. Are you excited? Follow me, and we’ll get it done in few minutes.

Competencies, education, employment history and open source Projects

The competencies section lays down the strengths in three columns and two rows. We’ll use the grid-container style again, and a new class container-column-3 is introduced for three columns with equal width.

grid-template-columns: 33% 33% 33%;

Next, the default font size is decreased to 10pt, which is a comfortable balance between visibility and the amount of information.

Again, we will use the ion-icon to customise bullet points. A strength-icon class is added to adjust the size and colour of the icons. Create competencies.css under the folder CSS and create below new style.

Don’t forget to import the new css.

The school and subject are presented without extra CSS in the Eduction section. We go straight to the Career section. To improve the readability, we will categorise job titles with decent font colour color: #0097e6 and company names by font-weight: bold;. Our audience is most interested in the skills. We’re gonna highlight each skill with an attractive tag-liked style as followed.

career.css

The part-time project section is the same as career history, except the project name is in light green colour color: #44bd32.

Check out the source code of section 4. 👈

Section 5: Certification and status

We will finish our single page CV with certification, languages proficiency and availability in no time!

The certificates will be arranged in three columns with different width.

cert.css

We’ll reuse the class container-column-2 in languages and availability. Super easy, isn’t it?

At this moment, we’ve organised all the content in the primary and neat CV as a web page. Navigate to File > Print in the browser menu. We’ll have the CV printed or saved in a PDF file right away, most importantly, in plain A4 format as I promised.

Section 6: Publish to Github Page

Login to your Github account, head to Settings and click Pages. Under the Source section, select the branch to publish. It will publish at https://YOUR_ACCOUNT_NAME.github.io/YOUR_PROJECT_NAME in a couple of minutes. Delete your browser cache and refresh if it didn’t work for you.