Designing a Resume with CSS

In my last article on CSS Box Model, I briefly explained the CSS Box Model. In that article, properties like margins, paddings, and borders were discussed. Let us take our learning a step further by designing a resume. In this article, I will explain every step that was taken in designing this resume. At the end of this article, you should be able to design yours, too.
Below is the beginning of our code:

The Head Element

First, in the HTML head tag, I linked my CSS file, followed by two external links: Font Awesome and Google Fonts. I had to link this in other for my custom styling to be applied. By custom styling I selected a fine Google Font style and the icons which you will see in the output shortly.

The Body Element

Second, within the body tag, I wrapped my entire content in a class named “container” and further divided my layout into two sections with the first section having a class of “sec-one” to enable me apply my own custom style in my CSS file.

These are the contents of my body tag. As you become familiar, you can read through my code to understand the layout and structure of my resume.

CSS Styling

Below is a snippet of my CSS styling:

Furthermore, see how I divided my layout into two sections: section one having a width of 35% and section two having a width of 65%. In this example, you can also see how I set the margins, the styles, and how I specified my gradient.

The snippet above is to show how to centralize the image on section one: “margin-left: auto” and “margin-right: auto


Building Your Own Resume with CSS

Finally, you can try to design your own resume using your own custom styling and layouts. The key to being a good developer is practicing! You don’t have to memorize every HTML tags and CSS styling methods, all you need is a good reference. These sites w3schools, MDN, CSS Tricks will be of great help to you in your journey to becoming a very good web developer.

Happy coding!!!

Related Posts