Tujuan utama kita adalah membangun model yang andal dengan menangani berbagai tantangan dalam data, seperti nilai yang hilang (missing values) dan data yang tidak seimbang (imbalanced data).

Alur Kerja Proyek

Berikut adalah langkah-langkah yang akan kita lalui dalam proyek ini:

1. Impor Library: Menyiapkan semua library Python yang dibutuhkan.

2. Muat & Eksplorasi Data: Memuat dataset dan melakukan eksplorasi awal untuk memahami karakteristiknya.

3. Pembersihan & Pra-pemrosesan Data:

   • Menangani nilai yang hilang.

   • Melakukan One-Hot Encoding untuk fitur kategorikal.

   • Memisahkan data menjadi set pelatihan (training) dan pengujian (testing).

   • Menerapkan Feature Scaling menggunakan StandardScaler.

4. Penyeimbangan Data (SMOTE): Mengatasi masalah kelas tidak seimbang pada data pelatihan.

5. Pelatihan Model: Melatih model Regresi Logistik.

6. Evaluasi Model: Mengevaluasi performa model pada data pengujian.

1. Impor Library

Langkah pertama adalah mengimpor semua library yang kita perlukan untuk analisis dan pemodelan.

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import seaborn as sns
from sklearn.model_selection import train_test_split
from sklearn.linear_model import LogisticRegression
from sklearn.metrics import accuracy_score, confusion_matrix, classification_report
from sklearn.preprocessing import StandardScaler, OneHotEncoder
from sklearn.compose import ColumnTransformer
from imblearn.over_sampling import SMOTE

sns.set_style('whitegrid')

2. Muat & Eksplorasi Data

Kita akan memuat dataset loan.csv dan melihat beberapa baris pertama serta informasi dasarnya. Kolom Loan_ID tidak relevan untuk prediksi, jadi kita akan menghapusnya.

df = pd.read_csv('loan.csv')
df = df.drop('Loan_ID', axis=1)
print(df.head())

Output:

   Gender Married Dependents     Education Self_Employed  ApplicantIncome  \
0   Male      No          0      Graduate            No             5849
1   Male     Yes          1      Graduate            No             4583
2   Male     Yes          0      Graduate           Yes             3000
3   Male     Yes          0  Not Graduate            No             2583
4   Male      No          0      Graduate            No             6000

   CoapplicantIncome  LoanAmount  Loan_Amount_Term  Credit_History  \
0                0.0         NaN             360.0             1.0
1             1508.0       128.0             360.0             1.0
2                0.0        66.0             360.0             1.0
3             2358.0       120.0             360.0             1.0
4                0.0       141.0             360.0             1.0

  Property_Area Loan_Status
0         Urban           Y
1         Rural           N
2         Urban           Y
3         Urban           Y
4         Urban           Y

Mari kita lihat distribusi dari variabel target kita, Loan_Status.

sns.countplot(x='Loan_Status', data=df)
plt.title('Distribusi Status Persetujuan Pinjaman')
plt.show()

Dari plot, kita bisa melihat bahwa jumlah pinjaman yang disetujui ('Y') lebih banyak daripada yang ditolak ('N'). Ini menunjukkan adanya ketidakseimbangan kelas, yang perlu kita tangani nanti.

Selanjutnya, kita lihat hubungan antara riwayat kredit (Credit_History) dengan status pinjaman.

sns.countplot(x='Credit_History', hue='Loan_Status', data=df)
plt.title('Riwayat Kredit vs. Status Pinjaman')
plt.show()

Visualisasi ini menunjukkan bahwa nasabah dengan riwayat kredit yang baik (nilai 1.0) memiliki kemungkinan yang jauh lebih tinggi untuk mendapatkan persetujuan pinjaman.

3. Pembersihan & Pra-pemrosesan Data

Mengisi Nilai yang Hilang

Data mentah seringkali memiliki nilai yang hilang. Kita akan mengisinya menggunakan strategi yang sesuai: modus (nilai yang paling sering muncul) untuk data kategorikal dan median untuk data numerik.

# Pisahkan kolom berdasarkan tipe data
categorical_cols = df.select_dtypes(include=['object']).columns.drop('Loan_Status')
numerical_cols = df.select_dtypes(include=np.number).columns

# Isi nilai hilang dengan modus untuk kategorikal
for col in categorical_cols:
    df[col] = df[col].fillna(df[col].mode()[0])

# Isi nilai hilang dengan median untuk numerik
for col in numerical_cols:
    df[col] = df[col].fillna(df[col].median())

Menangani Kolom Target

Kolom target Loan_Status masih dalam format 'Y' dan 'N'. Kita perlu mengubahnya menjadi format numerik (1 dan 0).

df['Loan_Status'] = df['Loan_Status'].map({'Y': 1, 'N': 0})
df.dropna(subset=['Loan_Status'], inplace=True)
df['Loan_Status'] = df['Loan_Status'].astype(int)

Pemisahan Data dan Pra-pemrosesan Lanjutan

Setelah data bersih, kita pisahkan antara fitur (X) dan target (y). Kemudian, kita bagi menjadi data latih dan data uji.

X = df.drop('Loan_Status', axis=1)
y = df['Loan_Status']

