Cara Membuat Website CV Menggunakan HTML dan CSS

by

Cara Membuat Website CV Menggunakan HTML dan CSS – Di era digital yang berkembang pesat, memiliki Curriculum Vitae (CV) yang menarik secara visual dapat membuat Anda lebih menonjol di antara pesaing dalam mencari pekerjaan. Salah satu cara modern untuk menciptakan kesan yang berkesan adalah dengan membuat CV dalam bentuk website. Dalam panduan ini, caramembuatweb telah membimbing Anda, khususnya para pemula, melalui langkah-langkah detail tentang cara membuat sebuah website CV yang menarik menggunakan HTML dan CSS.

Dalam dunia online yang semakin kompetitif, keberadaan website CV dapat menjadi keuntungan besar bagi pencari kerja. Tidak hanya memungkinkan Anda untuk menampilkan informasi lebih lengkap tentang diri Anda dibandingkan dengan CV tradisional, tetapi juga memberikan kesempatan untuk menunjukkan kemampuan Anda dalam desain web.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda Siapkan untuk membuat website cv menggunakan html dan css:

  • Perangkat laptop,
  • Sublime text (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Website CV Menggunakan HTML dan CSS

1. Buat Folder Project Website CV

Pertama-tama, buatlah sebuah folder di komputer Anda untuk menyimpan semua file yang akan digunakan untuk proyek website CV ini. Misalnya, Anda bisa memberi nama folder tersebut “Website_CV“.

2. Buat Folder img

Dalam folder “Website_CV” yang telah Anda buat, buatlah subfolder baru dan beri nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan digunakan di website CV Anda nantinya. Download gambar disini untuk dapat di implementasikan dalam website cv sebagai contoh awal.

3. Buat Sebuah File website_cv.html

Sekarang, mari kita mulai membuat file HTML untuk website CV. Buka editor teks favorit Anda, lalu buatlah sebuah file baru dengan nama “website_cv.html” di dalam folder “Website_CV“. Kemudian, Anda dapat mulai menulis kode HTML dasar di dalamnya.

Artikel Terkait:   Cara Membuat Search Box dengan HTML dan CSS

Berikut ini file html yang dapat Anda tambahkan untuk membuat website cv menggunakan html dan css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Curriculum Vitae</title>
</head>
<body>
    <header>
        <div class="container">
            <h1>John Doe</h1>
            <img src="img/otaku.png" alt="Profile Picture">
            <p>Web Developer</p>
        </div>
    </header>

    <section class="contact">
        <div class="container">
            <h2>Contact</h2>
            <p>Email: [email protected]</p>
            <p>Phone: +1234567890</p>
            <p>Address: 123 Main Street, City, Country</p>
        </div>
    </section>

    <section class="summary">
        <div class="container">
            <h2>Summary</h2>
            <p>A highly skilled web developer with expertise in HTML, CSS, and JavaScript. Experienced in building responsive and user-friendly websites.</p>
        </div>
    </section>

    <section class="experience">
        <div class="container">
            <h2>Experience</h2>
            <div class="job">
                <h3>Senior Web Developer</h3>
                <p>XYZ Company - 2020-Present</p>
                <p>Lead a team of developers in creating and maintaining various web applications.</p>
            </div>
            <div class="job">
                <h3>Junior Web Developer</h3>
                <p>ABC Corporation - 2018-2020</p>
                <p>Assisted senior developers in building and testing new website features.</p>
            </div>
        </div>
    </section>

    <section class="education">
        <div class="container">
            <h2>Education</h2>
            <div class="degree">
                <h3>Bachelor of Science in Computer Science</h3>
                <p>University of Example - 2018</p>
            </div>
        </div>
    </section>

    <section class="skills">
        <div class="container">
            <h2>Skills</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>Responsive Design</li>
                <li>Problem Solving</li>
            </ul>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2024 John Doe</p>
        </div>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, buatlah file CSS untuk mengatur tampilan dari website CV Anda. Buatlah sebuah file baru dengan nama “style.css” di dalam folder “Website_CV“.

Artikel Terkait:   Cara Membuat Halaman Utama Website dengan HTML dan CSS

Berikut ini file css yang dapat Anda tambahkan untuk dapat membuat website cv menggunakan html dan css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

header img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-top: 20px;
}

.contact, .summary, .experience, .education, .skills {
    margin-top: 30px;
}

.contact p, .summary p, .experience p, .education p {
    margin: 10px 0;
}

.job, .degree {
    margin-bottom: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}
 

5. Mengubah Tampilan Website CV

Sekarang, saatnya untuk mengubah tampilan dari website CV Anda sesuai dengan keinginan Anda. Anda dapat menambahkan elemen-elemen seperti informasi pribadi, pengalaman kerja, pendidikan, keterampilan, dan lainnya ke dalam file “website_cv.html” yang telah Anda buat sebelumnya. Selanjutnya, Anda dapat mengatur tata letak dan gaya halaman menggunakan CSS di file “style.css“.

6. Save & View Tampilan

Setelah Anda puas dengan tata letak dan tampilan website CV Anda, pastikan untuk menyimpan semua perubahan yang telah Anda buat. Kemudian, buka file “website_cv.html” di browser web Anda untuk melihat tampilan akhir dari website CV Anda. Jika ada yang perlu diperbaiki, Anda dapat kembali mengedit file HTML dan CSS sesuai kebutuhan.

Preview hasil

Berikut ini preview hasil website cv menggunakan html dan css jika Anda berhasil membuatnya:

Penutup

Dengan memahami dasar-dasar HTML dan CSS, Anda dapat membuat website CV yang memikat dengan sedikit usaha. Tidak berhenti di situ, website CV Anda dapat terus diperbarui dan ditingkatkan seiring berjalannya waktu. Jangan ragu untuk menambahkan proyek-proyek terbaru, sertifikasi, atau pengalaman kerja yang baru untuk menjaga informasi Anda tetap relevan dan up-to-date.

Artikel Terkait:   Cara Membuat Website Sederhana dengan HTML dan CSS

Jangan lupa untuk membagikan website CV Anda di platform media sosial dan jaringan profesional Anda untuk meningkatkan jangkauan dan kesempatan Anda mendapatkan tawaran pekerjaan yang diinginkan. Semoga panduan ini bermanfaat bagi Anda dalam membangun kehadiran digital yang mengesankan dan membawa kesuksesan dalam karir Anda.

Terima kasih telah mengikuti panduan ini. Sukses untuk perjalanan Anda mencari pekerjaan!

Related posts: