Free Resume / CV Website Template (HTML & CSS, 2026)
A clean, print-friendly online resume (CV) template in HTML and CSS — header with contact, summary, experience, skills and education — responsive, accessible and easy to personalize.
· 4 min read
This free resume / CV website template is a clean, single-page online resume in plain HTML and CSS: a header with your name and contact details, a summary, an experience timeline, a skills list and education. It’s responsive, accessible, and print-friendly — so the same page looks right on screen and as a PDF. Personalize the content and publish.
What you get
- A structured, semantic resume: header, summary, experience, skills, education.
- A clean experience timeline that’s easy to scan.
- Print-friendly styles so it exports to a tidy PDF.
- Responsive, accessible, and themed with CSS variables.
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jane Doe — Resume</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="resume">
<header class="head">
<h1>Jane Doe</h1>
<p class="title">Senior Frontend Developer</p>
<ul class="contact">
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li>San Francisco, CA</li>
<li><a href="#">janedoe.dev</a></li>
</ul>
</header>
<section>
<h2>Summary</h2>
<p>Frontend developer with 8 years building fast, accessible web apps in
React and TypeScript. I care about performance, clean architecture and
shipping.</p>
</section>
<section>
<h2>Experience</h2>
<div class="item">
<div class="row"><h3>Senior Frontend Developer, Acme</h3><span class="when">2022 – Present</span></div>
<ul>
<li>Led the rebuild of the dashboard, cutting load time by 45%.</li>
<li>Mentored 4 engineers and set the team's accessibility standards.</li>
</ul>
</div>
<div class="item">
<div class="row"><h3>Frontend Developer, Globex</h3><span class="when">2019 – 2022</span></div>
<ul>
<li>Shipped a design system used across 6 products.</li>
<li>Reduced bundle size by 38% through code splitting.</li>
</ul>
</div>
</section>
<section>
<h2>Skills</h2>
<ul class="skills">
<li>React</li><li>TypeScript</li><li>Node.js</li><li>CSS</li>
<li>Testing</li><li>Accessibility</li><li>Performance</li>
</ul>
</section>
<section>
<h2>Education</h2>
<div class="row"><h3>B.S. Computer Science, State University</h3><span class="when">2015</span></div>
</section>
</main>
</body>
</html>The CSS
:root {
--bg: #f4f6fb; --card: #ffffff; --text: #121826; --muted: #5b6472;
--accent: #4f46e5; --border: #e6e9f0; --max: 760px;
color-scheme: light;
}
* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background: var(--bg); color: var(--text); line-height: 1.6; padding: 24px; }
.resume { max-width: var(--max); margin-inline: auto; background: var(--card);
border: 1px solid var(--border); border-radius: 16px; padding: clamp(28px, 5vw, 48px); }
.head { border-bottom: 2px solid var(--border); padding-bottom: 20px; margin-bottom: 24px; }
.head h1 { font-size: clamp(28px, 5vw, 38px); letter-spacing: -.02em; }
.title { color: var(--accent); font-weight: 600; margin-top: 2px; }
.contact { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px;
margin-top: 12px; color: var(--muted); font-size: 14px; }
.contact a { color: var(--muted); }
section { margin-bottom: 26px; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent);
margin-bottom: 12px; }
h3 { font-size: 16px; }
p { color: var(--text); }
.item { margin-bottom: 18px; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.item ul { margin: 8px 0 0 18px; color: var(--muted); }
.item li { margin-bottom: 4px; }
.skills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.skills li { background: var(--bg); border: 1px solid var(--border); border-radius: 20px;
padding: 5px 14px; font-size: 14px; }
@media print {
body { background: #fff; padding: 0; }
.resume { border: 0; border-radius: 0; max-width: none; padding: 0; }
a { color: inherit; text-decoration: none; }
}How to use it
- Personalize: replace the name, title, contact, and each experience entry. Lead every bullet with an achievement and a number where you can.
- Export a PDF: open the page and use your browser’s "Print → Save as PDF." The
@media printstyles produce a clean, ink-friendly document. - Rebrand: change
--accentand the fonts to match your personal brand or portfolio. - Publish it: host the two files free on GitHub Pages, Netlify or Cloudflare Pages and link it from your portfolio and LinkedIn.
- Keep it to a page: trim older roles; one focused page beats two padded ones.
Frequently asked questions
Is an online resume better than a PDF?
They serve different purposes, so have both. An online resume (like this template) is easy to share with a link, is accessible, and can include live links to your work. A PDF is expected by many applicants tracking systems and recruiters. This template does both — it’s a real web page that also prints to a clean PDF via its print styles.
How do I export this resume to PDF?
Open the page in your browser and choose "Print", then "Save as PDF." The template includes an
@media print block that removes the background, borders and rounded corners and turns links black, so the exported PDF is clean and ink-friendly rather than a screenshot of the dark web version.What should a resume website include?
Keep it focused: your name and title, contact details, a short summary, work experience with achievement-led bullet points (numbers where possible), key skills, and education. Aim for one page. This template includes all of these sections in a clean, scannable structure that recruiters can read quickly.
Is this resume template ATS-friendly?
The web version uses clean semantic HTML (headings, lists) that’s easy to parse, and the PDF it prints is text-based rather than an image, which helps applicant tracking systems read it. For maximum ATS compatibility, keep the wording clear and avoid burying key terms in images or unusual layouts.
Build and personalize this resume live in XCODX Studio, then export a PDF. See also the portfolio website template and our accessibility best practices.