Dari Pemula hingga Mahir - Tutorial Interaktif & IDE Live
HTML adalah bahasa markup yang menyusun konten halaman web dengan tag dan elemen.
CSS adalah bahasa styling yang mengatur tampilan, warna, font, dan tata letak elemen HTML.
Memahami struktur dasar HTML.
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Judul</title> </head> <body> <h1>Halo!</h1> </body> </html>Membuat heading dan paragraf.
<h1>Judul</h1> <h2>Sub Judul</h2> <p>Paragraf teks</p> <b>Bold</b> <i>Italic</i>Menambah link dan gambar.
<a href="url">Link</a> <img src="photo.jpg" alt="Deskripsi">Styling warna dan font.
body { color: blue; font-family: Arial; font-size: 16px; }Margin, padding, border.
.box { padding: 20px; margin: 10px; border: 2px solid #333; }Animasi halus.
button { transition: 0.3s; } button:hover { transform: scale(1.1); }Layout dengan Flexbox.
.container { display: flex; justify-content: center; align-items: center; gap: 20px; }Layout grid.
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }Design responsif.
/* Tablet */ @media (max-width: 768px) { .container { grid-template-columns: 1fr; } }Design mobile dulu.
/* Desktop */ @media (min-width: 1024px) { .container { grid-template-columns: 1fr 2fr 1fr; } }Buat website responsif dengan header, navbar, layout grid, dan footer. Gunakan semantic HTML dan CSS modern untuk design profesional dan mobile-friendly.
Tag HTML umum dan properti CSS untuk referensi cepat.
kosong