Scribd Logo
Upload

Welcome to Scribd!

  • 19 views

    Green University of Bangladesh Department of Computer Science and Engineering (CSE)

    Uploaded by

    afnan mafuj
    This lab report summarizes a student's work designing their CV using HTML and CSS. The student included sections for their profile, experience, skills, technical skills, and education. They provided the HTML and CSS code used to design each section and subsection of the CV. The overall objective was to gain experience with HTML and CSS for page layout and design.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Green University of Bangladesh Department of Computer Science and Engineering (CSE)

    Uploaded by

    afnan mafuj
    19 views13 pages
    This lab report summarizes a student's work designing their CV using HTML and CSS. The student included sections for their profile, experience, skills, technical skills, and education. They provided the HTML and CSS code used to design each section and subsection of the CV. The overall objective was to gain experience with HTML and CSS for page layout and design.

    Original Description:

    Original Title

    201002158

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This lab report summarizes a student's work designing their CV using HTML and CSS. The student included sections for their profile, experience, skills, technical skills, and education. They provided the HTML and CSS code used to design each section and subsection of the CV. The overall objective was to gain experience with HTML and CSS for page layout and design.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    19 views13 pages

    Green University of Bangladesh Department of Computer Science and Engineering (CSE)

    Uploaded by

    afnan mafuj
    This lab report summarizes a student's work designing their CV using HTML and CSS. The student included sections for their profile, experience, skills, technical skills, and education. They provided the HTML and CSS code used to design each section and subsection of the CV. The overall objective was to gain experience with HTML and CSS for page layout and design.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 13

    Green University of Bangladesh

    Department of Computer Science and Engineering (CSE)


    Faculty of Sciences and Engineering
    Semester: (Summer, Year: 2021), B.Sc. in CSE (Day)

    LAB REPORT NO 01
    Course Title: Web Programming Lab
    Course Code: CSE 302 Section: D13

    Lab Experiment Name: Design a CV using HTML and CSS.

    Student Details

    Name ID

    1. Mafuj Ahmed Bishal 201002158

    Lab Date : 17 july,2022


    Submission Date : 11 August 2022
    Course Teacher’s Name : Tanpia Tasnim

    [For Teachers use only: Don’t Write Anything inside this box]

    Lab Report Status


    Marks: ………………………………… Signature: .....................
    Comments: .............................................. Date: ..............................
    1.TITLE

    Design a CV using and implementing with HTML and CSS

    2. OBJECTIVES

    • To gain basic knowledge of HTML and CSS.


    • To increase design knowledge.
    • To gain knowledge about page layout.

    3. IMPLEMENTATION

    • HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CV Template </title>
    <link rel="stylesheet" href="/fontawesome-free-6.1.2-web/css/all.css">
    <link rel="stylesheet" href="/fontawesome-free-6.1.2-web/css/fontawesome.min
    .css">
    <link rel="stylesheet" href="/fontawesome-free-6.1.2-web/css/all.min.css">
    <link rel="stylesheet" href="/CSS/style.css">

    </head>

    <body>
    <div class="container">

    <!--This is my header part-->

    <header>

    <img class="pro-image" src="/IMAGE/FB_IMG_9110682773608924058.jpg"


    alt="Profile image">

    <div class="header-text">
    <h1>MD. Mafuj Ahmed Bishal</h1>
    <br>
    <h3>Web Designer</h3>
    </div>

    <div class="header-contact">
    <button><i class="fa fa-download"></i> Download PDF</button><br><br>
    <a href="mailto:afnanmafuj22@gmail.com">
    Email: afnanmafuj22@gmail.com</a><br><br>
    <a href="tel:+8801798541625">Phone: +8801798541625</a>
    </div>

    </header>

    <div class="clear-the-div"></div>

    <hr>

    <!--Main Information-->
    <main>

    <!--Profile Section-->
    <section id="profile-section">
    <div class="content">
    <div class="left">
    <div class="left-icon">
    <i class="fa-solid fa-user">
    </i>
    </div>
    <div class="left-text">
    <h3>Profile</h3>
    </div>
    </div>
    <div class="right">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing
    elit. Debitis tempore ipsum voluptatum! Eius eum ea quis ipsa autem quasi itaque
    doloremque maxime ab? Tempora enim quos architecto laboriosam. Necessitatibus
    deleniti labore nihil dolore quia?</p>
    </div>
    </div>
    </section>
    <div class="clear-the-div"></div>
    <hr class="section-hr">

    <!--Experience Section-->
    <section id="experience-section">
    <div class="content">
    <div class="left">
    <div class="left-icon">
    <i class="fa-solid fa-briefcase"></i>
    </div>
    <div class="left-text">
    <h3>Experience</h3>
    </div>
    </div>
    <div class="right">
    <h3>Lead Developer</h3>
    <h5>2021-Present</h5>
    <div class="description">
    <h6>StartUp Hub,Dhaka</h6>
    <br>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing
    elit. Aperiam distinctio reiciendis quod dolores labore neque similique est tempora
    provident doloremque.Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    Aperiam distinctio reiciendis quod dolores labore neque similique est tempora
    provident doloremque.</p>
    <br><br>
    </div>
    <h3>Junior Web Developer</h3>
    <h5>2020-2021</h5>
    <div class="description">
    <h6>EduSoft Bd,Dhaka</h6>
    <br>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing
    elit. Aperiam distinctio reiciendis quod dolores labore neque similique est tempora
    provident doloremque. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    Aperiam distinctio reiciendis quod dolores labore neque similique est tempora
    provident doloremque.</p>
    </div>
    </div>

    </div>
    </section>

    <div class="clear-the-div"></div>
    <hr class="section-hr">

    <!--Skills Section-->

    <section id="skills-section">
    <div class="content">
    <!--Outer left-->
    <div class="left">
    <div class="left-icon">
    <i class="fa-solid fa-gears"></i>
    </div>
    <div class="left-text">
    <h3>Skills</h3>
    </div>
    </div>
    <!--Outer Right-->
    <div class="right">
    <!--skill-1-->
    <div class="skill-1">
    <div class="left">
    <div class="left-icon">
    <i class="fa-solid fa-marker"></i>
    </div>
    <div class="left-text">
    <h3>Web Designer</h3>
    </div>
    <div class="des">
    Lorem ipsum dolor sit amet consectetur dad
    </div>
    </div>
    </div>
    <!--skill-2-->
    <div class="skill-2">
    <div class="left">
    <div class="left-icon">
    <i class="fa-solid fa-laptop-code"></i>
    </div>
    <div class="left-text">
    <h3>Developer</h3>
    </div>
    <div class="des">
    Lorem ipsum dolor sit amet consectetur dad
    </div>
    </div>
    </div>
    <!--skill-3-->
    <div class="skill-3">
    <div class="left">
    <div class="left-icon">
    <i class="fa-solid fa-database"></i>
    </div>
    <div class="left-text">
    <h3>Database</h3>
    </div>
    <div class="des">
    Lorem ipsum dolor sit amet consectetur dad
    </div>
    </div>
    </div>
    <!--skill-4-->
    <div class="skill-3">
    <div class="left">
    <div class="left-icon">
    <i class="fa-solid fa-mobile-screen"></i>
    </div>
    <div class="left-text">
    <h3>Android App</h3>
    </div>
    <div class="des">
    Lorem ipsum dolor sit amet consectetur dad
    </div>
    </div>
    </div>
    </div>
    </div>
    </section>

    <div class="clear-the-div"></div>
    <hr class="section-hr">

    <!--Tecnical Section-->

    <section id="technical-section">
    <div class="content">
    <div class="left">
    <div class="left-icon">
    <i class="fa-solid fa-bug"></i>
    </div>
    <div class="left-text">
    <h3>Technical</h3>
    </div>
    </div>
    <div class="right">
    <table style="width:100%">
    <tr>
    <td><i class="fa-brands fa-html5"></i>HTML</td>
    <td><i class="fa-solid fa-database"></i>SQL</td>
    <td><i class="fa-brands fa-apple"></i>OS X</td>
    </tr>
    <tr>
    <td><i class="fa-brands fa-css3-alt"></i>CSS</td>
    <td><i class="fa-brands fa-php"></i>PHP</td>
    <td><i class="fa-brands fa-windows"></i>WINDOWS XP/VISTA</td>
    </tr>
    <tr>
    <td><i class="fa-brands fa-js"></i>JAVASCRIPT
    </td>
    <td><i class="fa-brands fa-react"></i>REACT</td>
    <td><i class="fa-brands fa-linux"></i>LINUX</td>
    </tr>
    </table>
    </div>
    </div>
    </section>

    <div class="clear-the-div"></div>
    <hr class="section-hr">

    <!--Education Section-->

    <section id="education-section">
    <div class="content">
    <div class="left">
    <div class="left-icon">
    <i class="fa-solid fa-graduation-cap"></i>
    </div>
    <div class="left-text">
    <h3>Education</h3>
    </div>
    </div>
    <div class="right">
    <div class="qualification">
    <div class="institution-name">
    <h3>B.Sc in Computer Science and Engineering</h3>
    <p>
    Green University of Bangladesh
    <br>
    Shewrapara,Bijoy Sarani,Dhaka
    </p>
    </div>
    <div class="result">
    <h3>Result</h3>
    <p>CGPA:3.13</p>
    </div>
    </div>
    </div>
    </div>
    </section>
    <div class="clear-the-div"></div>
    <hr class="section-hr">
    </main>
    </div>
    </body>
    </html>

    • CSS Code:
    *{
    margin: 0;
    padding: 0;
    font-family: Georgia;
    }
    body{
    font-family: Georgia;
    background-color: #e4f9f5;
    }
    .container{
    width: 1000px;
    background-color: lightyellow;
    margin: 0 auto;
    padding: 20px;
    height: 100%;

    }
    h1,h2,h3,h4,h5{
    color: #777;
    font-family: georgia;
    }
    .header-text{
    float: left;
    padding: 30px 30px 30px 10px;
    }
    .pro-image{
    border-radius: 50%;
    width: 120px;
    height: 120px;
    border: lightskyblue 4px solid;
    float: left;
    }
    .header-text h1{
    font-size: 28px;
    word-spacing: .5px;
    letter-spacing: .5px;
    }
    .header-text h2{
    font-size: 15px;
    word-spacing: .5px;
    letter-spacing: 1.5px;
    }
    .header-contact{
    float: right;
    padding: 30px 30px 30px 10px;
    font-family: georgia;
    color: #777;

    .header-contact button{
    border: none;
    padding: 12px 30px;
    color: black;
    background-color: dodgerblue;
    border-radius: 20px;
    }

    .header-contact button:hover{
    transform: scale(1.05);
    background-color: royalblue;
    }

    .header-contact a{
    text-decoration: none;
    color: #777;
    font-weight: bold;
    }

    .header-contact a:hover{
    text-decoration: underline;
    color: black;
    transform: scale(1.5);
    }
    .clear-the-div{
    clear: both;
    }

    hr{
    border: black solid 3px ;
    width: 100%;
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin-bottom: 20px;
    }
    /* Main Information Style */
    .left{
    float: left;
    width: 25%;
    }
    .right{
    float: left;
    width: 75%;
    }

    .section-hr{
    margin: 20px auto;
    border: #777 solid 1px;
    width: 100%;
    border-bottom: none;
    border-left: none;
    border-right: none;
    }

    .left-icon{
    float: left;
    margin-top: 1px;
    margin-right: 10px;
    padding: 5px;
    border: #777 solid 2px;
    border-radius: 50%;
    background-color: powderblue;

    }
    .left-text{
    float: left;
    }

    .right h5{
    float: right;
    color: black;
    }
    .right h3{
    float: left;
    color: black;
    }
    .right h6{
    color: royalblue;
    margin-top: 4px;
    }
    .description{
    float: left;
    text-align: justify;
    }

    .des{
    float: left;
    margin-top: 5px;
    }

    .skill-1{
    margin-right: 15px;
    }
    .skill-2{
    margin-left: 15px;
    }
    .skill-3{
    margin-left: 15px;
    }

    td{
    text-align: justify;
    font-size: 15px;
    font-family: georgia;
    }

    .right table tr td i{
    border: black solid 1px;
    border-radius: 50%;
    background-color: skyblue;
    margin: 5px;
    padding: 5px;
    }
    .qualification .institution-name{
    float: left;
    margin: 5px;
    padding: 5px;
    }
    .qualification .result{
    float: left;
    margin: 5px;
    padding: 5px;
    }

    4. OUTPUT
    5. ANALYSIS AND DISCUSSION

    In this CV design I break the CV in different div’s like whole CV in one div
    “container” and in container div there is <header> and <main> tag. In header there
    two div header-contact and header-text. In <main> there are five <section> and
    every section two div “left and right”. The use div and section is to ease the page
    layout. We use CSS float property in page layout. So from this CV implementation
    we learn many things like page layout, CSS styling etc. We have to improve more
    to build more advance development.

    You might also like