Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Learn how to generate a Resume with HTML and CSS

CSS Web Development HTML

Creating a professional resume with HTML and CSS allows you to build an attractive, customizable document that can be easily shared digitally. A well-structured resume showcases your skills and experience effectively while maintaining a professional appearance across different devices.

Syntax

/* Basic Resume Layout Structure */
.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    max-width: 1000px;
    margin: 0 auto;
}

.left-section {
    background-color: #333;
    color: white;
    padding: 20px;
}

.right-section {
    background-color: white;
    padding: 20px;
}

Resume Components

A professional resume typically includes these essential sections

Section Purpose Content
Header Contact Information Name, job title, phone, email
Summary Professional Overview Brief description of skills and goals
Experience Work History Job titles, companies, dates, achievements
Education Academic Background Degrees, institutions, graduation dates
Skills Technical Abilities Programming languages, tools, proficiency levels
Projects Portfolio Notable work examples and descriptions

Example: Complete Resume Layout

The following example creates a modern two-column resume layout 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Resume</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            padding: 20px;
        }

        .resume-container {
            width: 100%;
            max-width: 900px;
            background: white;
            display: grid;
            grid-template-columns: 300px 1fr;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .left-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px 20px;
        }

        .profile-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-color: #fff;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: #667eea;
            font-weight: bold;
        }

        .left-section h2 {
            text-align: center;
            margin-bottom: 10px;
            font-size: 1.5em;
        }

        .left-section .title {
            text-align: center;
            font-size: 0.9em;
            opacity: 0.9;
            margin-bottom: 30px;
        }

        .section-title {
            color: #fff;
            font-size: 1.1em;
            margin: 25px 0 15px 0;
            padding-bottom: 5px;
            border-bottom: 2px solid rgba(255,255,255,0.3);
        }

        .contact-info {
            list-style: none;
        }

        .contact-info li {
            margin: 10px 0;
            font-size: 0.9em;
        }

        .skills-list {
            list-style: none;
        }

        .skill-item {
            margin: 15px 0;
        }

        .skill-name {
            font-size: 0.9em;
            margin-bottom: 5px;
        }

        .skill-bar {
            background: rgba(255,255,255,0.3);
            height: 6px;
            border-radius: 3px;
            overflow: hidden;
        }

        .skill-progress {
            height: 100%;
            background: #fff;
            border-radius: 3px;
        }

        .right-section {
            padding: 30px;
        }

        .right-section h1 {
            color: #333;
            font-size: 2em;
            margin-bottom: 10px;
        }

        .right-section .job-title {
            color: #667eea;
            font-size: 1.2em;
            margin-bottom: 30px;
        }

        .right-section .section-title {
            color: #333;
            font-size: 1.3em;
            margin: 30px 0 15px 0;
            padding-bottom: 5px;
            border-bottom: 2px solid #667eea;
        }

        .experience-item {
            margin: 20px 0;
        }

        .experience-item h4 {
            color: #333;
            font-size: 1.1em;
        }

        .experience-item .company {
            color: #667eea;
            font-weight: bold;
        }

        .experience-item .date {
            color: #666;
            font-size: 0.9em;
            font-style: italic;
        }

        .experience-item ul {
            margin-top: 10px;
            padding-left: 20px;
        }

        .experience-item li {
            color: #555;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="resume-container">
        <div class="left-section">
            <div class="profile-img">JS</div>
            <h2>John Smith</h2>
            <p class="title">Full Stack Developer</p>
            
            <h3 class="section-title">Contact</h3>
            <ul class="contact-info">
                <li>? john.smith@email.com</li>
                <li>? +1 (555) 123-4567</li>
                <li>? linkedin.com/in/johnsmith</li>
                <li>? New York, NY</li>
            </ul>

            <h3 class="section-title">Skills</h3>
            <div class="skills-list">
                <div class="skill-item">
                    <div class="skill-name">JavaScript</div>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 90%"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <div class="skill-name">React</div>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 85%"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <div class="skill-name">Node.js</div>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 80%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="right-section">
            <h1>John Smith</h1>
            <p class="job-title">Full Stack Developer</p>

            <h3 class="section-title">Summary</h3>
            <p>Experienced Full Stack Developer with 5+ years of expertise in building scalable web applications using modern JavaScript frameworks and cloud technologies.</p>

            <h3 class="section-title">Experience</h3>
            <div class="experience-item">
                <h4>Senior Developer at <span class="company">Tech Solutions Inc.</span></h4>
                <p class="date">2021 - Present</p>
                <ul>
                    <li>Led development of customer portal serving 10,000+ users</li>
                    <li>Improved application performance by 40% through optimization</li>
                    <li>Mentored junior developers and conducted code reviews</li>
                </ul>
            </div>

            <div class="experience-item">
                <h4>Junior Developer at <span class="company">StartUp Co.</span></h4>
                <p class="date">2019 - 2021</p>
                <ul>
                    <li>Developed responsive web applications using React and Node.js</li>
                    <li>Collaborated with design team to implement user interfaces</li>
                </ul>
            </div>

            <h3 class="section-title">Education</h3>
            <div class="experience-item">
                <h4>Bachelor of Computer Science</h4>
                <p class="company">University of Technology</p>
                <p class="date">2015 - 2019</p>
            </div>
        </div>
    </div>
</body>
</html>

A professional two-column resume layout appears with a purple gradient left sidebar containing contact info and skills with progress bars, and a white right section with experience and education details. The design is clean and modern with proper typography and spacing.

Key Design Principles

  • Grid Layout: Use CSS Grid for responsive two-column structure
  • Typography Hierarchy: Different font sizes and weights for headings
  • Color Scheme: Professional colors with good contrast
  • Visual Elements: Progress bars for skills, consistent spacing
  • Responsive Design: Adaptable to different screen sizes

Conclusion

Creating a resume with HTML and CSS gives you complete control over design and layout while ensuring professional presentation. The combination of semantic HTML structure and modern CSS styling creates an attractive, accessible resume that stands out in digital formats.

Updated on: 2026-03-15T18:32:38+05:30

698 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements