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,

  , 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.

   

TutorialsPoint

Computer Science Engineer



Contact Info



+91-XXXXXXXXX



Tutorials.point123@gmail.com



GitHub



LinkedIn



Kolkata, India




Hobbies



Reading Books



Playing Football



Languages
English



Hindi



Bengali

   





   
About Me
   
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.


Education


   
Techno India University
   
Bachelor of Technology in Computer Science


   
Oct 2020 - Jul 2024
   
GPA: 7.72/10




   
Serampore Town Academy School
   
Class 12 (Higher Secondary)


   
Apr 2019 - May 2020
   
71.8%




   
Serampore Town Academy School
   
Class 10 (SSLC)


   
May 2017 - Apr 2018
   
72.2%




   
Projects
   
Real-Time Road Lane and Human Detection
   
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.
   
Real-Time Chat Application
   
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.


Experience

Technical Content Writer - TutorialsPoint
AUG 2024 - PRESENT

Authored tutorials on Python, Django, Flask, HTML, CSS, SQL, and AWS, simplifying complex topics for learners.
Collaborated with editors to create real-world examples that help learners master essential tech skills.
Contributed to projects demonstrating the application of these technologies.



Python Developer Intern
JULY 2024 - AUG 2024

Collaborated on a real-time chat application project, developing core features using Django and WebSockets.
Implemented user authentication, real-time messaging, and notification systems to enhance user interaction.
Gained experience in integrating third-party APIs, managing asynchronous tasks, and ensuring scalability.



Programming Languages and Tools
AWS

   
80%

HTML

   
90%

CSS

   
80%

Python

   
85%

JavaScript

   
75%

Django

   
85%

SQL

   
80%

Data Analysis

   
75%

Power BI

   
70%

Excel

   
85%

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

Profile Section

To do this, using a img tag, post a profile picture and then, in the

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

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.