resume in html and css with source code

Create Resume/CV Website Using HTML and CSS (Source Code)

Create a Resume/CV Website Using HTML and CSS (Source Code)

Hello Coder, Welcome to Codewithrandom Blog. In this blog, I’ll show you how to create a Resume/CV Website Using HTML and CSS. We add an Image and all the necessary information that we have in our Resume/CV, So Let’s Create it cv in html and css .

Imagine this:- Your own corner of the internet, a place that tells your professional story in a way that’s uniquely you. In this blog, I’m your guide as we weave through the art of crafting a Resume/CV Website using the magic of HTML and CSS.

Think of it as more than just lines of code,  it’s a canvas where your professional journey gets a digital spotlight.
From your skills to your accomplishments, we’ll add it all—making your online presence not just informative but also a true reflection of you.

Whether you’re a seasoned pro or just starting out, this tutorial is crafted for every level.
let’s create an online identity that speaks volumes about your skills and who you are professionally.
Ready to make your Resume/CV shine online? Let’s dive in!

resume in html and css with source code
Responsive Resume/CV Website Using HTML & CSS

 Everything will be coded using HTML5 and CSS3 to function correctly across a range of screen resolutions.

Code byDudley Storey
Project DownloadLink Available below
Language usedHTML and CSS
External link / DependenciesNo
ResponsiveYes

Resume Website Table The majority of people in the business segment have at some point written a resume. As a freelancer, you are constantly competing for new projects. Because of this ephemeral work cycle, it is beneficial to give prospective clients a quick overview of your prior experience. 50+ HTML, CSS and JavaScript Projects With Source Code An official document known as a resume, sometimes known as a CV outside of the United States, gives a summary of your professional qualities, including your relevant work experience, abilities, education, and noteworthy accomplishments. A resume helps you highlight your skills and persuade potential employers that you are competent and employable. It is typically combined with a cover letter. I hope you have a general idea of what the project entails. In our article, we will go over this resume in html and css with source code project step by step.

Step1: Adding HTML Markup

<!DOCTYPE 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="style.css" />
    <title>Resume</title>
</head>

<body>
    <div id="resume">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/james-moriarty.jpg" alt="James Moriarty">
        <h1>James Moriarty</h1>
        <p>Cell: <a href=#>555-666-7777</a>
        <p>Web: <a href=#>moriarty.com</a>
        <p>Email: <a href=#>[email protected]</a>
        <p id="objective">I am a reserved but ambitious young professional seeking a career that fits my professional
            skills, personality, and murderous tendencies. My good birth, excellent education and phenomenal
            mathematical faculty have allowed me to advance the prospects of several criminal enterprises.
        <dl>
            <dt>Education
            <dd>
                <h2>Oxford University</h2>
                <p><strong>Major:</strong> Applied Mathematics<br />
                    <strong>Minor:</strong> Romance Languages
                </p>
        </dl>
        <dl>
            <dt>Skills
            <dd>
                <h2>Office Skills</h2>
                <p>Office and records management, database administration, event organization, customer support, travel
                    coordination
                <h2>Computer skills</h2>
                <p>Microsoft productivity software (Word, Excel, etc), Adobe Creative Suite, Windows
        </dl>
        <dl>
            <dt>Experience
            <dd>
                <h2>Consulting Criminal<span>London 1892 – present</span></h2>
                <ul>
                    <li>Development within the criminal underworld
                    <li>Conducted negotiations with several rogue governments
                </ul>
                <h2>The Coldstream Guards<span>Army Coach, London 1889 – 1888</span></h2>
                <ul>
                    <li>Recruiting, training and terrorizing young men.
                </ul>
                <h2>Oxford University<span>Professor of Mathematics 1885 – 1888</span></h2>
                <ul>
                    <li>Published papers in binomials, asteroid dynamics and game theory
                    <li>Intimidated students
                </ul>
            </dd>
        </dl>
        <dl>
            <dt>Hobbies
            <dd>World domination, Social Manipulation, Murder Most Foul
        </dl>
        <dl>
            <dt>References
            <dd>Available on request
        </dl>
    </div>
</body>

</html>

The project’s structure will be included first, but first we must include certain information inside the link, such as the fact that we utilised a CSS file, which we must connect inside our HTML code.

<link rel="stylesheet" href="style.css" />

