DEV Community: Dhiecoderweb

Cara Membuat Dark Mode dengan CSS

Dhiecoderweb — Tue, 11 Aug 2026 16:01:16 +0000

Dark mode (mode gelap) sudah menjadi fitur standar yang diharapkan pengguna di website modern. Selain terlihat elegan, dark mode juga mengurangi kelelahan mata saat browsing di malam hari. Artikel ini membahas dua pendekatan membuat dark mode: otomatis mengikuti preferensi sistem operasi, dan manual dengan tombol toggle yang bisa diklik pengguna.

Konsep Dasar: CSS Variable untuk Theming

Kunci implementasi dark mode yang bersih adalah menggunakan CSS Variable. Definisikan semua warna sebagai variabel, lalu ubah nilainya untuk tema gelap:

/* Tema terang (default) */
:root {
  --warna-bg: #ffffff;
  --warna-bg-sekunder: #f8fafc;
  --warna-teks: #1e293b;
  --warna-teks-muted: #64748b;
  --warna-border: #e2e8f0;
  --warna-kartu: #ffffff;
  --warna-shadow: rgba(0, 0, 0, 0.08);
  --warna-utama: #3b82f6;
  --warna-utama-hover: #2563eb;
}

/* Tema gelap */
[data-tema="gelap"] {
  --warna-bg: #0f172a;
  --warna-bg-sekunder: #1e293b;
  --warna-teks: #f1f5f9;
  --warna-teks-muted: #94a3b8;
  --warna-border: #334155;
  --warna-kartu: #1e293b;
  --warna-shadow: rgba(0, 0, 0, 0.3);
  --warna-utama: #60a5fa;
  --warna-utama-hover: #93c5fd;
}

Menerapkan Variabel ke Elemen

body {
  background-color: var(--warna-bg);
  color: var(--warna-teks);
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: system-ui, sans-serif;
}

.kartu {
  background: var(--warna-kartu);
  border: 1px solid var(--warna-border);
  box-shadow: 0 2px 8px var(--warna-shadow);
  border-radius: 12px;
  padding: 24px;
}

.teks-muted {
  color: var(--warna-teks-muted);
}

