Panduan Lengkap Frontend Web

Pelajari fondasi utama dalam membangun website modern dari dasar: HTML untuk struktur, CSS untuk desain, dan JavaScript untuk logika interaktif.

✨ Created by Ruus Sofyan

</>

HTML5

HyperText Markup Language menyediakan kerangka dasar, teks, tautan, media, tabel, dan formulir input pada web.

🎨

CSS3

Cascading Style Sheets mengatur warna, tata letak, jenis huruf, Flexbox, Grid, serta responsivitas halaman.

⚡

JavaScript

Bahasa pemrograman tingkat tinggi untuk memberikan logika, pengkondisian, event handling, dan pembaruan DOM secara real-time.

Modul 1

1. Pengenalan HTML & Struktur Utama

HTML (HyperText Markup Language) adalah bahasa standar penulisan halaman web yang menggunakan tanda khusus bernama Tag untuk menentukan struktur elemen.

2. Kamus Tag HTML & Fungsinya

Berikut daftar tag HTML yang umum digunakan beserta atribut utamanya:

Tag Fungsi / Deskripsi Atribut Penting & Contoh
<a> Membuat Hyperlink (Tautan) href, target="_blank", rel="noopener", download
<img> Menampilkan Gambar src, alt, width, height, loading="lazy"
<p> Paragraf Teks align (legacy), Atribut Global (id, class)
<h1> - <h6> Judul / Heading (H1 tertinggi, H6 terendah) Atribut Global
<strong> / <b> Teks Tebal (Strong = Penekanan Penting) Atribut Global
<em> / <i> Teks Miring (Emphasis / Italic) Atribut Global
<mark> Stabilo / Sorotan Teks (Highlight) Atribut Global
<ul>, <ol>, <li> Daftar Tak Berurutan (Bullet) & Berurutan (Angka/Huruf) type="1|a|A|i|I" (pada ol), start="1", reversed
<table>, <tr>, <th>, <td> Tabel Data, Baris (TR), Header (TH), Sel Data (TD) border, colspan (gabung kolom), rowspan (gabung baris)
<div> Kontainer Generik (Block Element) Atribut Global (Digunakan luas untuk layout/styling CSS)
<span> Kontainer Teks Generik (Inline Element) Atribut Global (Digunakan untuk styling teks spesifik)
<details> & <summary> Elemen Accordion / Buka-Tutup Konten Native open (Atribut opsional pada details)

3. Tag Teks Berjalan (<marquee>)

Tag <marquee> digunakan untuk membuat teks atau gambar bergerak secara horizontal atau vertikal.

<!-- Contoh Penggunaan Marquee beserta Atribut Lengkapnya -->
<marquee direction="left" behavior="scroll" scrollamount="10" scrolldelay="50" loop="infinite" bgcolor="#0f172a" style="color:#38bdf8; padding:10px;">
  🔥 Pengumuman Penting: Selamat Datang di Pelatihan Web Development!
</marquee>

