Day 8 Creating resume
Today , we are going to create our own resume
Using all the concepts we have studied so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Garima Resume</title>
</head>
<body>
<a href="./HTML (1).pdf" download>click for Download</a>
<header>
<h1>Garima Sharma</h1>
<table>
<tr>
<td>
<address>
<p>
H.No. 2 Ayodhya kunj,<br>
XYZ,<br>
Agra,<br>
<br>
</p>
</address>
<p><strong>Mail:</strong><a href="mailto:garimasharma.g1@gmail.com">abc@gmail.com</a></p>
<p><strong>Phone:</strong><a href="tel:9999999999">9999999999</a></p>
</td>
<td style="float:right;width:42px;height:42px;">
<img src="./Images/Garima.jpg" alt="image" height="100" width="100" >
</td>
</tr>
</table>
</header>
<main>
<div id="carrer">
<h3>Career Objective:</h3>
<p>Highly motivated Front-End Developer with strong fundamentals in HTML, CSS, JavaScript ,Java and Oracle seeking to contribute to a
collaborative team environment. Eager to learn new frameworks and technologies (React, Angular) to build user-centric
and responsive web applications.</p>
</div><h3>Educational Background:</h3></main>
<div id="education">
<table border="1">
<tr>
<th>sno</th>
<th>Qualification</th>
<th>Institute</th>
<th>Year</th>
</tr>
<tr>
<td>1</td>
<td>MCA</td>
<td>GBTU</td>
<td>2010</td>
</tr>
<tr>
<td>2</td>
<td>B.Sc</td>
<td>Dr. Bhimrao Ambedkar university</td>
<td>2006</td>
</tr>
<tr>
<td>3</td>
<td>SSC</td>
<td>U.P.</td>
<td>2003</td>
</tr>
<tr>
<td>4</td>
<td>HSC</td>
<td>U.P.</td>
<td>2001</td>
</tr>
</table>
</div>
<div id="projects">
<h3>Projects:</h3>
<h3>IMA UPSATE</h3>
<p>IMA UPSTATE is web based project which provides information about doctors who are registered in
Indian Medical Association.Users can search the doctors on the basis of doctor's speciality ,
location and name wise </p>
<p><strong>Technologies Used:</strong>HTML,CSS,JS,React JS,Java,ORACLE</p>
</div>
<div id="skills">
<h3>skills:</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Java</li>
<li>Oracle</li>
</ul>
</div>
<div id="internship">
<h3>Internship:</h3>
<h3>UMAYA Softech pvt. ltd.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit molestias placeat voluptas consequuntur ad officia maiores repudiandae, soluta, deserunt, voluptate iure exercitationem quos labore blanditiis eius distinctio. Earum iusto dolores placeat molestias debitis nulla maxime cumque neque, voluptate totam qui sapiente adipisci error temporibus. Quasi ut eos vitae maiores ea?</p>
</div>
<div id="achievements">
<p>Won 1st prize in creative Summons conducted at FMCA in 2009</p>
<p>Won 1st prize in code HackthonZ in FMCA at 2010</p>
</div>
<div id="personal">
<h3>Personal Details:</h3>
<table>
<tr>
<th>Hobbies:</th>
<td>Exploring blogs,browsing,coding</td>
</tr>
<tr>
<th>Strengths:</th>
<td>Decision Making Skills,Leadership,Time Managemnet</td>
</tr>
<tr>
<th>Languages Known:</th>
<td>English,Hindi</td>
</tr>
</table>
</div>
</main>
<footer>
This site belongs to me:<a href="mailto:garimasharma.g1@gmail.com">garimasharma.g1@gmail.com</a>
</footer>
</body>
</html>
few more concepts to be used in above resume code to make it more attractive.
1) adding Icons, favicon , emoji(websites from where we can download the links cdn font awesome, icon8,google icon)
2)CSS
Using Icons
1st -to add favicon
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
Next, add a <link> element to your "index.html" file, after the <title> element, like this:
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
visit favicon.cc website (or any other of ur choice) create your icon, download it
then paste it's path in href attribute of link tag
<link rel="shortcut icon" href="./Images/favicon.ico" type="image/x-icon">
2nd way -to add icon in front of any link or given text
How To Add Icons
To insert an icon, add the name of the icon class to any inline HTML element.
The <i> and <span> elements are widely used to add icons.
All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
visit cdn fontawesome website
copy embedded link for html and paste this in head part of ur HTML code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css"
integrity="sha512-tx5+1LWHez1QiaXlAyDwzdBTfDjX07GMapQoFTS74wkcPMsI3So0KYmFe6EHZjI8+eSG0ljBlAQc3PQ5BTaZtQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
then you can use any of your choice icon from font awesome library
and paste in front of <a> element
<a href="mailto:abc@gmail.com"><i class="fa-solid fa-envelope"></i></a>
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<!--Get your code at fontawesome.com-->
</head>
<body>
<i class="fas fa-band-aid"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-dragon"></i>
<i class="far fa-clock"></i>
<i class="fas fa-clock"></i>
</body>
</html>
3rd way- To add emoji
Emojis can be added in HTML document by specifying their decimal code within the required tags. These codes start with &# and end with ; to inform the browser that the character represented by the decimal code has to be displayed.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
Resume part 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Garima Resume</title>
<!--Favicon-->
<link rel="shortcut icon" href="./Images/favicon.ico" type="image/x-icon">
<!--Adding Icons embedded code to add icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css"
integrity="sha512-tx5+1LWHez1QiaXlAyDwzdBTfDjX07GMapQoFTS74wkcPMsI3So0KYmFe6EHZjI8+eSG0ljBlAQc3PQ5BTaZtQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--after adding this , add the name of the icon class to any inline HTML element.-->
<!-- adding style to make more attractive-->
<style>
/*tag name*/
h3{
color:rgb(5, 5, 5);
background-color:rgb(169, 169, 169);
}
/*classsname*/
.x/* classsname x*/
{
background-color: white;
}
/* id*/
div/* id name carrer*/
{
background-color:aliceblue;
border:black solid 1px;
padding-left: 20px;
padding-right: 20px;
}
header{
background-color: rgb(165, 230, 230);
border: black;
padding-right: 20px;
padding-left: 20px;
padding-top: 1px;
}
</style>
</head>
<body>
<p>📑</p>
<a href="#header" class="x">Home</a>
<a href="#education" class="x">Education</a>
<a href="#projects" class="x">Projects</a>
<a href="#skills" class="x">Skills</a>
<a href="./HTML (1).pdf" download class="x">click for Download</a>
<header id="header">
<h1>Garima Sharma</h1>
<table>
<tr>
<td>
<address>
<p>
H.No. 2 Ayodhya kunj,<br>
XYZ,<br>
Agra,<br>
<br>
</p>
</address>
<a href="mailto:garimasharma.g1@gmail.com"><i class="fa-solid fa-envelope"></i></a>
<a href="tel:9999999999"><i class="fa-solid fa-phone"></i></a>
<a href="https://github.com/GarimaCoder" target="_blank"><i class="fa-brands fa-github"></i></a>
<a href="https://www.linkedin.com"><i class="fa-brands fa-linkedin"></i></a> </td>
<td style="float:right;width:42px;height:42px; padding-left: 900px;">
<img src="./Images/Garima.jpg" alt="image" height="100" width="100" >
</td>
</tr>
</table>
</header>
<main>
<div id="carrer">
<h3>Career Objective:</h3>
<p>Highly motivated Front-End Developer with strong fundamentals in HTML, CSS, JavaScript ,Java and Oracle seeking to contribute to a
collaborative team environment. Eager to learn new frameworks and technologies (React, Angular) to build user-centric
and responsive web applications.</p>
</div></main>
<div id="education">
<h3>Educational Background:</h3>
<table border="1" width="100%">
<tr>
<th>sno</th>
<th>Qualification</th>
<th>Institute</th>
<th>Year</th>
</tr>
<tr>
<td>1</td>
<td>MCA</td>
<td>GBTU</td>
<td>2010</td>
</tr>
<tr>
<td>2</td>
<td>B.Sc</td>
<td>Dr. Bhimrao Ambedkar university</td>
<td>2006</td>
</tr>
<tr>
<td>3</td>
<td>SSC</td>
<td>U.P.</td>
<td>2003</td>
</tr>
<tr>
<td>4</td>
<td>HSC</td>
<td>U.P.</td>
<td>2001</td>
</tr>
</table>
</div>
<div id="projects">
<h3>Projects:</h3>
<h3>IMA UPSATE</h3>
<p>IMA UPSTATE is web based project which provides information about doctors who are registered in
Indian Medical Association.Users can search the doctors on the basis of doctor's speciality ,
location and name wise </p>
<p><strong>Technologies Used:</strong>HTML,CSS,JS,React JS,Java,ORACLE</p>
</div>
<div id="skills">
<h3>skills:</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Java</li>
<li>Oracle</li>
</ul>
</div>
<div id="internship">
<h3>Internship:</h3>
<h3>UMAYA Softech pvt. ltd.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit molestias placeat voluptas consequuntur ad officia maiores repudiandae, soluta, deserunt, voluptate iure exercitationem quos labore blanditiis eius distinctio. Earum iusto dolores placeat molestias debitis nulla maxime cumque neque, voluptate totam qui sapiente adipisci error temporibus. Quasi ut eos vitae maiores ea?</p>
</div>
<div id="achievements">
<p>Won 1st prize in creative Summons conducted at FMCA in 2009</p>
<p>Won 1st prize in code HackthonZ in FMCA at 2010</p>
</div>
<div id="personal">
<h3>Personal Details:</h3>
<table>
<tr>
<th>Hobbies:</th>
<td>Exploring blogs,browsing,coding</td>
</tr>
<tr>
<th>Strengths:</th>
<td>Decision Making Skills,Leadership,Time Managemnet</td>
</tr>
<tr>
<th>Languages Known:</th>
<td>English,Hindi</td>
</tr>
</table>
</div>
</main>
<footer>
This site belongs to me © 2024 write us to<a href="mailto:garimasharma.g1@gmail.com">garimasharma.g1@gmail.com</a>
</footer>
</body>
</html>