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:
<!DOCTYPE html>
<html>
<head>
<title>Designing a Resume With CSS</title>
<link rel="stylesheet" href="Resumee.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Stylish" rel="stylesheet">
</head>
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.
<body>
<div class="container">
<section class="sec-one">
<img src="nina.jpg"/>
<h1>Valentina Nnenna</h1>
<div class="content">
<span class="DOB">Feb 14th 1991</span><br>
<span class="Occupation">Software Developer</span><br>
<span class="address">Abuja,Nigeria</span><br><br>
</div>
<hr><br>
<div class="contact">
<span class="num">+234 706*******</span><br><br>
<a href="mailto:valentina****@gmail.com">valentina****@gmail.com</a><br><br>
<a href="https://icodemag.com">www.icodemag.com</a>
</div> <br>
<div class="social-media">
<a class="fab fa-twitter" href="https://twitter.com/codegirl_"></a>
<a class="fab fa-instagram"href="" ></a>
<a class="fab fa-facebook-f" href="https://www.facebook.com/valentina.nnenna?ref=bookmarks"></a>
</div>
</section>
<section class="sec-two">
<div class="part-two">
<i class="fas fa-user-alt"><span class="unique">Profile</span></i>
<p class="one">I am a Frontend Developer, I passionately love technology.</p>
</div>
<div class="part-two">
<i class="fas fa-pen"><span class="unique">Epirience</span></i>
<h4>Frontend Developer</h4>
<p>Company | May 2019 » Current</p>
<ul>
<li>Developed company website</li>
<li>Design and development of an inventory management system</li>
</ul>
</div>
<div class="part-two">
<h4 class="title">Business Develoment manager</h4>
<p>Company | May 2019 » Current</p>
<ul>
<li>Preparation of proposals</li>
<li>Daily reports</li>
</ul>
</div>
<div class="part-two">
<i class="fas fa-book"><span class="unique" >Education</span></i>
<p>i'm currently studying computer science</p>
</div>
<div class="part-two">
<i class="fas fa-book"><span class="unique">Skill set</span></i>
<ul>
<li>Writting programs</li>
<li>Content writting</li>
<li>Graphic Design</li>
</ul>
</div>
</section>
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:
.container{
display: flex;
}
.sec-one{
width: 35%;
text-align: center;
margin-top: 20px;
font-family: 'Stylish', sans-serif;
background-image: linear-gradient(to right bottom,#fc7a70,#e937370a)
}
.sec-two{
width: 65%;
margin-top: 20px;
border-left: 2px;
background-image: linear-gradient(to right bottom,#fc7a70,#e937370a),url('jobsearch.jpg');
background-size: cover;
}
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.
img{
width: 200px;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
hr{
width: 100px;
border-top: 2px solid;
}
a{
font-weight: bold;
text-decoration: none;
color: rgb(207, 57, 57);
}
The snippet above is to show how to centralize the image on section one: “margin-left: auto” and “margin-right: auto”
hr{
width: 100px;
border-top: 2px solid;
}
a{
font-weight: bold;
text-decoration: none;
color: rgb(207, 57, 57);
}
.fab{
margin: 10px;
cursor: pointer;
color: rgb(207, 57, 57);
}
h2,h4{
margin-left: 30px;
}
.unique, p {
margin: 20px;
font-family: 'Stylish', sans-serif;
font-size: 18px;
}
.fas{
margin-left: 20px;
margin-top: 10px;
}
ul{
list-style-type: circle;
}
OUTPUT
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!!!