.tombol {
  background: var(--warna-utama);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.tombol:hover {
  background: var(--warna-utama-hover);
}

input, textarea {
  background: var(--warna-bg-sekunder);
  color: var(--warna-teks);
  border: 1px solid var(--warna-border);
  padding: 10px 14px;
  border-radius: 8px;
  width: 100%;
}

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Membuat Dark Mode dengan CSS

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.

Cara Menggunakan Git dan GitHub untuk Pemula

Dhiecoderweb — Tue, 11 Aug 2026 16:01:13 +0000

Jika kamu baru terjun ke dunia programming, salah satu hal pertama yang perlu kamu kuasai adalah Git dan GitHub. Git adalah sistem version control yang memungkinkan kamu melacak setiap perubahan kode, berkolaborasi dengan tim, dan kembali ke versi sebelumnya jika terjadi kesalahan. GitHub adalah platform hosting berbasis cloud untuk menyimpan repositori Git secara online. Kombinasi keduanya menjadi standar industri bagi hampir semua developer profesional.

Apa Itu Git dan Mengapa Penting?

Bayangkan kamu mengerjakan proyek dan tanpa sengaja menghapus kode penting. Tanpa Git, kamu harus mengingat ulang dari awal. Dengan Git, kamu cukup kembali ke commit sebelumnya. Git juga memudahkan kolaborasi — banyak developer bisa bekerja di proyek yang sama tanpa saling menimpa pekerjaan masing-masing.

Instalasi Git

Unduh Git dari situs resmi https://git-scm.com dan ikuti proses instalasi sesuai sistem operasimu. Setelah terpasang, verifikasi dengan perintah berikut di terminal:

git --version

Selanjutnya, atur identitasmu agar setiap commit tercatat atas namamu:

git config --global user.name "Nama Kamu"
git config --global user.email "email@kamu.com"

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Menggunakan Git dan GitHub untuk Pemula

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.

Perintah Git Dasar yang Wajib Dikuasai Developer

Dhiecoderweb — Tue, 11 Aug 2026 16:01:12 +0000

Menguasai perintah-perintah Git yang paling sering digunakan adalah investasi terbaik bagi seorang developer. Tidak perlu menghafal semua perintah Git sekaligus — cukup kuasai yang paling esensial terlebih dahulu, dan kamu sudah bisa bekerja secara profesional dalam hampir semua proyek. Artikel ini membahas perintah Git dasar beserta contoh penggunaannya yang benar dan relevan.

1. git init — Memulai Repositori Baru

Perintah ini digunakan untuk menginisialisasi repositori Git baru di dalam sebuah folder. Jalankan sekali di awal proyek:

git init

Hasilnya adalah folder tersembunyi .git yang menjadi inti dari sistem version control proyekmu.

2. git clone — Menyalin Repositori

Untuk menyalin repositori dari remote (misalnya GitHub) ke komputer lokal:

git clone https://github.com/username/nama-repo.git

Kamu juga bisa menentukan nama folder tujuan:

git clone https://github.com/username/nama-repo.git folder-lokal

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Perintah Git Dasar yang Wajib Dikuasai Developer

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.

Cara Mengatasi Merge Conflict di Git

Dhiecoderweb — Tue, 11 Aug 2026 16:01:10 +0000

Salah satu situasi yang paling sering membuat developer pemula panik adalah munculnya merge conflict di Git. Tapi jangan khawatir — merge conflict itu normal, bahkan developer berpengalaman pun sering menghadapinya. Memahami cara membacanya dan menyelesaikannya dengan benar adalah keterampilan penting yang akan kamu butuhkan setiap kali bekerja dalam tim.

Apa Itu Merge Conflict?

Merge conflict terjadi ketika dua branch mengubah baris yang sama pada file yang sama, dan Git tidak bisa menentukan secara otomatis versi mana yang harus dipertahankan. Git akan menghentikan proses merge dan meminta kamu untuk menyelesaikan konflik secara manual sebelum melanjutkan.

Konflik biasanya muncul saat:

Dua developer mengubah baris yang sama di file yang sama.
Satu orang mengubah file sementara orang lain menghapusnya.
Melakukan rebase pada branch yang sudah lama tidak disinkronkan dengan main.

Contoh Skenario Merge Conflict

Bayangkan kamu dan rekan timmu sama-sama mengubah file index.html di baris yang sama. Ketika kamu mencoba merge branch rekanmu ke branch kamu:

git checkout main
git merge fitur-header

Git menampilkan pesan seperti ini:

Auto-merging index.html
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Mengatasi Merge Conflict di Git

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.

Cara Membuat Form yang Menarik dengan CSS

Dhiecoderweb — Tue, 11 Aug 2026 14:00:08 +0000

Form adalah komponen penting di hampir setiap website — mulai dari form login, registrasi, hingga form kontak. Sayangnya, tampilan form HTML bawaan browser seringkali terlihat membosankan dan tidak konsisten antar browser. Dengan CSS, kamu bisa mengubah form menjadi terlihat profesional dan nyaman digunakan. Artikel ini membahas cara membuat form yang menarik dari awal.

Reset Style Bawaan Browser

Langkah pertama adalah me-reset tampilan bawaan elemen form agar konsisten di semua browser:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
}

Struktur HTML Form

Gunakan struktur yang semantik dan aksesibel:

<form class="form-keren" novalidate>
  <h2>Hubungi Kami</h2>

  <div class="form-grup">
    <label for="nama">Nama Lengkap</label>
    <input type="text" id="nama" name="nama" placeholder="Masukkan nama kamu">
  </div>

  <div class="form-grup">
    <label for="email">Alamat Email</label>
    <input type="email" id="email" name="email" placeholder="nama@email.com">
  </div>

  <div class="form-grup">
    <label for="topik">Topik</label>
    <select id="topik" name="topik">
      <option value="">Pilih topik...</option>
      <option value="umum">Pertanyaan Umum</option>
      <option value="teknis">Masalah Teknis</option>
      <option value="kerjasama">Kerjasama</option>
    </select>
  </div>

  <div class="form-grup">
    <label for="pesan">Pesan</label>
    <textarea id="pesan" name="pesan" rows="5"
              placeholder="Tulis pesan kamu di sini..."></textarea>
  </div>

  <button type="submit" class="tombol-kirim">Kirim Pesan</button>
</form>

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Membuat Form yang Menarik dengan CSS

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.

Cara Menggunakan Bootstrap 5 untuk Pemula

Dhiecoderweb — Tue, 11 Aug 2026 14:00:07 +0000

Bootstrap adalah framework CSS paling populer di dunia yang memungkinkan kamu membangun website responsif dengan cepat tanpa harus menulis banyak CSS dari nol. Bootstrap 5 adalah versi terbaru yang lebih ringan, tidak lagi membutuhkan jQuery, dan memiliki banyak komponen siap pakai. Artikel ini memandu kamu mulai dari instalasi hingga penggunaan komponen-komponen penting Bootstrap 5.

Cara Memasang Bootstrap 5

Ada dua cara menggunakan Bootstrap 5:

1. Via CDN (Cara Tercepat)

Tambahkan link berikut di dalam <head> HTML kamu:

<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet">

<!-- JS Bootstrap (di akhir body) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
</script>

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Menggunakan Bootstrap 5 untuk Pemula

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.

Perbedaan Position Relative, Absolute, dan Fixed di CSS

Dhiecoderweb — Tue, 11 Aug 2026 14:00:06 +0000

Properti position di CSS adalah salah satu yang paling sering membingungkan bagi pemula. Memahami perbedaan antara relative, absolute, fixed, dan sticky sangat penting karena masing-masing berperilaku sangat berbeda. Artikel ini menjelaskan setiap nilai dengan contoh nyata agar mudah dipahami.

Nilai-nilai Properti Position

CSS memiliki lima nilai untuk properti position:

static — nilai default, mengikuti alur normal dokumen
relative — digeser relatif terhadap posisi normalnya
absolute — diposisikan relatif terhadap ancestor yang ber-position
fixed — diposisikan relatif terhadap viewport (jendela browser)
sticky — kombinasi relative dan fixed

Properti top, right, bottom, dan left digunakan bersama position (kecuali static) untuk mengatur offset posisi elemen.

position: static (Default)

Ini adalah nilai default setiap elemen. Elemen mengikuti alur normal dokumen HTML dan tidak terpengaruh oleh top, right, bottom, atau left.

.elemen {
  position: static; /* default, tidak perlu ditulis */
}

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Perbedaan Position Relative, Absolute, dan Fixed di CSS

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.

Cara Membuat Navbar Responsive dengan HTML dan CSS

Dhiecoderweb — Tue, 11 Aug 2026 11:00:20 +0000

Navigasi bar (navbar) adalah komponen paling penting di hampir setiap website. Membuat navbar yang responsive — tampil dengan baik di desktop maupun mobile — adalah skill wajib bagi frontend developer. Artikel ini memandu kamu membuat navbar responsive lengkap dengan hamburger menu untuk mobile, menggunakan HTML dan CSS murni tanpa library.

Struktur HTML Navbar

Pertama, buat struktur HTML yang semantik menggunakan tag <nav>:

<nav class="navbar">
  <div class="nav-container">

    <!-- Logo -->
    <a href="#" class="nav-logo">MyBrand</a>

    <!-- Tombol Hamburger (untuk mobile) -->
    <button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
      <span class="hamburger"></span>
      <span class="hamburger"></span>
      <span class="hamburger"></span>
    </button>

    <!-- Menu -->
    <ul class="nav-menu" id="navMenu">
      <li class="nav-item"><a href="#" class="nav-link">Beranda</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Tentang</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Layanan</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
      <li class="nav-item">
        <a href="#" class="nav-link nav-cta">Hubungi Kami</a>
      </li>
    </ul>

  </div>
</nav>

CSS untuk Navbar Desktop

Mulai dengan gaya dasar untuk tampilan desktop (mobile first, lalu expand ke desktop):

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: #1e293b;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-logo {
  color: white;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 1px;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 8px;
  align-items: center;
}

.nav-link {
  color: #cbd5e1;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: background-color 0.2s, color 0.2s;
}

.nav-link:hover {
  background-color: #334155;
  color: white;
}

.nav-cta {
  background-color: #3b82f6;
  color: white !important;
}

.nav-cta:hover {
  background-color: #2563eb !important;
}

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Membuat Navbar Responsive dengan HTML dan CSS

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.

Cara Membuat Animasi dengan CSS

Dhiecoderweb — Tue, 11 Aug 2026 11:00:19 +0000

Animasi membuat website terasa lebih hidup dan interaktif. CSS menyediakan dua cara utama untuk membuat animasi: transition untuk animasi sederhana saat perubahan state, dan @keyframes untuk animasi yang lebih kompleks dan berulang. Artikel ini akan membahas keduanya dengan contoh kode yang bisa langsung kamu gunakan.

CSS Transition: Animasi Sederhana

CSS Transition digunakan untuk menganimasikan perubahan nilai properti CSS dari satu state ke state lain, misalnya saat hover. Properti transition memiliki empat nilai:

property — properti CSS yang akan dianimasikan
duration — durasi animasi (dalam detik)
timing-function — kurva kecepatan animasi
delay — jeda sebelum animasi mulai