X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42, stratify=y)

Kita akan membuat sebuah pipeline pra-pemrosesan menggunakan ColumnTransformer untuk menerapkan StandardScaler pada fitur numerik dan OneHotEncoder pada fitur kategorikal.

numerical_features = X.select_dtypes(include=np.number).columns
categorical_features = X.select_dtypes(include=['object']).columns

preprocessor = ColumnTransformer(
    transformers=[
        ('num', StandardScaler(), numerical_features),
        ('cat', OneHotEncoder(handle_unknown='ignore'), categorical_features)
    ])

X_train_processed = preprocessor.fit_transform(X_train)
X_test_processed = preprocessor.transform(X_test)

4. Penyeimbangan Data (SMOTE)

Seperti yang kita lihat sebelumnya, data kita tidak seimbang. Ini dapat menyebabkan model menjadi bias terhadap kelas mayoritas. Untuk mengatasinya, kita akan menggunakan teknik oversampling yang disebut SMOTE (Synthetic Minority Over-sampling Technique) hanya pada data pelatihan.

print(f'Distribusi kelas sebelum SMOTE: \n{y_train.value_counts()}\n')

smote = SMOTE(random_state=42)
X_train_resampled, y_train_resampled = smote.fit_resample(X_train_processed, y_train)

print(f'Distribusi kelas setelah SMOTE: \n{pd.Series(y_train_resampled).value_counts()}')

Output:

Distribusi kelas sebelum SMOTE: 
Loan_Status
1    337
0    154
Name: count, dtype: int64

Distribusi kelas setelah SMOTE: 
Loan_Status
1    337
0    337
Name: count, dtype: int64

Sekarang, kelas minoritas dan mayoritas pada data pelatihan kita sudah seimbang.

5. Pelatihan Model

Dengan data yang sudah siap, kita akan melatih model Regresi Logistik.

model = LogisticRegression(random_state=42)
model.fit(X_train_resampled, y_train_resampled)

6. Evaluasi Model

Langkah terakhir adalah mengevaluasi performa model kita pada data uji yang belum pernah dilihat sebelumnya.

y_pred = model.predict(X_test_processed)

print(f"Akurasi Model: {accuracy_score(y_test, y_pred) * 100:.2f}%")
print('---' * 20)
print("Laporan Klasifikasi:")
print(classification_report(y_test, y_pred))
print('---' * 20)

print("Confusion Matrix:")
cm = confusion_matrix(y_test, y_pred)
sns.heatmap(cm, annot=True, fmt='d', cmap='Blues')
plt.xlabel('Prediksi')
plt.ylabel('Aktual')
plt.title('Confusion Matrix')
plt.show()

Output:

Akurasi Model: 82.11%
------------------------------------------------------------
Laporan Klasifikasi:
              precision    recall  f1-score   support

           0       0.72      0.68      0.70        38
           1       0.86      0.88      0.87        85

    accuracy                           0.82       123
   macro avg       0.79      0.78      0.79       123
weighted avg       0.82      0.82      0.82       123

------------------------------------------------------------
Confusion Matrix:

Dari hasil evaluasi, model kita mencapai akurasi sekitar 82.11%. Precision dan recall untuk kelas 1 (disetujui) cukup tinggi, menunjukkan model sangat baik dalam mengidentifikasi pemohon yang layak. Recall untuk kelas 0 (ditolak) adalah 0.68, yang berarti model berhasil mengidentifikasi 68% dari semua pemohon yang seharusnya ditolak.

Kesimpulan

Kita telah berhasil membangun sebuah model machine learning dari awal hingga akhir untuk memprediksi persetujuan pinjaman. Proses ini melibatkan pembersihan data, rekayasa fitur, penanganan data tidak seimbang dengan SMOTE, dan pelatihan model Regresi Logistik. Model yang dihasilkan menunjukkan performa yang baik dan dapat menjadi dasar untuk sistem pengambilan keputusan pinjaman yang lebih canggih.

Mengenali karakteristik pelanggan adalah faktor kunci dalam bisnis ritel. Siapa pelanggan Anda? Apa yang mereka inginkan? Bagaimana perilaku belanja mereka? Jawaban dari pertanyaan-pertanyaan ini dapat membantu tim pemasaran merancang strategi yang lebih tajam, relevan, dan pada akhirnya , lebih menguntungkan.

pada studi kasus ini berfokus untuk melakukan segmentasi pelanggan sebuah mall menggunakan salah satu algoritma unsupervised learning paling populer: K-Means Clustering. Tujuannya adalah mengelompokkan pelanggan ke dalam segmen-segmen berbeda berdasarkan dua metrik sederhana namun kuat: pendapatan tahunan (annual income) dan skor pengeluaran (spending score).

Dengan analisis ini, membantu untuk bisa mengidentifikasi kelompok pelanggan mana yang paling potensial, mana yang perlu pendekatan khusus, dan mana yang mungkin tidak perlu menjadi prioritas.

Dataset

Studi kasus ini menggunakan dataset Mall_Customers.csv dari sebuah dataset di kaggle, yang berisi informasi dasar tentang pelanggan, termasuk:

• CustomerID: ID unik.

• Gender: Jenis kelamin.

• Age: Usia.

