Semantic-UI Popup Inverted Variation

How to create a CV using HTML and host in GitHub ?

Last Updated : 14 Dec, 2023

In today’s digital age, having an online presence is crucial, especially when it comes to professional endeavors. One effective way to showcase your skills, experiences, and accomplishments is by creating a compelling curriculum vitae (CV). In this article, we are going to build a CV using HTML, and CSS. Later, we will host it on GitHub, a popular platform for version control and code hosting. So let’s dive in and unlock the power of HTML and GitHub to craft a standout CV that truly represents your capabilities and accomplishments.

Approach

Link CSS in the HTML head section, creating a structured layout for the resume using div blocks.
Utilize five div blocks within the left section for Image, Contact, Skills, Language & Hobbies, populating each with relevant data.
Incorporate five div blocks within the right section for Name, Summary, Experience, Education & Project, utilizing list and table elements.
Apply class names like (.left) and (.right) in the CSS file for background color and positioning, ensuring a cohesive design.
Implement the display flex property in the body and grid for the entire page layout, optimizing responsiveness and visual appeal.

Example: In this example code, we are using the above approach.

HTML

<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet"
          href="resume.css">
</head>
 
<body>
    <div class="full">
        <div class="left">
            <div class="image">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220202083519/gfglogo.png"
                     alt="gfg-logo"
                     style="width:100px;
                            height:100px;">
            </div>
            <div class="Contact">
                <h2>Contact</h2>
                <p>
                      <b>Email id:</b>[email protected]
                  </p>
                <p>
                      <b>Mobile no :</b>1234567890
                  </p>
            </div>
            <div class="Skills">
                <h2>Skills</h2>
                <ul>
                    <li>
                          <b>Programming Languages :
                            Python, Java, C++</b>
                      </li>
                    <li>
                          <b>Frontend : HTML5, CSS3,
                            JavaScript, React</b>
                      </li>
                    <li>
                          <b>Backend : Node.js</b>
                      </li>
                </ul>
            </div>
            <div class="Language">
                <h2>Language</h2>
                <ul>
                    <li>English</li>
                    <li>Hindi</li>
                </ul>
            </div>
            <div class="Hobbies">
                <h2>Hobbies</h2>
                <ul>
                    <li>Playing cricket</li>
                    <li>Swimming</li>
                </ul>
            </div>
        </div>
        <div class="right">
            <div class="name">
                <h1>GeeksforGeeks</h1>
            </div>
            <div class="title">
                <p>Web Developer</p>
            </div>
            <div class="Summary">
                <h2>Summary</h2>
                <p>
                      To secure a challenging position in a
                    reputable organization
                    to expand my learning knowledge and skill
                </p>
            </div>
            <div class="Experience">
                <h2>Experience</h2>
                <h3>Abc webdev pvt ltd - Senior Web Developer</h3>
                <p>January 2022 to Present</p>
                <ul>
                    <li>
                        Actively engaged in web creative
                        design and development.
                      </li>
                    <li>
                        Designing project & planning
                      </li>
                </ul>
                <h3>Xyz webdev pvt ltd - junior web developer</h3>
                <p>August 2021 to December 2021</p>
                <ul>
                    <li>
                          Actively engaged in web creative
                        design and development.
                      </li>
                    <li>Designing project & planning</li>
                    <li>Working on designing</li>
                </ul>
            </div>
            <div class="Education">
                <h2>Education</h2>
                <table>
                    <tr>
                        <th>University/college  </th>
                        <th>Passing year  </th>
                        <th>percentage/cgpa</th>
                    </tr>
                    <tr>
                        <td>xyz</td>
                        <td>2020</td>
                        <td>8.9</td>
                    </tr>
                    <tr>
                        <td>pqr</td>
                        <td>2018</td>
                        <td>89%</td>
                    </tr>
                </table>
            </div>
            <div class="project">
                <ul>
                    <li>
                        <h2>Project1</h2>
                        <p>
                              This project is based on html
                            & used React
                          </p>
                    </li>
                    <li>
                        <h2>Project2</h2>
                        <p>
                              This project is based on html
                            & used React
                          </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
 
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(253, 254, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}
.full {
    width: 50%;
    max-width: 1000px;
    min-height: 100px;
    background-color: rgb(245, 239, 231);
    margin: 0px;
    display: grid;
    grid-template-columns: 2fr 4fr;
}
.left {
    position: initial;
    background-color: rgb(126, 219, 231);
    padding: 20px;
 
}
.right {
    position: initial;
    background-color: rgb(162, 202, 206);
    padding: 20px;
 
}
.image, .Contact, .Skills, .Language, .Hobbies, .title, 
.Summary, .Experience, .Education, .project {
    margin-bottom: 30px;
}
.h2 {
    background-color: rgb(4, 96, 150);
}

