Tutorial Membuat Website Sederhana Menggunakan HTML, CSS, & JavaScript (Pemula Wajib Coba!)
Ingin belajar membangun website pertamamu? Tenang, kamu tidak perlu software rumit atau pengalaman coding sebelumnya. Cukup gunakan **notepad atau VS Code** dan browser seperti **Chrome**.
Di artikel ini, kamu akan membuat **website portfolio sederhana** berisi:
* Judul halaman
* Menu navigasi
* Foto & deskripsi singkat
* Tombol interaktif menggunakan JavaScript
Hasilnya bisa langsung kamu publikasi ke internet!
---
## 📌 Apa yang Dibutuhkan?
✔ Komputer/Laptop
✔ Browser
✔ Editor teks (Notepad/VS Code)
✔ Semangat 💪
---
## 🧩 Struktur Proyek
Buat folder bernama:
`my-website/`
Di dalamnya buat 3 file berikut:
```
index.html
style.css
script.js
```
Kita akan isi satu per satu.
---
## 🏗 1️⃣ Membuat Struktur Halaman (HTML)
Buka **index.html** dan isi:
```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Pertamaku</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Halo, Saya Developer Pemula!</h1>
<nav>
<a href="#about">Tentang</a>
<a href="#contact">Kontak</a>
</nav>
</header>
<section id="about">
<h2>Tentang Saya</h2>
<img src="https://via.placeholder.com/150" alt="Foto Profil">
<p>Saya sedang belajar coding dan ini adalah website pertama saya!</p>
<button onclick="sayHello()">Klik Saya</button>
</section>
<footer id="contact">
<p>Hubungi saya: email@example.com</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
---
## 🎨 2️⃣ Gaya Tampilan Website (CSS)
Buka **style.css** dan isi:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
background: #f5f5f5;
color: #333;
text-align: center;
}
header {
background: #0077ff;
padding: 20px;
color: white;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
section {
margin: 40px auto;
width: 80%;
background: white;
padding: 20px;
border-radius: 10px;
}
button {
background: #0077ff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #005bcc;
}
```
---
## 🚀 3️⃣ Membuat Interaksi dengan JavaScript
Buka **script.js** dan isi:
```javascript
function sayHello() {
alert("Halo! Semangat belajar coding ya 🚀");
}
```
---
## 🔍 Cara Menjalankan Website
1. Klik kanan **index.html**
2. Pilih **Open with > Chrome/Browser lain**
3. Website langsung tampil 🎉
---
## 🌍 Bonus! Cara Publish Website Gratis
Kamu bisa upload project ini ke:
* **GitHub Pages**
* **Vercel**
* **Netlify**
Setelah upload, kamu akan punya **link website online** yang bisa dibagikan ke teman atau dicantumkan dalam portofolio.
Jika mau, aku bisa bantu:
✔ Upload ke GitHub
✔ Deploy otomatis ke Vercel atau Netlify
✔ Custom domain `.my.id` murah/gratis
---
## 🧭 Apa Berikutnya?
Setelah berhasil, kamu sudah selangkah lebih dekat menjadi developer!
Lanjutkan belajar:
* Responsive design (flexbox/grid)
* Animasi CSS
* JavaScript DOM manipulation
Aku bisa buatkan lanjutan:
👉 *Cara Membuat Website Responsif dan Keren untuk Portfolio*
👉 *Belajar JavaScript: Manipulasi Elemen HTML (DOM) untuk Pemula*
---
## ✨ Kesimpulan
Dengan hanya 3 file sederhana — **HTML, CSS, & JavaScript** — kamu sudah berhasil membuat website pertama yang interaktif.
Terus eksperimen! Ubah warna, tambahkan konten, dan buat semakin keren ✨
---
Posting Komentar untuk "Tutorial Membuat Website Sederhana Menggunakan HTML, CSS, & JavaScript "