Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Generate a Resume with HTML and CSS
Generating a resume with HTML and CSS make an attractive resume that can easily be distributed. A resume is a vital document that has been used in the course of employment so as to present oneself for the job.
In this article, you will learn how to create a clear and concise resume, with proper division of sections and appropriate style with HTML and CSS. We have discussed how to create a resume using HTML and CSS. The main consideration will be the hierarchy and how such sections would look and function on a professional level online across various devices.
Components of Resume
Each page will consist of a specific section related to the resume, such as ?
1: Resume Header
This page will display information such as; your name, job title, and contact details.
2: Summary and Profile Picture
A section that allows a user to post personal information for other users to see together with a section to add a profile picture.
3: Education
Profile of your academic qualification including the degree, the institution, and the year of passing.
4: Experience
I would write down my work experience, internships, and other positions that I have had.
5: Skills and Languages
A list of your other (non-soft) skills, and your ability in other languages.
6: Projects
Explanations of the works have been done, to demonstrate your applicative abilities.
7: Hobbies
Any interest that you have or any hobby that relates to the course you are undertaking.
Final Output
Technology Used
To create the resume, the following technologies will be used ?
- HTTP5: The way the layout of the resume was created by the help of such tags as div, header, section tag, <h1>, and p tag.
- CSS: For example to set the style, color, font, and arrange the positions of the text. As for the webpage layering and responsive design, we will use CSS flexbox and grid which will allow us to make the resume accessible both on the computer and on the smartphone, for instance.
HTML Code
This is the following HTML Code to generate a Resume.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TutorialsPoint - Resume</title> <link rel="stylesheet" href="design.css"> </head> <body> <div class="container"> <div class="left"> <div class="profileText"> <div class="profileImage"> <img src="https://www.tutorialspoint.com/html/images/test.png" alt="TutorialsPoint"> </div> <h2>TutorialsPoint<br> <span>Computer Science Engineer</span> </h2> </div> <div class="Info"> <h3 class="title">Contact Info</h3> <ul> <li> <span class="icon"><ion-icon name="phone-portrait-outline"></ion-icon></span> <span class="text">+91-XXXXXXXXX</span> </li> <li> <span class="icon"><ion-icon name="mail-unread-outline"></ion-icon></span> <span class="text">[email protected]</span> </li> <li> <span class="icon"><ion-icon name="logo-github"></ion-icon></span> <a href="https://github.com/tutorialspoint">GitHub</a> </li> <li> <span class="icon"><ion-icon name="logo-linkedin"></ion-icon></span> <a href="https://www.linkedin.com/in/Tutorials-Point-977b74217/">LinkedIn</a> </li> <li> <span class="icon"><ion-icon name="location-outline"></ion-icon></span> <span class="text">Kolkata, India</span> </li> </ul> </div> <div class="Hobbies"> <h3 class="title">Hobbies</h3> <ul> <li> <span class="icon"><ion-icon name="book-outline"></ion-icon></span> <span class="text">Reading Books</span> </li> <li> <span class="icon"><ion-icon name="football-outline"></ion-icon></span> <span class="text">Playing Football</span> </li> </ul> </div> <h3 class="title">Languages</h3> <p class="languageName">English</p> <div class="container2"> <div class="skill Eng"></div> </div> <p class="languageName">Hindi</p> <div class="container2"> <div class="skills Hin"></div> </div> <p class="languageName">Bengali</p> <div class="container2"> <div class="skills Ben"></div> </div> </div> <div class="right"> <div class="summary"> <h3 class="summaryTitle">About Me</h3> <div class="text1"><em>I am a highly adaptable BTech Computer Science graduate, eager to take on challenges and contribute to innovative projects. With a strong foundation in software development, data analysis, and cloud technologies, I am confident in my ability to apply technical skills to solve real-world problems. Throughout my education, I have successfully developed multiple projects, including real-time systems and web applications, while also pursuing internships to gain hands-on experience. In addition to my technical expertise, I am a fast learner and have a passion for continuous self-improvement.</em></div> </div> <div class="Education"> <h3 class="educationTitle">Education</h3> <div class="EducationDetails"> <div class="left-info"> <h4>Techno India University</h4> <p><strong><em>Bachelor of Technology in Computer Science</em></strong></p> </div> <div class="right-info"> <p><span class="date"><em>Oct 2020 - Jul 2024</em></span></p> <p><span class="marks"><em>GPA: 7.72/10</em></span></p> </div> </div> <div class="EducationDetails"> <div class="left-info"> <h4>Serampore Town Academy School</h4> <p><strong><em>Class 12 (Higher Secondary)</em></strong></p> </div> <div class="right-info"> <p><span class="date"><em>Apr 2019 - May 2020</em></span></p> <p><span class="marks"><em>71.8%</em></span></p> </div> </div> <div class="EducationDetails"> <div class="left-info"> <h4>Serampore Town Academy School</h4> <p><strong><em>Class 10 (SSLC)</em></strong></p> </div> <div class="right-info"> <p><span class="date"><em>May 2017 - Apr 2018</em></span></p> <p><span class="marks"><em>72.2%</em></span></p> </div> </div> </div> <div class="project"> <h3 class="projectTitle">Projects</h3> <h4 class="project1">Real-Time Road Lane and Human Detection</h4> <div class="text2"><em>Developed a system for detecting road lanes and humans in real time using computer vision techniques. Utilized OpenCV for image processing and YOLO (You Only Look Once) for object detection. This system enhances lane detection accuracy and provides real-time alerts for human detection in various driving conditions, ensuring safer navigation.</em></div> <h4 class="project1">Real-Time Chat Application</h4> <div class="text2"><em>Created a web-based real-time chat application using Python, Django, and WebSocket. The application supports real-time messaging between multiple users, with features such as user authentication, notifications, and a responsive UI built using HTML, CSS, and JavaScript. This project strengthened my understanding of server-client communication and full-stack development.</em></div> </div> <div class="experience"> <h3 class="experienceTitle">Experience</h3> <div class="experienceDetails"> <h4>Technical Content Writer - TutorialsPoint</h4> <p><em>AUG 2024 - PRESENT</em></p> <ul> <li>Authored tutorials on Python, Django, Flask, HTML, CSS, SQL, and AWS, simplifying complex topics for learners.</li> <li>Collaborated with editors to create real-world examples that help learners master essential tech skills.</li> <li>Contributed to projects demonstrating the application of these technologies.</li> </ul> </div> <div class="experienceDetails"> <h4>Python Developer Intern</h4> <p><em>JULY 2024 - AUG 2024</em></p> <ul> <li>Collaborated on a real-time chat application project, developing core features using Django and WebSockets.</li> <li>Implemented user authentication, real-time messaging, and notification systems to enhance user interaction.</li> <li>Gained experience in integrating third-party APIs, managing asynchronous tasks, and ensuring scalability.</li> </ul> </div> </div> <h3 class="educationTitle1">Programming Languages and Tools</h3> <p>AWS</p> <div class="container1"> <div class="skills AWS">80%</div> </div> <p>HTML</p> <div class="container1"> <div class="skills HTML">90%</div> </div> <p>CSS</p> <div class="container1"> <div class="skills CSS">80%</div> </div> <p>Python</p> <div class="container1"> <div class="skills Python">85%</div> </div> <p>JavaScript</p> <div class="container1"> <div class="skills JS">75%</div> </div> <p>Django</p> <div class="container1"> <div class="skills Django">85%</div> </div> <p>SQL</p> <div class="container1"> <div class="skills SQL">80%</div> </div> <p>Data Analysis</p> <div class="container1"> <div class="skills DataAnalysis">75%</div> </div> <p>Power BI</p> <div class="container1"> <div class="skills PowerBI">70%</div> </div> <p>Excel</p> <div class="container1"> <div class="skills Excel">85%</div> </div> </div> </div> </body> <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script> </html>
CSS Code
This is the following CSS Code to generate a Resume.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: rgb(255, 255, 255);
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
width: 100%;
background: #fff;
margin: 50px;
display: grid;
grid-template-columns: 1fr 2fr;
box-shadow: 0 35px 55px rgba(0, 0, 0, 0.6);
}
.container .left {
position: relative;
background-color: #01447b;
padding: 40px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.container .right {
position: relative;
background-color: #ffffff;
padding: 20px;
}
.profileText {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.profileText .profileImage {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.profileText .profileImage img {
position: absolute;
width: 100%;
height: 100%;
object-fit:contain;
}
.profileText h2 {
color: #ffffff;
font-size: 1.5em;
margin-top: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 600;
line-height: 1.4em;
text-shadow: -1px 1px 4px black;
}
.profileText h2 span {
font-size: 0.7em;
font-weight: 300;
}
.Info {
padding: 10px;
}
.title {
color: #3cf100;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.4px;
margin: 20px 0 10px 0;
}
.Info ul li {
position: relative;
list-style: none;
margin: 10px 0;
}
.Info ul li .icon {
display: inline-block;
width: 30px;
font-size: 20px;
color: #65f909;
}
.Info ul li a {
color: white;
text-decoration: none;
font-weight: 200;
}
.Info ul li span {
color: #fff;
font-weight: 200;
}
.Hobbies ul li {
position: relative;
list-style: none;
margin: 10px 0;
}
.Hobbies ul li span {
color: #fff;
font-weight: 200;
}
.Hobbies ul li .icon {
display: inline-block;
width: 30px;
font-size: 20px;
color: #07ff18;
}
.right .summary {
width: 100%;
padding: 20px;
}
.right .summaryTitle {
font-weight: 600;
margin: 30px 0 10px 0;
text-transform: uppercase;
color: #0d257f;
}
.right .text1 {
font-weight: 200;
color: #050446;
text-align: justify;
text-justify: inter-word;
}
.right .educationTitle {
font-weight: 600;
margin: 30px 0 5px 0;
text-transform: uppercase;
color: #0a0a79;
}
.right .Education {
width: 100%;
padding: 20px;
}
h4 {
font-weight: 600;
margin: 20px 0 10px 0;
text-transform: uppercase;
color: #0c1e70;
}
.EducationDetails {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
p {
font-weight: 200;
color: #041046;
}
.left-info {
text-align: left;
}
.right-info {
margin-top: 21px;
text-align: right;
}
.date,
.marks {
font-size: 16px;
font-style: italic;
font-weight: 600;
}
.right .project {
width: 100%;
padding: 20px;
}
.projectTitle {
font-weight: 600;
margin-bottom: 10px;
text-transform: uppercase;
color: #167266;
}
.project1 {
font-weight: 600;
margin: 20px 0 10px 0;
text-transform: uppercase;
color: #0a044d;
}
.project .text2 {
text-align: justify;
color: #04463d;
}
.educationTitle1 {
font-weight: 600;
margin: 40px 0 5px 0;
text-transform: uppercase;
color: #001d45;
}
.container1 {
width: 100%;
min-height: 10px;
background-color: #ddd;
margin: 2px 0;
}
.skills {
text-align: end;
padding-top: 2px;
padding-bottom: 2px;
}
.AWS {
width: 80%;
background-color: rgb(68, 255, 0);
color: #000000;
}
.HTML {
width: 90%;
background-color: rgb(38, 255, 0);
color: #000000;
}
.CSS {
width: 80%;
background-color: rgb(72, 255, 0);
color: #000000;
}
.Python {
width: 85%;
background-color: rgb(76, 252, 0);
color: #000000;
}
.JS {
width: 75%;
background-color: rgb(29, 246, 0);
color: #000000;
}
.Django {
width: 85%;
background-color: rgb(72, 255, 0);
color: #000000;
}
.SQL {
width: 80%;
background-color: rgb(13, 255, 0);
color: #000000;
}
.DataAnalysis {
width: 75%;
background-color: rgb(0, 255, 34);
color: #000000;
}
.PowerBI {
width: 70%;
background-color: rgb(13, 255, 0);
color: #000000;
}
.Excel {
width: 85%;
background-color: rgb(0, 255, 17);
color: #070707;
}
.container2 {
width: 100%;
height: 15px;
background-color: #ddd;
margin: 2px 0;
}
.skill {
text-align: end;
padding-top: 4px;
padding-bottom: 4px;
}
.Eng {
height: 100%;
width: 90%;
margin-bottom: 5px;
background-color: rgb(119, 255, 0);
}
.Kan {
height: 100%;
width: 70%;
background-color: rgb(0, 255, 8);
}
.Hin {
height: 100%;
width: 80%;
background-color: rgb(4, 255, 0);
}
.Ben {
height: 100%;
width: 100%;
background-color: rgb(26, 255, 0);
}
.languageName {
margin-top: 4px;
color: #fff;
}
Code Explanation
HTML Structure
First, use semantic tags to build the structure of a simple HTML page with links. They are the header, profile, education, experience, skills, and projects sections of the resume.
Header Section
Begin with the <header> element to input your name, employer, and position, as well as the email, phone number, and social network accounts.
Profile Section
To do this, using a img tag, post a profile picture and then, in the <p> tag, introduce yourself briefly.
Education Section
Educational background should be presented in the following way: List your education using div element for each of them. The following information about the candidate should be provided in this section; degree, name of the institution, and the study period.
Experience Section
Here, combine your job title, the company's name, and the period of working in every position in your work experience. Employ ul tag in case of listing the main responsibilities or important results.
Skills Section
Employ the bar diagram to display the efficiency of various technologies available in the modern world. These can be styled with CSS width properties having labels that represent varying skills of their holder.
Project Section
The applicant should provide details of his or her projects. Provide project names as headings and subtopics as the headings, ensuring you elaborate on technologies engaged in OTA and difficulties encountered.
Hobbies Section
Lists Let's use lists to represent your hobbies by using <ul> and li tag while making sure the hobbies are inline with your career path or self-improvement goals.
CSS Styling
It is preferable to set font family, color, and padding for the layout in CSS. It is noteworthy to consider that CSS Flexbox or Grid will guarantee the layout will be responsive.
Final Touches
Append Media Queries for contrast checking in order to make a resume correctly displayed on mobile devices. Check how the layout looks in other resolutions in order to see the quality on
Conclusion
Following the guide that has been provided in this article, you can come up with a nice, attractive, and professional resume using HTML and CSS. This is helpful since it enables you to design your resume from scratch, letting you make great stands in the digital platforms. Furthermore, the use of the responsive design means that your resume can easily be viewed across different devices and this makes for improved user experience.
199 Views
