Proyek Akhir CSS - Situs Web Little Taco Shop

Gambaran Umum

• Mengubah situs web HTML dasar dari kursus HTML untuk Pemula menjadi desain modern yang responsif.
• Gunakan CSS untuk menata situs web dengan fokus pada desain responsif, animasi, dan teknik CSS modern.

Titik Mulai

• Proyek dimulai dengan struktur HTML dari kursus HTML untuk Pemula.
• CSS minimal diterapkan awalnya, yang akan dihapus sebelum menerapkan gaya baru.
• Gambar yang lebih besar (lebar 1000px) disediakan untuk tampilan yang lebih baik, menggantikan yang lebih kecil.

Langkah Kunci

1. Mempersiapkan File HTML

• Tambahkan tag meta viewport yang hilang ke semua file HTML untuk desain responsif.
• Buat halaman about.html baru dengan mengekstrak bagian tentang dari index.html.
• Susun ulang konten dan pastikan menu navigasi konsisten di semua halaman.
• Tetapkan kelas menggunakan konvensi penamaan BEM pada elemen di HTML untuk manajemen CSS yang lebih baik.

2. Pengaturan CSS

• Impor font dari Google Fonts (Nunito dan Fugaz One) untuk tipografi.
• Terapkan reset CSS untuk konsistensi lintas peramban.
• Definisikan variabel CSS untuk warna, font, dan gaya umum untuk kemudahan pengelolaan.
• Inisialisasi kelas utilitas untuk tugas CSS umum (misalnya, pemusatan, tanpa membungkus, di luar layar).

3. Menata Elemen HTML

• Tetapkan gaya umum untuk seluruh halaman termasuk font, warna, dan pengaturan tata letak.
• Definisikan gaya untuk bagian tertentu: Header, Bagian Hero, konten Utama, Footer, dan Menu.
• Gunakan CSS Grid untuk mengelola tata letak untuk menu, bukan tata letak tabel tradisional.
• Menerapkan animasi, seperti pesan selamat datang yang turun.
• Terapkan posisi sticky untuk header dan footer agar tetap terlihat saat pengguna menggulir.

4. Desain Responsif

• Gunakan fungsi CSS clamp untuk memungkinkan ukuran font menyesuaikan berdasarkan ukuran viewport.
• Batasi media queries dengan menggunakan teknik CSS modern.
• Pastikan situs web mobile-first dan responsif di berbagai perangkat.

5. Dukungan Mode Gelap

• Implementasikan mode gelap menggunakan media queries untuk mendeteksi preferensi sistem.
• Sesuaikan variabel warna agar desain bisa beradaptasi dengan mode gelap secara mulus.

6. Peningkatan Akhir

• Tambahkan JavaScript untuk memperbarui tahun hak cipta secara dinamis.
• Lakukan pengujian lintas peramban dan pastikan pertimbangan aksesibilitas terpenuhi.

Kesimpulan

• Proyek akhir menghasilkan situs web yang responsif, modern, dan estetis untuk Little Taco Shop.
• Penekanan ditempatkan pada CSS yang bersih dan dapat diolah yang memanfaatkan teknik modern dan mengurangi redundansi.
• Proyek ini menunjukkan pengembangan aplikasi CSS penuh dari HTML dasar hingga penataan tingkat lanjut.