Cara membuat website pertama itu sederhana: buat satu file index.html untuk struktur, satu file style.css untuk tampilan, tulis kode di dalamnya, lalu buka di browser. Kamu tidak perlu install software mahal, tidak perlu server, dan tidak perlu koneksi internet untuk mulai. Modalnya cuma dua: HTML untuk struktur dan CSS untuk tampilan — plus sebuah text editor dan browser yang sudah ada di komputermu. Di panduan ini kita akan bangun website portfolio sederhana dari nol, membuatnya responsif, menambahkan sedikit interaktivitas, lalu deploy gratis supaya bisa diakses siapa saja lewat internet.

Artikel ini ditulis untuk kamu yang benar-benar baru — belum pernah nulis satu baris kode pun. Setiap langkah dijelaskan alasannya, bukan cuma disuruh copy. Di akhir, website portfolio kamu sudah online dan punya URL sendiri yang bisa dipamerkan.

Apa Itu Website dan Bagaimana Cara Kerjanya

Website adalah kumpulan file (HTML, CSS, gambar, kadang JavaScript) yang disimpan di sebuah komputer bernama server, lalu dikirim ke browser orang lain saat mereka mengetik alamatmu. Browser membaca file-file itu dan menggambarnya menjadi halaman yang kamu lihat. Jadi ketika seseorang membuka namakamu.com, browsernya mengunduh file index.html, membaca instruksi di dalamnya, dan menampilkan hasilnya.

Yang penting dipahami sejak awal: website statis (seperti yang kita buat hari ini) hanyalah file teks biasa. Tidak ada sihir. File index.html yang kamu buat di laptop akan tampil persis sama ketika di-upload ke server. Inilah kenapa kamu bisa “menjalankan” website tanpa internet — cukup double-click file HTML dan browser langsung menampilkannya dari komputermu sendiri.

Website terbagi jadi tiga lapisan tugas yang berbeda. HTML menentukan apa isinya (judul, paragraf, tombol, gambar). CSS menentukan bagaimana tampilannya (warna, ukuran, posisi, jarak). JavaScript menentukan apa yang terjadi saat pengguna berinteraksi (klik, ketik, scroll). Untuk website pertama, kita fokus di dua lapisan pertama dulu — HTML dan CSS sudah cukup untuk membuat halaman yang terlihat profesional.

Tiga Bahasa Inti: HTML, CSS, dan JavaScript

HTML, CSS, dan JavaScript adalah tiga bahasa fundamental yang membangun setiap website di internet. HTML adalah kerangkanya, CSS adalah cat dan dekorasinya, JavaScript adalah listrik dan mesinnya. Menguasai ketiganya adalah fondasi seluruh karier web development.

Analogi rumah paling mudah dipahami. HTML itu seperti struktur bangunan — pondasi, dinding, atap, pintu. Tanpa HTML, tidak ada yang bisa ditampilkan. CSS itu seperti desain interior — warna cat, posisi furnitur, ukuran jendela. Rumah tanpa CSS tetap berdiri, tapi terlihat polos dan berantakan. JavaScript itu seperti instalasi listrik dan perangkat pintar — lampu yang menyala saat ditekan, pintu yang terbuka otomatis. Rumah tetap berfungsi tanpa listrik, tapi jauh lebih terbatas.

Kabar baiknya, kamu tidak perlu menguasai ketiganya sekaligus. Urutan belajar yang paling efektif adalah HTML dulu sampai paham, lalu CSS, baru JavaScript. Kalau kamu ingin memperdalam HTML secara menyeluruh sebelum lanjut, kami sudah menyiapkan panduan belajar HTML untuk pemula yang membahas setiap tag penting satu per satu. Dan kalau nanti penasaran soal bahasa ketiga, mulailah dari pengenalan apa itu JavaScript.

Persiapan: Alat yang Kamu Butuhkan

Persiapannya minimal dan semuanya gratis. Kamu butuh satu text editor untuk menulis kode dan satu browser untuk melihat hasilnya. Itu saja — tidak ada langkah instalasi rumit.

Berikut daftar lengkapnya:

