Paramwebinfo Academy | Website & Digital Marketing Training

Tutorials Details

How I Designed My Resume: A Project in HTML and CSS

October 18, 2024

HTML File (resume.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anuradha's Resume</title>
<link rel="stylesheet" href="styles.css"> 
</head>
<body>
<div class="container">
<h1>Anuradha's Resume</h1>
<div class="contact-info">
<div>Email: anuradha@example.com</div>
<div>Phone: +91 98765 43210</div>
</div>
<div class="section">
<h2>Objective</h2>
<p>Dynamic and detail-oriented web developer with experience in HTML, CSS, and JavaScript, seeking to leverage expertise in a challenging web development internship.</p>
</div>
<div class="section">
<h2>Education</h2>
<p><span class="job-title">Bachelor of Technology in Computer Science</span> <br> XYZ University, Year - 2023</p>
</div>
<div class="section">
<h2>Experience</h2>
<p><span class="job-title">Intern</span> - ParamWeb <br> June 2024 - Present</p>
<p>Contributed to front-end development, performing manual testing, and enhancing website content for various clients.</p>
</div>
<div class="section">
<h2>Skills</h2>
<div class="skills">
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">JavaScript</div>
<div class="skill">PHP</div>
<div class="skill">Manual Testing</div>
</div>
</div>
<div class="section">
<h2>Projects</h2>
<p><span class="job-title">RenovaNest Interiors</span> <br> Developed a comprehensive website for a property maintenance service, focusing on user-friendly design and content management.</p>
</div>
<div class="section">
<h2>References</h2>
<p>Available upon request.</p>
</div>
</div>
</body>
</html>

CSS File (styles.css)

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}

.container {
max-width: 800px;
margin: 20px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #4A90E2;
}

.section {
margin-bottom: 20px;
}

h2 {
border-bottom: 2px solid #4A90E2;
padding-bottom: 5px;
margin-bottom: 10px;
}

.job-title {
font-weight: bold;
color: #4A90E2;
}

.contact-info {
display: flex;
justify-content: space-between;
font-size: 14px;
margin-bottom: 20px;
}

.skills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.skill {
background-color: #e7f1ff;
border-radius: 4px;
padding: 5px 10px;
font-size: 14px;
}

Transition to External CSS

Previous Internal Styles:
- Until now, we’ve been using internal CSS, which is defined within the <style> tag in the HTML document. This approach can make the HTML file cluttered and less maintainable.
External CSS File:
- In this example, we’ve created an external CSS file (styles.css) linked to our HTML file. This allows us to separate styling from content, making it easier to manage styles across multiple pages if needed.

CSS Styles Explanation

body:
- font-family: Arial, sans-serif;: Sets the font to Arial or a similar sans-serif font for better readability.
- margin: 0; padding: 0;: Resets default margins and padding to prevent any unwanted space around the body.
- background-color: #f4f4f4;: Gives the page a light gray background color for a clean look.
- color: #333;: Sets a dark gray text color for improved contrast and readability.
.container:
- max-width: 800px;: Limits the width of the container to 800 pixels, making it easier to read on larger screens.
- margin: 20px auto;: Centers the container in the middle of the page with a 20-pixel margin at the top and bottom.
- background: #fff;: Sets the background of the container to white, providing a clear distinction from the page background.
- padding: 20px;: Adds space inside the container, making the content look more organized.
- border-radius: 8px;: Rounds the corners of the container, giving it a softer look.
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);: Adds a subtle shadow effect to create a sense of depth.
h1:
- text-align: center;: Centers the main title of the resume.
- color: #4A90E2;: Uses a professional blue color to make the title stand out.
.section:
- margin-bottom: 20px;: Adds space below each section to separate them visually.
h2:
- border-bottom: 2px solid #4A90E2;: Creates a solid blue line below each section heading for emphasis.
- padding-bottom: 5px;: Adds space below the heading text, creating a buffer between the heading and the content.
- margin-bottom: 10px;: Ensures there’s space between the heading and the content that follows.
.job-title:
- font-weight: bold;: Makes the job title bold to highlight it.
- color: #4A90E2;: Uses the same blue color for consistency with the section headings.
.contact-info:
- display: flex;: Utilizes flexbox to arrange the email and phone number in a single line.
- justify-content: space-between;: Spaces out the items so that they align at opposite ends of the container.
- font-size: 14px;: Sets a smaller font size for the contact information.
- margin-bottom: 20px;: Adds space below the contact info section for better layout.
.skills:
- display: flex;: Allows the skills to be arranged in a flexible layout that adapts to different screen sizes.
- flex-wrap: wrap;: Enables wrapping of the skill items onto the next line if there isn’t enough space.
- gap: 10px;: Adds space between skill items, preventing them from appearing cramped.
.skill:
- background-color: #e7f1ff;: Sets a light background color for each skill item to make it stand out.
- border-radius: 4px;: Rounds the corners of each skill box for a more polished look.
- padding: 5px 10px;: Adds space inside the skill boxes for better visual balance.
- font-size: 14px;: Maintains a consistent font size for the skill text.