.webp)
Present your qualifications clearly with this minimal CV template using HTML5 and CSS3. The design combines clean typography, subtle dividers, and balanced spacing to keep attention on your experience, education, and skills.
This static HTML CV template provides an organized layout for job seekers and professionals who prefer a simple presentation. Separate HTML and CSS files make it easy to replace the sample content and adjust the appearance. The responsive layout supports screen viewing, while dedicated print styles prepare the CV for A4 printing or saving as a PDF through your browser.
What you will build
You will build a minimal, responsive CV template with a clear single-column structure. The design includes:
A prominent name and professional title.
Contact details with portfolio and LinkedIn links.
A concise professional summary.
Work experience with achievement-focused bullet points.
Education details and graduation year.
Skills organized into simple text categories.
Two sample projects with descriptions and links.
Certifications with issuer and completion year.
Readable typography and subtle section dividers.
A responsive layout for mobile, tablet, and desktop.
A4 print styles designed for a one-page sample CV.
HTML source
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A minimal frontend developer CV template with fictional sample experience, skills, projects, and education.">
<title>Alex Morgan — Frontend Developer CV</title>
</head>
<body>
<main class="cv" aria-labelledby="name">
<!-- Customize the fictional identity and contact details. Replace example links. -->
<header class="header">
<h1 id="name">Alex Morgan</h1>
<p class="professional-title">Frontend Developer</p>
<ul class="contact" aria-label="Contact details">
<li><a href="mailto:alex.morgan@example.com">alex.morgan@example.com</a></li>
<li><a href="tel:+12025550148">+1 (202) 555-0148</a></li>
<li>Portland, OR</li>
<li><a href="https://example.com/portfolio">Portfolio: example.com/portfolio</a></li>
<li><a href="https://example.com/linkedin">LinkedIn: Alex Morgan</a></li>
</ul>
</header>
<!-- Customize the summary to match your experience and career focus. -->
<section aria-labelledby="summary-heading">
<h2 id="summary-heading">Professional summary</h2>
<p>Frontend developer with four years of experience building responsive web applications.<br class="summary-break">
Combines accessible interfaces, reusable components, and thoughtful performance improvements.<br class="summary-break">
Focused on creating clear, reliable digital experiences in collaborative product teams.</p>
</section>
<!-- Customize roles, dates, and measurable achievements. Companies are fictional. -->
<section aria-labelledby="experience-heading">
<h2 id="experience-heading">Work experience</h2>
<article class="entry">
<div class="entry-heading">
<div><h3>Frontend Developer</h3><p class="secondary">Cedarline Digital · Portland, OR</p></div>
<p class="dates"><time datetime="2024-07">Jul 2024</time> – Present</p>
</div>
<ul class="achievements">
<li>Built a React component library adopted across three customer-facing applications.</li>
<li>Reduced page load time by 28% through code splitting and optimized asset delivery.</li>
<li>Resolved 35 accessibility issues through keyboard testing and semantic HTML updates.</li>
</ul>
</article>
<article class="entry">
<div class="entry-heading">
<div><h3>Junior Frontend Developer</h3><p class="secondary">Northfern Studio · Portland, OR</p></div>
<p class="dates"><time datetime="2022-07">Jul 2022</time> – <time datetime="2024-06">Jun 2024</time></p>
</div>
<ul class="achievements">
<li>Delivered 12 responsive client websites from design handoff through launch.</li>
<li>Created reusable page templates that reduced implementation time by 20%.</li>
<li>Added end-to-end tests for six core journeys, catching regressions before release.</li>
</ul>
</article>
</section>
<!-- Customize education and graduation year. Institution is fictional. -->
<section aria-labelledby="education-heading">
<h2 id="education-heading">Education</h2>
<article class="entry entry-heading">
<div><h3>Bachelor of Science in Computer Science</h3><p class="secondary">Westhaven University · Portland, OR</p></div>
<p class="dates"><time datetime="2022">2022</time></p>
</article>
</section>
<!-- Customize skills by category; keep proficiency descriptions factual. -->
<section aria-labelledby="skills-heading">
<h2 id="skills-heading">Skills</h2>
<ul class="skills">
<li><strong>Frontend:</strong> HTML5, CSS3, JavaScript, TypeScript, React</li>
<li><strong>UI & accessibility:</strong> Responsive design, semantic HTML, WCAG, Figma</li>
<li><strong>Tools & testing:</strong> Git, Vite, REST APIs, Vitest, Playwright</li>
</ul>
</section>
<!-- Customize projects and replace the placeholder destination links. -->
<section aria-labelledby="projects-heading">
<h2 id="projects-heading">Projects</h2>
<article class="entry project">
<h3>Trailnotes — Hiking Planner</h3>
<p>A responsive React app for saving routes and planning hikes, with offline-friendly trip notes.</p>
<a href="https://example.com/projects/trailnotes">View Trailnotes project</a>
</article>
<article class="entry project">
<h3>Open Shelf — Reading Tracker</h3>
<p>A keyboard-accessible TypeScript app with book search, reading lists, and local storage.</p>
<a href="https://example.com/projects/open-shelf">View Open Shelf project</a>
</article>
</section>
<!-- Customize certifications, issuers, and completion years. Sample credentials are fictional. -->
<section aria-labelledby="certifications-heading">
<h2 id="certifications-heading">Certifications</h2>
<ul class="certifications">
<li><strong>Accessible Web Interfaces</strong> <span class="secondary">· Frontend Learning Institute · <time datetime="2025">2025</time></span></li>
<li><strong>Modern JavaScript Development</strong> <span class="secondary">· Webcraft Academy · <time datetime="2023">2023</time></span></li>
</ul>
</section>
<footer>Fictional sample CV · Replace all details and links before use.</footer>
</main>
</body></html>CSS source
:root {
--color-background: #f3f3f3;
--color-paper: #fff;
--color-heading: #171717;
--color-text: #333;
--color-secondary: #626262;
--color-rule: #d6d6d6;
--color-focus: #1759a6;
--font-family: Arial, Helvetica, sans-serif;
--font-body: 13px;
--font-name: 34px;
--font-title: 16px;
--font-section: 11px;
--font-small: 11px;
--line-height: 1.45;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-page: 40px;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: var(--space-page) var(--space-4);
background: var(--color-background);
color: var(--color-text);
font: var(--font-body)/var(--line-height) var(--font-family);
}
.cv {
max-width: 210mm;
margin: 0 auto;
padding: var(--space-page) 44px;
background: var(--color-paper);
box-shadow: 0 3px 24px rgb(0 0 0 / 6%);
overflow-wrap: anywhere;
}
h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3 { color: var(--color-heading); }
h1 { font-size: var(--font-name); line-height: 1.15; letter-spacing: -1px; }
.professional-title { margin-top: var(--space-1); font-size: var(--font-title); }
.contact {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-4);
margin-top: var(--space-3);
list-style: none;
padding: 0;
font-size: var(--font-small);
color: var(--color-secondary);
}
.contact li { min-width: 0; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--color-heading); text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 1px; }
section {
border-top: 1px solid var(--color-rule);
margin-top: var(--space-4);
padding-top: var(--space-3);
}
h2 {
margin-bottom: var(--space-2);
font-size: var(--font-section);
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 1.5px;
}
h3 { font-size: var(--font-body); font-weight: 700; line-height: var(--line-height); }
.entry + .entry { margin-top: var(--space-3); }
.entry-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.entry-heading > div { min-width: 0; }
.secondary, .dates { color: var(--color-secondary); }
.dates { flex-shrink: 0; font-size: var(--font-small); }
.achievements { margin-top: var(--space-1); padding-left: var(--space-4); }
.achievements li + li { margin-top: 2px; }
.skills, .certifications { list-style: none; padding: 0; }
.skills li + li, .certifications li + li { margin-top: var(--space-1); }
strong { font-weight: 700; }
.project a { font-size: var(--font-small); }
footer { margin-top: var(--space-4); font-size: 10px; color: var(--color-secondary); }
@media screen and (max-width: 600px) {
body { padding: 0; background: var(--color-paper); }
.cv { padding: var(--space-5) 20px; box-shadow: none; }
.entry-heading { flex-direction: column; gap: 2px; }
.summary-break { display: none; }
.contact { gap: var(--space-2) var(--space-3); }
}
@page { size: A4; margin: 12mm 14mm; }
@media print {
:root {
--font-body: 9pt;
--font-name: 25pt;
--font-title: 12pt;
--font-section: 8pt;
--font-small: 8pt;
--line-height: 1.35;
--space-3: 8px;
--space-4: 12px;
}
body { padding: 0; background: var(--color-paper); }
.cv { max-width: none; margin: 0; padding: 0; box-shadow: none; }
.entry { break-inside: avoid; page-break-inside: avoid; }
h2, h3, .entry-heading { break-after: avoid; page-break-after: avoid; }
p, li { orphans: 2; widows: 2; }
footer { font-size: 7pt; }
}
JavaScript source
How it works
The project uses index.html for the CV content and style.css for its appearance, responsive layout, and print formatting. All personal details and career information are updated manually in the HTML file.
Try a change
Choose Edit code, make a small change, then press Run to preview it.
Use the source Copy buttons, choose Edit code to open the editor, or Download ZIP to save the project after a six-second countdown.
Discussion (0)
Leave a comment