• Annual Income (k$): Pendapatan tahunan dalam ribuan dolar.

• Spending Score (1-100): Skor yang diberikan oleh mall berdasarkan perilaku belanja.

Untuk analisis ini, kita akan fokus pada Annual Income dan Spending Score.

Langkah-langkah Analisis

Proses analisis kita akan melalui beberapa tahapan:

1. Eksplorasi Data (EDA): Memahami data lebih dalam.

2. Pemilihan Fitur: Memilih kolom yang akan digunakan untuk clustering.

3. Menentukan Jumlah Cluster (K) Optimal: Menggunakan metode "Elbow" untuk menemukan jumlah segmen yang paling pas.

4. Melatih Model K-Means: Mengelompokkan data menggunakan K yang sudah ditentukan.

5. Visualisasi dan Interpretasi: Menganalisis hasil segmentasi.

Eksplorasi Data (EDA)

Pertama, mengimpor pustaka yang diperlukan dan memuat data dan melihat isi datanya.

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import seaborn as sns
from sklearn.cluster import KMeans

sns.set_style('whitegrid')
df = pd.read_csv('Mall_Customers.csv')
df.head()
df.info()
df.describe()
df.isnull().sum

• import pustaka dan memuat data

menampilkan eksplorasi data dan statistik deskriptif

cek data null/kosong

Dari hasil di atas, kita bisa melihat bahwa data kita bersih, tidak ada nilai yang hilang (null), dan siap untuk diolah.

Pemilihan Fitur

Seperti yang disebutkan sebelumnya, kita hanya akan menggunakan Annual Income (k$) dan Spending Score (1-100) untuk membuat model segmentasi 2D yang mudah divisualisasikan.

# Membuat dataframe baru yang hanya berisi fitur yang dipilih
X = df[['Annual Income (k$)', 'Spending Score (1-100)']].values

Menentukan Jumlah Cluster (K) Optimal dengan Metode Elbow

Salah satu tantangan dalam K-Means adalah menentukan berapa banyak cluster (K) yang harus kita buat. Terlalu sedikit, segmennya akan terlalu umum. Terlalu banyak, segmennya menjadi tidak bermakna.

Metode Elbow membantu kita menemukan K yang optimal dengan cara menghitung Within-Cluster Sum of Squares (WCSS) untuk berbagai nilai K. WCSS adalah jumlah kuadrat jarak antara setiap titik data dengan pusat cluster-nya. Kita mencari titik "siku" (elbow) pada grafik, di mana penambahan jumlah cluster tidak lagi memberikan penurunan WCSS yang signifikan.

wcss = []
for i in range(1, 11):
    kmeans = KMeans(n_clusters=i, init='k-means++', max_iter=300, n_init=10, random_state=42)
    kmeans.fit(X)
    wcss.append(kmeans.inertia_)

# Plot Elbow Method
plt.figure(figsize=(10, 5))
plt.plot(range(1, 11), wcss)
plt.title('Metode Elbow')
plt.xlabel('Jumlah Clusters (K)')
plt.ylabel('WCSS (Within-Cluster Sum of Squares)')
plt.show()

Dari grafik di atas, kita bisa melihat bahwa "siku" yang paling jelas ada di K=5. Setelah itu, penurunan WCSS mulai melandai. Jadi, kita akan membagi pelanggan kita menjadi 5 segmen.

Melatih Model K-Means

Sekarang kita latih model K-Means dengan K=5.

kmeans = KMeans(n_clusters=5, init='k-means++', max_iter=300, n_init=10, random_state=42)
y_kmeans = kmeans.fit_predict(X)

Variabel y_kmeans sekarang berisi label cluster (dari 0 hingga 4) untuk setiap pelanggan.

Visualisasi dan Interpretasi

Inilah bagian yang paling menarik: melihat hasil segmentasi secara visual.

plt.figure(figsize=(12, 8))

# Plot data points untuk setiap cluster
plt.scatter(X[y_kmeans == 0, 0], X[y_kmeans == 0, 1], s=100, c='red', label='Cluster 1 - Target Utama')
plt.scatter(X[y_kmeans == 1, 0], X[y_kmeans == 1, 1], s=100, c='blue', label='Cluster 2 - Standar')
plt.scatter(X[y_kmeans == 2, 0], X[y_kmeans == 2, 1], s=100, c='green', label='Cluster 3 - Hemat')
plt.scatter(X[y_kmeans == 3, 0], X[y_kmeans == 3, 1], s=100, c='cyan', label='Cluster 4 - Boros')
plt.scatter(X[y_kmeans == 4, 0], X[y_kmeans == 4, 1], s=100, c='magenta', label='Cluster 5 - Prioritas Rendah')

# Plot centroids
plt.scatter(kmeans.cluster_centers_[:, 0], kmeans.cluster_centers_[:, 1], s=300, c='yellow', label='Centroids', edgecolors='black')

plt.title('Segmentasi Pelanggan Mall')
plt.xlabel('Pendapatan Tahunan (k$)')
plt.ylabel('Skor Pengeluaran (1-100)')
plt.legend()
plt.show()

Interpretasi Segmen, Dari visualisasi di atas, kita dapat mendefinisikan 5 persona pelanggan:

