Create CV using HTML and CSS

on

 


Find the project guide from: Code Jika

In this tutorial you'll learn to code in HTML & CSS to create your astonishing CV web page.

 

BASIC HTML STRUCTURE👌

•    Add <style> tags inside <head> tags
•    Add <header> tags after the open <body> tag.
•    Add your name in all-caps in an <h1> in <header>
•    Style your header –> background, borders
•   
•    Center everything and align text
•    Add your dream job in Italics tag <i>
•    Increase h1 font size to give website some character
•    Use <br> tag for new line
•    Add Content to your CV using <h3> tags as title and <p> tags for your info.
•   
•    Make a circle by writing a CSS class to define width & height
•    Make a <div> tag inside <header> section above <h1> & add .box class to the <div> tag
•    Add Background color, border & border radius with 50% to circle
•    Add Layout to circle so that it display centered with text (display: inline-block)
•   
•    Use colors in html for body{}
•    Style h3{} with color, padding, font & border
•    Style 2 different sections at the same time p, ul {}
•    Add font family to body{} -> Helvetica, arial, san-serif
•    Responsive website works on different screen sizes.
•    Pixels are a way to measure a screen.
•   
•    A CV is your personal advertisement and it tells your story.
•    Add more sections -> DETAILS, EDUCATION, SKILLS, ETC…
•    Add Section with lists & bullet points using <ul> & <li> tags
•    Add Contact Section
•   
•    Emojis are “Special Characters”. They have been 4 & 6 letters or numbers.
•    Add new <div> inside the <div> tag in <header>
•    Place an emoji into the new <div>
•    Create new CSS class .emoji and increase font size to 8em
•    Link the .emoji class to new <div>
•    Put and emoji in front of each section
•    Add a centered copyright line at the end of your website right before </body>

 

FULL PROJECT CODE BELOW: 

 Also available on GitHub: https://github.com/Digital-101/ICT-Digital-Learning

View HTML CV in new tab -> https://turquoise-cthrine-35.tiiny.site/


 <!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">
    <link rel="shortcut icon" href="book.png" type="image/x-icon">
    <title>CV of Gift Sun</title>
    <style>
        header {
            color: white;
            background: rgb(155, 43, 43);
            border: solid black;
            border-width: 10px 0px 10px 0px;
            margin: 0 auto;
            text-align: center;
            font-family: "Arial Black", Gadget, sans-serif;
            width: auto;
        }

        .circle {
            height: 150px;
            width: 150px;
            background: rgb(143, 43, 43);
            border-radius: 50%;
            border: 10px solid white;
            display: inline-block;
        }

        .emoji {
            font-size: 6em;
        }

        h1 {
            font-size: 3em;
        }

        .banner {
            color: rgb(235, 1, 40);
        }

        body {
            background: #c0b3b3;
        }

        h3 {
            background-color: #a6a89e;
            font-size: 1.6em;
            border-left: 10px solid #d6d5cd;
            font-family: Arial, Helvetica, sans-serif;
        }

        p, ul {
padding-left: 20px;
font-size: 1.2em;
}
    </style>

</head>

<body>
    <header>
        <br>
        <div class="circle">

            <div class="emoji">
                &#x1F60E;
            </div>

        </div>

        <h1>Gift Sun</h1>
        <i>
            Aspiring AI Engineer
        </i>
        <br> <br>
    </header>
    <br>

    <h3 class="banner">
        &#9737 DETAILS
    </h3>
    <ul style="list-style-type:square;">
        <li>
            <p>Date of Birth: 27 July 1976</p>
        </li>
        <li>
            <p>Gender: Male</p>
        </li>
        <li>
            <p>Nationality: South African</p>
        </li>
        <li>
            <p>Address: A348 Khangela Street, Ntuzuma 4359</p>
        </li>
    </ul>
    <br>
    <h3 class="banner">
        &#9917 SKILLS
    </h3>
    <ul style="list-style-type:square;">
        <li>
            <p>Coding</p>
        </li>
        <li>
            <P>Data Analysis</p>
        </li>
        <li>
            <P>Hacking</p>
        </li>
    </ul>
    <h3 class="banner">
        <br>
        &#9998 EDUCATION
    </h3>
    <ul style="list-style-type:square;">
        <li>
            <p>School: Phikiswayo Primary</p>
        </li>
        <li>
            <P>Grade: 7</p>
        </li>
        <li>
            <p>Course: HTML Coding</p>
        </li>
    </ul>
    <h3 class="banner">
        <br>
        &#10004 EXPERIENCE
    </h3>
    <ul style="list-style-type:square;">
        <li>
            <p>Company: Electric Avenue</p>
        </li>
        <li>
            <P>Occupation: Game Developer Trainee</p>
        </li>
        <li>
            <P>Year: 2017</p>
        </li>
    </ul>
    <h3 class="banner">
        <br>
        &#9993 CONTACT
    </h3>
    <ul style="list-style-type:square;">
        <li>
            <p>Email: gift24@gmail.com</p>
        </li>
        <li>
            <p>Phone: 084 320 1120</p>
        </li>
    </ul>
    <br>
    <hr>
    <center>
        <br>
        &copy Copyright 2023
    </center>
</body>

</html>


Comments

Post a Comment