5 Proyek Coding Sederhana untuk Pemula: Mulai Belajar Pemrograman dengan Mudah

5 Proyek Coding Sederhana untuk Pemula

 Pendahuluan

Belajar coding bisa menjadi tantangan, tetapi memulai dengan proyek sederhana dapat membuat prosesnya lebih mudah dan menyenangkan. Proyek-proyek ini dirancang untuk membantu pemula memahami konsep dasar pemrograman sambil menghasilkan sesuatu yang bermanfaat.

1. Kalkulator Sederhana (HTML, CSS, JavaScript)

Deskripsi:
Buat aplikasi kalkulator sederhana yang dapat melakukan operasi matematika dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian.

Fitur:

  • Input dua angka.
  • Tombol operasi (+, -, *, /).
  • Output hasil di layar.

Kode Contoh:

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>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        input, button { margin: 5px; padding: 10px; }
    </style>
</head>
<body>
    <h1>Kalkulator Sederhana</h1>
    <input type="number" id="num1" placeholder="Angka 1">
    <input type="number" id="num2" placeholder="Angka 2">
    <br>
    <button onclick="calculate('+')">Tambah</button>
    <button onclick="calculate('-')">Kurang</button>
    <button onclick="calculate('*')">Kali</button>
    <button onclick="calculate('/')">Bagi</button>
    <h2 id="result">Hasil: </h2>
    <script>
        function calculate(op) {
            const num1 = parseFloat(document.getElementById("num1").value);
            const num2 = parseFloat(document.getElementById("num2").value);
            let result;
            if (op === '+') result = num1 + num2;
            else if (op === '-') result = num1 - num2;
            else if (op === '*') result = num1 * num2;
            else if (op === '/') result = num1 / num2;
            document.getElementById("result").innerText = "Hasil: " + result;
        }
    </script>
</body>
</html>

2. To-Do List (HTML, CSS, JavaScript)

Deskripsi:
Aplikasi sederhana untuk mencatat dan mengelola daftar tugas harian.

Fitur:

  • Tambahkan tugas.
  • Hapus tugas.
  • Tandai tugas selesai.

3. Generator Password (Python)

Deskripsi:
Buat aplikasi berbasis Python yang menghasilkan password acak untuk keamanan akun.

Fitur:

  • Panjang password dapat diatur.
  • Kombinasi huruf besar, huruf kecil, angka, dan simbol.

Kode Contoh:

python
import random
import string

def generate_password(length=12):
    characters = string.ascii_letters + string.digits + string.punctuation
    password = ''.join(random.choice(characters) for _ in range(length))
    return password

length = int(input("Masukkan panjang password: "))
print("Password Anda:", generate_password(length))

4. Konverter Suhu (HTML dan JavaScript)

Deskripsi:
Aplikasi sederhana untuk mengonversi suhu dari Celcius ke Fahrenheit dan sebaliknya.

Fitur:

  • Input suhu.
  • Pilihan untuk konversi Celcius ke Fahrenheit atau sebaliknya.

5. Website Portfolio (HTML dan CSS)

Deskripsi:
Bangun website sederhana untuk menampilkan profil, keterampilan, dan proyek Anda.

Fitur:

  • Halaman "Tentang Saya".
  • Daftar proyek.
  • Formulir kontak.

Kode Contoh (Dasar):

html
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; }
        header { background: #007BFF; color: white; padding: 20px; text-align: center; }
        main { padding: 20px; }
    </style>
</head>
<body>
    <header>
        <h1>Portfolio Saya</h1>
        <p>Web Developer Pemula</p>
    </header>
    <main>
        <h2>Tentang Saya</h2>
        <p>Saya seorang pengembang web yang bersemangat belajar dan membangun aplikasi keren.</p>
        <h2>Proyek</h2>
        <ul>
            <li>Kalkulator Sederhana</li>
            <li>To-Do List</li>
            <li>Konverter Suhu</li>
        </ul>
        <h2>Kontak</h2>
        <p>Email: saya@example.com</p>
    </main>
</body>
</html>

Kesimpulan

Proyek sederhana seperti di atas adalah cara terbaik untuk belajar coding sambil menghasilkan sesuatu yang berguna. Pilih proyek yang sesuai dengan minat Anda dan mulai tingkatkan keterampilan Anda hari ini!

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama