Catatan Kuliah: Membuat Website Undangan Pernikahan

Pendahuluan

• Dosen: Sandika Galih
• Topik: Membuat website undangan pernikahan
• Alasan: Terinspirasi oleh undangan pernikahan online yang banyak beredar, juga pengalaman pribadi saat menikah.

Rencana Pembuatan Website

• Website akan dibagi menjadi beberapa tahap dan video untuk memudahkan pemahaman.
• Tujuan: Membuat website undangan pernikahan yang dapat digunakan oleh orang lain.

Sponsor

• Terima kasih kepada NiagaHoster, penyedia layanan hosting terbaik di Indonesia.
• Diskon 75% untuk pembelian web hosting pertama + tambahan diskon 10% dengan kode kupon WP Unpas.

Tahap Persiapan

1. Membuat Folder Project

   • Folder bernama "Dino Does Wedding" (Dino = Dika + Nova).
   • Membuka terminal untuk membuat file index.html dan folder IMG untuk menyimpan gambar.

2. Menggunakan Bootstrap

   • Mengunduh starter template dari Bootstrap.
   • Memastikan menggunakan versi terbaru (5.3).
   • Memasukkan Bootstrap ke dalam file HTML.

Membuat Hero Section

• Struktur HTML:

  • Membuat elemen section dengan ID "hero".
  • Menggunakan elemen div untuk layout.
  • Menambahkan judul dan teks undangan.

• Tombol Lihat Undangan:

  • Menggunakan elemen anchor <a> dengan hastag menuju bagian undangan.

• Styling:

  • Menggunakan kelas Bootstrap untuk styling dan layout.
  • Mengatur tampilan agar elemen berada di tengah dan memenuhi layar.

Menambahkan CSS

1. Membuat file style.css untuk custom styling.

2. Menggunakan Google Fonts:

   • Font Sacramento (handwriting) dan Work Sans.

3. Variabel CSS:

   • Mengatur warna dan bayangan untuk elemen.
   • Menggunakan ukuran font default menggunakan rem.

Responsif

• Menggunakan media queries untuk mengatur ukuran font dan elemen pada berbagai perangkat (laptop, tablet, mobile).

Menambahkan Countdown Timer

• Menggunakan library Simply Countdown untuk menghitung mundur waktu.
• Membuat elemen div untuk countdown dan menghubungkan dengan JavaScript.

Mengupload Website ke Hosting

1. Membuat Subdomain di NiagaHoster:

   • Membuat subdomain untuk website undangan.
   • Menyimpan file website di folder subdomain yang dibuat.

2. Mengupload File:

   • Mengompres folder project menjadi zip dan mengupload ke server.
   • Mengekstrak file yang diupload dan menghapus file zip.

Penutup

• Website undangan pernikahan sudah dapat diakses online.
• Di video berikutnya akan ditambahkan fitur lain seperti galeri, cerita tentang calon mempelai, dan lainnya.

---

• Terima kasih kepada NiagaHoster. Jangan lupa menggunakan kode kupon WP Unpas untuk mendapatkan diskon tambahan.
• Sampai jumpa di episode berikutnya!