Website Pertama Saya

Proyek website pertama saya saat mempelajari dasar-dasar pengembangan web

htmlcssjavascriptportofoliopemula

Bagikan proyek ini:

Tentang Proyek

Website Pertama Saya (My First Website)

image

Sebuah proyek tonggak sejarah pribadi - website pertama saya yang dibuat saat mempelajari dasar-dasar pengembangan web. Proyek ini mewakili awal perjalanan saya ke dunia pengembangan web, dibangun dengan HTML, CSS, dan JavaScript murni.

📋 Ringkasan

Ini adalah website pertama yang pernah saya buat ketika saya mulai belajar pengembangan web. Ini berfungsi sebagai bukti perjalanan belajar saya dan menampilkan keterampilan dasar pengembangan web termasuk struktur HTML, styling CSS, dan interaktivitas JavaScript.

✨ Fitur

  • Struktur HTML Dasar: Elemen HTML5 semantik.
  • Styling CSS: Gaya kustom untuk tata letak dan desain.
  • Interaksi JavaScript: Elemen interaktif sederhana.
  • Desain Responsif: Tata letak yang ramah seluler.
  • Kode Bersih: Kode yang terorganisir dengan baik dan diberi komentar.

🛠️ Teknologi yang Digunakan

  • HTML5: Struktur halaman dan konten.
  • CSS3: Styling dan tata letak.
  • JavaScript: Interaktivitas dasar.
  • Tanpa Framework: Dibangun dari nol untuk mempelajari dasar-dasar.

📁 Struktur Proyek

first_wesbite/
├── index.html          # File HTML utama
├── about.html          # Halaman Tentang (About)
├── assets/
│   ├── css/
│   │   └── style.css  # Lembar gaya utama
│   ├── js/
│   │   └── script.js  # File JavaScript
│   └── img/           # Folder gambar
├── loader.gif          # Animasi pemuatan (Loading)
├── project/            # Showcase proyek
└── projects.html       # Halaman Proyek

🚀 Memulai

Prasyarat

  • Browser web (Chrome, Firefox, Safari, atau Edge).
  • (Opsional) Server lokal untuk pengembangan.

Menjalankan Website

Opsi 1: Buka File Langsung

  1. Clone atau unduh repositori.
  2. Navigasi ke folder proyek.
  3. Klik dua kali index.html untuk membuka di browser default Anda.

Opsi 2: Server Lokal (Disarankan)

Menggunakan Python:

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Menggunakan Node.js (dengan http-server):

npx http-server -p 8000

Menggunakan VS Code:

  • Instal ekstensi "Live Server".
  • Klik kanan pada index.html.
  • Pilih "Open with Live Server".

Kemudian kunjungi: http://localhost:8000

💻 Halaman

Beranda (index.html)

  • Bagian sambutan.
  • Perkenalan singkat.
  • Navigasi ke halaman lain.
  • Konten unggulan.

Tentang (about.html)

  • Informasi pribadi.
  • Perjalanan belajar.
  • Gambaran umum keterampilan.
  • Informasi kontak.

Proyek (projects.html)

  • Showcase proyek-proyek awal.
  • Deskripsi proyek.
  • Teknologi yang digunakan.
  • Tautan ke demo proyek.

🎨 Fitur yang Diimplementasikan

Fitur HTML

  • Elemen HTML5 semantik (<header>, <nav>, <section>, <footer>).
  • Struktur dokumen yang benar.
  • Markup yang aksesibel.
  • Meta tag untuk SEO.

Fitur CSS

  • Skema warna kustom.
  • Tata letak Flexbox.
  • Efek hover.
  • Transisi dan animasi.
  • Media queries responsif.

Fitur JavaScript

  • Manipulasi DOM.
  • Event listeners.
  • Animasi sederhana.
  • Elemen interaktif.
  • Animasi pemuatan.

📚 Apa yang Saya Pelajari

Membangun website pertama ini mengajarkan saya:

  1. Dasar-dasar HTML

    • Struktur dokumen.
    • Elemen semantik.
    • Formulir dan input.
    • Tautan dan navigasi.

  2. Dasar-dasar CSS

    • Selektor dan spesifisitas.
    • Model kotak (Box model).
    • Penempatan (Positioning).
    • Tata letak Flexbox.
    • Desain responsif.

  3. Dasar-dasar JavaScript

    • Variabel dan tipe data.
    • Fungsi.
    • Manipulasi DOM.
    • Penanganan event.
    • Animasi dasar.

  4. Alur Kerja Pengembangan Web

    • Organisasi file.
    • Komentar kode.
    • Pengujian di browser.
    • Dasar-dasar debugging.

💡 Pesan Pribadi

"Teruslah belajar dan jangan pernah menyerah, karena kamu pasti bisa!"

Pesan ini adalah pengingat bagi diri saya sendiri dan bagi semua orang yang memulai perjalanan pengembangan web mereka. Website pertama ini mungkin sederhana, tetapi ini mewakili langkah pertama dalam proses belajar yang berkelanjutan. Setiap ahli dulunya adalah seorang pemula.

🔧 Peningkatan Masa Depan

Hal-hal yang akan saya tambahkan jika saya membangun ulang ini sekarang:

  • Framework CSS modern (Tailwind, Bootstrap).
  • Framework JavaScript (React, Vue).
  • Fitur aksesibilitas yang lebih baik.
  • Optimasi SEO yang ditingkatkan.
  • Alat bangun modern (Vite, Webpack).
  • Integrasi kontrol versi.

🎓 Sumber Belajar

Sumber daya yang membantu saya membangun ini:

  • MDN Web Docs.
  • W3Schools.
  • FreeCodeCamp.
  • Tutorial YouTube.
  • Komunitas coding online.

📝 Refleksi

Melihat kembali proyek pertama ini:

  • Momen membanggakan: Berhasil meluncurkan website pertama saya.
  • Tantangan yang dihadapi: Memahami positioning CSS dan cakupan (scope) JavaScript.
  • Pelajaran utama: Dasar-dasar lebih penting daripada framework.
  • Langkah selanjutnya: Terus belajar dan membangun proyek yang lebih kompleks.

🤝 Untuk Pemula

Jika Anda baru memulai seperti saya dulu:

  1. Mulai dari yang Sederhana: Jangan mencoba membangun situs yang kompleks segera.
  2. Latihan Setiap Hari: Coding-lah sedikit setiap hari.
  3. Pelajari Dasar-dasar: Kuasai dasar HTML, CSS, dan JavaScript.
  4. Bangun Proyek: Teori itu penting, tetapi praktik sangatlah krusial.
  5. Jangan Membandingkan: Perjalanan setiap orang berbeda.
  6. Bertanya: Komunitas coding sangat membantu.
  7. Tetap Gigih: Ini akan menjadi lebih mudah seiring dengan latihan.

📄 Lisensi

Proyek ini bersifat open source dan tersedia untuk tujuan pendidikan. Jangan ragu untuk menggunakan ini sebagai referensi belajar!

🌟 Inspirasi

Proyek ini terinspirasi oleh:

  • Keinginan untuk menciptakan sesuatu dari nol.
  • Tutorial dan kursus yang saya ikuti sebagai pemula.
  • Komunitas pengembangan web yang luar biasa.

Dari seorang pemula untuk para pemula: Kamu pasti bisa! 💪

Ingat: Setiap developer profesional memulai tepat di posisi Anda sekarang. Teruslah membangun, teruslah belajar, dan jangan pernah menyerah!