1. Target Utama (Merah): Kelompok ini memiliki pendapatan tinggi dan skor pengeluaran tinggi. Mereka adalah pelanggan impian! Strategi pemasaran untuk mereka bisa berupa penawaran produk premium, layanan eksklusif, dan program loyalitas yang menguntungkan.

2. Standar (Biru): Pendapatan dan skor pengeluaran mereka berada di tengah-tengah. Ini adalah basis pelanggan terbesar Anda. Penawaran umum, diskon musiman, dan promosi reguler akan efektif untuk kelompok ini.

3. Hemat (Hijau): Mereka punya uang (pendapatan tinggi), tetapi sangat berhati-hati dalam membelanjakannya (skor pengeluaran rendah). Untuk menarik mereka, fokus pada penawaran "value for money", diskon besar, atau produk berkualitas tinggi yang tahan lama.

4. Boros (Cyan): Kelompok ini unik. Pendapatan mereka rendah, tetapi skor pengeluaran mereka tinggi. Mungkin mereka adalah kaum muda yang impulsif atau mahasiswa. Strategi yang cocok bisa berupa produk tren, cicilan, atau promosi "beli satu gratis satu".

5. Prioritas Rendah (Magenta): Dengan pendapatan dan skor pengeluaran yang sama-sama rendah, kelompok ini mungkin bukan target utama. Upaya pemasaran untuk mereka harus minimal, mungkin cukup dengan informasi diskon umum.

Kesimpulan

Dengan beberapa baris kode Python, kita berhasil mengubah data mentah menjadi wawasan bisnis yang dapat ditindaklanjuti. K-Means Clustering adalah alat yang ampuh untuk menemukan struktur tersembunyi dalam data pelanggan.

Segmentasi ini memungkinkan tim pemasaran untuk berhenti menebak-nebak dan mulai membuat keputusan berbasis data, mengalokasikan sumber daya secara lebih efisien, dan pada akhirnya, membangun hubungan yang lebih baik dengan setiap jenis pelanggan.

JavaScript menjadi sangat berguna dalam pengembangan web karena kemampuannya menangani interaksi pengguna secara real-time, seperti klik, ketikan, hover, scroll, dan lainnya. Mekanisme yang memungkinkan ini disebut Event Handling.

Dalam artikel ini, kita akan mempelajari:

• Apa itu event dan event handler?

• Bagaimana cara kerja addEventListener()

• Tipe-tipe event yang umum digunakan

• Studi kasus sederhana dengan praktik langsung

🧠 1. Apa Itu Event Handling?

Event handling adalah proses menangkap dan merespons aksi yang dilakukan pengguna pada halaman web. Misalnya:

• Menekan tombol (click)

• Mengetik sesuatu (input, keydown)

• Mengarahkan mouse (mouseover, mouseenter)

• Mengirim formulir (submit)

Contoh sederhananya:

<button id="halo">Klik Saya</button>
<script>
  document.getElementById('halo').addEventListener('click', () => {
    alert('Halo dunia!');
  });
</script>

📥 2. Mengenal addEventListener()

Fungsi utama untuk menangani event adalah:

element.addEventListener('eventType', callbackFunction);

Contoh:

document.querySelector('button').addEventListener('click', function () {
  console.log('Tombol diklik!');
});

Menggunakan fungsi panah:

button.addEventListener('click', () => {
  // aksi
});

🧾 3. Jenis-Jenis Event Populer

Beberapa event yang paling sering digunakan:

🛠️ 4. Studi Kasus: Formulir Interaktif

HTML:

<form id="form">
  <input type="text" id="nama" placeholder="Masukkan nama" />
  <button type="submit">Kirim</button>
</form>

JavaScript:

document.getElementById('form').addEventListener('submit', function (e) {
  e.preventDefault(); // mencegah reload halaman
  const nama = document.getElementById('nama').value;
  alert(`Halo, ${nama}!`);
});

Penjelasan:

• e.preventDefault() mencegah halaman refresh otomatis

• Data dari input diambil menggunakan .value

⚠️ 5. Tips & Praktik Terbaik

• Jangan gunakan onclick="..." langsung di HTML — gunakan JavaScript eksternal.

• Pastikan elemen sudah tersedia di DOM sebelum dipanggil (gunakan DOMContentLoaded jika perlu).

• Manfaatkan event delegation untuk elemen yang dinamis atau banyak.

Contoh event delegation:

document.getElementById('parent').addEventListener('click', function(e) {
  if (e.target.classList.contains('child')) {
    console.log('Anak diklik:', e.target.textContent);
  }
});

🧭 Kesimpulan

Kemampuan menangani event merupakan inti dari interaktivitas dalam web development. Dengan memahami cara kerja event dan bagaimana menangani berbagai jenisnya, kamu bisa membuat halaman web yang responsif, interaktif, dan profesional.

🚀 Coba kembangkan fitur kecil seperti kalkulator, form validasi, atau game sederhana menggunakan event handler!

Ketika kamu mulai belajar membangun tampilan website, mungkin kamu mengenal Flexbox terlebih dahulu untuk membuat layout. Namun, saat layout menjadi lebih kompleks—misalnya, kamu ingin membuat galeri gambar, dashboard admin, atau template majalah—di situlah CSS Grid menjadi andalan.