Adding the Structure for our Resume Website: First, we’ll use the div element to create a container with the id “resume,” and then we’ll use the img> tag to add an image to our résumé. Use the h1> tag because our name is the most significant item on our CV. We will now include the person’s phone number, website, and email utilising the p> tag. We will add the person’s goal using the paragraph. 10+ Javascript Projects For Beginners With Source Code Now, utilising the description list, we will develop a section on education. We will use the h2> tag to insert the heading for our college inside of our list. The major and minor subjects will then be added using the strong tag. Similar to how we constructed our schooling part, we will create the abilities, experience, interests, and references sections utilising a description list. Let’s have a look at the structure. Output:  Restaurant Website Using HTML and CSS cv in html and css with source code

Step2: Adding CSS Code:-

In your stylesheet, copy and paste the CSS code provided below.

* {
  box-sizing: border-box;
}

body {
  margin: 2.2rem;
}

div#resume {
  min-width: 310px;
  font: 16px Helvetica, Avernir, sans-serif;
  line-height: 24px;
  color: #000;
}

div#resume h1 {
  margin: 0 0 16px 0;
  padding: 0 0 16px 0;
  font-size: 42px;
  font-weight: bold;
  letter-spacing: -2px;
  border-bottom: 1px solid #999;
  line-height: 50px;
}

div#resume h2 {
  font-size: 20px;
  margin: 0 0 6px 0;
  position: relative;
}

div#resume h2 span {
  position: absolute;
  bottom: 0;
  right: 0;
  font-style: italic;
  font-family: Georgia, serif;
  font-size: 16px;
  color: #999;
  font-weight: normal;
}

div#resume p {
  margin: 0 0 16px 0;
}

div#resume a {
  color: #999;
  text-decoration: none;
  border-bottom: 1px dotted #999;
}

div#resume a:hover {
  border-bottom-style: solid;
  color: #000;
}

div#resume p.objective {
  font-family: Georgia, serif;
  font-style: italic;
  color: #666;
}

div#resume dt {
  font-style: italic;
  font-weight: bold;
  font-size: 18px;
  text-align: right;
  padding: 0 26px 0 0;
  width: 150px;
  border-right: 1px solid #999;
}

div#resume dl {
  display: table-row;
}

div#resume dl dt,
div#resume dl dd {
  display: table-cell;
  padding-bottom: 20px;
}

div#resume dl dd {
  width: 500px;
  padding-left: 26px;
}

div#resume img {
  float: right;
  padding: 10px;
  background: #fff;
  margin: 0 30px;
  transform: rotate(-4deg);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  width: 30%;
  max-width: 220px;
}

@media screen and (max-width: 1100px) {
  div#resume h2 span {
    position: static;
    display: block;
    margin-top: 2px;
  }
}

@media screen and (max-width: 550px) {
  body {
    margin: 1rem;
  }
  div#resume img {
    transform: rotate(0deg);
  }
}

@media screen and (max-width: 400px) {
  div#resume dl dt {
    border-right: none;
    border-bottom: 1px solid #999;
  }
  div#resume dl,
  div#resume dl dd,
  div#resume dl dt {
    display: block;
    padding-left: 0;
    margin-left: 0;
    padding-bottom: 0;
    text-align: left;
    width: 100%;
  }
  div#resume dl dd {
    margin-top: 6px;
  }
  div#resume h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
  }
  div#resume dt {
    font-size: 20px;
  }
  h1 {
    font-size: 36px;
    margin-right: 0;
    line-height: 0;
  }
  div#resume img {
    margin: 0;
  }
}

@media screen and (max-width: 320px) {
  body {
    margin: 0;
  }
  img {
    margin: 0;
    margin-bottom: -40px;
  }
  div#resume {
    width: 320px;
    padding: 12px;
    overflow: hidden;
  }   p,
  li {
    margin-right: 20px;
  }
}

resume in html and css with source code

Step1:We will set the box size to “border box of website” using the universal selector, and the margin to 2.2 rem using the body tag selector. We’ll style our container using the id selector (#resume). The minimum width will be 300 px, and the font size will be 16 pixels with the “Helvetica” font family. In addition, we’ll have a line height of 24 pixels. Calculator Using HTML,CSS & JavaScript With Source Code

* {
  box-sizing: border-box;
}

body {
  margin: 2.2rem;
}

div#resume {
  min-width: 310px;
  font: 16px Helvetica, Avernir, sans-serif;
  line-height: 24px;
  color: #000;
}

Step2:We will now use the tag selector h1 to individually style each component of our resume. Our heading will have a margin of 16 pixels from the bottom, and our h1 tag’s font size and line height are both set to 42 pixels. Weather App Using Html,Css And JavaScript  The h2 heading will also get some style. The font size will be set to 20 px, the bottom margin to 6, and the position to “relative.” The remaining html elements will receive styling in the same way that we added styling to our h1 and h2 tags. You merely need to execute the code as written to get the desired result.