Daftar Atribut <marquee>:

  • direction: Arah gerakan (left, right, up, down).
  • behavior: Tipe gerakan (scroll = mutar berulang, slide = berhenti di ujung, alternate = bolak-balik pimpong).
  • scrollamount: Kecepatan gerakan (angka piksel per langkah, contoh: 5, 10, 20).
  • scrolldelay: Jeda antar langkah dalam milidetik (contoh: 50, 100).
  • loop: Berapa kali gerakan diulang (infinite atau angka pasti seperti 3).
  • bgcolor: Warna latar belakang marquee (contoh: #1e293b atau red).

4. Element Form & Atribut Input Lengkap

Formulir digunakan untuk mengumpulkan data dari pengguna.

<form action="/simpan" method="POST" enctype="multipart/form-data">
  <label for="nama">Nama Lengkap:</label>
  <input type="text" id="nama" name="nama_user" placeholder="Ketik nama..." required maxlength="50" autocomplete="off">

  <label for="pass">Kata Sandi:</label>
  <input type="password" id="pass" name="sandi" minlength="8" required>

  <label for="umur">Umur:</label>
  <input type="number" id="umur" name="usia" min="17" max="65" value="20">

  <label for="tgl">Tanggal Lahir:</label>
  <input type="date" id="tgl" name="dob">

  <label for="gender">Jenis Kelamin:</label>
  <select id="gender" name="jk">
    <option value="L" selected>Laki-laki</option>
    <option value="P">Perempuan</option>
  </select>

  <label for="foto">Unggah Foto:</label>
  <input type="file" id="foto" name="avatar" accept="image/*">

  <button type="submit">Kirim Data</button>
</form>

Variasi Tipe Input (type="..."):

text, password, email, number, date, time, color, file, checkbox, radio, range, hidden, submit, reset.

Atribut Penting pada Tag Input:

  • name: Nama variabel data saat dikirim ke server.
  • value: Nilai awal / isi dari input.
  • placeholder: Teks petunjuk transparan di dalam kolom.
  • required: Mencegah form dikirim jika belum diisi.
  • readonly: Input hanya bisa dibaca, tidak bisa diketik.
  • disabled: Nonaktifkan input (tidak bisa diisi dan tidak ikut dikirim).
  • min / max / step: Batas nilai pada angka/tanggal.
  • pattern: RegEx untuk validasi format input.

5. Atribut Global (Berlaku di Semua Tag)

  • id="unik": Identitas khusus untuk 1 elemen tunggal di halaman.
  • class="nama-kelas": Pengelompokan elemen untuk disamai tampilannya lewat CSS.
  • style="...": Penulisan CSS langsung pada tag (Inline CSS).
  • title="Teks Bantuan": Menampilkan tooltip saat kursor mengarah ke elemen.
  • data-*="nilai": Menyimpan data kustom pribadi (contoh: data-id="101").
  • hidden: Menyembunyikan elemen secara visual.
  • contenteditable="true": Memungkinkan elemen biasa bisa diketik langsung di browser.

6. Tag Media & Embed Modern

<!-- Audio -->
<audio controls autoplay loop muted>
  <source src="musik.mp3" type="audio/mpeg">
</audio>

<!-- Video -->
<video width="100%" controls poster="cover.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Iframe (Sematkan Web Lain / Youtube) -->
<iframe src="https://example.com" width="100%" height="300" frameborder="0" loading="lazy"></iframe>
Praktikum Mandiri

🛠️ Playground Khusus HTML

Uji coba sintaks dan elemen HTML secara langsung di bawah ini.

Modul 2

1. Pengenalan CSS

CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan visual, tata letak, warna, font, dan responsivitas elemen HTML.

2. Penjelasan Mendasar CSS Box Model

Setiap elemen pada HTML dianggap oleh CSS sebagai sebuah kotak bertumpuk yang terdiri dari 4 lapisan:

MARGIN (Jarak Luar antar Elemen)
BORDER (Garis Tepi)
PADDING (Jarak Dalam antara Garis Tepi & Konten)
KONTEN (Teks, Gambar, dll)

Sintaks Penulisan Padding & Margin:

/* 1. Satu Nilai (Berlaku untuk Atas, Kanan, Bawah, Kiri) */
padding: 16px;
margin: 20px;

/* 2. Dua Nilai (Atas-Bawah , Kanan-Kiri) */
padding: 10px 20px;
margin: 0 auto; /* Trik mengetengahkan elemen kotak secara horizontal */

/* 3. Empat Nilai (Arah Jarum Jam: Atas, Kanan, Bawah, Kiri) */
padding: 10px 15px 8px 12px;

/* 4. Spesifik Per Sisi */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 5px;

/* Box Sizing (Wajib untuk Desain Modern) */
box-sizing: border-box; /* Memastikan padding & border tidak menambah ukuran total lebar elemen */

3. Daftar Properti CSS Utama & Fungsinya

Kategori Properti CSS Nilai Populer & Contoh
Spasi & Ukuran width, height, max-width, min-height 100%, 300px, 50vw, 100vh, auto
Jarak padding, margin 1rem, 12px 24px, 0 auto
Teks & Font color, font-size, font-family, font-weight, text-align, line-height #38bdf8, 1.2rem, sans-serif, bold / 700, center, 1.5
Latar Belakang background-color, background-image, background-size, background-position #0f172a, url('bg.jpg'), cover, center
Garis Tepi & Sudut border, border-radius, outline 1px solid #cbd5e1, 8px (lengkungan sudut), 50% (lingkaran)
Tampilan display, opacity, visibility block, inline, inline-block, flex, grid, none

4. Tata Letak Modern: Flexbox & Grid

Flexbox untuk tata letak 1 dimensi (baris atau kolom), sedangkan Grid untuk 2 dimensi (baris & kolom sekaligus).

/* --- FLEXBOX --- */
.container-flex {
  display: flex;
  flex-direction: row; /* row | column */
  justify-content: space-between; /* center | flex-start | flex-end | space-around */
  align-items: center; /* stretch | center | flex-start | flex-end */
  gap: 1rem; /* Jarak antar item flex */
  flex-wrap: wrap; /* Izinkan pindah baris saat layar menyempit */
}

/* --- CSS GRID --- */
.container-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsif otomatis tanpa media query */
  gap: 1.5rem;
}

