Daftar Isi
Menentukan Identitas Visual
Hari ini aku benar-benar menyelami dunia pengembangan web. Proyek yang ingin kubangun adalah website untuk Nestique, merek desain interior yang chic dan estetis.
Langkah pertama adalah menentukan karakter visual website. Aku ingin warnanya punya kesan profesional namun tetap estetis. Aku bertanya tentang warna biru dan mencobanya, ternyata warna ini tidak cocok dengan desain interior yang akan ku bentuk.
Lalu aku mencari nama untuk webku. Awalnya aku akan memakai nama CTRL-8, Tapi akhirnya aku memilih Nestique karena lebih elegan dan estetik, ini adalah gabungan dari kata “nest” (sarang) dan sentuhan Prancis yang memberi kesan premium dan artistik.
Pengaturan Gambar dan Banner
Aku mulai mengunggah gambar untuk banner beranda. Gambarnya harus berukuran 1920x800px, dan aku meminta bantuan kepada chatgpt untuk mengubah ukurannya secara akurat.
Aku juga belajar bagaimana menyisipkan gambar ke artikel Joomla. Ternyata caranya adalah dengan:
Aku memahami pentingnya memastikan nama file benar, tidak ada spasi, dan file berada di folder `/images/`. Kesulitan yang aku hadapi saat bagian ini adalah ketika aku harus memasukkan gambar banner, karena aku belum memahami position dari template.
CSS dan Responsivitas
Ketika aku membuat tampilan hero banner, aku mulai mengulik CSS, karena walaupun menggunakan joomla kita juga harus memberikannya code supaya memenuhi desain web yang kita inginkan.
Aku belajar bahwa top: 50% dan transform: translate(-50%, -50%)` digunakan untuk menempatkan elemen tepat di tengah layar. Aku juga mengubah properti CSS seperti max-height, width, dan padding agar elemen tetap terlihat rapi di semua ukuran layar, konsep responsiveness mulai terasa nyata di sini.
Struktur Halaman Website
Aku mulai menyusun struktur halaman utama yang seharusnya ada di website desain interior profesional milik ku
Dengan Joomla, aku membuat halaman-halaman ini dari menu Menus > Main Menu > Add New Menu Item dan menghubungkannya ke artikel atau kategori tertentu.
Elemen Card dan Navigasi
Aku tertarik dengan tampilan card. Meski joomla tidak menyediakan visual builder atau modul drag-and-drop, aku belajar membuatnya dengan HTML seperti:
Awalnya card-nya tidak bisa diklik dan codenya menghilang, ternyata aku lupa klik toggle editor di Joomla, yang penting agar kode HTML tidak dihapus otomatis oleh editor visual.
Menambahkan Modul Profil di Sidebar-Right
Aku ingin membuat profil singkat. Aku menggunakan modul Custom, menaruh gambar dan teks di dalamnya, lalu menetapkan posisinya ke `left` atau `sidebar-left` tergantung layout.
Detail Pemrograman yang Kupelajari
Selama proses ini, tanpa sadar aku mempelajari banyak hal teknis yang sangat penting:
- Dasar CSS seperti `position`, `transform`, `margin`, dan `padding`
- Cara membuat gambar responsif
- Mengatur struktur HTML manual karena template tidak punya builder
- Mengelola gambar di Joomla via Media Manager
- Memahami struktur artikel dan menu Joomla
- Menghindari penghapusan kode dengan Toggle Editor
- Menggunakan atribut `alt` untuk SEO dan aksesibilitas
- Membangun tampilan modular (seperti hero, card, dan sidebar) secara manual
Kesimpulan
Dari sekian banyak hal teknis dan desain yang kulalui hari ini, aku sadar bahwa membangun website adalah gabungan antara seni, logika, dan kesabaran. Tak semuanya bisa di-drag-and-drop. Tapi justru di situlah aku belajar. Sedikit demi sedikit, Nestique mulai berbentuk.
Besok mungkin aku akan lanjut membuat halaman portofolio, atau mulai mengintegrasikan form kontak. Tapi hari ini, aku bangga sudah sejauh ini.
You are not authorised to post comments.