Memulai karir di dunia web development memang terasa menantang, apalagi jika belum punya portofolio yang bisa dibanggakan. Kabar baiknya, kamu tidak perlu langsung membuat aplikasi kompleks untuk menunjukkan kemampuanmu. Cukup dengan beberapa contoh proyek web development sederhana dengan HTML CSS JavaScript, kamu sudah bisa mulai membangun portofolio yang menarik.
Artikel ini akan memandumu melalui beberapa contoh proyek sederhana yang bisa kamu kerjakan, lengkap dengan penjelasan, tujuan, dan manfaatnya. Dengan praktik langsung, kamu akan semakin memahami dasar-dasar web development dan siap menghadapi tantangan yang lebih besar. Mari kita mulai!
1. Membangun Halaman Profil Sederhana: Langkah Awal dalam Web Development
Tujuan Proyek:
- Memahami struktur dasar HTML:
<html>,<head>,<body>, tag-tag heading (<h1>–<h6>), paragraf (<p>), image (<img>), dan link (<a>). - Mengenal styling dasar dengan CSS: selectors, properties (warna, font, margin, padding, border), dan linking CSS ke HTML.
- Mempelajari penggunaan JavaScript untuk interaksi sederhana:
alert(),console.log(), dan mengubah konten HTML.
Deskripsi Proyek:
Halaman profil ini akan menampilkan informasi dasar tentang dirimu, seperti foto, nama, deskripsi singkat, dan link ke media sosial.
Implementasi:
-
HTML (index.html):
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Profil Saya</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Nama Lengkap Anda</h1> </header> <main> <img src="foto-profil.jpg" alt="Foto Profil Saya"> <p>Deskripsi singkat tentang diri Anda. Misalnya, "Saya adalah seorang mahasiswa informatika yang tertarik dengan *web development* dan *UI/UX design*."</p> <section> <h2>Kontak</h2> <ul> <li>Email: <a href="mailto:[email protected]">[email protected]</a></li> <li>LinkedIn: <a href="https://linkedin.com/in/profil-anda" target="_blank">Profil LinkedIn</a></li> <li>GitHub: <a href="https://github.com/username-anda" target="_blank">GitHub</a></li> </ul> </section> </main> <footer> <p>© 2023 Nama Anda</p> </footer> <script src="script.js"></script> </body> </html> -
CSS (style.css):
body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } header { background-color: #333; color: #fff; padding: 1em; text-align: center; } main { padding: 2em; text-align: center; } img { width: 200px; border-radius: 50%; margin-bottom: 1em; } section { margin-top: 2em; } ul { list-style: none; padding: 0; } li { margin-bottom: 0.5em; } footer { background-color: #333; color: #fff; text-align: center; padding: 1em; position: fixed; /* Fixed bottom for persistent footer */ bottom: 0; width: 100%; } a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; } -
JavaScript (script.js):
console.log("Halaman profil dimuat!"); // Contoh menampilkan alert saat halaman selesai dimuat alert("Selamat datang di profil saya!"); // Contoh mengubah teks pada elemen dengan ID tertentu (jika ada) // const element = document.getElementById("contoh-id"); // if (element) { // element.textContent = "Teks ini diubah menggunakan JavaScript!"; // }
Manfaat:
- Memahami dasar-dasar HTML, CSS, dan JavaScript.
- Belajar membuat layout sederhana.
- Mengenal cara linking file HTML, CSS, dan JavaScript.
- Mulai membangun website pertama.
2. Membuat Kalkulator Sederhana: Memanfaatkan JavaScript untuk Logika
Tujuan Proyek:
- Memahami event handling di JavaScript:
onclick,addEventListener. - Mempelajari penggunaan functions di JavaScript.
- Mengimplementasikan logika sederhana menggunakan JavaScript: penjumlahan, pengurangan, perkalian, pembagian.
- Memahami DOM manipulation: mengakses dan mengubah nilai elemen HTML.
Deskripsi Proyek:
Kalkulator sederhana ini akan menerima dua angka sebagai input dan melakukan operasi matematika berdasarkan tombol yang ditekan.
Implementasi:
-
HTML (index.html):
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kalkulator Sederhana</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="calculator"> <input type="text" id="display" readonly> <div class="buttons"> <button onclick="clearDisplay()">C</button> <button onclick="appendToDisplay('/')">/</button> <button onclick="appendToDisplay('*')">*</button> <button onclick="appendToDisplay('7')">7</button> <button onclick="appendToDisplay('8')">8</button> <button onclick="appendToDisplay('9')">9</button> <button onclick="appendToDisplay('-')">-</button> <button onclick="appendToDisplay('4')">4</button> <button onclick="appendToDisplay('5')">5</button> <button onclick="appendToDisplay('6')">6</button> <button onclick="appendToDisplay('+')">+</button> <button onclick="appendToDisplay('1')">1</button> <button onclick="appendToDisplay('2')">2</button> <button onclick="appendToDisplay('3')">3</button> <button onclick="calculate()">=</button> <button onclick="appendToDisplay('0')">0</button> <button onclick="appendToDisplay('.')">.</button> </div> </div> <script src="script.js"></script> </body> </html> -
CSS (style.css):
.calculator { width: 300px; margin: 50px auto; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; background-color: #f9f9f9; } #display { width: 100%; padding: 15px; font-size: 20px; border: none; background-color: #eee; text-align: right; box-sizing: border-box; /* Prevents padding from affecting width */ } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); } button { padding: 20px; font-size: 18px; border: none; background-color: #fff; cursor: pointer; transition: background-color 0.2s ease; /* Add a smooth transition */ } button:hover { background-color: #ddd; } button:active { background-color: #ccc; /* Add a more pronounced active state */ } -
JavaScript (script.js):
let displayValue = ''; function appendToDisplay(value) { displayValue += value; document.getElementById('display').value = displayValue; } function clearDisplay() { displayValue = ''; document.getElementById('display').value = displayValue; } function calculate() { try { displayValue = eval(displayValue); document.getElementById('display').value = displayValue; } catch (error) { document.getElementById('display').value = 'Error'; displayValue = ''; } }
Manfaat:
- Memahami event handling dan DOM manipulation.
- Belajar membuat function di JavaScript.
- Mengimplementasikan logika matematika sederhana.
- Membuat aplikasi interaktif.
3. Membuat Daftar Tugas (To-Do List): Praktik Interaksi Dinamis
Tujuan Proyek:
- Memperdalam pemahaman DOM manipulation: menambah, menghapus, dan memodifikasi elemen HTML secara dinamis.
- Memahami penggunaan arrays di JavaScript.
- Mempelajari cara menyimpan data sementara menggunakan local storage (opsional).
Deskripsi Proyek:
Aplikasi to-do list ini memungkinkan pengguna untuk menambahkan, menandai sebagai selesai, dan menghapus tugas dari daftar.
Implementasi:
-
HTML (index.html):
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To-Do List</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>To-Do List</h1> <div class="input-section"> <input type="text" id="taskInput" placeholder="Tambahkan tugas baru"> <button onclick="addTask()">Tambah</button> </div> <ul id="taskList"> <!-- Tugas-tugas akan ditambahkan di sini --> </ul> </div> <script src="script.js"></script> </body> </html> -
CSS (style.css):
body { font-family: sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 500px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; } h1 { color: #333; } .input-section { display: flex; margin-bottom: 20px; } #taskInput { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.2s ease; } button:hover { background-color: #0056b3; } ul { list-style: none; padding: 0; } li { padding: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } li:last-child { border-bottom: none; } li button { background-color: #dc3545; margin-left: 10px; } li button:hover { background-color: #c82333; } .completed { text-decoration: line-through; color: #888; } -
JavaScript (script.js):
let tasks = []; // Array untuk menyimpan tugas function addTask() { const taskInput = document.getElementById('taskInput'); const taskText = taskInput.value.trim(); if (taskText !== '') { tasks.push({ text: taskText, completed: false }); // Tambahkan tugas ke array renderTasks(); // Tampilkan tugas di daftar taskInput.value = ''; // Kosongkan input } } function toggleComplete(index) { tasks[index].completed = !tasks[index].completed; // Ubah status completed tugas renderTasks(); // Tampilkan tugas di daftar } function deleteTask(index) { tasks.splice(index, 1); // Hapus tugas dari array renderTasks(); // Tampilkan tugas di daftar } function renderTasks() { const taskList = document.getElementById('taskList'); taskList.innerHTML = ''; // Kosongkan daftar tugas for (let i = 0; i < tasks.length; i++) { const task = tasks[i]; const listItem = document.createElement('li'); listItem.innerHTML = ` <span class="${task.completed ? 'completed' : ''}" onclick="toggleComplete(${i})">${task.text}</span> <button onclick="deleteTask(${i})">Hapus</button> `; taskList.appendChild(listItem); // Tambahkan tugas ke daftar } } // Panggil renderTasks saat halaman dimuat untuk menampilkan tugas yang mungkin sudah ada di local storage renderTasks();
Manfaat:
- Memperdalam pemahaman DOM manipulation.
- Belajar menggunakan arrays untuk menyimpan data.
- Membuat aplikasi interaktif dengan fitur tambah, hapus, dan toggle.
- Bisa ditingkatkan dengan menambahkan fitur local storage untuk menyimpan data secara permanen.
4. Membuat Game Sederhana “Tebak Angka”: Mengasah Logika dan Interaksi Pengguna
Tujuan Proyek:
- Memperkuat pemahaman tentang event handling dan DOM manipulation.
- Mempelajari penggunaan conditional statements (
if,else) di JavaScript. - Mengimplementasikan logika game sederhana.
- Meningkatkan user experience dengan memberikan feedback yang jelas.
Deskripsi Proyek:
Game “Tebak Angka” ini akan menghasilkan angka acak antara 1 dan 100. Pengguna harus menebak angka tersebut. Program akan memberikan petunjuk apakah tebakan terlalu tinggi atau terlalu rendah, sampai pengguna berhasil menebak angka yang benar.
Implementasi:
-
HTML (index.html):
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tebak Angka</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Tebak Angka!</h1> <p>Saya telah memilih angka acak antara 1 dan 100. Coba tebak!</p> <input type="number" id="guessInput" placeholder="Masukkan tebakan Anda"> <button onclick="checkGuess()">Tebak</button> <p id="message"></p> <p>Percobaan: <span id="attempts">0</span></p> </div> <script src="script.js"></script> </body> </html> -
CSS (style.css):
body { font-family: sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 500px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; } h1 { color: #333; } input[type="number"] { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.2s ease; } button:hover { background-color: #0056b3; } #message { margin-top: 10px; font-weight: bold; } -
JavaScript (script.js):
let randomNumber = Math.floor(Math.random() * 100) + 1; let attempts = 0; function checkGuess() { const guessInput = document.getElementById('guessInput'); const guess = parseInt(guessInput.value); const message = document.getElementById('message'); const attemptsDisplay = document.getElementById('attempts'); attempts++; attemptsDisplay.textContent = attempts; if (isNaN(guess) || guess < 1 || guess > 100) { message.textContent = 'Masukkan angka yang valid antara 1 dan 100.'; } else if (guess === randomNumber) { message.textContent = `Selamat! Anda berhasil menebak angka ${randomNumber} dalam ${attempts} percobaan.`; // Bisa ditambahkan logika untuk memulai game baru } else if (guess < randomNumber) { message.textContent = 'Terlalu rendah! Coba lagi.'; } else { message.textContent = 'Terlalu tinggi! Coba lagi.'; } guessInput.value = ''; // Kosongkan input guessInput.focus(); // Fokuskan kembali ke input }
Manfaat:
- Meningkatkan kemampuan problem solving dan logika.
- Memahami penggunaan conditional statements dan loops.
- Mempelajari cara memberikan feedback yang informatif kepada pengguna.
- Membuat game interaktif yang sederhana.
5. Membuat Form Validasi Sederhana: Mengamankan Data Pengguna
Tujuan Proyek:
- Memahami pentingnya validasi form untuk keamanan dan integritas data.
- Mempelajari berbagai jenis validasi yang umum digunakan (e.g., required fields, email format, password strength).
- Mengimplementasikan validasi form menggunakan JavaScript.
Deskripsi Proyek:
Form validasi ini akan memvalidasi input pengguna sebelum data dikirim ke server. Validasi akan mencakup pengecekan required fields, format email, panjang password, dan konfirmasi password.
Implementasi:
-
HTML (index.html):
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Validasi</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Form Pendaftaran</h1> <form id="registrationForm" onsubmit="return validateForm()"> <div class="form-group"> <label for="name">Nama:</label> <input type="text" id="name" name="name"> <span class="error" id="nameError"></span> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <span class="error" id="emailError"></span> </div> <div class="form-group"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <span class="error" id="passwordError"></span> </div> <div class="form-group"> <label for="confirmPassword">Konfirmasi Password:</label> <input type="password" id="confirmPassword" name="confirmPassword"> <span class="error" id="confirmPasswordError"></span> </div> <button type="submit">Daftar</button> </form> </div> <script src="script.js"></script> </body> </html> -
CSS (style.css):
body { font-family: sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 500px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; text-align: left; } h1 { color: #333; text-align: center; } .form-group { margin-bottom: 15px; } label { display: block; font-weight: bold; margin-bottom: 5px; } input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; /* Prevents padding from affecting width */ } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.2s ease; } button:hover { background-color: #0056b3; } .error { color: red; font-size: 14px; display: block; margin-top: 5px; } -
JavaScript (script.js):
function validateForm() { let isValid = true; // Reset error messages document.querySelectorAll('.error').forEach(element => element.textContent = ''); // Validate Name const name = document.getElementById('name').value.trim(); if (name === '') { document.getElementById('nameError').textContent = 'Nama harus diisi.'; isValid = false; } // Validate Email const email = document.getElementById('email').value.trim(); if (email === '') { document.getElementById('emailError').textContent = 'Email harus diisi.'; isValid = false; } else if (!isValidEmail(email)) { document.getElementById('emailError').textContent = 'Email tidak valid.'; isValid = false; } // Validate Password const password = document.getElementById('password').value.trim(); if (password === '') { document.getElementById('passwordError').textContent = 'Password harus diisi.'; isValid = false; } else if (password.length < 8) { document.getElementById('passwordError').textContent = 'Password minimal 8 karakter.'; isValid = false; } // Validate Confirm Password const confirmPassword = document.getElementById('confirmPassword').value.trim(); if (confirmPassword === '') { document.getElementById('confirmPasswordError').textContent = 'Konfirmasi password harus diisi.'; isValid = false; } else if (password !== confirmPassword) { document.getElementById('confirmPasswordError').textContent = 'Password tidak cocok.'; isValid = false; } return isValid; } function isValidEmail(email) { const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/; return emailRegex.test(email); }
Manfaat:
- Memahami pentingnya validasi form.
- Mempelajari berbagai jenis validasi.
- Mengimplementasikan validasi form menggunakan JavaScript.
- Meningkatkan keamanan aplikasi dan integritas data.
6. Membuat Carousel Gambar Sederhana: Menampilkan Konten Visual dengan Menarik
Tujuan Proyek:
- Memahami konsep carousel gambar.
- Mempelajari cara mengatur timing dengan
setIntervaldi JavaScript. - Mengimplementasikan transisi slide menggunakan CSS dan JavaScript.
Deskripsi Proyek:
Carousel gambar ini akan menampilkan serangkaian gambar yang berganti secara otomatis setiap beberapa detik.
Implementasi:
-
HTML (index.html):
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Carousel Gambar</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="carousel-container"> <div class="carousel"> <img src="gambar1.jpg" alt="Gambar 1"> <img src="gambar2.jpg" alt="Gambar 2"> <img src="gambar3.jpg" alt="Gambar 3"> </div> <button class="prev-button" onclick="prevSlide()">❮</button> <button class="next-button" onclick="nextSlide()">❯</button> </div> <script src="script.js"></script> </body> </html> -
CSS (style.css):
.carousel-container { width: 600px; height: 400px; margin: 50px auto; position: relative; overflow: hidden; } .carousel { width: 1800px; /* Lebar total gambar (3 * 600px) */ height: 400px; display: flex; transition: transform 0.5s ease-in-out; } .carousel img { width: 600px; height: 400px; object-fit: cover; } .prev-button, .next-button { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px 15px; cursor: pointer; font-size: 20px; border-radius: 5px; } .prev-button { left: 10px; } .next-button { right: 10px; } -
JavaScript (script.js):
let currentSlide = 0; const carousel = document.querySelector('.carousel'); const images = document.querySelectorAll('.carousel img'); const imageWidth = images[0].clientWidth; const totalImages = images.length; function nextSlide() { currentSlide = (currentSlide + 1) % totalImages; updateCarousel(); } function prevSlide() { currentSlide = (currentSlide - 1 + totalImages) % totalImages; updateCarousel(); } function updateCarousel() { carousel.style.transform = `translateX(-${currentSlide * imageWidth}px)`; } // Otomatis ganti slide setiap 3 detik setInterval(nextSlide, 3000);
Manfaat:
- Memahami konsep carousel gambar.
- Mempelajari penggunaan
setIntervaluntuk timing. - Mengimplementasikan transisi slide menggunakan CSS dan JavaScript.
- Menampilkan konten visual dengan lebih menarik.
Kesimpulan: Mulai Praktik Langsung dan Bangun Portofoliomu!
Dengan contoh proyek web development sederhana dengan HTML CSS JavaScript di atas, kamu bisa mulai praktik langsung dan membangun portofolio yang solid. Jangan takut untuk bereksperimen, memodifikasi kode, dan menambahkan fitur baru sesuai dengan keinginanmu. Ingat, kunci utama dalam web development adalah terus belajar dan practice, practice, practice! Semoga artikel ini bermanfaat dan selamat berkarya!
