Learning how to build resume section with CSS is one of the most practical and highly demanded skills in modern web design — a well-designed employment history / resume section turns your portfolio site into a professional resume website that recruiters and clients can read instantly. In this hands-on tutorial (Section 4 of our full HTML CSS website project series), you’ll recreate the demonstration site’s “Experience” section: a wide white column with a clean, readable HTML table displaying job titles, companies, dates, and descriptions — all styled with CSS classes for spacing, typography, borders, and responsiveness.

This tutorial builds directly on your css-practice folder — you’ll create a professional-looking resume layout that’s easy to customise with your own work history.

Prerequisites

  • Your css-practice project folder from previous lessons (with header & About Me sections already added)
    • index.html
    • css/styles.css
    • images/ folder (not needed for this section)
  • Visual Studio Code with Live Server extension (highly recommended)
  • Modern browser (Chrome/Edge/Firefox)

1. Add Resume Section HTML Structure

Open index.html and add the following code after your closing </section> or </div> from the Projects section:

				
					<!-- Section 4: Employment / Experience -->
<section class="resume-section">
    <h2 class="section-heading">Experience</h2>

    <div class="resume-column">
        <table class="resume-table">
            <tr>
                <td class="job-title">Freelance Web Developer</td>
                <td class="company">Self-Employed</td>
                <td class="dates">2022 – Present</td>
            </tr>
            <tr>
                <td class="job-title">Front-End Developer</td>
                <td class="company">Tech Startup XYZ</td>
                <td class="dates">2020 – 2022</td>
            </tr>
            <tr>
                <td class="job-title">Junior Web Designer</td>
                <td class="company">Creative Agency ABC</td>
                <td class="dates">2018 – 2020</td>
            </tr>
            <tr>
                <td class="job-title">Web Development Intern</td>
                <td class="company">Digital Solutions Inc.</td>
                <td class="dates">2017 – 2018</td>
            </tr>
        </table>
    </div>
</section>

Notes for beginners:

  • <section> — semantic wrapper for the resume area
  • .section-heading — reuses style from earlier Projects section
  • .resume-column — wide white container
  • .resume-table — styled HTML <table> for employment history
  • Personalise: replace job titles, companies, dates with your real experience

2. Style Resume Section with CSS – Wide Column & Table

Open css/styles.css and add these rules below your existing Projects styles:

				
					/* === Resume / Experience Section === */
.resume-section {
  padding: 80px 20px;
  background-color: #fff;
}

.resume-column {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto 80px;
  padding: 50px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* Resume Table Styling */
.resume-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 24px;        /* vertical spacing between rows */
}

.resume-table tr {
  background-color: #f8f9fa;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resume-table tr:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.resume-table td {
  padding: 25px 30px;
  vertical-align: top;
}

.job-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #112d4e;
  width: 35%;
}

.company {
  font-size: 1.3rem;
  color: #0066cc;
  width: 35%;
}

.dates {
  font-size: 1.1rem;
  color: #666;
  font-style: italic;
  width: 30%;
  text-align: right;
}

Save and refresh — you should now see:

  • Centered “Experience” heading
  • Wide white column with subtle shadow
  • Clean, spaced table with alternating row hover effects
  • Job title, company, and dates nicely aligned

3. Make It Responsive & Mobile-Friendly

Add media query for small screens:

				
					@media (max-width: 768px) {
  .resume-column {
    padding: 30px 20px;
  }

  .resume-table td {
    display: block;
    width: 100%;
    padding: 15px;
    text-align: left;
  }

  .dates {
    text-align: left;
    font-style: normal;
  }
}

Now on phones/tablets the table rows stack vertically for better readability.

4. Best Practices & Modern Tips (2025–2026 )

  • Use semantic <section> for major content areas
  • Prefer border-spacing over old cellpadding for table spacing
  • Add hover lift effect on rows — improves interactivity
  • Use clamp() for fluid font sizes:
				
					font-size: clamp(1.1rem, 3vw, 1.5rem);
  • Ensure contrast passes WCAG (dark text on white/light backgrounds)
  • Add icons (e.g., briefcase for jobs) with ::before pseudo-elements

How to Build Resume Section with CSS – FAQ (2025–2026)

  1. How do I build resume section with CSS?
    Use wide container + styled HTML <table>: width: 90%; margin: 0 auto; background: white;
  2. How do I make resume table responsive with CSS?
    Media query + display: block on td for mobile stacking.
  3. How do I add hover effects to resume rows with CSS?
    tr:hover { transform: translateY(-6px); box-shadow: … }
  4. What’s the best way to align columns in resume table with CSS?
    Use width percentages on td classes + text-align: right for dates.
  5. Should I use table or divs for resume section with CSS?
    Table for tabular data (jobs/dates); divs + Grid/Flex for card-style resumes.

Summary

You now know exactly how to build resume section with CSS: wide white column, clean employment history table, hover effects on rows, responsive stacking, and professional typography/spacing.

Mastering how to build resume section with CSS turns your portfolio into a powerful resume website — recruiters love clear, scannable work history.

Keep your css-practice folder open — in the next tutorials you’ll build Education & Skills, Featured Quote, Sticky Footer, and complete your HTML CSS website project.

Contact Us