Artikel ini akan membimbingmu memahami dasar-dasar Grid Layout, properti penting, dan bagaimana kamu bisa menggunakannya untuk membuat tampilan web yang rapi dan responsif.

🧩 1. Apa Itu CSS Grid?

CSS Grid adalah sistem layout dua dimensi yang memungkinkan kamu menyusun konten berdasarkan baris (rows) dan kolom (columns). Ini menjadikannya lebih fleksibel dibandingkan Flexbox yang hanya satu dimensi.

Kelebihan Grid:

• Cocok untuk layout besar dan kompleks.

• Mendukung pengaturan garis (line-based positioning).

• Memudahkan pembuatan responsif design.

📐 2. Struktur Dasar Grid Layout

Mari kita lihat contoh dasar membuat Grid:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.box {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

📌 Penjelasan:

• display: grid; → Mengubah elemen menjadi grid container.

• grid-template-columns → Menentukan jumlah dan lebar kolom.

• 1fr → Fraction unit, membagi ruang secara proporsional.

🎛 3. Properti Penting dalam Grid

Contoh penggunaan grid-template-areas:

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

📱 4. Grid Layout Responsif

Kamu bisa membuat layout yang menyesuaikan layar dengan media query atau menggunakan unit fr, minmax(), dan auto-fit.

Contoh:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Ini memungkinkan jumlah kolom menyesuaikan ukuran layar tanpa perlu media query.

💡 5. Studi Kasus Sederhana: Galeri Foto

<div class="gallery">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}
.gallery img {
  width: 100%;
  height: auto;
}

📌 Layout ini akan otomatis menyesuaikan jumlah kolom tergantung ukuran layar.

🎯 Kesimpulan

CSS Grid memberikan cara yang elegan dan efisien untuk membangun layout website modern. Meskipun pada awalnya terlihat kompleks, dengan latihan kamu akan bisa membuat desain website yang rapi, responsif, dan mudah dikelola.

Salah satu kemampuan paling penting bagi pengembang web adalah bagaimana berinteraksi dengan elemen HTML secara dinamis. Di sinilah DOM Manipulation (Document Object Model) berperan.

Artikel ini akan membantu kamu memahami konsep dasar DOM, serta bagaimana kamu bisa mengambil, mengubah, menambahkan, dan menghapus elemen HTML menggunakan JavaScript murni — tanpa framework.

🧠 1. Apa Itu DOM?

DOM adalah representasi struktur halaman HTML sebagai pohon objek (tree of objects). Setiap tag HTML seperti <div>, <h1>, dan <p> menjadi objek yang bisa kamu akses dan manipulasi menggunakan JavaScript.

Misalnya:

<body>
  <h1 id="judul">Halo Dunia!</h1>
</body>

Melalui DOM, kamu bisa mengganti teks Halo Dunia! menjadi apapun yang kamu inginkan secara dinamis.

🔍 2. Cara Mengakses Elemen DOM

Beberapa metode populer untuk mengambil elemen HTML:

document.getElementById('judul');            // Berdasarkan ID
document.querySelector('h1');                // Berdasarkan selector
document.getElementsByClassName('title');    // Berdasarkan class
document.getElementsByTagName('p');          // Berdasarkan tag

Contoh penggunaan:

const judul = document.getElementById('judul');
judul.textContent = 'Selamat Datang!';

🔧 3. Mengubah Konten & Atribut

Selain membaca, kamu bisa mengubah elemen secara langsung.

judul.style.color = 'blue';
judul.innerHTML = '<em>Hai!</em>';
judul.setAttribute('class', 'highlight');

Ini memungkinkan kamu mengubah gaya, struktur HTML, atau menambahkan atribut baru.

🛠️ 4. Menambahkan dan Menghapus Elemen

Kamu bisa membuat elemen HTML baru dengan createElement() dan menambahkannya ke halaman menggunakan appendChild() atau insertBefore().

const newItem = document.createElement('li');
newItem.textContent = 'Item Baru';
document.querySelector('ul').appendChild(newItem);

Menghapus elemen:

document.querySelector('li').remove();

🎯 5. Event Listener: Interaksi Pengguna

DOM juga memungkinkan kamu menangani event, seperti klik, input, atau hover.

const tombol = document.getElementById('klikSaya');
tombol.addEventListener('click', function () {
  alert('Tombol diklik!');
});

Event ini penting agar website kamu menjadi interaktif.

🧪 Studi Kasus: To-Do List Sederhana

HTML:

<input type="text" id="taskInput">
<button id="addTask">Tambah</button>
<ul id="taskList"></ul>

JavaScript:

document.getElementById('addTask').addEventListener('click', function () {
  const input = document.getElementById('taskInput');
  const task = document.createElement('li');
  task.textContent = input.value;
  document.getElementById('taskList').appendChild(task);
  input.value = '';
});

Dengan beberapa baris JavaScript saja, kamu sudah bisa membuat fitur tambah-tugas yang interaktif!

📘 Kesimpulan

Menguasai DOM adalah fondasi penting sebelum kamu melangkah ke framework seperti React atau Vue. Dengan memahami bagaimana HTML dan JavaScript bekerja secara langsung, kamu akan menjadi web developer yang lebih solid dan fleksibel.

