Catatan Kuliah Pembuatan Website Kedai Kopi
Pembukaan
- Dosen: Sandika Galih
- Topik: Pembuatan website sederhana untuk kedai kopi "Kedai Kopi Kenangan Senja"
Struktur Website
- Navbar: Logo, navigasi, tombol pencarian, dan keranjang belanja
- Logo akan mengarah ke homepage
- Navigasi: Home, Tentang Kami, Menu Kami, Kontak
- Hero Section: Bagian yang paling terlihat oleh pengguna
- Judul website dan tagline
- Tombol Call to Action (CTA)
- Tentang Kami: Menyediakan informasi tentang kedai kopi
- Menu Kami: Daftar menu yang ditawarkan oleh kedai kopi
- Kontak: Memungkinkan pengunjung menghubungi kedai kopi
- Google Maps untuk menunjukkan lokasi
- Form kontak
- Footer: Informasi sosial media dan copyright
Desain Responsif
- Menggunakan media queries untuk memastikan tampilan di berbagai perangkat
- Mengubah navbar menjadi hamburger menu pada layar kecil
Pengenalan HTML & CSS
- Pastikan memiliki pemahaman dasar HTML dan CSS sebelum mengikuti
- Menggunakan VSCode untuk menulis kode
- Menghubungkan HTML dengan CSS
Upload Website ke Hosting
- Menyimpan kode di GitHub untuk akses publik
- Menggunakan GitHub Pages untuk hosting gratis
- Alternatif: Menggunakan Niagahoster untuk hosting berbayar
- Fitur lengkap dan diskon spesial untuk pembelian paket
Pembuatan Kode
- Struktur HTML dibangun dengan penjelasan mendetail
- CSS untuk styling dan penataan elemen
- Menggunakan Google Fonts dan Feather Icons
Detail Kode
- Menyediakan contoh kode untuk setiap bagian
- Penjelasan tentang penggunaan Flexbox untuk layout
- Mengatur elemen dengan margin, padding, dan ukuran responsif
- Implementasi JavaScript untuk interaktifitas (seperti hamburger menu)
Konfigurasi Git dan GitHub
- Menyimpan kode ke repository GitHub
- Mengatur Secrets untuk FTP di GitHub
- Menggunakan GitHub Actions untuk otomatisasi deployment ke hosting
Penutup
- Mendorong mahasiswa untuk bereksperimen dengan mengembangkan fitur tambahan
- Mengingatkan untuk membagikan hasil karya di media sosial dan diskusi di platform yang telah disediakan.
- Terima kasih kepada sponsor: Niaga Hoster.
Catatan ini bertujuan untuk membantu pemahaman dan pengulangan materi yang telah diajarkan dalam kuliah. Pastikan untuk merujuk kembali ke video atau sumber lain untuk detail lebih lanjut.