Project: Responsive Resume Website
A single-page personal resume website showcasing:
✅ Name, photo, and a short bio
✅ Contact information
✅ Skills section with progress bars (pure CSS)
✅ Work experience & education in a neat layout
✅ Downloadable PDF resume button
✅ A responsive design that adapts to mobile & desktop
📌 Features Included:
✅ Fully responsive (mobile-friendly)
✅ Sections: Profile, Skills, Experience, Education, Contact
✅ Printable/downloadable as a PDF using CSS
✅ No JavaScript required
Why This Is a Good Tutorial?
Beginner-friendly: Covers structuring with HTML and styling with CSS.
Real-world use case: Viewers can build their own resume website.
Demonstrates responsive design: Teaches Flexbox/Grid for layout.
No JavaScript required: All functionality is handled with HTML & CSS.
Introduction
In this tutorial, we will create a beautiful and responsive resume using HTML and CSS. This resume will include sections for contact information, skills, experience, and education. Additionally, we will add a button to download the resume as a PDF. Follow this step-by-step guide to enhance your web development skills and create a professional resume.
Step 1: Setup Your Project
Create a new folder for your project.
This folder will contain all the files related to your resume project.
Inside the folder, create two files:
index.htmlandstyle.css.index.htmlwill contain the HTML structure of your resume.style.csswill contain the CSS styles to make your resume look great.
Step 2: HTML Structure
Open index.html and add the following basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Resume</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="resume">
<header>
<img src="profile.png" alt="Profile Photo" />
<h1>John Doe</h1>
<p>Web Developer | Frontend Enthusiast</p>
</header>
<section class="contact">
<h2>Contact Info</h2>
<p><strong>Email:</strong> johndoe@example.com</p>
<p><strong>Phone:</strong> +123 456 7890</p>
<p><strong>Website:</strong> www.johndoe.com</p>
</section>
<section class="skills">
<h2>Skills</h2>
<div class="skill">
<span><i class="fa-brands fa-html5"></i> HTML</span>
<div class="bar html"></div>
</div>
<div class="skill">
<span><i class="fa-brands fa-css3-alt"></i> CSS</span>
<div class="bar css"></div>
</div>
<div class="skill">
<span>Responsive Design</span>
<div class="bar responsive"></div>
</div>
</section>
<section class="experience">
<h2>Experience</h2>
<p><strong>Web Developer</strong> - XYZ Company (2020 - Present)</p>
<p>Developed responsive websites and improved UI/UX for clients.</p>
</section>
<section class="education">
<h2>Education</h2>
<p>
<strong>Bachelor's in Computer Science</strong> - ABC University (2015
- 2019)
</p>
</section>
<button onclick="window.print()">Download PDF</button>
</div>
</body>
</html>
Explanation:
DOCTYPE and HTML structure: This sets up the basic HTML document structure.
Meta tags: These tags ensure proper character encoding and responsive behavior.
Title: Sets the title of the document.
Stylesheets: Links to external CSS files for fonts and icons.
Body: Contains the main content of the resume, divided into sections like header, contact info, skills, experience, and education.
Step 3: Styling with CSS
Open style.css and add the following CSS code to style your resume:
/* General setup */
body {
font-family: "Poppins", sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 20px;
}
/* Resume Section */
.resume {
background: white;
padding: 30px;
max-width: 600px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-radius: 10px;
text-align: center;
}
header img {
width: 120px;
border-radius: 50%;
border: 4px solid #667eea;
}
h1 {
margin: 10px 0 5px;
font-size: 24px;
color: #333;
}
/* Contact Section */
h2 {
border-bottom: 2px solid #667eea;
display: inline-block;
padding-bottom: 5px;
margin-bottom: 15px;
font-size: 20px;
color: #333;
}
p {
color: #555;
}
/* Skills Section */
.skills .bar {
height: 10px;
background: #e0e0e0;
margin: 5px 0;
border-radius: 5px;
overflow: hidden;
}
.bar div {
height: 100%;
transition: width 0.5s ease-in-out;
}
.html {
width: 90%;
background: #ff5733;
}
.css {
width: 85%;
background: #33a1ff;
}
.responsive {
width: 80%;
background: #33ff57;
}
button {
display: block;
width: 100%;
padding: 12px;
background: #667eea;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
transition: 0.3s;
}
button:hover {
background: #5563c1;
}
/* Print layout */
@media print {
button {
display: none;
}
body {
background: white;
}
.resume {
box-shadow: none;
}
}
Explanation:
General setup: Sets up the font, background, and layout for the body.
Resume section: Styles the main resume container with padding, shadow, and border radius.
Header: Styles the profile image and main heading.
Contact section: Styles the contact information.
Skills section: Styles the skill bars with different colors and widths.
Button: Styles the download button with hover effects.
Print layout: Hides the button and removes background and shadow for printing.
Conclusion
By following these steps, you have created a stunning and responsive resume using HTML and CSS. You can further customize the styles and content to match your personal preferences. This project not only helps you create a professional resume but also enhances your web development skills. Happy coding!
