Hari ini adalah hari yang produktif dan penuh eksplorasi dalam perjalanan belajarku. Aku menghabiskan hampir seharian untuk mengerjakan tampilan website yang dipakai dalam CMS Joomla.
Meskipun awalnya agak bingung karena tidak menemukan Layout Builder, aku akhirnya memahami bahwa ada fitur Template Option yang bisa digunakan sebagai pengganti untuk mengatur struktur dan posisi modul di halaman website.
Daftar Isi
Belajar Struktur HTML & Flexbox
Pertama, aku belajar tentang bagaimana membangun struktur HTML dasar untuk menampilkan konten seperti card yang isinya logo dan deskripsi layanan. Ternyata, setiap card perlu didefinisikan dengan div dan perlu dibungkus dengan struktur yang rapi supaya mudah diatur dalam CSS.
Aku mulai memahami bagaimana pentingnya membungkus beberapa elemen HTML dalam satu div agar mereka bisa sejajar dalam satu baris. Konsep seperti ini disebut dengan container wrapping, dan sangat krusial saat ingin menampilkan beberapa item seperti logo atau layanan dalam bentuk grid atau horizontal.
CSS: Styling Card, Flexbox, dan Ukuran
Di sisi CSS, aku belajar banyak hal hari ini. Mulai dari membuat desain card modern menggunakan properti seperti:
- border-radius: untuk membulatkan sudut card
- box-shadow: untuk memberi efek bayangan
- max-width dan min-width: untuk membatasi ukuran card agar konsisten
- display: flex, align-items: center, dan gap: untuk membuat isi card sejajar secara horizontal
- object-fit: contain: untuk memastikan gambar dalam card tidak pecah atau tertarik
Aku juga bereksperimen dengan properti overflow-x: auto untuk membuat slider horizontal dengan scroll, lalu mencoba menggantinya dengan panah navigasi dan bulatan indikator seperti slider profesional.
Walau belum selesai sempurna, aku sudah tahu cara kerjanya: butuh kombinasi CSS, HTML, dan sedikit JavaScript untuk fungsionalitas navigasi.
Modular Design: Card Dalam Card
Salah satu pelajaran penting hari ini adalah bagaimana membuat 4 card kecil di dalam 1 card besar. Caranya ternyata cukup logis: bungkus semua card kecil dalam satu div container yang diberi gaya display: flex dan gunakan gap serta justify-content agar tampilannya rapi dan tidak melebihi ukuran.
Typografi & Layouting
Aku juga memperhatikan penempatan teks dan mencoba membuat heading <h1> dan <h2> lebih menarik dengan memusatkan teks menggunakan text-align: center. Ini terlihat sepele, tapi memberi dampak visual yang besar untuk keindahan halaman web.
Aku lebih suka menambahkan <h1> <h2> ataupun <p> dengan cara mengcoding dari pada harus menulis dalam kolom editor yang sudah disediakan, karna dengan code yang sudah kita masukkan, typografinya lebih gampang disesuaikan dengan keinginan diri sendiri.
Error Handling
Tak lupa, aku juga menemukan error PHP:
Warning: Undefined property: stdClass::$custom_class
Dari pesan itu, aku belajar pentingnya mengecek variabel dan properti yang belum didefinisikan saat menggunakan template atau module Joomla, apalagi jika kita menyisipkan atau mengedit modul custom.
Hal yang Aku Pelajari Hari Ini
- Cara menggunakan HTML untuk membuat struktur card dan container
- CSS Flexbox untuk menyusun layout horizontal dan sejajar
- Styling card dengan warna, padding, bayangan, border, dan ukuran
- Menangani gambar dalam layout responsif dengan object-fit
- Scroll horizontal dan konsep slider manual
- Membuat heading dan text alignment agar terlihat rapi
- Menangani error sederhana dari template PHP
- Membedakan antara min-width, max-width, dan width di CSS
- Membungkus card kecil ke dalam card besar (modular design)
Target Hari Esok
Mungkin untuk besok aku sudah mulai fokus untuk membuat page article-blog, aku juga akan menyempurnakan halaman home dan about us yang sudah aku selesaikan hari ini.
Kesimpulan
Hari ini benar-benar membuatku lebih paham bagaimana halaman website dibangun dari nol, dan bagaimana komponen sederhana seperti card bisa menjadi elemen visual yang kuat. Meski banyak coba-coba dan sedikit frustrasi di awal, semua terbayar saat aku melihat hasil akhirnya tampil rapi dan modern.
Besok, aku berencana mulai belajar transisi dan animasi sederhana supaya interaksi antar elemen lebih dinamis dan menarik. Untuk sekarang, aku cukup bangga dengan hasil hari ini.
You are not authorised to post comments.