“Bikin layout rapi dan responsif tanpa ribet? Jawabannya: Flexbox!”

🎯 1. Apa Itu Flexbox?

Flexbox (Flexible Box Layout) adalah fitur CSS yang memudahkan kamu dalam menyusun dan mengatur elemen secara fleksibel di halaman web. Cocok banget untuk:

• Navbar yang responsif

• Galeri gambar

• Card layout

• Centering elemen secara vertikal dan horizontal

🛠️ 2. Dasar-Dasar Properti Flexbox

📦 a. Container Flex

.container {
  display: flex;
}

🔄 b. Arah (Main Axis)

.container {
  flex-direction: row; /* default: horizontal */
  flex-direction: column; /* vertikal */
}

📏 c. Pembagian Ruang

.container {
  justify-content: space-between;
}

• flex-start, flex-end, center, space-between, space-around, space-evenly

🧭 d. Penyesuaian Arah Samping (Cross Axis)

.container {
  align-items: center;
}

• flex-start, flex-end, center, stretch, baseline

💡 3. Contoh Layout Sederhana

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.box {
  width: 100px;
  height: 100px;
  background: steelblue;
  color: white;
  font-size: 2rem;
  text-align: center;
}

📱 4. Buat Layout Responsif dengan Flexbox

Flexbox memudahkan pembuatan layout mobile-first:

.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex: 1 1 300px;
}

Artinya:

• 1: grow (boleh membesar)

• 1: shrink (boleh mengecil)

• 300px: ukuran dasar

⚡ 5. Trik Flexbox Populer

• Centering horizontal & vertical:

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

• Buat sidebar & konten utama:

.layout {
  display: flex;
}
.sidebar {
  flex: 1;
}
.content {
  flex: 3;
}

🧪 6. Tools untuk Belajar Flexbox

• Flexbox Froggy 🐸 — Belajar lewat game

• CSS Tricks Flexbox Guide

• Chrome DevTools → "Elements" tab untuk inspect properti Flex

📌 Kesimpulan

Flexbox adalah senjata wajib front-end developer modern. Dengan pemahaman dasar Flexbox, kamu bisa membuat layout profesional dan responsif tanpa mengandalkan framework.

"Kalau website-mu harus di-zoom di HP, kamu butuh responsive design."

🎯 1. Apa Itu Responsive Design?

Responsive design adalah teknik membuat website yang bisa menyesuaikan tampilan berdasarkan ukuran layar, baik itu:

• Desktop

• Tablet

• Smartphone

Tanpa responsive design, pengguna mobile bisa kesulitan membaca atau berinteraksi dengan website-mu.

🏗️ 2. Kunci Utama: Viewport & Media Queries

🔧 a. Atur Viewport di HTML

Di <head>, tambahkan ini:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Tanpa ini, mobile browser tidak tahu ukuran layar yang harus digunakan.

🎨 b. Gunakan Media Query di CSS

@media (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
  }
  .hero h1 {
    font-size: 1.5rem;
  }
}

🧱 3. Gunakan Layout Fleksibel

Gunakan unit seperti:

• % (persentase)

• vw, vh (viewport width/height)

• em, rem (relatif terhadap ukuran font)

.container {
  width: 90%;
  margin: auto;
}

🧰 4. Teknik CSS Modern

✅ Flexbox

.navbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

✅ Grid Layout

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

🔄 5. Contoh Sederhana Responsive Web

<div class="card">
  <img src="image.jpg" alt="Gambar" />
  <h2>Judul</h2>
  <p>Deskripsi singkat konten.</p>
</div>

.card {
  width: 30%;
}
@media (max-width: 768px) {
  .card {
    width: 90%;
  }
}

✅ 6. Tips Cepat untuk Responsif

• Gunakan font dan elemen UI yang cukup besar di layar kecil.

• Gunakan hamburger menu untuk navigasi.

• Uji tampilan dengan Chrome DevTools atau Responsively App.

• Gunakan framework seperti Bootstrap atau Tailwind jika butuh cepat.

📌 Kesimpulan

Responsive design bukan tambahan, tapi keharusan. Sekarang lebih dari 50% pengunjung website berasal dari perangkat mobile. Kalau kamu ingin user betah, website-mu harus bisa menyesuaikan.

“Portofolio online adalah CV visual kamu di dunia digital.”

🎯 1. Mengapa Penting Membuat Portofolio?

Mau freelance atau melamar kerja, portofolio bisa jadi senjata untuk:

• Menunjukkan kemampuan HTML & CSS dasar

• Memberi kesan profesional

• Menjadi landing page personal

🏗️ 2. Struktur Dasar HTML

Buatlah file index.html:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Portofolio Saya</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <h1>Halo, Saya Deni</h1>
    <p>Web Developer Pemula 🚀</p>
  </header>
  
  <section id="projects">
    <h2>Proyek Saya</h2>
    <div class="project-card">
      <h3>Kalkulator Web</h3>
      <p>Aplikasi kalkulator sederhana berbasis JavaScript.</p>
    </div>
    <div class="project-card">
      <h3>To-Do List</h3>
      <p>Aplikasi manajemen tugas harian.</p>
    </div>
  </section>

  <footer>
    <p>Hubungi saya di: emailkamu@gmail.com</p>
  </footer>
