Public Article

Cara Membuat Website dengan JavaScript dan CSS: Panduan Lengkap untuk Pemula

blog_teknokrat

Membuat website sederhana dengan JavaScript dan CSS memungkinkan kamu untuk membuat halaman yang interaktif dan memiliki desain yang menarik. JavaScript bertanggung jawab untuk logika dan interaktivitas, sementara CSS akan digunakan untuk styling dan tata letak halaman.

Jika kamu baru memulai, berikut adalah panduan lengkap untuk membuat website menggunakan JavaScript dan CSS, serta beberapa konsep dasar yang perlu kamu ketahui.

baca juga LLDIKTI dukung Produk Penelitian Unggulan Universitas Teknokrat Indonesia ke Nasional

Apa Itu JavaScript dan CSS?

  • JavaScript adalah bahasa pemrograman yang digunakan untuk menambah interaktivitas pada halaman web. Dengan JavaScript, kamu bisa membuat tombol yang berfungsi, mengambil data dari server, dan memperbarui konten halaman tanpa harus memuat ulang halaman.
  • CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain tampilan dan layout halaman web. CSS mengontrol elemen seperti warna, ukuran font, margin, padding, dan tata letak elemen di halaman.

Langkah-langkah Membuat Website dengan JavaScript dan CSS

1. Menyiapkan Struktur Dasar Website

Pertama, kita perlu membuat struktur dasar website dengan HTML. HTML adalah kerangka dari website, sedangkan CSS dan JavaScript akan digunakan untuk mempercantik dan menambah interaktivitas.

Buat file HTML baru, misalnya index.html, dan tuliskan struktur dasar berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Sederhana</title>
    <link rel="stylesheet" href="styles.css"> <!-- Menghubungkan file CSS -->
</head>
<body>

    <header>
        <h1>Selamat Datang di Website Saya!</h1>
    </header>

    <main>
        <p>Ini adalah website sederhana menggunakan JavaScript dan CSS.</p>
        <button id="changeColorBtn">Ubah Warna</button> <!-- Tombol untuk interaktivitas -->
    </main>

    <footer>
        <p>&copy; 2025 Website Sederhana</p>
    </footer>

    <script src="script.js"></script> <!-- Menghubungkan file JavaScript -->
</body>
</html>

Penjelasan:

  • HTML digunakan untuk mendefinisikan struktur dasar halaman seperti header, main content, dan footer.
  • link rel="stylesheet" digunakan untuk menghubungkan file CSS yang berfungsi untuk styling halaman.
  • script src="script.js" digunakan untuk menghubungkan file JavaScript yang akan mengatur logika interaktivitas.

2. Menambahkan Styling dengan CSS

Sekarang, buat file CSS baru dengan nama styles.css dan tambahkan beberapa aturan gaya untuk mempercantik tampilan website:

/* styles.css */

/* Mengatur styling dasar untuk body */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* Styling header */
header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
}

/* Styling untuk konten utama */
main {
    text-align: center;
    padding: 50px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

/* Styling footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

Penjelasan:

  • CSS ini memberikan tampilan dasar yang bersih dengan warna latar belakang yang lembut, serta desain tombol yang menarik.
  • header dan footer diberi warna latar belakang gelap dengan teks putih.
  • Tombol diberi warna hijau dan efek hover yang akan mengubah warnanya saat mouse berada di atasnya.

3. Menambahkan Interaktivitas dengan JavaScript

Selanjutnya, kita akan menambahkan sedikit interaktivitas pada halaman web menggunakan JavaScript. Misalnya, kita ingin tombol “Ubah Warna” mengubah warna latar belakang halaman saat diklik.

Buat file JavaScript baru dengan nama script.js dan tambahkan kode berikut:

// script.js

// Mendapatkan tombol dari DOM menggunakan id
const changeColorBtn = document.getElementById('changeColorBtn');

// Menambahkan event listener untuk tombol
changeColorBtn.addEventListener('click', function() {
    // Mengubah warna latar belakang halaman ketika tombol diklik
    document.body.style.backgroundColor = getRandomColor();
});

// Fungsi untuk menghasilkan warna acak
function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

Penjelasan:

  • getElementById digunakan untuk mendapatkan elemen tombol berdasarkan id-nya.
  • addEventListener digunakan untuk menambahkan event listener pada tombol, sehingga ketika tombol diklik, fungsi di dalamnya akan dijalankan.
  • Fungsi getRandomColor akan menghasilkan warna acak setiap kali tombol diklik, dan latar belakang halaman akan berubah warna sesuai dengan warna acak tersebut.

baca juga Revolusi Teknologi Modern Perpustakaan: Akses Lebih Cepat dan Mudah

4. Menyempurnakan Tampilan dan Interaktivitas

Sekarang, kamu memiliki website dengan desain sederhana dan interaktivitas menggunakan JavaScript dan CSS. Kamu bisa memperluas dan memodifikasi website ini dengan menambahkan lebih banyak fitur, seperti:

  • Formulir input untuk menerima data pengguna.
  • Menambahkan animasi menggunakan CSS atau JavaScript.
  • Membuat lebih banyak tombol atau interaksi pengguna lainnya.

5. Menguji Website

Untuk menguji website yang telah kamu buat:

  1. Simpan semua file di folder yang sama (misalnya index.html, styles.css, dan script.js).
  2. Buka file index.html di browser untuk melihat tampilan website.
  3. Klik tombol “Ubah Warna” dan perhatikan bagaimana warna latar belakang halaman berubah setiap kali tombol diklik.

6. Mengoptimalkan dan Mempublikasikan Website

Setelah website selesai, kamu bisa mempublikasikannya ke server atau platform hosting seperti GitHub Pages, Netlify, atau Vercel. Jika kamu ingin membuat website lebih interaktif dan kompleks, kamu bisa mulai mempelajari framework JavaScript seperti React, Vue.js, atau Angular.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, kamu telah berhasil membuat website sederhana menggunakan JavaScript untuk interaktivitas dan CSS untuk desain. Website ini memungkinkan pengguna untuk berinteraksi dengan elemen, seperti tombol yang mengubah warna latar belakang. Kamu bisa melanjutkan untuk menambahkan lebih banyak fitur dan elemen desain untuk memperkaya pengalaman pengguna.

Penulis : Tanjali Mulia Nafisa

Leave a Reply

Your email address will not be published. Required fields are marked *