5. CSS Positioning & Menumpuk Elemen (Z-Index)

.elemen {
  position: relative; /* Menjadi patokan bagi elemen anak bergaya absolute */
}

.elemen-terbang {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 10; /* Urutan tumpukan (semakin besar semakin di atas) */
}

.header-menempel {
  position: sticky;
  top: 0; /* Menempel di atas layar saat discroll */
}

6. Efek Visual, Transisi, & Animasi

.tombol-keren {
  background: #3b82f6;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); /* Bayangan lembut */
  transition: transform 0.3s ease, background-color 0.3s ease; /* Transisi halus */
}

.tombol-keren:hover {
  background: #1d4ed8;
  transform: translateY(-3px) scale(1.02); /* Efek terangkat saat kursor melintas */
}
Praktikum Mandiri

🎨 Playground Khusus CSS

Eksperimen dengan properti CSS secara langsung di bawah ini.

Modul 3

1. Pengenalan JavaScript

JavaScript (JS) adalah bahasa pemrograman dinamis tingkat tinggi yang berjalan di browser untuk mengontrol interaktivitas halaman web.

2. Menampilkan Data / Output

console.log("Pesan di Konsol F12");
document.getElementById("info").innerText = "Teks diperbarui!";

3. Variabel & Deklarasi

const pi = 3.14; // Tetap
let skor = 0;    // Dinamis
skor = 10;

4. Tipe Data Utama

const nama = "Budi";  // String
const umur = 20;      // Number
const isLulus = true; // Boolean
const hobi = ["Koding", "Game"]; // Array

5. Pengondisian

if (skor >= 70) {
  console.log("Lulus");
} else {
  console.log("Coba Lagi");
}

6. Perulangan

for (let i = 1; i <= 3; i++) {
  console.log("Angka: " + i);
}

7. Fungsi (Functions)

function sapa(nama) {
  return "Halo " + nama;
}
const sapaArrow = (nama) => "Halo " + nama;

8. Manipulasi DOM

const judul = document.querySelector("#judul");
judul.style.color = "#38bdf8";

9. Event Listeners

const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  alert("Diklik!");
});

10. Asynchronous JS

async function ambilData() {
  const respon = await fetch("https://api.example.com/data");
  const data = await respon.json();
}
Praktikum Mandiri

⚡ Playground Khusus JavaScript

Uji coba logika dan event handling JavaScript di bawah ini.

Live Code Playground Lengkap (HTML + CSS + JS)

HTML
CSS
JAVASCRIPT
● HASIL REAL-TIME