</body>
</html>

🎨 3. Styling Dasar CSS

Buat file style.css:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background: #f0f2f5;
}

header, footer {
  background-color: #007bff;
  color: white;
  text-align: center;
  padding: 2rem;
}

section {
  padding: 2rem;
}

.project-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

📱 4. Responsif untuk Mobile

Tambahkan media query:

@media (max-width: 600px) {
  header, footer {
    padding: 1rem;
  }

  .project-card {
    padding: 0.8rem;
  }
}

🔗 5. Bonus: Tambahkan Link dan Gambar

<a href="https://github.com/username/project1" target="_blank">Lihat Proyek</a>
<img src="project1-thumbnail.png" alt="Tampilan proyek kalkulator" width="100%">

✅ 6. Kesimpulan

• Portofolio sederhana bisa dibuat hanya dengan HTML dan CSS.

• Tambahkan proyek kecil yang kamu buat sendiri.

• Gunakan GitHub untuk menyimpan dan menampilkan hasil kerjamu.

• Hosting gratis bisa pakai GitHub Pages atau Netlify.

“Kalau Flexbox untuk garis satu dimensi, maka Grid adalah solusi untuk layout dua dimensi yang kompleks.”

📐 1. Apa Itu CSS Grid?

CSS Grid adalah sistem layout berbasis baris dan kolom. Sangat cocok digunakan saat kamu ingin membuat tampilan web yang terdiri dari berbagai area — seperti header, sidebar, konten, dan footer — dengan kontrol posisi yang presisi.

🔧 2. Struktur Dasar CSS Grid

Kamu hanya perlu satu baris kode untuk memulai Grid!

<div class="grid-container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 kolom sama rata */
  gap: 10px;
}
.box {
  background-color: lightcoral;
  padding: 20px;
  color: white;
}

📏 3. Properti Penting CSS Grid

Di Container:

Di Item:

🗂️ 4. Contoh Kasus: Layout Majalah 3x2

<div class="grid-magazine">
  <div class="header">Header</div>
  <div class="menu">Menu</div>
  <div class="main">Main Content</div>
  <div class="aside">Aside</div>
  <div class="footer">Footer</div>
</div>