Output:

Now, our CV-building part is finished and we will host it on GitHub. The step-by-step process to host is given below:

Step 1: Open your GitHub profile & click on + sign on the left side, then create a new repository.

Step 2: Write a repository name, description & checkbox of add readme file then click on create a repository

Step 3: Click on Add file & upload files.

Step 4: Click on Choose your files & upload all files from your local device.

Step 5: Click on commit changes.

Step 6: Now your all codes are uploaded on Github now we create a link for this to access anywhere. Go to the setting icon and then just go to the pages section.

Step 7: A new page is opened and in this make source none to the main branch and save now your link is created and you can use it anywhere.

Semantic-UI Popup Inverted Variation

V

vickykumar7061

Improve

Article Tags :

Similar Reads

How to Create Badges using HTML and CSS ?

This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that

How to Create a Website Using HTML and CSS?

Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, weâ€™ll go throu

How to create a Portfolio Gallery using HTML and CSS ?

The portfolio gallery is useful when your website contains different types of content or so much content. With the help of a portfolio gallery, you can easily display all the content on your front page to the user. To create a portfolio gallery we will need only HTML and CSS. We can use JavaScript a

How to Create a GitHub Profile Search using HTML CSS and JavaScript ?

In this article, we will be developing an interactive GitHub Profile Search application using HTML, CSS, and JavaScript Language. In this application, there is a search bar where users can enter the username that they want to view. After entering the username, an API call is been triggered, and the

How to Create a New Branch on Github using Pycharm?

Git is an open-source version control system. It means that whenever a developer develops some project (like an app or website) or something, he/she can constantly update, Git is a version control system that lets you manage and keep track of your source code history. Letâ€™s say you have a project, a

How to Create a Pull Request on GitHub using Android Studio?

Creating a pull request is an important part of collaborating on projects hosted on GitHub. It allows you to propose changes to a repository, enabling others to review, discuss, and merge your changes. Hereâ€™s a step-by-step guide on how to create a pull request on GitHub using Android Studio. Steps

How to Host a Website on GitHub For Free?

GitHub is not only a platform for version control and code management but also a great tool for hosting websites for free. Whether you want to host a personal blog, a project portfolio, or just showcase your work, GitHub Pages offers a simple way to publish a static website directly from a GitHub re

How to Create an index.html File?

Creating an index.html file is a fundamental step in HTML programming and website development. This file serves as the backbone of a basic HTML webpage. In this article, we will explore four straightforward methods to create an index.html file, which is important for building and serving web content

How to Create Browsers Window using HTML and CSS ?

The browser window is a tool to view the pages from the internet. It is used to search the content on the internet and get relevant information from the internet. Creating Structure: In this section, we will create a basic site structure and also attach the CDN link of the Font-Awesome for the icons

Using GitHub to Host a Free Static Website

Having a personal or project website is important for showcasing your work. Fortunately, GitHub Pages offers a simple and free solution for hosting static websites directly from your GitHub repositories. In this article, we'll walk you through the process of creating and hosting a static website usi