Panduan Lengkap Membuat Website dari Dasar hingga Profesional
Halo semua, pada artikel ini Anda akan mempelajari cara membuat website sederhana menggunakan HTML, CSS, dan JavaScript yang dapat digunakan untuk memenuhi tugas kuliah.
Tidak hanya itu, artikel ini juga dilengkapi dengan penjelasan setiap kode serta pengembangan ke versi modern (responsive & profesional). Dengan mengikuti panduan ini, Anda tidak hanya menyelesaikan tugas, tetapi juga meningkatkan skill web development secara nyata.
Tujuan Pembuatan Website
Website yang akan dibuat memiliki fitur:
- Halaman utama (homepage)
- Navigasi menu sederhana
- Desain menggunakan CSS
- Interaksi menggunakan JavaScript
Persiapan Tools
Sebelum mulai, siapkan:
- Text editor (VSCode / Notepad++)
- Browser (Chrome / Firefox)
- Folder project, misalnya:
website-sederhana/Struktur Project
website-sederhana/ │ ├── index.html ├── style.css └── script.js
Struktur ini bertujuan agar kode lebih terorganisir dan mudah dikelola.
Membuat Website Sederhana + Penjelasan Kode
HTML (Struktur Website)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Website Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Website Saya</h1>
<nav>
<a href="#">Home</a>
<a href="#">Tentang</a>
<a href="#">Kontak</a>
</nav>
</header>
<main>
<h2>Selamat Datang</h2>
<p>Ini adalah website sederhana untuk tugas kuliah.</p>
<button onclick="tampilPesan()">Klik Saya</button>
</main>
<script src="script.js"></script>
</body>
</html>Penjelasan
- <!DOCTYPE html> → Menentukan HTML5
- <html lang="id"> → Bahasa Indonesia
- <head> → Metadata (judul, CSS)
- <link rel="stylesheet"> → Menghubungkan CSS
- <header> → Bagian atas website
- <nav> → Menu navigasi
- <main> → Konten utama
- <button onclick> → Memanggil JavaScript
CSS (Tampilan Website)
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f4f4f4;
}
header {
background-color: #1e3a8a;
color: white;
padding: 15px;
text-align: center;
}
nav a {
margin: 0 10px;
color: white;
text-decoration: none;
}
main {
padding: 20px;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #f97316;
border: none;
color: white;
cursor: pointer;
}Penjelasan
- font-family → Mengatur font
- background-color → Warna background
- padding → Jarak dalam elemen
- text-align → Posisi teks
- cursor: pointer → Efek klik
JavaScript (Interaksi)
function tampilPesan() {
alert("Halo! Website kamu sudah berhasil dibuat 🎉");
}Penjelasan
- function → Membuat fungsi
- alert() → Menampilkan popup
- Dipanggil saat tombol diklik
Fungsi ini akan menampilkan pesan ketika tombol diklik.
Cara Menjalankan Website
- Simpan semua file dalam satu folder
- Klik dua kali file index.html
- Website akan terbuka di browser
Hasil yang Diharapkan
Website akan menampilkan:
- Header dengan menu navigasi
- Konten utama sederhana
- Tombol interaktif dengan JavaScript
Pengembangan Lebih Lanjut
Setelah berhasil membuat website dasar, sekarang kita tingkatkan menjadi:
- Responsive (HP & Laptop)
- Modern UI
- Animasi
- Layout lebih menarik
HTML Versi Pro
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="navbar">
<h1>RekiDev</h1>
<nav id="nav">
<a href="#">Home</a>
<a href="#">Project</a>
<a href="#">Contact</a>
</nav>
<button class="menu" onclick="toggleMenu()">☰</button>
</header>
<section class="hero">
<h2>Halo, Saya Mahasiswa IT 👋</h2>
<p>Membuat website modern untuk tugas kuliah</p>
<button onclick="tampilPesan()">Mulai</button>
</section>
<section class="projects">
<div class="card">Website UMKM</div>
<div class="card">Aplikasi Java</div>
<div class="card">Portfolio</div>
</section>
<footer>
<p>© 2026 Mahasiswa IT</p>
</footer>
<script src="script.js"></script>
</body>
</html>CSS Versi Pro
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #f9fafb;
}
.navbar {
display: flex;
justify-content: space-between;
padding: 15px 20px;
background: #1e3a8a;
color: white;
}
.navbar a {
color: white;
margin: 0 10px;
}
.hero {
text-align: center;
padding: 80px 20px;
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
color: white;
}
.hero button {
margin-top: 20px;
padding: 12px 25px;
background: #f97316;
border-radius: 8px;
border: none;
}
.projects {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 40px;
}
.card {
padding: 30px;
background: white;
border-radius: 12px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: 0.3s;
}
.card:hover {
transform: translateY(-10px);
}
footer {
text-align: center;
padding: 20px;
background: #111827;
color: white;
}
@media (max-width: 768px) {
.projects {
grid-template-columns: 1fr;
}
nav {
display: none;
flex-direction: column;
}
nav.active {
display: flex;
}
}JavaScript Versi Pro
function tampilPesan() {
alert("Selamat! Website kamu sudah profesional 🚀");
}
function toggleMenu() {
document.getElementById("nav").classList.toggle("active");
}Tips Agar Nilai Tugas Lebih Tinggi
- Gunakan Google Fonts (Poppins)
- Tambahkan gambar dari internet
- Gunakan animasi hover
- Buat halaman tambahan
- Upload ke GitHub Pages
Penutup
Melalui artikel ini, Anda telah mempelajari dasar pembuatan website serta pengembangannya menjadi lebih modern dan profesional. Teruslah berlatih dan kembangkan project Anda agar kemampuan semakin meningkat.
Post a Comment