div#resume h1 {
  margin: 0 0 16px 0;
  padding: 0 0 16px 0;
  font-size: 42px;
  font-weight: bold;
  letter-spacing: -2px;
  border-bottom: 1px solid #999;
  line-height: 50px;
}

div#resume h2 {
  font-size: 20px;
  margin: 0 0 6px 0;
  position: relative;
}

div#resume h2 span {
  position: absolute;
  bottom: 0;
  right: 0;
  font-style: italic;
  font-family: Georgia, serif;
  font-size: 16px;
  color: #999;
  font-weight: normal;
}

div#resume p {
  margin: 0 0 16px 0;
}

div#resume a {
  color: #999;
  text-decoration: none;
  border-bottom: 1px dotted #999;
}

div#resume a:hover {
  border-bottom-style: solid;
  color: #000;
}

div#resume p.objective {
  font-family: Georgia, serif;
  font-style: italic;
  color: #666;
}

div#resume dt {
  font-style: italic;
  font-weight: bold;
  font-size: 18px;
  text-align: right;
  padding: 0 26px 0 0;
  width: 150px;
  border-right: 1px solid #999;
}

div#resume dl {
  display: table-row;
}

div#resume dl dt,
div#resume dl dd {
  display: table-cell;
  padding-bottom: 20px;
}

div#resume dl dd {
  width: 500px;
  padding-left: 26px;
}

div#resume img {
  float: right;
  padding: 10px;
  background: #fff;
  margin: 0 30px;
  transform: rotate(-4deg);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  width: 30%;
  max-width: 220px;
}

cv in html and css with source code

Create Portfolio Website Using HTML and CSS (Source Code)

Step3: We have almost finished adding the aesthetic to our resume; the final step is to include responsiveness. The heading of our resume will be set to “static” if the screen size is equal to or less than the stated screen size. For this, we will be using the media query and screen width and defining a maximum width of “1100px.” Similar to this, we will specify the width for various screen sizes so that our resume website may adjust the size of our resume to the screen size automatically.

@media screen and (max-width: 1100px) {
  div#resume h2 span {
    position: static;
    display: block;
    margin-top: 2px;
  }
}

@media screen and (max-width: 550px) {
  body {
    margin: 1rem;
  }
  div#resume img {
    transform: rotate(0deg);
  }
}

@media screen and (max-width: 400px) {
  div#resume dl dt {
    border-right: none;
    border-bottom: 1px solid #999;
  }
  div#resume dl,
  div#resume dl dd,
  div#resume dl dt {
    display: block;
    padding-left: 0;
    margin-left: 0;
    padding-bottom: 0;
    text-align: left;
    width: 100%;
  }
  div#resume dl dd {
    margin-top: 6px;
  }
  div#resume h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
  }
  div#resume dt {
    font-size: 20px;
  }
  h1 {
    font-size: 36px;
    margin-right: 0;
    line-height: 0;
  }
  div#resume img {
    margin: 0;
  }
}

@media screen and (max-width: 320px) {
  body {
    margin: 0;
  }
  img {
    margin: 0;
    margin-bottom: -40px;
  }
  div#resume {
    width: 320px;
    padding: 12px;
    overflow: hidden;
  }
  p,
  li {
    margin-right: 20px;
  }
}

Now we’ve completed our resume website using html & css. I hope you understood the whole project. Let’s take a look at our Live Preview. Final Output Of Resume/CV Website Using HTML and CSS:

Live Preview Of our resume website using Html & Css:-

OutPut Preview:-

 

Now We have Successfully created our resume website using html & css. You can use this project directly by copying into your  IDE. WE hope you understood the project , If you any doubt feel free to comment!! If you find out this Blog helpful, then make sure to search Codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @Arun
Code By: @dudley
FAQ:- cv in html and css with source code , resume in html and css with source code , resume using html and css

Which code editor do you use for this Indian Flag coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

Can I customize my Resume/CV Website to reflect my style?

Yes Dude!!! In this tutorial provides the foundation, but feel free to add your creative touch. Customize colors, fonts, and layouts to make your website uniquely yours.

ADVERTISEMENT

What makes a Resume/CV Website important for professionals?

In your (Resume/CV) Website is your online personal powerful tool to showcase your skills, experience, and achievements in the interactive manner.

ADVERTISEMENT



Leave a Reply