Catatan Kuliah: Membuat Website Kedai Kopi Sederhana

Pengantar

• Pembicara: Sandika Galih
• Tema: Membuat website untuk kedai kopi sederhana, "Kedai Kopi Kenangan Senja"
• Tujuan: Menyusun website sederhana yang dapat disesuaikan oleh pemilik kedai kopi atau pengusaha UMKM.

Struktur Website

• Bagian Atas (Navbar):

  • Logo Brand
  • Navigasi (Home, Tentang Kami, Menu, Kontak)
  • Tombol Search dan Shopping Cart (belum berfungsi)
  • Desain responsif (hamburger menu pada tablet dan ponsel)

• Hero Section:

  • Judul dan Tagline Website
  • Penjelasan Singkat
  • Tombol CTA (Call to Action)

• Tentang Kami:

  • Informasi mengenai kedai kopinya.

• Menu:

  • Menampilkan daftar menu yang tersedia di kedai kopi.

• Kontak:

  • Google Maps lokasi kedai
  • Form kontak untuk pengunjung.

• Footer:

  • Informasi sosial media
  • Copyright

Desain Responsif

• Penggunaan CSS Media Queries untuk tampilan di berbagai perangkat (desktop, tablet, ponsel).
• Contoh penggunaan display: flex untuk mengatur layout.

Proses Pembuatan Website

1. Persiapan Folder dan File:

   • Buat folder dengan nama "kedai kopi kenangan senja".
   • File utama: index.html dan style.css.
   • Import Google Fonts dan Feather Icons.

2. Struktur HTML:

   • Menambahkan elemen-elemen yang diperlukan seperti navbar, hero section, dan lainnya.
   • Memasukkan gambar dari Unsplash ke dalam folder IMG.

3. Style dengan CSS:

   • Membuat variabel untuk warna tema.
   • Mengatur tampilan elemen menggunakan Flexbox dan Grid.
   • Mengatur warna, ukuran font, margin, padding, dan hover effects.

4. Interaktivitas dengan JavaScript:

   • Menambahkan event listener untuk tombol hamburger menu.
   • Mengatur transisi saat menu muncul dan menghilang.

Hosting Website

• Menggunakan GitHub Pages untuk menghosting website statis.
• Langkah-langkah:
  1. Membuat repository di GitHub.
  2. Menghubungkan kode di komputer dengan repository.
  3. Menggunakan GitHub Actions untuk otomatisasi deploy ke web hosting.

Menggunakan Niaga Hoster

• Layanan web hosting terbaik di Indonesia.
• Menawarkan berbagai fitur hosting seperti unlimited hosting, domain, dan email.
• Diskon besar untuk paket hosting dan cara mendapatkan diskon tambahan dengan kode kupon.

Penutup

• Ajak peserta untuk berpartisipasi dan berbagi hasil karya.
• Saran tambahan untuk menambah fitur pada website.
• Terima kasih kepada Niaga Hoster sebagai sponsor.

---

Catatan ini dibuat untuk membantu memahami langkah-langkah dalam membuat website sederhana dan menghostingnya.