.grid-magazine {
  display: grid;
  grid-template-areas:
    "header header"
    "menu main"
    "footer footer";
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

.header  { grid-area: header; background: #f76c6c; }
.menu    { grid-area: menu; background: #f8b195; }
.main    { grid-area: main; background: #355c7d; }
.aside   { grid-area: aside; background: #6c5b7b; }
.footer  { grid-area: footer; background: #c06c84; }

.grid-magazine > div {
  color: white;
  padding: 20px;
}

📱 5. Responsif? Mudah Banget!

Kamu bisa ubah grid-template-columns dengan media queries untuk tampilan mobile:

@media (max-width: 600px) {
  .grid-magazine {
    grid-template-areas:
      "header"
      "menu"
      "main"
      "footer";
    grid-template-columns: 1fr;
  }
}

✅ 6. Kesimpulan

• CSS Grid cocok untuk layout kompleks, dua dimensi.

• Kombinasikan dengan Flexbox untuk hasil maksimal.

• Sangat direkomendasikan dipelajari setelah memahami dasar CSS & Flexbox.

“Ingin elemen di web bisa rapi dan fleksibel di semua ukuran layar, belajar Flexbox adalah kuncinya.”

🎯 1. Apa Itu Flexbox?

Flexbox (Flexible Box Layout) adalah fitur di CSS yang membantu kita kita untuk mengatur posisi elemen di dalam sebuah container. Cocok banget untuk menyusun layout responsif tanpa ribet dengan float atau position.

🧱 2. Struktur Dasar Flexbox

Untuk mulai menggunakan Flexbox, cukup tambahkan display: flex pada container.

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

.container {
  display: flex;
}
.box {
  padding: 20px;
  background: lightblue;
  margin: 5px;
}

🔧 3. Properti Flexbox Paling Sering Digunakan

Pada Container:

Pada Item:

🖼️ 4. Contoh Kasus: Galeri 3 Kotak Rata Tengah

<div class="gallery">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.item {
  background: salmon;
  padding: 30px;
  margin: 10px;
  color: white;
  font-size: 20px;
}

📱 5. Tips Responsif: flex-wrap dan media queries

Tambahkan flex-wrap: wrap; untuk memastikan elemen bisa turun ke baris berikutnya di layar kecil.

.gallery {
  display: flex;
  flex-wrap: wrap;
}

Gunakan media queries untuk mengatur layout berdasarkan ukuran layar:

@media (max-width: 600px) {
  .item {
    flex: 100%;
  }
}

✅ 6. Kesimpulan

• Flexbox memudahkan layouting horizontal & vertikal.

• Properti penting: justify-content, align-items, dan flex-direction.

• Cocok untuk membuat layout responsif, galeri, navigasi, dsb.

“HTML adalah kerangka rumah. CSS adalah cat, dekorasi, dan pencahayaan yang membuat rumah terlihat hidup.”

🧭 1. Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa gaya (style language) yang digunakan untuk mengatur tampilan elemen-elemen HTML di halaman web. CSS tidak bekerja sendiri—ia digunakan bersama dengan HTML untuk mempercantik halaman web.

Contoh sederhananya:

htmlCopyEdit<p style="color:blue; font-size:20px;">Halo, dunia!</p>

Atau dengan file CSS terpisah:

cssCopyEditp {
  color: blue;
  font-size: 20px;
}

🏗️ 2. Struktur dan Cara Menulis CSS

Ada 3 cara menyisipkan CSS:

a. Inline CSS

Langsung di dalam elemen HTML

htmlCopyEdit<h1 style="color:red;">Judul</h1>

b. Internal CSS

Dimasukkan di dalam tag <style> di <head>

htmlCopyEdit<style>
  h1 {
    color: red;
  }
</style>

c. External CSS

File CSS terpisah yang di-link dari HTML

htmlCopyEdit<link rel="stylesheet" href="style.css" />

🎨 3. Properti-Poperti Dasar CSS yang Wajib Diketahui

Untuk pemula, berikut beberapa properti dasar yang sering digunakan:

Contoh:

cssCopyEdit.container {
  background-color: #f5f5f5;
  padding: 20px;
  margin: 10px;
}

📐 4. CSS Box Model: Dasar Layouting

CSS melihat semua elemen sebagai box yang terdiri dari:

• Content: isi seperti teks atau gambar

• Padding: ruang di sekitar content

• Border: garis luar elemen

• Margin: ruang antara elemen

🎯 5. Latihan Mini Project: Kartu Profil Sederhana

Coba buat komponen seperti ini:

htmlCopyEdit<div class="card">
  <h2>Nama Anda</h2>
  <p>Web Developer Pemula</p>
</div>

CSS-nya:

cssCopyEdit.card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  width: 250px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

🧠 6. Kesimpulan

• CSS adalah bahasa yang mengatur tampilan HTML.

• Ada banyak properti CSS yang bisa dikombinasikan untuk menciptakan desain yang menarik.

• Pahami konsep dasar seperti box model dan struktur penulisan CSS agar tidak bingung di awal.

Artikel ini akan menjelaskan semuanya secara sederhana dan step-by-step. Yuk mulai!

Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language. Ini adalah bahasa standar yang digunakan untuk menyusun struktur halaman web.

💡 Catatan: HTML bukan bahasa pemrograman, melainkan bahasa markup yang digunakan untuk memberi “penanda” atau “markup” pada elemen dalam halaman web.

Dengan HTML, kamu bisa membuat:

• Judul dan paragraf

• Gambar dan video

• Tabel dan daftar

• Formulir input

• Link ke halaman lain

Tanpa HTML, halaman web tidak akan memiliki struktur apapun—hanya layar kosong.

Bagaimana HTML Bekerja?

HTML bekerja dengan cara dibaca dan ditafsirkan oleh browser (Chrome, Firefox, Safari, dll). Ketika kamu membuka file .html, browser akan:

1. Membaca elemen dan tag HTML dari atas ke bawah

2. Menyusun tampilan halaman sesuai urutan tersebut

3. Menggabungkan dengan CSS (untuk tampilan) dan JavaScript (untuk interaksi)

Ilustrasi Sederhana:

[ HTML (struktur) ]
        ↓
[ CSS (desain) ]
        ↓
[ JavaScript (interaktif) ]

Jadi, HTML adalah pondasi utama dalam membangun sebuah halaman website.

Struktur Dasar File HTML

Berikut contoh sederhana dari struktur HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Halo Dunia</title>
  </head>
  <body>
    <h1>Halo, dunia!</h1>
    <p>Ini adalah halaman HTML pertamaku.</p>
  </body>
</html>

Mari kita uraikan satu per satu:

Fungsi HTML dalam Pembuatan Website

HTML sangat penting karena:

✅ Menyusun struktur konten di halaman ✅ Memungkinkan developer menata halaman secara logis ✅ Berfungsi sebagai "kerangka rumah", sebelum ditata tampilannya oleh CSS dan diberi fungsi oleh JavaScript

Tanpa HTML, browser tidak tahu di mana meletakkan judul, teks, gambar, atau elemen lainnya.

Di Mana HTML Digunakan?

HTML digunakan di hampir semua halaman web. Selain itu, HTML juga digunakan pada:

• Email newsletter (HTML Email)

• CMS seperti WordPress

• Template landing page

• Dashboard internal perusahaan

• Aplikasi web modern (dalam kombinasi dengan React, Vue, dsb)

Kelebihan Belajar HTML untuk Pemula

• Mudah dimulai tanpa install software

• Bisa langsung dicoba di browser

• Satu langkah lebih dekat jadi Web Developer!

Kesimpulan

HTML adalah titik awal dalam dunia web development. Sebagai pemula, kamu wajib memahami HTML karena:

• HTML menyusun kerangka halaman web

• Mudah dipelajari dan langsung bisa dipraktikkan

• Menjadi fondasi sebelum kamu melangkah ke CSS dan JavaScript

Cukup dengan browser dan text editor (seperti VS Code), kamu sudah bisa mulai bereksperimen.