Simple Resume Website using HTML & CSS – Step-by-Step Guide with Full Code

Author - Uspacial
May 29, 2025
0

 ✨ Simple Resume Website using HTML & CSS – Step-by-Step Guide with Full Code


Creating a personal resume webpage is one of the most effective ways to stand out in the job market. In this tutorial, we’ll explore how to build a clean, modern-looking resume website using only HTML and CSS.

By the end of this post, you’ll:

  • Understand how HTML and CSS work together

  • Be able to customize your own digital resume

  • Get a full working code that you can copy, modify, and deploy

📌 Why Build a Resume Website?

Here are 3 solid reasons:

  1. Professional Presence: Stand out from other applicants.

  2. Shareable: Easily share a link to your resume instead of PDFs.

  3. Expandable: You can later add a blog, portfolio, or contact form.

💡 Project Overview

We will build a basic responsive resume that includes:

  • Header with name and title

  • Contact details

  • Education history

  • Skills

  • Experience section

  • Footer

🧱 HTML Structure Explained

The HTML document provides the content and structure of the resume. Here's what each section does:

  • DOCTYPE + HTML Tags: Define the document type and language.

  • Head Section: Contains meta info, title, and links the stylesheet.

  • Body Section: Divided into sections like header, contact, education, etc.

🎨 CSS Styling Explained

CSS is used for presentation. Key styling features:

  • Centering the container with margin: auto

  • Adding box-shadow, padding, and border-radius for a card-like effect

  • Using colors and typography to make each section distinct

💻 Full Code (HTML + CSS)

Here’s the complete code of the resume website. You can copy this and paste it into two files: index.html and style.css.


🔹 index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>John Doe - Resume</title>

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

  </head>

  <body>

    <div class="resume-container">

      <header>

        <h1>John Doe</h1>

        <p>Web Developer | HTML CSS JavaScript</p>

      </header>


      <section class="contact">

        <h2>Contact</h2>

        <p>Email: john.doe@example.com</p>

        <p>Location: New York, USA</p>

      </section>


      <section class="education">

        <h2>Education</h2>

        <p>

          <strong>B.Sc. in Computer Science</strong> - XYZ University

          (2020-2023)

        </p>

      </section>


      <section class="skills">

        <h2>Skills</h2>

        <ul>

          <li>HTML5, CSS3</li>

          <li>JavaScript</li>

          <li>React Basics</li>

          <li>Responsive Web Design</li>

        </ul>

      </section>


      <section class="experience">

        <h2>Experience</h2>

        <p><strong>Web Developer Intern</strong> - ABC Company</p>

        <p>June 2023 - Dec 2023</p>

        <ul>

          <li>Built responsive web pages using HTML & CSS</li>

        </ul>

      </section>


      <footer>

        <p>2025 John Doe</p>

      </footer>

    </div>

  </body>

</html>


🔹 style.css

body {

    background-color: #f4f4f4;

    margin: 0;

    padding: 20px;

}


.resume-container {

    max-width: 800px;

    background-color: #f4f4f4;

    margin: auto;

    padding: 30px;

    border-radius: 10px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}


header {

    text-align: center;

    margin-bottom: 20px;

}


header h1 {

    margin-bottom: 5px;

    color: #333;

}


section {

    margin-bottom: 25px;

}


section h2 {

    color: #d2691e;

    border-bottom: 1px solid #ddd;

    padding-bottom: 5px;

    margin-bottom: 10px;

}


ul {

    padding-left: 20px;

}


footer {

    text-align: center;

    color: #666;

    font-size: 14px;

}



🔍 Deep Dive: What Each Part Does

✅ Header

<header>
  <h1>John Doe</h1>
  <p>Web Developer | HTML CSS JavaScript</p>
</header>

  • Your name and title.

  • Make it bold and center aligned for better visual hierarchy.

✅ Contact Section

<section class="contact">
  <h2>Contact</h2>
  <p>Email: john.doe@example.com</p>
  <p>Location: New York, USA</p>
</section>

  • Simple contact details like email and location.

✅ Skills & Education

Use <ul> lists to display skills for better readability.

✅ Experience

Use clear titles and dates to show your timeline and responsibilities.

✅ CSS Styling Highlights

Resume Container

.resume-container {
    max-width: 800px;
    margin: auto;
    background: #f4f4f4;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

  • Creates a centered card layout

  • Gives soft shadow for professional look

✅ Section Headings

section h2 {
    color: #d2691e;
    border-bottom: 1px solid #ddd;
}

  • Stylish section dividers improve readability

🧪 How to Run This Project

  1. Open any code editor (like VS Code)

  2. Create two files: index.html and style.css

  3. Copy-paste the above code into the files

  4. Open index.html in your browser

🧠 Bonus Tips to Improve

  • Make it responsive using media queries

  • Add a profile picture

  • Add GitHub/LinkedIn links

  • Use Google Fonts for better typography

  • Deploy using GitHub Pages or Netlify

🧳 Final Thoughts

A simple HTML-CSS resume website is a great starting point to showcase your skills. You don’t need any frameworks or libraries to get started — just basic web knowledge and a creative touch.

Do you want this resume template in dark mode, React, or with download PDF button?

Let me know in the comments! 💬






Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link