Resume Building Using HTML & CSS

#html #css #tutorial #webdev

Project-Resume Building
So, Today I built a Resume using HTML & CSS. So these are some common projects that are around us. In this Resume I use some new Tags like Flex and Grid. Now I explain each new Tags and CSS properties with the source code.

Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .container {
            /* border: 1px solid rgb(246, 6, 166); */
            height: 100vh;
            width: 65vw;
            margin: auto;
            display: grid;
            grid-template-columns: 10fr 20fr;
        }
        .left{
            /* border: 1px solid rgb(217, 249, 10); */
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 25px;
            background-color: rgb(227, 228, 225);
        }
        .right{
            /* border: 1px solid rgb(12, 178, 244); */
            padding: 20px;
            background-color: rgb(185, 223, 211);
        }
        img{
            /* border: 1px solid rgb(77, 16, 16); */
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            border-radius: 50%;
        }

        ul{
            padding: 20px;
        }
        h1{
            padding-bottom: 10px;

        }
    </style>
</head>

<body>
    <div class="container">


        <div class="left">
            <div class="Profile">
                <img src="download.jpg" alt="avatar">
            </div>
            <h1>Contact</h1>
            <hr>
            <p>Tirunelveli,Tamilnadu</p>
            <p>Email:sraghul1006@gmail.com</p>
            <p>Contact No:9092466402</p>
            <h1>Skills</h1>
            <hr>
            <ul>
                <li><strong>Programming language:</strong>Java,Python,HTML,CSS,JavaScript</li>
                <li><strong>Database:</strong>SQL,MYSQL</li>
                <li><strong>Concepts:</strong>DSA,OOPS</li>
            </ul>
            <h1>Strength</h1>
            <hr>
            <ul>
                <li>Good Communication</li>
                <li>Problem Solving</li>
                <li>Good Leadership</li>
                <li>Quick Learner</li>
            </ul>
            <h1>Language</h1>
            <hr>
            <ul>
                <li>Tamil</li>
                <li>English</li>
            </ul>


        </div>



        <div class="right">
            <h1>Raghul Narayaanan S</h1>
            <h2>PROFESSIONAL SUMMARY</h2>
            <hr>
            <p>A quick learner and motivated Software Engineer skilled in Java, Python, and full-stack
development with expertise in building scalable applications, cloud-based solutions, and
ML-powered analytics. Experienced in solving complex problems, collaborating in teams,
and delivering impactful projects.</p>
<h2>Project</h2>
<hr>
<ul><strong>Vaccination Monitoring System for Children</strong>
    <li> Reduced missed immunizations by automating reminders via cloud-based scheduling.
</li>
    <li>Built dashboards to track vaccination adherence using BigQuery.</li>

</ul>
<ul><strong>Smart Aquaculture System</strong>
<li>Built ML models to predict shrimp growth & optimize feeding, improving efficiency by
automating feed calculations.</li></ul>
<h1>CERTIFICATIONS</h1>
<hr>
<ul><li>Oracle: Oracle Cloud Infrastructure 2023 AI Certified Foundation Associate</li>
<li>CodeChef: Design and Analysis of Algorithms in Java</li>
<li>CodeChef: Database Management Systems</li>
<li> NPTEL: Soft Skills Development</li></ul>
<h1>EDUCATION</h1>
<hr>
<p><strong>B.Tech in Computer Science and Engineering (Data Analytics):</strong> Kalasalingam Academy
of Research and Education (2022–2026) | CGPA: 7.14
Rose Mary Matriculation Hr. Sec. School | HSE: 80% | SSLC: 65%</p>

        </div>
    </div>
</body>

</html>

Output

CSS Grid
Grid is a two-dimensional layout system. This means it handles both rows and columns at the same time. It is best used for the main framework of a webpage.

.container {
    display: grid;
    grid-template-columns: 10fr 20fr;
}

display: grid;
Turns the container into a grid system.
grid-template-columns:10fr 20fr;`Splits the screen into two columns using fractional units(fr)`.
The left column takes up 1:3 of the space, and the right column takes up 2:3 (essentially splitting the page into a 1:2 ratio, where the right side is twice as wide as the left side).

CSS Flexbox
Flexbox is a one-dimensional layout system. It handles elements in either a row OR a column at one time. It is best used for aligning items, distributing space, and small-scale layouts.

`css .left { display: flex; flex-direction: column; justify-content: center; } `
display: flex;
Activates flexbox for the sidebar.

flex-direction: column;
Changes the default row alignment to a column alignment. This forces your Profile, Contact, Skills, Strengths, and Languages to stack vertically on top of each other.

justify-content: center;
Vertically centers the entire block of content inside that sidebar because the axis was changed to a column.

DEV Community

Resume Building Using HTML & CSS

Top comments (0)