Resume Building using HTML & CSS

How Awesome it would be, if we create our own resume using HTML and CSS to apply for jobs?
Yes, First and foremost step of any graduate is resume building, rather than downloading templates from online, you can impress your interviewer by showing up with your own resume build using HTML & CSS.
Well... how to do that? No worries - Let me teach you, how to build it!
Already we have a basic knowledge on HTML & CSS structure and few tags, using that let's build our resume 😎

RESUME

Let me take a sample resume and re-create it
Here is our sample resume :

Before re-creating, we need some base to build our resume, so inside of doing everything at a time, let's break the resume into different parts and start to code one by one to avoid ambiguity.

Here is the image of my break down, To start with construction of building we need to plan and divide plot for different rooms, similarly here container acts as land where you will build different separate rooms, I have divided into left and right with 1:3 ratio as per my requirement.

Now, let's start the building work, but we need so much of materials to make it strong and attractive. As a first step, let's do some purchase of materials to build our resume.

Listing down of materials need to be purchased
1. Divisions - Dividing the page and naming it uniquely to style later. Here overall container is divided into left and right with 1:3 ratio
2. Headings - To show the headers of my resume, I use headings to highlight it.
3. Paragraph - To describe about myself, I use paragraph tags
4. Measurements - To build the resume, I need height, width and coloring measurements to make it attractive.
5. Image - To show the owner of the resume.
6. Table - To display a group of content in rows and columns
7. Display and directions - Display should be flexible for us to make changes and direction should be clear to move forward.

We also use Semantic tags. I can understand that already its little heavy with more new terms, now additionally I have added Semantic 😅

SEMANTIC TAGS
Semantic Tag is nothing but elements that clearly describe their meaning and purpose to both the browser and the developer. To know more, click here

<header>: Defines a header for a document or a section, often containing logos or navigation.
<nav>: Reserved for navigation links.
<footer>: Defines the footer of a document or section, usually containing copyright info or contact details.

Coming back to our resume, I have created a segregation to process one by one, so let me start with the container.

/*Class Selector*/
        .container { 
            /* border: 1px solid red; */
            height: 100vh;
            /* View Port Height - vh*/
            width: 70vw;
            /*View Port Width*/
            margin: auto;
            display: grid;
            grid-template-columns: 1fr 2fr; /*To separate the container*/
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

        }

All the borders which I have commented is used to create divisions and added for my reference (will remove after styling).

To talk with someone, we have to call them first - right?
Its the same here, to talk with container, left or right I need to call it. To call here we use dot along with class name, which is also called as Class Selector.

Step 1 : Set the height and width of the page
Step 2 : To make the resume applicable with different browsers, use margin : auto.
Step 3 : To separate the container in 1:3, I need to make a grid and divide it using grid-template-columns with 1fr 2fr
Step 4 : After removing border, resume may look incomplete so, styling it with box-shadow. Refer : Click here

vh (View Port Height) & vw (View Port Width) : When we zoom in and out web page, the contents should not affect, so we use View port Height and the same for View Port Width.
fr stands for fractional unit. It is a flexible unit used exclusively within CSS Grid Layout to represent a fraction of the available space in a grid container.
You can use fr in properties like grid-template-columns or grid-template-rows.

Code -> 1fr 1fr 1fr
Result -> Three columns of equal width.

Display-flex makes the container/box/class flexible to move.
Always how the flex-direction goes, justified-content will be given in same direction.

For Example :

If I code, flex-direction as column, contents should be aligned using justify-content and rows with align-items.
If flex-direction is row, contents should be aligned using justify-content and columns with align-items.

Code and Explanation

HTML

CSS

MY OUTPUT

Post your experience of creating this resume in comments!!🤗

References :
https://www.w3schools.com/html/html5_semantic_elements.asp
https://getcssscan.com/css-box-shadow-examples

推荐订阅源

DEV Community