Text editor — VS Code adalah pilihan paling populer dan gratis. Editor ini punya syntax highlighting (kode diberi warna biar mudah dibaca), auto-complete, dan ribuan ekstensi. Kalau belum sempat install, sementara kamu bahkan bisa pakai Notepad bawaan Windows.
Browser — Chrome, Firefox, atau Edge. Ketiganya punya Developer Tools yang akan sangat membantu saat debugging. Kita akan sering pakai fitur “Inspect Element” nanti.
Semangat dan kesabaran — Serius, ini bagian tersulit. Kode pertamamu pasti ada yang error. Itu normal. Setiap developer, tanpa kecuali, pernah menatap layar sambil bingung kenapa tombolnya tidak muncul.

Satu tips ekstra: install ekstensi Live Server di VS Code. Ekstensi ini otomatis me-refresh browser setiap kali kamu menyimpan file, jadi kamu tidak perlu bolak-balik tekan tombol reload. Kalau tidak pakai, tidak masalah — cukup simpan file lalu tekan Ctrl + R (atau Cmd + R di Mac) di browser.

Langkah 1: Buat Folder dan File

Langkah pertama adalah menyiapkan tempat kerja. Buat satu folder khusus untuk proyekmu supaya semua file berkumpul rapi di satu tempat.

Buat folder baru, misalnya website-pertamaku, lalu buat dua file di dalamnya:

index.html — halaman utama (nama index itu penting: server otomatis mencari file bernama index.html sebagai halaman pembuka)
style.css — file styling

Struktur foldermu akan terlihat seperti ini:

website-pertamaku/
├── index.html
└── style.css

Kenapa dipisah jadi dua file? Karena memisahkan struktur (HTML) dari tampilan (CSS) membuat kode jauh lebih mudah dikelola. Kalau nanti kamu ingin mengganti seluruh warna website, kamu cukup mengubah style.css tanpa menyentuh HTML sama sekali. Prinsip ini disebut separation of concerns dan berlaku di semua proyek profesional.

Langkah 2: Struktur HTML

HTML dibangun dari elemen yang ditulis dengan tanda kurung siku, misalnya <h1> untuk judul besar dan <p> untuk paragraf. Setiap elemen biasanya punya tag pembuka dan tag penutup, dan konten diletakkan di antaranya. Di langkah ini kita akan menulis seluruh kerangka website portfolio.

Buka index.html dan tulis kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Portfolio Saya</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <nav>
      <span class="logo">MySite</span>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>Halo! Saya <span class="highlight">Budi</span></h1>
      <p>Seorang web developer pemula yang sedang belajar.</p>
      <a href="#contact" class="btn">Hubungi Saya</a>
    </section>

    <section id="about">
      <h2>Tentang Saya</h2>
      <p>
        Saya sedang belajar web development dari nol. Saat ini fokus
        mempelajari HTML, CSS, dan JavaScript. Website ini adalah
        proyek pertama saya!
      </p>
    </section>

    <section id="skills">
      <h2>Skills</h2>
      <div class="skill-grid">
        <div class="skill-card">
          <h3>HTML</h3>
          <p>Struktur halaman web</p>
        </div>
        <div class="skill-card">
          <h3>CSS</h3>
          <p>Styling dan layout</p>
        </div>
        <div class="skill-card">
          <h3>JavaScript</h3>
          <p>Sedang belajar...</p>
        </div>
      </div>
    </section>

    <section id="contact">
      <h2>Hubungi Saya</h2>
      <form>
        <input type="text" placeholder="Nama" required />
        <input type="email" placeholder="Email" required />
        <textarea placeholder="Pesan" rows="4" required></textarea>
        <button type="submit">Kirim</button>
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 MySite. Dibuat dengan HTML dan CSS.</p>
  </footer>
</body>
</html>

Buka file ini di browser (double-click atau drag ke browser) — kamu akan lihat konten tanpa styling: teks hitam-putih menumpuk ke atas-bawah. Jangan panik, itu memang tampilan HTML mentah. Sekarang kita bedah dulu bagian pentingnya sebelum menambahkan CSS.

Bagian `<head>`: Otak yang Tak Terlihat