.tombol {
  background-color: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.tombol:hover {
  background-color: #1d4ed8; /* berubah warna saat hover */
}

Transition untuk Beberapa Properti

.kartu {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kartu:hover {
  transform: translateY(-8px); /* naik ke atas */
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Atau gunakan 'all' untuk semua properti */
.elemen {
  transition: all 0.3s ease;
}

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Membuat Animasi dengan CSS

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.

Cara Menggunakan Git Branch dan Workflow Tim

Dhiecoderweb — Tue, 11 Aug 2026 09:47:07 +0000

Salah satu fitur terkuat Git adalah sistem branching. Branch memungkinkan developer bekerja pada fitur atau perbaikan secara terpisah tanpa mengganggu kode utama yang sudah berjalan. Ketika bekerja dalam tim, memiliki strategi branching yang jelas adalah kunci agar kolaborasi berjalan lancar dan kode tetap stabil.

Apa Itu Git Branch?

Branch adalah jalur pengembangan yang independen. Secara default, Git membuat branch bernama main (atau master di versi lama). Kamu bisa membuat branch baru untuk mengerjakan fitur, perbaikan bug, atau eksperimen tanpa menyentuh kode di branch main.

Analogi sederhananya: branch seperti salinan proyekmu yang bisa kamu ubah secara bebas. Setelah selesai, kamu bisa menggabungkannya kembali ke versi utama.

Perintah Dasar Git Branch

Melihat daftar branch yang ada:

git branch

Membuat branch baru:

git branch fitur-login

Berpindah ke branch lain:

git checkout fitur-login

Cara lebih cepat — membuat dan langsung berpindah ke branch baru:

git checkout -b fitur-register

Atau menggunakan perintah modern:

git switch -c fitur-register

Menghapus branch yang sudah tidak dibutuhkan:

git branch -d fitur-login

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Menggunakan Git Branch dan Workflow Tim

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.

Cara Menggunakan VS Code Secara Efektif untuk Coding

Dhiecoderweb — Tue, 11 Aug 2026 09:46:53 +0000

Visual Studio Code (VS Code) adalah editor kode paling populer di dunia saat ini. Ringan, gratis, dan didukung ekosistem extension yang sangat kaya, VS Code menjadi pilihan utama jutaan developer dari berbagai bidang. Namun banyak yang hanya menggunakannya sebagai teks editor biasa, padahal ada segudang fitur dan shortcut yang bisa melipatgandakan produktivitas kamu jika dimanfaatkan dengan benar.

Instalasi dan Konfigurasi Awal

Unduh VS Code dari https://code.visualstudio.com. Setelah terpasang, aktifkan beberapa pengaturan dasar yang akan meningkatkan kenyamanan kerja. Buka Command Palette dengan Ctrl+Shift+P (atau Cmd+Shift+P di Mac), ketik Open Settings JSON, dan tambahkan konfigurasi berikut:

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "files.autoSave": "onFocusChange"
}

Shortcut Keyboard yang Wajib Dikuasai

Shortcut adalah cara paling cepat meningkatkan kecepatan kerja di VS Code:

Ctrl+P — Buka file dengan cepat (Quick Open).
Ctrl+Shift+P — Buka Command Palette.
Ctrl+` — Buka terminal terintegrasi.
Alt+Up/Down — Pindahkan baris ke atas atau bawah.
Ctrl+D — Pilih kata berikutnya yang sama (multi-cursor editing).
Ctrl+Shift+K — Hapus seluruh baris.
Ctrl+/ — Toggle komentar pada baris terpilih.
F12 — Go to Definition (lompat ke definisi fungsi atau variabel).
Ctrl+B — Toggle sidebar.
Ctrl+Shift+F — Pencarian di seluruh proyek.

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Menggunakan VS Code Secara Efektif untuk Coding

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.

Cara Menggunakan CSS Variable (Custom Properties)

Dhiecoderweb — Tue, 11 Aug 2026 08:00:10 +0000

CSS Variable, atau yang secara resmi disebut CSS Custom Properties, adalah fitur CSS modern yang memungkinkan kamu menyimpan nilai tertentu di dalam variabel dan menggunakannya berulang kali di seluruh stylesheet. Fitur ini membuat kode CSS lebih mudah dikelola, konsisten, dan mendukung fitur seperti theming dan dark mode. Artikel ini akan membahas cara menggunakannya dari dasar.

Apa Itu CSS Variable?

CSS Variable adalah nilai yang kamu definisikan sekali dan bisa digunakan berulang kali. Jika kamu ingin mengubah warna utama website, cukup ubah satu nilai saja — semua elemen yang menggunakan variabel tersebut akan ikut berubah secara otomatis.

Cara Mendefinisikan CSS Variable

CSS Variable didefinisikan dengan diawali dua tanda hubung (--). Biasanya ditempatkan di dalam selektor :root agar tersedia secara global:

:root {
  --warna-utama: #3b82f6;
  --warna-sekunder: #10b981;
  --warna-teks: #1e293b;
  --warna-latar: #f8fafc;
  --ukuran-font-dasar: 16px;
  --radius-border: 8px;
  --bayangan: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Menggunakan CSS Variable (Custom Properties)

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.