In today’s digital-first job market, standing out is more important than ever. One creative and professional way to do that is by building your own resume using HTML and CSS.
HTML (HyperText Markup Language) is the standard language used to structure content on the web. Think of it as the skeleton of a webpage. CSS (Cascading Style Sheets) is used to style the structure, adding colors, fonts, layouts, and spacing. Together, they form the foundation of modern web design.
To begin your journey as a software developer, enrol in one of our software engineering courses in Kenya. We offer hands-on practical skills that make you a software developer in less than 10 months.
Why Create Your Resume with HTML and CSS?
Making your resume with HTML and CSS allows for complete control over its layout and design. It shows initiative, creativity, and basic coding skills valuable traits, especially for roles in tech, marketing, or design. Even if you’re applying outside the tech field, a custom online resume can set you apart from generic Word or PDF formats.
In this guide, you’ll learn how to make a resume with HTML and CSS from scratch, even if you’re new to coding. Whether you want to showcase your skills online or just build a custom printable resume, this tutorial will walk you through the steps clearly and practically.
What You Need to Get Started
Before you dive into building your resume, you’ll need a few basic tools and a bit of foundational knowledge. Don’t worry everything here is beginner-friendly and either free or open-source.
1. A Code Editor
To write and edit your HTML and CSS code, you’ll need a text editor built for developers. Here are two popular options:
- Visual Studio Code (VS Code): Highly recommended, feature-rich, with built-in extensions and preview tools.
- Sublime Text: Lightweight, fast, and beginner-friendly.
Any of these will work; you just need a place to write and save your code files.
2. Basic Knowledge of HTML and CSS
You don’t need to be a pro, but you should understand:
- How to structure a simple webpage using HTML tags like <div>, <section>, <h1>, and <p>.
- How to apply styles with CSS using selectors, properties, and values (e.g., color, font-size, margin).
3. Optional But Helpful Tools
- GitHub Pages A free way to publish and host your resume online with just a few clicks.
- Google Fonts Use modern, professional fonts in your design with just one line of code.
- Bootstrap or CSS Frameworks While this tutorial sticks to vanilla CSS to help you learn the fundamentals, frameworks like Bootstrap can help speed up development once you’re more comfortable.
Plan Your Resume Content
Before writing any code, it’s important to map out what your resume will include. Just like a traditional resume, your HTML and CSS resume should be clear, structured, and easy to scan, especially since recruiters often skim resumes in just a few seconds.
Essential Sections to Include
Here’s a breakdown of the most common sections you should add to your resume:
1. Header with Name and Title
- Display your full name prominently.
- Add your current job title or area of expertise (e.g., “Frontend Developer” or “Graphic Designer”).
2. Contact Information
- Email address
- Phone number
- LinkedIn profile or portfolio website
- GitHub link (if applying for tech roles)
This can be included in your header or as a separate sidebar.
3. Professional Summary
- A short paragraph (2–4 lines) summarising your experience, strengths, and goals.
- Think of this as your resume’s “elevator pitch.”
4. Work Experience
- List previous jobs or internships.
- Include job title, company name, location, and dates.
- Use bullet points to describe key responsibilities and accomplishments.
5. Education
- List your most recent or relevant academic qualifications.
- Include degree name, institution, and graduation date.
6. Skills
- Highlight your technical and soft skills.
- Use categories (e.g., “Languages,” “Tools,” “Soft Skills”) to organize them if needed.
7. Projects (Optional)
- Showcase a few projects you’ve worked on, especially if you’re new to the field.
- Include links to live demos or GitHub repos.
8. Certifications or Awards (Optional)
- Include any professional certifications, achievements, or recognitions relevant to your field.
Why a Clean Layout Matters
Recruiters spend only 6–10 seconds reviewing a resume before deciding whether to read further. That’s why:
- Your sections should be well-organised.
- Important details (like job titles and dates) should stand out.
- Avoid clutter or too many colors.
- Use spacing and headings to guide the reader’s eye.
With your content planned and organized, you’re ready to start building the structure using HTML.
How to Structure Your Resume in HTML
Now that your content is planned, it’s time to turn it into a web page using HTML. The key to a professional, readable resume is using semantic HTML tags, which give meaning to your content and improve accessibility, SEO, and maintainability.
Use Semantic HTML Tags
Semantic tags describe the purpose of the content inside them. This makes your resume easier to read, both for humans and machines.
Here are some commonly used semantic elements for a resume:
| Tag | Purpose |
| <header> | Contains your name, title, and contact info |
| <main> | Wraps the primary content of your resume |
| <section> | Groups related sections like experience, skills |
| <article> | Can be used for individual job entries |
| <footer> | Optional: add credits, links, or copyright info |
Example: Work Experience Section
Here’s a simple example of how to structure your Work Experience section in HTML:
<section id="experience">
<h2>Work Experience</h2>
<article class="job">
<h3>Frontend Developer – ABC Company</h3>
<p><strong>Location:</strong> Nairobi, Kenya | <strong>Dates:</strong> Jan 2022 – Present</p>
<ul>
<li>Built responsive web pages using HTML, CSS, and JavaScript</li>
<li>Collaborated with UI/UX designers to implement interactive features</li>
<li>Improved page load speed by 30% through code optimization</li>
</ul>
</article>
<article class="job">
<h3>Web Intern – XYZ Agency</h3>
<p><strong>Location:</strong> Remote | <strong>Dates:</strong> Jun 2021 – Dec 2021</p>
<ul>
<li>Assisted in building landing pages for client campaigns</li>
<li>Updated content on company website using basic HTML edits</li>
</ul>
</article>
</section>Tips for Organizing Content with HTML
- Use headings (<h1> to <h3>) consistently to define structure.
- Keep content grouped logically inside sections.
- Add IDs or class names for sections so you can style them easily with CSS.
- Avoid using too many <div> elements when semantic tags are more appropriate.
- Test your HTML in a browser regularly to catch errors early.
Once your content is structured, the next step is to make it visually appealing using CSS.
Styling Your Resume with CSS
Once your resume’s HTML structure is in place, it’s time to add styling to make it visually appealing and easier to read. CSS basics control everything from fonts and colors to layout and spacing, helping you present your information in a professional and polished way..
1. Apply Basic Styles
Here are the key properties to focus on:
Fonts
- Use clean, readable fonts like Arial, Roboto, or Open Sans.
- Use font-size and font-weight to create a clear hierarchy.
Colors
- Stick to a simple color scheme: 1–2 neutral colors with one accent color (e.g., blue for headings).
- Use contrast wisely, black or dark gray text on a white background is easiest to read.
Spacing
- Use margin and padding to separate sections and avoid clutter.
- Add line-height to improve text readability.
2. Layout Techniques: Flexbox or Grid
For a resume, a two-column layout is common especially for separating contact info or skills from the main content.
Example with Flexbox:
.container {
display: flex;
gap: 2rem;
}
.main-content {
flex: 2;
}
.sidebar {
flex: 1;
}This allows the main resume details to take up more space, while the sidebar (for contact, skills, etc.) takes up less.
3. Tips for Clean and Professional Design
- Use consistent heading sizes and spacing between sections.
- Keep your design minimal, avoid fancy animations or too many colors.
- Use borders or subtle backgrounds to visually separate sections if needed.
- Make sure everything looks aligned and balanced, no floating elements or uneven margins.
4. Code Example: Styling the Experience Section
Let’s apply basic CSS to the Work Experience section we created earlier:
HTML:
<section id="experience">
<h2>Work Experience</h2>
<article class="job">
<h3>Frontend Developer – ABC Company</h3>
<p><strong>Location:</strong> Nairobi, Kenya | <strong>Dates:</strong> Jan 2022 – Present</p>
<ul>
<li>Built responsive web pages using HTML, CSS, and JavaScript</li>
<li>Improved page load speed by 30%</li>
</ul>
</article>
</section>CSS:
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
background-color: #fff;
line-height: 1.6;
padding: 2rem;
}
h2 {
font-size: 1.8rem;
border-bottom: 2px solid #007acc;
padding-bottom: 0.3rem;
margin-bottom: 1rem;
color: #007acc;
}
.job {
margin-bottom: 2rem;
}
.job h3 {
margin-bottom: 0.5rem;
font-size: 1.3rem;
color: #222;
}
.job ul {
margin-top: 0.5rem;
padding-left: 1.2rem;
}
.job ul li {
margin-bottom: 0.4rem;
}This creates a clean, structured section with good spacing, subtle colors, and readable fonts.
Making It Responsive
In today’s mobile-first world, many recruiters and hiring managers view resumes on their phones or tablets. That’s why it’s essential to make your HTML and CSS resume responsive so it looks great and functions well on all screen sizes.
Why Mobile-Friendly Resumes Matter
- Better readability on smartphones and tablets.
- Professional impression – a poorly formatted resume on mobile can hurt your chances.
- Wider accessibility – you never know how your resume will be viewed, especially if it’s hosted online.
Simple Responsive Techniques
You don’t need advanced frameworks or libraries to make your resume responsive. Here are three simple strategies:
- Use Fluid Units
- Replace fixed widths like px with %, em, rem, or vw/vh.
- This allows elements to scale naturally with the screen size.
.container {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}- Add Media Queries
- Media queries let you change the layout based on screen width.
- Example: adjust font sizes or stack columns below 768px.
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar,
.main-content {
width: 100%;
}
}- Use Column Stacking
- If you’re using a two-column layout (like with Flexbox), make the columns stack on smaller screens.
Example: Turning a Two-Column Layout into One
HTML:
<div class="container">
<div class="sidebar">
<!-- Contact, Skills -->
</div>
<div class="main-content">
<!-- Experience, Education, etc. -->
</div>
</div>CSS:
.container {
display: flex;
gap: 2rem;
}
.sidebar {
flex: 1;
}
.main-content {
flex: 2;
}
/* Responsive stacking for small screens */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar,
.main-content {
flex: none;
width: 100%;
}
}This approach ensures that your resume stays readable and clean on both desktop and mobile devices.
Optional Enhancements
Once your resume is functional and responsive, you can take it a step further with small enhancements that boost its visual appeal and usability. These extras aren’t required, but they can add a touch of professionalism and creativity to your project.
Want to build a standout developer portfolio and land your first tech job? Our software development courses in Kenya teach you exactly how with real-world projects like building responsive resumes, landing pages, and full-stack apps. Enroll in one of our programs and become a job-ready developer in just 10–12 months.
1. Add Icons Using Font Awesome
Font Awesome is a free icon library that lets you add scalable vector icons to your resume perfect for contact details, skills, and social media links.
Example:
<!-- In your HTML head -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<!-- In your body -->
<p><i class="fas fa-envelope"></i> name@example.com</p>
<p><i class="fab fa-linkedin"></i> linkedin.com/in/name</p>These small icons make information easier to scan and more visually engaging.
2. Use Google Fonts for Better Typography
Custom fonts from Google Fonts let you give your resume a unique and polished feel without sacrificing performance.
Example:
<!-- Add to <head> -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"><!-- In your CSS -->
body {
font-family: 'Roboto', sans-serif;
}Choose a clean, readable font, avoid overly decorative styles.
3. Include a Print Stylesheet for PDF Exports
If you want users (or yourself) to print the resume or save it as a PDF, create a print-specific stylesheet that hides unnecessary elements (like background images or buttons) and adjusts layout.
Example:
@media print {
body {
background: none;
color: #000;
}
.sidebar {
display: none; /* Hide sidebar when printing */
}
a::after {
content: " (" attr(href) ")"; /* Show URLs after links */
}
}Test print styles using your browser’s Print Preview.
4. Link to Download Resume as PDF (if possible)
If you want visitors to download a PDF version of your resume:
- Manually export a PDF using your browser’s “Print to PDF” feature.
- Upload it and add a simple download link.
Example:
<a href="resume.pdf" download>Download PDF Resume</a>This makes it easy for recruiters to keep a copy.
These small enhancements can make your resume not only more functional but also more impressive and professional.
Hosting and Sharing Your Resume Online
Following these best practices helps ensure your navigation bar is reliable, consistent, and easy to update or expand as your site evolves. For deeper insight into responsive navigation design and layout patterns, consult the University of California, Berkeley guide on building personal academic webpages, which covers responsive site structure and navigation strategies.
1. How to Publish It on GitHub Pages or Netlify
Option 1: GitHub Pages (Free Hosting via GitHub)
GitHub Pages lets you turn any public repository into a live website.
Steps:
- Create a GitHub account at github.com.
- Push your HTML/CSS resume files to a new public repository.
- Go to Settings > Pages in the repo.
- Under “Source”, select your main branch and click Save.
- GitHub will provide a link like:
https://yourusername.github.io/your-repo-name
You now have a live resume you can share!
Option 2: Netlify (Drag & Drop Hosting)
Netlify offers free hosting with even simpler setup—ideal for beginners.
Steps:
- Go to netlify.com.
- Sign up and click “Add new site” > “Deploy manually”.
- Drag and drop your resume folder (must include index.html).
- Netlify will give you a live URL like:
https://your-resume-name.netlify.app
You can also connect your GitHub repo for automatic updates.
2. Creating a Custom Domain (Optional)
To look even more professional, consider using your own domain name (e.g., nameresume.com or resume.name.dev).
- Register a domain using a provider like Namecheap, GoDaddy, or Google Domains.
- Connect it to GitHub Pages or Netlify via their domain settings and DNS configuration.
- Netlify provides free HTTPS with SSL automatically.
3. Using It in Your Portfolio or LinkedIn
Once your resume is live:
- Add the link to your LinkedIn profile (under “Featured” or “Contact Info”).
- Include it in your email signature or cover letter.
- Embed or link it from your portfolio website if you have one.
- Send it as a clickable link when applying for jobs especially for creative or tech roles.
A live resume not only shows your work but also demonstrates your ability to build and deploy real projects.
Common Mistakes to Avoid
As you build your resume with HTML and CSS, it’s easy to overlook small details that can hurt its effectiveness. Avoiding these common mistakes will help you create a resume that looks professional, loads properly, and is easy to read no matter where or how it’s viewed.
1. Using Too Many Fonts or Colors
A common design mistake is over-styling. Too many fonts or clashing colors can make your resume look messy and unprofessional.
What to avoid:
- Mixing more than two font families
- Bright or unreadable color combinations
- Inconsistent use of color for headings or links
Best practice:
- Stick to one main font and one accent font (e.g., headings).
- Use a neutral color palette with one accent color (e.g., blue or green).
- Maintain visual consistency across sections.
2. Overusing <div> Instead of Semantic Tags
Many beginners rely heavily on <div> elements for layout, but this makes your code harder to read and less accessible.
What to avoid:
<div class="section">
<div class="heading">Experience</div>
</div>Better approach:
<section>
<h2>Experience</h2>
</section>Semantic HTML improves SEO, accessibility, and maintainability. Use <header>, <main>, <section>, <article>, and <footer> whenever possible.
3. Ignoring Accessibility or Readability
Your resume should be easy to read for everyone—including those using screen readers or assistive technology.
Common issues:
- Poor contrast between text and background
- Tiny or inconsistent font sizes
- Missing alt text for icons or images
- No clear heading structure
Accessibility tips:
- Use adequate contrast (test with tools like WebAIM Contrast Checker)
- Ensure headings (<h1>, <h2>, etc.) follow a logical order
- Add aria-labels if needed, and avoid hardcoding text into images
4. Forgetting to Test Across Browsers
Your resume may look perfect in Chrome but break in Firefox, Safari, or on mobile devices.
What can go wrong:
- Fonts not loading
- Layouts collapsing
- Print styles not working properly
What to do:
- Test your resume on multiple browsers and devices
- Use browser DevTools to simulate screen sizes
- Check print preview if you’re supporting PDF export
By avoiding these pitfalls, you’ll ensure your HTML/CSS resume is clean, professional, and functional across all platforms.
To conclude, creating your own resume with HTML and CSS is more than just a fun project, it’s a valuable skill that demonstrates initiative, creativity, and technical knowledge. Whether you’re applying for tech jobs, freelancing gigs, or just want a personalized resume that stands out, building it from scratch gives you full control over the design and layout.
Whether you continue improving it, turn it into a full portfolio, or use it to practice frontend development, your custom-coded resume is a strong step forward in your career journey.
