💻

Panduan Membuat Website CV

Feb 23, 2025

Cara Membuat Website untuk CV

Pendahuluan

  • Website sederhana dibangun dengan HTML dan CSS.
  • Contoh website CV untuk Cristiano Ronaldo.
  • Fitur website: gambar, tombol kirim email, tombol WhatsApp, dan bagian-bagian seperti About, Experience, dan Achievements.

Langkah-langkah Membuat Website

  1. Desain Wireframe

    • Wireframe adalah desain layout website.
    • Menentukan posisi gambar, teks, dan warna.

  2. Mempersiapkan Aset

    • Aset yang diperlukan: teks, gambar, video, dan link.
    • Contoh: Favicon diambil dari favicon.cc.
    • Pastikan ukuran gambar sesuai (contoh: 400x400 px).

  3. Menulis Kode

    • Menggunakan front-end code (HTML, CSS, JS).
    • Contoh: Membuat file index.html dan style.css.

  4. Hosting

    • Hosting agar website dapat diakses di internet.
    • Jenis hosting: Managed Hosting (contoh: GitHub Pages) dan Self Hosting.
    • GitHub Pages gratis dan sederhana.

Membuat File HTML

  • Buat template HTML dengan tag dasar.
  • Ganti title menjadi "CV Cristiano Ronaldo".
  • Tambahkan link untuk favicon.

Struktur HTML

  • Bagi menjadi dua div: left container dan right container.
  • Kode awal: <div class="left-container"></div> <div class="right-container"></div>

CSS Styling

  • Buat file CSS dan link ke file HTML.
  • Mengatur warna, ukuran, dan posisi elemen menggunakan CSS.
  • Contoh: mengatur left-container dengan lebar 400px dan posisi fixed.

Mengatur Gambar dan Tombol

  • Menyusun gambar dan tombol dalam div baru (contoh: photo-contact).
  • Mengatur ukuran gambar dan tombol agar lebih responsif.
  • Menambahkan hover effect pada tombol.

Menambahkan Fungsi JavaScript

  • Menambahkan fungsi pada tombol sehingga membuka email dan WhatsApp di jendela baru. window.open('https://wa.me/nomortelepon', '_blank');

Mengatur Bagian Right Container

  • Menambahkan elemen untuk menu navigasi (CV, About, Resume, Contact).
  • Mengimplementasikan anchor links.

Membuat Section

  • Buat section untuk About, Experience, dan Achievements menggunakan ID: <div id="about"></div> <div id="experience"></div> <div id="achievement"></div>

Menghosting di GitHub

  • Buat akun GitHub dan repository baru (misal: CV).
  • Drag dan upload semua file (HTML, CSS, gambar).
  • Atur GitHub Pages di settings dan pilih branch main.

Kesimpulan

  • Website CV telah selesai dan dapat diakses melalui internet.
  • Ajak teman untuk mencoba dan memberikan feedback.

Full transcript