Tạo CV bằng HTML CSS

Khái niệm

CV là cụm từ viết tắt của Curriculum Vitae dùng làm sơ yếu lý lịch khi đi xin việc trong đa dạng các ngành học. Tuy nhiên với mỗi ngành học nó lại có những đặc trưng riêng. Trong lập trình web chúng ta có thể tạo CV bằng HTML CSS một cách dể dàng dựa vào những gì chúng ta đã học và sau đó chỉ cần gửi link cho nhà tuyển dụng tra cứu. Tạo CV bằng HTML CSS là cách thức tạo sơ yếu lý lịch sử dụng code HTML CSS để tạo ra một trang web chứa đựng nội dung cá nhân khi đi xin việc.

Tuy tiện dụng là thế tuy nhiên việc tạo ra một CV bằng HTML CSS nên đi kèm theo một bản PDF để những nhà tuyển dụng cần có thể dể dàng xem hơn ở bất cứ định dạng nào mà họ muốn.

Một CV bằng HTML CSS cần những gì ?

Nó mang hoàn toàn đúng và đủ tính chất của một CV bình thường:

Hình đại diện.
Họ tên.
Chuyên môn.
Cách thức liên hệ.
Kinh nghiệm.
Các kĩ năng chuyên môn.

Ngoài ra CV ở ngành lập trình còn có thêm một yêu cầu nửa đó là " các dự án đã thực hiện", bao gồm các thông tin như:

Tên dự án.
Thời gian thực hiện.
Vị trí bản thân trong dự án.
Mô tả sơ qua về dự án.
Mô tả các đóng góp bản thân đã thực hiện trong dự án.
Đường link kèm theo ( đối với các dự án được công khai ) để nhà tuyển dụng dể dàng trải nghiệm thử.

Kèm theo đó là những thông tin như:

Sở thích bản thân.
Mục tiêu nghề nghiệp.
Định hướng vài năm tiếp theo.

Những mục này đa phần chỉ nên bổ xung nếu CV của bạn còn quá ít kinh nghiệm và muốn trông CV của mình nhiều nội dung hơn, đặc biệt dành cho các bạn mới ra trường.

Những lưu ý khi thực hiện tạo CV bằng HTML CSS

Thứ nhất chúng ta phải tuân thủ khung hình của CV là A4 hoặc ít nhất là hình chử nhật có chiều dài lớn hơn chiều rộng.

Thứ hai vì là chúng ta tự code HTML CSS vì vậy hảy cân đo thật kĩ các thuộc tính căn lề padding, margin, kích thước font chử, khoảng cách các chử và các dòng sao cho thật hợp lí.

Và cuối cùng là tạo ra những khối nội dung riêng biệt để có thể phân phác đều lên toàn trang giúp cho trang CV bằng HTML CSS cân đối hơn.

Code CV bằng HTML CSS

HTML:

 
    <!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>Document</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    </head>
    <body>
        <div class="container">
           <div class="avatar">
            <img src="https://i.pinimg.com/564x/eb/57/6f/eb576ff023487bcb1fa3ad61ee7b23ee.jpg" alt="">
           </div>
           <div class="name">
                <h1>HO HOANG</h1>
                <div class="specialize">Frond-End Developer</div>
                <ul class="contact">
                    <li>
                        <span>P</span> +84123456789
                    </li>
                    <li>
                        <span>E</span> hohoang.dev@gmail.com
                    </li>
                    <li>
                        <span>W</span> lundevweb.com
                    </li>
                </ul>
           </div>
           <div class="info">
                <ul>
                    <li>From <b>HCMC</b> - VietNam</li>
                    <li>01/01/0101</li>
                    <li>AAAA University</li>
                </ul>
           </div>
           <div class="intro">
            <h2>INTRODUCE MYSELT</h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit eligendi omnis quasi dolores modi eius aliquam ipsum soluta, dolore tenetur excepturi praesentium porro alias itaque enim labore qui necessitatibus molestias hic cum deserunt ab! Illum sed eveniet distinctio, alias sunt repudiandae labore a dolorum tenetur? Harum deleniti mollitia odio neque.
           </div>
           <div class="experience">
            <h2>EXPERIENCE</h2>
    
            <div class="item">
                <h4>Frond-end Developer</h4>
                <div class="time">
                   <span>2020 - 2022</span>
                   <span>ABC D company</span>
                </div>
                <div class="des">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium officia nobis quas excepturi consectetur quidem quia est neque doloremque.
                </div>
            </div>
    
                <div class="item">
                    <h4>Student</h4>
                    <div class="time">
                       <span>2015 - 2019</span>
                       <span>ACDC University</span>
                    </div>
                    <div class="des">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium officia nobis quas excepturi consectetur quidem quia est neque doloremque.
                    </div>
                </div>
                <h2 class="skills">
                    SKILLS
                </h2>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>Bootstrap</li>
                    <li>Javascript</li>
                    <li>PHP</li>
                    <li>MySql</li>
                    <li>Git</li>
                    <li>Laravel</li>
                </ul>
    
           </div>
           <div class="project">
            <h2>PROJECTS</h2>
            <div class="item">
                <h4>Website shopping</h4>
                <div class="time">
                    2020
                </div>
                <div class="web">
                    www.lundevweb.com
                </div>
                <div class="location">
                    Frond-end Developer
                </div>
                <div class="des">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto consequatur amet sed, est eum facilis repellendus 
                    atque perspiciatis iste porro nobis autem explicabo expedita fugiat nostrum. Eveniet eum autem culpa!
                    <ul>
                        <li>Lorem ipsum dolordolores.</li>
                        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur, dolores.</li>
                        <li>Lorem ipsum dolor sit amet consectetur dolores.</li>
                    </ul>
                </div>
            </div>
    
            <div class="item">
                <h4>Website shopping</h4>
                <div class="time">
                    2020
                </div>
                <div class="web">
                    www.lundevweb.com
                </div>
                <div class="location">
                    Frond-end Developer
                </div>
                <div class="des">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto consequatur amet sed, est eum facilis repellendus 
                    atque perspiciatis iste porro nobis autem explicabo expedita fugiat nostrum. Eveniet eum autem culpa!
                    <ul>
                        <li>Lorem ipsum dolordolores.</li>
                        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur, dolores.</li>
                        <li>Lorem ipsum dolor sit amet consectetur dolores.</li>
                    </ul>
                </div>
            </div>
    
            <div class="item">
                <h4>Website shopping</h4>
                <div class="time">
                    2020
                </div>
                <div class="web">
                    www.lundevweb.com
                </div>
                <div class="location">
                    Frond-end Developer
                </div>
                <div class="des">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto consequatur amet sed, est eum facilis repellendus 
                    atque perspiciatis iste porro nobis autem explicabo expedita fugiat nostrum. Eveniet eum autem culpa!
                    <ul>
                        <li>Lorem ipsum dolordolores.</li>
                        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur, dolores.</li>
                        <li>Lorem ipsum dolor sit amet consectetur dolores.</li>
                    </ul>
                </div>
            </div>
           </div>
        </div>
        
    </body>
    </html>

CSS:

 
    body{
        background-color: #D5D5D5;
        font-family: system-ui;
    }
    .container{
        background-color: #E9E7EA;
        width:1000px;
        max-width: 100%;
        margin:auto;
        padding:50px;
        box-shadow: 0 10px 50px #858585;
        display: grid;
       grid-template-columns: 35% 60%;
       column-gap: 5%; 
       row-gap: 30px;
    }
    
    .avatar img{
        width:200px;
        height:200px;
        object-fit: cover;
        border-radius: 50%;
    }
    .avatar{
        display: flex;
        justify-content: end;
        align-items: center;
    }
    .name{
        padding-left: 30px;
        border-left:1px solid #000;
    }
    .name h1{
        font-weight: 300;
        font-size: xxx-large;
        margin:0px 0 5px ;
    }
    .name .specialize{
        margin:0;
        font-weight: bold;
        letter-spacing: 3px;
    }
    .name .contact{
        padding:0;
        list-style: none;
    }
    .name .contact span{
        display: inline-block;
        background-color: #000;
        width:20px;
        height:20px;
        color:#fff;
        text-align: center;
        border-radius: 50%;
        font-size: small;
        margin-right: 20px;
    }
    .name .contact li{
        padding:5px 0;
        transform: translate(-40px);
        background-color: #E9E7EA;
    }
    .info ul{
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: right;
        line-height: 30px;
    } 
    
    h2{
        padding:0;
        margin: 0 0 20px 0;
    }
    .intro{
        padding-left: 30px;
        border-left: 1px solid #000;
        text-align: justify;
    }
    .experience{
        text-align: right;
    }
    .experience h4{
        margin:20px 0 10px;
    }
    .skills{
        margin-top:  50px;
    }
    .experience ul{
        padding:0;
        margin: 0;
    list-style: none;
    }
    .experience li{
        padding:10px 0;
    }
    .project{
        padding-left: 30px;
        text-align: justify;
        border-left: 1px solid #000;
    }
    .project h4{
        margin:20px 0 10px;
    }
    .project .web{
        color: #0c7373;
        padding:10px 0;
    }
    .project .location{
        font-weight: 500;
        padding-bottom:10px;
    }
    .project .item{
        position: relative;
    }
    .project .item::before{
        position: absolute;
        width:13px;
        height: 13px;
        background-color: #000;
        content: '';
        border-radius: 50%;
        left: -37px;
    }

Và đây sẽ là thành quả:

Video hướng dẩn tạo CV bằng HTML CSS

Xem nhiều hơn tại kênh youtube Lùn Dev

Khái niệm

Một CV bằng HTML CSS cần những gì ?

Những lưu ý khi thực hiện tạo CV bằng HTML CSS

Code CV bằng HTML CSS

Video hướng dẩn tạo CV bằng HTML CSS

Thank You

Contact Form