✨ 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:
-
Professional Presence: Stand out from other applicants.
-
Shareable: Easily share a link to your resume instead of PDFs.
-
Expandable: You can later add a blog, portfolio, or contact form.
💡 Project Overview
We will build a basic responsive resume that includes:
🧱 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
✅ Contact Section
✅ 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
✅ Section Headings
🧪 How to Run This Project
-
Open any code editor (like VS Code)
-
Create two files: index.html and style.css
-
Copy-paste the above code into the files
-
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! 💬