Semua yang ada di dalam <head> tidak muncul di halaman, tapi memberi tahu browser hal-hal penting. Baris <meta charset="UTF-8" /> memastikan huruf beraksen dan karakter khusus tampil benar. Baris <meta name="viewport" ...> adalah kunci agar website tampil rapi di HP — tanpa baris ini, halamanmu akan terlihat kecil dan zoom-out di layar mobile. Tag <title> mengatur teks yang muncul di tab browser, dan <link rel="stylesheet" href="style.css" /> adalah jembatan yang menghubungkan HTML ke file CSS-mu.

Bagian `<body>`: Isi yang Terlihat

Perhatikan bahwa kita tidak asal pakai <div> untuk semuanya. Kita pakai tag semantic seperti <header>, <main>, <section>, <nav>, dan <footer>. Tag-tag ini punya arti — mesin pencari Google dan pembaca layar untuk tunanetra memahami struktur halaman lewat tag ini. Ini bukan sekadar gaya; ini praktik yang benar. Kalau ingin memahami kenapa tag semantic begitu penting, dalami di materi semantic HTML.

Ada juga atribut id (seperti id="about") dan class (seperti class="skill-card"). Perbedaannya: id harus unik dalam satu halaman dan sering dipakai untuk link lompat (perhatikan <a href="#about"> melompat ke <section id="about">), sedangkan class boleh dipakai berkali-kali dan menjadi “pegangan” utama untuk styling CSS.

Langkah 3: Styling dengan CSS

CSS bekerja dengan pola sederhana: kamu memilih elemen (dengan selector), lalu memberi tahu aturan tampilannya di dalam kurung kurawal. Misalnya h1 { color: red; } berarti “semua <h1>, buat warnanya merah”. Di langkah ini kita ubah halaman polos tadi menjadi desain yang rapi dan modern.

Buka style.css dan tulis:

/* Reset dan base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
}

/* Navbar */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #1a1a1a;
  color: white;
  position: sticky;
  top: 0;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #f97316;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}

nav a {
  color: #d1d5db;
  text-decoration: none;
  transition: color 0.2s;
}

nav a:hover {
  color: #f97316;
}

