CV Template: Crafting a Modern Résumé with HTML & CSS
The Ask
A friend needed a professional CV for a job application but didn't have access to design tools. "Can you just make me one in code?" — and so this project was born.
Why HTML/CSS?
A CV is essentially a structured document. HTML is perfect for semantic structure (headings, lists, sections), and CSS handles the visual design. The result is a template that's:
- Easy to edit — just change the text in the HTML
- Print-perfect —
@media printstyles ensure clean output - Version-controllable — it's just code, so Git tracks every revision
Structure
<header> → Name, title, contact info
<section> → Professional summary
<section> → Work experience (timeline layout)
<section> → Education
<section> → Skills (tag-based layout)
<section> → Languages & certifications
Design Choices
Typography
I used a combination of a serif font for the name/headings (Playfair Display) and a clean sans-serif for body text (Source Sans Pro). The contrast adds visual hierarchy without relying on heavy styling.
Color Palette
Minimal — a single accent color (deep teal) for headings and dividers, with black text on white. CVs should be scannable, not decorative.
Print Optimization
The @media print stylesheet hides non-essential elements (links, decorative borders) and adjusts margins for A4 paper. Colors are converted to greyscale-safe values since many CVs are printed in black and white.
Lessons Learned
Print CSS is an underappreciated skill. Controlling page breaks (break-inside: avoid), managing orphans/widows in text blocks, and testing across different printers taught me nuances of CSS that web-only development never touches.