Building a visually appealing resume using just HTML and CSS is a great way to showcase your skills as a web developer. Let’s dive into the code section by section to understand how everything works. I’ve also added comments directly into the code for clarity.
Table of Contents
HTML Code Explanation
The HTML code is the skeleton of our resume, defining its structure. Here’s how it works:
1. The Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Resume</title>
<link rel="stylesheet" href="styles.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="light-grey"><!DOCTYPE html>: Tells the browser we are using HTML5.<html lang="en">: Specifies the language of the page.<head>: Contains metadata, including:- Character encoding (
UTF-8) to support various languages. - Responsive design with
viewport. - Links to external stylesheets like Google Fonts and Font Awesome for icons.
2. Page Container
<div class="content">
<div class="row-padding"><div class="content">: A wrapper for the main content of the resume, with styling defined in CSS.<div class="row-padding">: A flexible grid layout to manage the left and right columns.
3. Creating Left & Right-Column
<div class="left-column">
<div class="card">
<div class="display-container">
<img src="images/Harish.jpg" class="avatar" alt="Avatar">
<div class="display-bottomleft">
<h2 class="name">Harish</h2>
</div>
</div>
<div class="right-column">
</div>This section displays:
- A profile picture (
<img>). - The name of the individual (
<h2>).
The class names like card, avatar, and display-container refer to CSS styles that enhance appearance.
4. Contact Information
<p class="job-title"><i class="fa fa-briefcase fa-fw icon"></i><b>Front End Developer</b></p>
<p><i class="fa fa-home fa-fw icon"></i>Guindy, Chennai</p>
<p><i class="fa fa-envelope fa-fw icon"></i>justwritecode123@gmail.com</p>
<p><i class="fa fa-phone fa-fw icon"></i>1234567891</p>- Each
<p>contains contact details with icons provided by Font Awesome (<i>tags).
5. Skills Section
<p class="large-text"><b><i class="fa fa-asterisk fa-fw icon"></i>Skills</b></p>
<p>React</p>
<div class="skill-bar">
<div class="skill-teal" style="width:80%">80%</div>
</div>
<p>JavaScript</p>
<div class="skill-bar">
<div class="skill-teal" style="width:90%">90%</div>
</div>
<p>CSS</p>
<div class="skill-bar">
<div class="skill-teal" style="width:75%">75%</div>
</div>
<p>HTML</p>
<div class="skill-bar">
<div class="skill-teal" style="width:100%">100%</div>
</div>
<br>This part lists skills with progress bars:
width:80%, 90%, 75% & 100%adjusts the bar length dynamically for each skill.- Different colors and styles are added with
skill-barandskill-teal.
6. Language Section
This section in your resume showcases the languages you know and your proficiency in each.
<p class="large-text"><b><i class="fa fa-globe fa-fw icon"></i>Languages</b></p>
<p>English</p>
<div class="language-bar">
<div class="language-teal" style="width:80%"></div>
</div>
<p>Tamil</p>
<div class="language-bar">
<div class="language-teal" style="width:90%"></div>
</div>
<p>Hindi</p>
<div class="language-bar">
<div class="language-teal" style="width:45%"></div>
</div>
<br>7. Work Experience
<div class="container card margin-bottom">
<h2 class="grey-text padding-16"><i class="fa fa-suitcase fa-fw icon-large"></i>Work Experience</h2>
<div class="container">
<h5 class="job-title"><b>Front End Developer / Swiggy</b></h5>
<h6 class="job-dates" class="teal-text"><i class="fa fa-calendar fa-fw icon-small"></i>Mar 2024 - <span class="tag teal">Current</span></h6>
<p>Collaborated with cross-functional teams to design and implement intuitive user interfaces for Swiggy’s web platform, enhancing user experience and performance.</p>
</div>
<div class="container">
<h5 class="job-title"><b>Member Technical Staff / Zoho</b></h5>
<h6 class="job-dates" class="teal-text"><i class="fa fa-calendar fa-fw icon-small"></i>Mar 2022 - Apr 2014</h6>
<p>Designed and developed scalable software solutions, ensuring high performance and seamless user experience. Collaborated with cross-functional teams to implement innovative features and resolve technical challenges efficiently.</p>
<hr>
</div>
</div>- Each job role is enclosed within
<div>tags for clarity. - Dates are styled with a
<span>tag to highlight them.
8. Education Section
<h2 class="grey-text padding-16"><i class="fa fa-certificate fa-fw icon-large"></i>Education</h2>
<div class="container">
<h5 class="job-title"><b>B.E in Electronics and Communication | Rajalakshmi Engineering College</b></h5>
<h6 class="job-dates" class="teal-text"><i class="fa fa-calendar fa-fw icon-small"></i>2018 - 2022</h6>
<p>Completed B.E in Electronics and Communication with a C.G.P.A of 8.5 from Rajalakshmi Engineering College.</p>
</div>
<div class="container">
<h5 class="job-title"><b>12th Grade | Vivekananda Vidyalaya</b></h5>
<h6 class="job-dates" class="teal-text"><i class="fa fa-calendar fa-fw icon-small"></i>2017 - 2018</h6>
<p>Achieved 81% in 12th Grade at Vivekananda Vidyalaya, showcasing strong academic performance.</p>
<hr>
</div>
<div class="container">
<h5 class="job-title"><b>10th Grade | Sri Krish School</b></h5>
<h6 class="job-dates" class="teal-text"><i class="fa fa-calendar fa-fw icon-small"></i>2015 - 2016</h6>
<p>Successfully completed 10th Grade at Sri Krish School with an outstanding score of 85%.</p><br>
</div>- Highlights academic qualifications with consistent formatting.
9. Footer
<footer class="footer">
<p>Find me on social media.</p>
<i class="fa fa-facebook-official icon-hover"></i>
<i class="fa fa-instagram icon-hover"></i>
<i class="fa fa-linkedin icon-hover"></i>
<p>© 2024 JustWriteCodeTamil. All Rights Reserved.</p>
</footer>- Includes social media icons with hover effects.
- Displays a copyright notice.
CSS Code Explanation
The CSS styles make the resume visually appealing.
1. Basic Styling for Body and HTML
body, html {
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}Explanation:
- font-family: Sets the default font to “Roboto”, which is a clean and modern font. If unavailable, it falls back to sans-serif.
- margin, padding, box-sizing: Ensures there’s no default margin or padding around the body and html tags, and sets
box-sizingtoborder-boxso padding and borders are included in the element’s total width and height.
2. Light Grey Background
.light-grey {
background-color: #f1f1f1;
}Explanation:
- This class applies a light grey background color (
#f1f1f1) to any element it is applied to, giving the webpage a soft and neutral tone. - It’s useful for sections that should stand out from a white background but aren’t too bold.
3. Content Container
.content {
max-width: 1400px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}Explanation:
- max-width: Sets a maximum width for the container, ensuring it doesn’t stretch too wide on large screens.
- margin-left & margin-right: Centers the content horizontally by setting the left and right margins to auto.
4. Row Padding (Flexbox Layout)
.row-padding {
display: flex;
flex-wrap: wrap;
gap: 20px;
}Explanation:
- display: flex: Activates the Flexbox layout for easy alignment of child elements.
- flex-wrap: Allows items to wrap onto the next line if they exceed the available space.
5. Left and Right Columns
.left-column, .right-column {
flex: 1;
padding: 10px;
}Explanation:
- flex: 1: This ensures that both the left and right columns take up equal space in the container.
- padding: Adds 10px padding inside the columns for better spacing.
6. Card Styling
.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
}Explanation:
- background-color: Gives the card a white background for a clean and minimalistic look.
- box-shadow: Adds a subtle shadow to the card, creating a 3D effect to make it stand out from the page.
7. Container Styling
.container {
margin-bottom: 20px;
}Explanation:
- Adds 20px of margin at the bottom of elements with the
.containerclass, providing space between them and any elements below.
8. Display Container (Relative Positioning)
.display-container {
position: relative;
text-align: center;
}Explanation:
- position: relative: Makes the container a reference point for absolutely positioned child elements.
- text-align: Centers the text horizontally within the container.
9. Avatar Image Styling
.avatar {
width: 100%;
}Explanation:
- width: 100%: Ensures the avatar image takes up the full width of its container, making it responsive.
10. Text Overlay (Positioned Bottom Left)
.display-bottomleft {
position: absolute;
bottom: 10px;
left: 10px;
color: white;
}Explanation:
- position: absolute: Positions the text element in the absolute bottom-left corner of its container.
- color: Sets the text color to white, ensuring visibility over darker backgrounds.
11. Name Styling
.name {
font-size: 40px;
font-weight: bold;
}Explanation:
- font-size: Makes the name text large (40px) for emphasis.
- font-weight: Sets the text to bold, highlighting the name.
12. Icon Styling
.icon {
margin-right: 10px;
}Explanation:
- margin-right: Adds space between the icon and the text or other elements, creating a cleaner and more spaced-out layout.
13. Large Text Styling
.large-text {
font-size: 24px;
font-weight: bold;
}Explanation:
- font-size: Makes the text large (24px) to stand out.
- font-weight: Makes it bold for added emphasis.
14. Skill Bar Background Styling
.skill-bar {
background-color: #e0e0e0;
border-radius: 20px;
margin: 5px 0;
}Explanation:
- background-color: Gives the skill bar a light grey background, making it visually distinct from other content.
- border-radius: Rounds the corners of the bar for a softer, modern look.
15. Skill Bar Progress (Teal Color)
.skill-teal {
background-color: #009688;
height: 20px;
border-radius: 20px;
text-align: center;
color: white;
line-height: 20px;
}Explanation:
- background-color: Sets a distinct teal color for the progress bar.
- line-height & color: Centers the text inside the bar and sets the text color to white for contrast.
16. Language Bar Styling
.language-bar {
background-color: #e0e0e0;
border-radius: 20px;
margin: 5px 0;
}Explanation:
- Similar to the skill bar, this class provides a grey background and rounded corners, but for language proficiency bars.
17. Language Progress Bar (Teal Color)
.language-teal {
background-color: #009688;
height: 24px;
border-radius: 20px;
}Explanation:
- background-color: Sets the progress bar’s color to teal, making it consistent with the skill bars.
- height: Increases the height slightly for a more noticeable visual impact.
18. Job Title Styling
.job-title {
font-size: 1.2rem;
font-weight: bold;
}Explanation:
- font-size: Sets a slightly larger size for the job title.
- font-weight: Boldens the title for emphasis.
19. Job Dates Styling
.job-dates {
font-size: 1.1rem;
color: #00796b;
}Explanation:
- font-size: Sets a slightly smaller font size for the job dates.
- color: Colors the text teal (
#00796b), giving it a subtle distinction from other text.
20. Grey Text Styling
.grey-text {
color: #616161;
}Explanation:
- color: Applies a grey color to the text, often used for secondary or less important information.
21. Teal Text Styling
.teal-text {
color: #009688;
}Explanation:
- color: Makes the text teal (
#009688), typically used for highlighting important information.
22. Tag Styling
.tag {
background-color: #009688;
color: white;
border-radius: 15px;
padding: 3px 10px;
}Explanation:
- background-color: Sets the background of tags to teal.
- border-radius & padding: Rounds the tag’s edges and adds space inside for a balanced look.
23. Footer Styling
.footer {
background-color: #009688;
color: white;
text-align: center;
padding: 20px;
}Explanation:
- background-color & color: Sets the footer background to teal and text to white for visibility.
- text-align: Centers the footer content horizontally.
24. Icon Hover Effect
.icon-hover {
margin: 0 10px;
cursor: pointer;
}
.icon-hover:hover {
opacity: 0.7;
}Explanation:
- cursor: Changes the cursor to a pointer on hover, signaling interactivity.
- opacity: Reduces the icon’s opacity on hover for a subtle hover effect.
Summary
This resume combines HTML and CSS to create a professional layout. With features like responsive design, progress bars, and Font Awesome icons, this resume stands out. You can customize the content to fit your needs, experiment with styles, and even extend it further with animations or JavaScript.