/* Hero section */
.hero {
  text-align: center;
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  color: white;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.highlight {
  color: #f97316;
}

.hero p {
  font-size: 1.2rem;
  color: #9ca3af;
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: #f97316;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: background 0.2s;
}

.btn:hover {
  background: #ea580c;
}

/* Sections */
section {
  padding: 4rem 2rem;
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #1a1a1a;
}

/* Skill cards */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.skill-card {
  padding: 2rem;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  text-align: center;
}

.skill-card h3 {
  color: #f97316;
  margin-bottom: 0.5rem;
}

/* Contact form */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input, textarea {
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}

input:focus, textarea:focus {
  outline: none;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

button {
  padding: 0.75rem 2rem;
  background: #f97316;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: #ea580c;
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem;
  background: #1a1a1a;
  color: #9ca3af;
  font-size: 0.875rem;
}

Refresh browser — sekarang website kamu punya desain yang rapi! Sebelum lanjut, mari pahami beberapa keputusan penting di CSS di atas supaya kamu tidak sekadar menyalin.

Jenis-Jenis Selector

Perhatikan tiga cara memilih elemen yang kita pakai. Pertama, selector tag seperti body, nav, h2 — memilih berdasarkan nama elemen. Kedua, selector class yang diawali titik seperti .btn dan .skill-card — memilih elemen dengan class tertentu. Ketiga, selector gabungan seperti nav a (semua <a> di dalam <nav>) dan input:focus (input yang sedang diklik/diketik pengguna). Selector :hover dan :focus disebut pseudo-class — kondisi khusus yang aktif saat pengguna berinteraksi.

Kenapa Ada `box-sizing: border-box`?

Baris box-sizing: border-box di bagian reset adalah salah satu trik paling berguna dalam CSS. Secara default, kalau kamu set width: 200px lalu menambahkan padding, lebar total elemen jadi lebih dari 200px — bikin layout meleset. Dengan border-box, padding dan border dihitung di dalam lebar yang kamu tentukan, jadi 200px tetap 200px. Ini menghindari sakit kepala yang dialami hampir semua pemula. Untuk memahami hubungan antara lebar, tinggi, dan konten sebuah elemen lebih dalam, baca pembahasan width dan height sebagai fondasi ukuran elemen.

Memahami Box Model

Setiap elemen HTML pada dasarnya adalah sebuah kotak yang punya empat lapisan: konten di tengah, lalu padding (jarak dalam), border (garis tepi), dan margin (jarak luar). Menguasai box model adalah kunci untuk mengatur spasi dan tata letak dengan presisi. Hampir semua “kenapa jaraknya aneh?” berujung pada salah paham soal box model.

Bayangkan sebuah kotak kado. Konten adalah barangnya, padding adalah bubble wrap di dalam, border adalah kotaknya, dan margin adalah jarak antar kotak di rak. Perhatikan bagaimana konsep ini dipakai di kode kita:

.skill-card {
  padding: 2rem;              /* ruang dalam antara teks dan tepi kartu */
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;  /* garis tepi tipis */
  text-align: center;
}

.skill-grid {
  gap: 1.5rem;                /* jarak antar kartu (pengganti margin) */
}

padding: 2rem membuat teks di dalam kartu tidak menempel ke tepi. border menambahkan garis pembatas. Dan gap di grid mengatur jarak antar kartu tanpa perlu margin manual — jauh lebih bersih. Aturan main lengkap tiap lapisan ini dibahas tuntas di materi box model CSS, termasuk kapan pakai padding vs margin. Satu hal yang sering membingungkan pemula: perbedaan antara elemen block dan inline yang menentukan bagaimana kotak-kotak ini menyusun diri — kalau kamu penasaran kenapa <span> tidak bisa diberi lebar tapi <div> bisa, baca penjelasan soal makna inline pada elemen HTML.

Flexbox dan Grid: Dua Sistem Tata Letak

Website kita memakai dua sistem layout modern sekaligus. Flexbox dipakai di navbar (nav { display: flex; }) dan form — cocok untuk menyusun elemen dalam satu baris atau kolom dengan kontrol perataan yang presisi. Grid dipakai di skill cards (.skill-grid { display: grid; }) — cocok untuk tata letak dua dimensi seperti galeri kartu.

Perhatikan trik pintar di grid ini:

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

repeat(auto-fit, minmax(200px, 1fr)) artinya “buat kolom otomatis, masing-masing minimal 200px tapi boleh melar mengisi ruang”. Hasilnya: di layar lebar muncul 3 kartu sejajar, di layar HP otomatis menumpuk jadi 1 kolom — tanpa media query sama sekali. Konsep Flexbox lengkapnya ada di materi dasar Flexbox, dan Grid di materi dasar CSS Grid. Kalau kamu masih bingung kapan harus pakai yang mana, kami sudah membandingkan keduanya di Flexbox vs Grid.

Langkah 4: Buat Website Responsif

Website responsif adalah website yang tampil bagus di semua ukuran layar — dari HP kecil sampai monitor lebar. Caranya dengan media query, yaitu blok CSS yang hanya aktif pada kondisi layar tertentu. Ini wajib, karena lebih dari separuh pengunjung internet Indonesia mengakses lewat HP.

Tambahkan di bagian bawah style.css:

/* Responsif untuk mobile */
@media (max-width: 640px) {
  .hero h1 {
    font-size: 2rem;
  }

  nav {
    flex-direction: column;
    gap: 1rem;
  }

  nav ul {
    gap: 1rem;
  }
}

Baca @media (max-width: 640px) sebagai “kalau lebar layar 640px atau kurang, terapkan aturan di dalam ini”. Di layar kecil, judul hero kita perkecil dari 3rem ke 2rem supaya tidak terpotong, dan navbar yang tadinya menyamping kita ubah jadi menumpuk vertikal. Coba resize browser ke ukuran kecil — layout otomatis menyesuaikan.

Prinsip yang direkomendasikan adalah mobile-first: desain untuk layar kecil dulu, baru tambahkan aturan untuk layar lebar. Ini menghasilkan CSS yang lebih ringkas dan performa lebih baik di HP. Kalau mau lihat cara kerja breakpoint secara visual, mainkan playground media query interaktif sambil menggeser lebar layarnya — kamu bisa langsung merasakan bagaimana aturan berganti pada titik tertentu.

Lihat CSS Bekerja Layer by Layer

Sebelum lanjut ke deploy, ada baiknya kamu merasakan sendiri bagaimana lapisan CSS mengubah HTML polos menjadi desain lengkap. Klik setiap layer atau tekan Play pada demo di bawah untuk melihat website terbentuk bertahap — dari HTML tanpa styling sampai tampilan akhir. Coba ubah urutannya dan perhatikan efek tiap properti:

Website Builder

CSS Layers

Preview

MySite

Halo! Saya Budi

Web developer pemula

Skills

HTML

CSS

Aktifkan layer untuk melihat CSS bekerja

Langkah 5: Deploy Website Gratis

Deploy artinya meng-upload website dari komputermu ke internet supaya bisa diakses siapa saja lewat URL. Kabar baiknya: untuk website statis seperti ini, ada banyak layanan yang 100% gratis dan hanya butuh beberapa menit. Kita bahas tiga cara termudah.

Opsi 1: Netlify Drop (Paling Cepat, Tanpa Akun Pun Bisa)

Cara tercepat untuk pemula. Buka app.netlify.com/drop, lalu seret folder website-pertamaku kamu langsung ke halaman itu. Dalam hitungan detik, website kamu online dengan URL seperti random-name-123.netlify.app. Selesai. Tidak perlu terminal, tidak perlu Git. Kalau punya akun Netlify gratis, kamu bahkan bisa mengganti nama subdomain-nya jadi lebih rapi.

Opsi 2: GitHub Pages (Sekalian Belajar Git)

Kalau kamu mau sekalian belajar version control, GitHub Pages adalah pilihan bagus. Pertama, buat repository baru di GitHub, lalu jalankan perintah berikut di dalam folder proyekmu:

# Inisialisasi Git di folder proyek
git init
git add .
git commit -m "Website pertama saya"

# Hubungkan ke repository GitHub kamu
git branch -M main
git remote add origin https://github.com/username/website-pertamaku.git
git push -u origin main

Setelah kode ter-upload, buka repository di GitHub, masuk ke Settings → Pages, pilih branch main sebagai sumber, lalu simpan. Beberapa menit kemudian website kamu live di https://username.github.io/website-pertamaku/. Bonus: setiap kali kamu git push perubahan baru, website otomatis ter-update.

Opsi 3: Cloudflare Pages

Mirip GitHub Pages tapi dengan jaringan CDN global yang sangat cepat. Hubungkan repository GitHub kamu ke Cloudflare Pages lewat dashboard-nya, dan setiap push akan otomatis membangun ulang situsmu. Untuk website statis murni HTML/CSS, kamu tidak perlu mengatur build command apa-apa — cukup arahkan ke folder yang berisi index.html.

Ketiga opsi ini gratis, memberikan HTTPS otomatis (URL dengan gembok hijau), dan cukup untuk portfolio, landing page, atau website UMKM. Untuk pemula, mulai dari Netlify Drop karena paling tanpa hambatan — nanti setelah nyaman dengan Git, pindah ke GitHub Pages atau Cloudflare.

Menambahkan Sedikit JavaScript

Sampai di sini form kontak kita masih “palsu” — kalau tombol Kirim diklik, halaman cuma reload tanpa melakukan apa-apa. Dengan sedikit JavaScript, kita bisa menangani submit dan menampilkan pesan terima kasih. JavaScript adalah lapisan interaktivitas, dan kamu tidak perlu paham semuanya untuk mulai memakainya.

Tambahkan file baru script.js di folder proyek, lalu hubungkan sebelum penutup </body> di HTML:

  <script src="script.js"></script>
</body>

Isi script.js dengan kode ini:

// Ambil elemen form dari halaman
const form = document.querySelector('form');

// Jalankan fungsi saat form disubmit
form.addEventListener('submit', function (event) {
  event.preventDefault(); // cegah halaman reload

  const nama = form.querySelector('input[type="text"]').value;
  alert('Terima kasih, ' + nama + '! Pesanmu sudah diterima.');
  form.reset(); // kosongkan kembali form
});

Mari bedah singkat. document.querySelector('form') mencari elemen <form> di halaman. addEventListener('submit', ...) artinya “kalau form ini disubmit, jalankan fungsi ini”. event.preventDefault() mencegah perilaku bawaan browser yang me-reload halaman. Sisanya mengambil nilai input nama, menampilkan alert, lalu mengosongkan form. Ini contoh kecil, tapi memperlihatkan inti JavaScript: mendengarkan kejadian, lalu mengubah halaman sebagai respons.

Perlu diingat, form ini masih belum benar-benar mengirim email ke mana pun — untuk itu kamu butuh backend atau layanan seperti Formspree. Tapi sebagai langkah pertama memahami interaktivitas, ini sudah pas. Kalau ingin serius mendalami bahasa ini, mulai dari pengenalan JavaScript untuk pemula.

Kesalahan Umum Pemula

Hampir semua pemula tersandung di titik yang sama. Mengenali kesalahan ini di awal akan menghemat berjam-jam frustrasi. Berikut yang paling sering terjadi beserta cara memperbaikinya.

1. Lupa menutup tag. HTML butuh tag pembuka dan penutup. Menulis <div> tanpa </div> bisa membuat seluruh layout berantakan. Selalu pastikan setiap tag punya pasangan. Editor seperti VS Code biasanya membantu dengan menandai tag yang tidak seimbang.

2. Salah path file CSS. Kalau <link rel="stylesheet" href="style.css" /> menunjuk ke nama file yang salah (misalnya file-nya sebenarnya styles.css dengan huruf “s”), CSS tidak akan termuat dan halaman tampil polos. Nama file case-sensitive di server — Style.css dan style.css dianggap berbeda. Ini penyebab nomor satu “kok CSS-ku hilang saat di-deploy padahal di laptop normal”.

3. Lupa tag viewport. Tanpa <meta name="viewport" ...> di <head>, website kamu akan tampil zoom-out dan tak terbaca di HP. Selalu sertakan baris ini di setiap proyek.

4. Terjebak nilai width dan padding. Set width: 100% lalu menambahkan padding tanpa box-sizing: border-box akan membuat elemen melebihi lebar layar dan memunculkan scroll horizontal. Solusinya sudah kita pasang di reset: box-sizing: border-box untuk semua elemen.

5. Menumpuk !important untuk memaksa styling. Saat CSS tidak berlaku, pemula sering menambal dengan !important. Ini menutupi masalah sebenarnya yang biasanya soal specificity (kekuatan selector). Belajar cara kerja specificity jauh lebih sehat daripada perang !important.

6. Copy-paste tanpa memahami. Menyalin kode memang cepat, tapi otakmu tidak belajar apa-apa. Ketik ulang, ubah nilainya, lihat apa yang rusak. Justru dari “merusak” itulah pemahaman terbentuk.

Apa yang Sudah Kamu Pelajari

Dari satu proyek kecil ini, kamu sudah menyentuh konsep-konsep yang dipakai di website profesional sungguhan. Ini bukan sekadar latihan — ini fondasi nyata.

HTML semantic — <header>, <main>, <section>, <footer>, <nav>
CSS Flexbox — untuk navbar dan form layout
CSS Grid — untuk susunan skill cards yang otomatis responsif
Responsive design — media query untuk menyesuaikan tampilan mobile
Box model — padding, margin, border, dan box-sizing
Transitions — efek hover yang halus
Form elements — input, textarea, button beserta state :focus
JavaScript dasar — event listener untuk menangani submit form
Deployment — meng-online-kan website secara gratis

Tips untuk Pemula

Belajar web development itu maraton, bukan sprint. Kebiasaan yang kamu bangun sekarang menentukan seberapa cepat kamu berkembang. Berikut prinsip yang terbukti mempercepat pemula.

Jangan copy-paste — ketik sendiri supaya otakmu terbiasa dengan syntax dan pola.
Eksperimen tanpa takut — ubah nilai warna, ukuran, jarak, dan lihat apa yang terjadi. Kamu tidak bisa “merusak” apa pun secara permanen.
Kuasai Inspect Element — klik kanan di browser lalu pilih Inspect untuk melihat dan mengubah CSS secara langsung. Ini alat debugging paling ampuh.
Mulai dari mobile — desain untuk layar kecil dulu, baru perbesar (mobile-first).
Bangun proyek nyata — tutorial itu perlu, tapi belajar tercepat datang saat kamu membuat sesuatu yang benar-benar kamu inginkan.
Konsisten sedikit demi sedikit — 30 menit setiap hari mengalahkan 8 jam sekali seminggu.

Langkah Selanjutnya

Website pertama sudah jadi dan online — sekarang saatnya memperluas kemampuan. Jangan berhenti di sini; setiap keahlian baru membuka jenis proyek yang lebih menarik.

Perdalam CSS — pelajari CSS Variables untuk mengelola warna secara terpusat. Coba refactor warna oranye #f97316 yang tersebar di kode kita menjadi satu variabel; caranya ada di materi CSS Variables.
Perkuat form — bikin form kontak benar-benar berfungsi dengan struktur input dan label yang benar, dipandu materi form input dan label.
Coba Tailwind CSS — framework CSS utility-first yang mempercepat styling drastis; kami bahas di panduan Tailwind CSS.
Pelajari JavaScript lebih dalam — tambahkan interaktivitas nyata seperti dark mode, slider, atau menu hamburger.
Kuasai Git — mulai tracking perubahan kode dengan version control, keterampilan wajib setiap developer.

Website pertama kamu mungkin sederhana — tapi ini langkah awal yang paling penting. Setiap developer senior pernah memulai dari titik yang sama: satu file index.html, satu file style.css, dan rasa penasaran. Lanjutkan.

FAQ: Membuat Website Pertama

Apakah bisa membuat website tanpa coding?

Bisa, lewat platform seperti Wix, WordPress, atau Webflow yang berbasis drag-and-drop. Tapi kalau kamu ingin benar-benar paham dan bebas mengontrol setiap detail, belajar HTML dan CSS jauh lebih berharga. Website hasil coding sendiri juga lebih ringan, lebih cepat, dan gratis untuk di-hosting. Untuk pemula yang serius, mulai dari kode seperti di panduan ini adalah investasi terbaik.

Berapa lama waktu yang dibutuhkan untuk membuat website pertama?

Website sederhana seperti portfolio di panduan ini bisa selesai dalam satu sampai dua jam kalau kamu mengikuti langkah demi langkah. Untuk benar-benar nyaman menulis HTML dan CSS dari kepala sendiri tanpa contekan, umumnya butuh sekitar dua sampai empat minggu latihan rutin. Kuncinya konsistensi, bukan kecepatan.

Apakah membuat website harus bayar?

Tidak. Menulis kodenya gratis (text editor dan browser sudah ada di komputermu), dan meng-online-kan-nya juga bisa gratis lewat Netlify, GitHub Pages, atau Cloudflare Pages. Kamu hanya perlu bayar kalau ingin nama domain khusus seperti namakamu.com (sekitar puluhan sampai ratusan ribu rupiah per tahun). Tanpa itu pun, subdomain gratis seperti namakamu.netlify.app sudah cukup untuk mulai.

Lebih baik belajar HTML dulu atau langsung framework?

Belajar HTML dan CSS dasar dulu, jangan langsung lompat ke framework seperti React atau Tailwind. Framework dibangun di atas fondasi HTML/CSS/JavaScript — kalau fondasinya rapuh, kamu akan sering bingung saat framework berperilaku tidak seperti harapan. Setelah nyaman dengan dasar, barulah framework mempercepat kerjamu. Urutan yang sehat: HTML, CSS, JavaScript, baru framework.

Kenapa website saya tampil polos tanpa styling?

Penyebab paling umum adalah file CSS yang tidak termuat. Periksa tiga hal: apakah nama file di href="style.css" persis sama dengan nama file aslinya (termasuk huruf besar-kecil), apakah style.css berada di folder yang sama dengan index.html, dan apakah tag <link> berada di dalam <head>. Kalau di laptop normal tapi rusak setelah deploy, hampir pasti masalah huruf besar-kecil pada nama file, karena server bersifat case-sensitive.

Bagaimana cara membuat website responsif di HP?

Dua langkah wajib. Pertama, pasang <meta name="viewport" content="width=device-width, initial-scale=1.0" /> di dalam <head> — tanpa ini, layout mobile akan berantakan. Kedua, gunakan media query seperti @media (max-width: 640px) untuk menyesuaikan ukuran font dan tata letak di layar kecil. Pendekatan mobile-first (desain layar kecil dulu) menghasilkan hasil paling rapi dan performa terbaik.