Proyek Nyata Pemula: Memadukan HTML, CSS, dan Logika Koding Menjadi Kartu Interaktif

Pernahkah kamu merasa sudah membaca banyak artikel dan menonton banyak tutorial video, tapi saat membuka editor koding yang kosong, tanganmu tiba-tiba kaku dan tidak tahu harus mulai mengetik apa? Jangan khawatir, hampir semua programmer pernah mengalami sindrom ini!

Kunci untuk mengatasi rasa ragu adalah langsung membangun proyek mini yang nyata. Di artikel ini, kita tidak hanya belajar teori terpisah — kita akan menggabungkan HTML (struktur), CSS (keindahan visual), dan sedikit logika JavaScript (interaktivitas) menjadi sebuah Kartu Profil Pengembang Interaktif yang bisa langsung kamu pamerkan!

Tiga Pilar Pembangunan Web

Mari kita ingat kembali peran ketiga teknologi ini:

1. HTML: Menyediakan konten (foto profil, nama, deskripsi, dan tombol).
2. CSS: Membuat kartu berada di tengah layar, memberikan latar belakang putih melengkung yang elegan, dan menambahkan bayangan halus.
3. JavaScript: Membuat tombol bisa diklik dan merespons dengan pesan ramah serta menghitung jumlah apresiasi (like).

Langkah 1: Menyiapkan Struktur HTML

Ketik atau salin kode struktur berikut ke dalam editor:

<div class="kartu-profil">
    <div class="badge-status">Sedang Belajar Koding</div>
    <h2 id="nama-user">Nathania Putri</h2>
    <p class="profesi">Calon Web & AI Engineer • Kupang, NTT</p>
    <p class="bio">
        "Saya sedang aktif mempelajari HTML5 semantik, estetika CSS modern, 
        dan pemanfaatan AI untuk memecahkan masalah sehari-hari."
    </p>
    
    <div class="aksi-container">
        <button class="btn-sapa" onclick="kirimSalam()">👋 Kirim Salam</button>
        <button class="btn-like" onclick="tambahLike()">❤️ Suka (<span id="jumlah-like">0</span>)</button>
    </div>
</div>

Langkah 2: Menghias dengan CSS Modern

Tambahkan kode CSS berikut di dalam tag <style> untuk memberikan sentuhan desain berstandar industri:

<style>
    /* Reset & Font Dasar */
    body {
        font-family: 'Segoe UI', Roboto, sans-serif;
        background: #f1f5f9;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80vh;
        margin: 0;
        padding: 20px;
    }

    /* Wadah Kartu Utama */
    .kartu-profil {
        background: #ffffff;
        border-radius: 24px;
        padding: 32px;
        max-width: 420px;
        width: 100%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        text-align: center;
        border: 1px solid #e2e8f0;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .kartu-profil:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
    }

    .badge-status {
        display: inline-block;
        background: #dbeafe;
        color: #1d4ed8;
        font-size: 12px;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 999px;
        margin-bottom: 16px;
    }

    h2 {
        color: #0f172a;
        margin: 0 0 6px 0;
        font-size: 22px;
    }

    .profesi {
        color: #2563eb;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .bio {
        color: #64748b;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 24px;
    }

    .aksi-container {
        display: flex;
        gap: 12px;
        justify-content: center;
    }

    button {
        border: none;
        padding: 10px 20px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-sapa {
        background: #2563eb;
        color: white;
    }
    .btn-sapa:hover {
        background: #1d4ed8;
    }

    .btn-like {
        background: #f8fafc;
        color: #334155;
        border: 1px solid #cbd5e1;
    }
    .btn-like:hover {
        background: #fee2e2;
        color: #dc2626;
        border-color: #fca5a5;
    }
</style>

Langkah 3: Memberi "Nyawa" dengan Logika JavaScript

Sekarang mari kita buat agar tombol tersebut benar-benar bereaksi ketika diklik pengunjung:

<script>
    // Variabel untuk melacak jumlah like
    let totalLike = 0;

    function kirimSalam() {
        alert("Halo dari Nathania! Terima kasih sudah mampir ke profil koding saya 😊");
    }

    function tambahLike() {
        totalLike = totalLike + 1;
        document.getElementById("jumlah-like").innerText = totalLike;
    }
</script>

Uji Coba Sekarang di Live Playground!

Buka Live Playground VxAI, satukan ketiga blok kode di atas (HTML, style CSS, dan script JS), lalu klik tombol "Kirim Salam" dan "Suka". Angka like akan otomatis bertambah secara real-time di layar!

Sensasi melihat idemu berubah menjadi tampilan hidup di browser inilah yang membuat jutaan programmer di seluruh dunia jatuh cinta pada dunia koding. Selamat berkarya, dan teruslah mencoba tantangan-tantangan baru!