Programming Fundamental 10

3.6 Responsive Design dengan Media Query

Untuk memastikan desain kita tidak hanya indah tetapi juga cerdas, kita perlu memperkenalkan fitur Media Query. Fitur CSS ini memberikan kemampuan unik untuk mengubah gaya tampilan, termasuk layout, ukuran font, warna, dan lainnya berdasarkan karakteristik perangkat yang mengaksesnya, seperti lebar layar (width), orientasi, atau resolusi.

Secara sederhana, Media Query adalah kunci kita untuk menciptakan CSS yang adaptif, memastikan laman web kita akan tampil berbeda dan optimal baik saat dilihat melalui ponsel, tablet, maupun layar desktop.

Gambaran umum media query

3.6.1 Basic Media Query - Mobile First Approach

Pendekatan Mobile First artinya Anda desain untuk layar kecil dulu, baru tambahkan penyesuaian untuk layar lebih besar. Berikut contoh penulisan kodenya:

/* Mobile (default) */
.container {
    width: 100%;
    padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
        padding: 2rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        width: 1200px;
        padding: 3rem;
    }
}

Penjelasan umum:
  • Tanpa @media, style default diterapkan untuk semua perangkat (biasanya mobile).
  • min-width artinya: kalau lebar layar minimal sekian pixel, gunakan style berikut.
  • Ini memastikan tampilan makin kompleks seiring layar makin besar.

3.6.2 Absolute & Relative Units

Dalam CSS, unit satuan digunakan untuk menentukan ukuran elemen, seperti lebar (width), tinggi (height), font-size, margin, padding, dan sebagainya. Unit ini berfungsi agar tampilan website dapat diatur secara proporsional, responsif, dan konsisten di berbagai perangkat.

Secara umum, unit di CSS dibagi menjadi dua kategori besar:


3.6.3 Common Breakpoints (Standar Ukuran Layar)


3.6.4 Responsive Grid

Menggabungkan CSS Grid dan media queries untuk membuat layout yang menyesuaikan otomatis dengan ukuran layar.

Berikut contoh penulisan kodenya:

.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

Penjelasan teknis:
  • Mobile → 1 kolom
  • Tablet → 2 kolom
  • Desktop → 3 kolom
  • .repeat() dan fr membuat grid adaptif tanpa harus tentukan lebar manual.

3.6.5 Responsive Typography

Ukuran teks juga harus menyesuaikan layar. Tujuannya biar readability tetap nyaman, besar di HP, tapi nggak terlalu raksasa di desktop.

Berikut contoh penulisan kodenya:

h1 {
    font-size: 2rem;
}
@media (min-width: 768px) {
    h1 {
        font-size: 3rem;
    }
}
@media (min-width: 1024px) {
    h1 {
        font-size: 4rem;
    }
}

Pro tip: Gunakan clamp() untuk kombinasi otomatis agar ukuran berubah secara proporsional tergantung lebar viewport.

h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);

3.7 DevTools untuk CSS

Setelah kita selesai mengamati arsitektur struktural dengan HTML, kini saatnya kita mengintip lapisan gaya (CSS) pada elemen laman web kita dengan cara menginspeksinya.

3.7.1 Inspect CSS

Untuk memulainya, silakan klik ikon kursor di sudut kiri atas panel DevTools Anda. Selanjutnya, arahkan dan klik pada tombol biru 'Kirim' di website yang sedang kita kerjakan. Setelah elemen tersebut terpilih, perhatikan tab 'Styles' yang terletak di bagian bawah atau kanan panel DevTools. Di sinilah, para Digiers, Anda bisa melihat secara langsung semua aturan CSS yang sedang diterapkan pada elemen tersebut.


Contoh CSS yang muncul kurang lebih seperti ini. Tombol ini menggunakan beberapa CSS: button[type="submit"], button[type="submit"]:hover dan button[type="submit"]:active, masing-masing punya aturan CSS sendiri.

button[type="submit"] {
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #0a0f14;
    background: linear-gradient(
        135deg,
        var(--accent),
        #7cf9d2 30%,
        var(--accent2) 70%
    );
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    transition: transform 120ms ease, box-shadow 200ms ease, filter 200ms ease;
}
button[type="submit"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
button[type="submit"]:active {
    transform: translateY(0);
    filter: brightness(0.98);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

Kita bisa melakukan pengecekan CSS pada tiap elemen website dengan cara tersebut.

Selanjutnya, mari kita alihkan perhatian ke area di sebelah tab 'Styles', yaitu representasi visual dari Box Model, yang ditunjukkan oleh kotak-kotak berwarna oranye, kuning, hijau, dan biru. Kotak-kotak ini memberikan ringkasan visual yang cepat mengenai dimensi, serta pengaturan spasi (margin, border, padding) dari elemen yang sedang Anda pilih.
  • Biru = ukuran konten (width × height). Misal width 1247px × 945px.
  • Hijau = padding.
  • Kuning = border.
  • Oranye = margin.

Anda mungkin memperhatikan bahwa ketika mouse diarahkan (hover) di atas tombol 'Kirim', tampilannya terlihat sedikit 'melompat' atau berubah. Untuk mengamati secara spesifik aturan CSS apa yang diterapkan saat kondisi hover tersebut terjadi, silakan klik teks :hov yang berada di sisi kanan atas panel Styles.

Setelah mengklik hov, akan muncul sebuah opsi bernama 'Force element state' (Memaksa Status Elemen). Menu ini sangat berguna karena memungkinkan Anda memaksa elemen berada dalam state tertentu, seperti :hover atau :active, untuk menguji bagaimana styling-nya akan terlihat tanpa harus benar-benar mengarahkan kursor ke sana. Silakan centang opsi :hover terlebih dahulu untuk melihat efeknya secara langsung pada elemen.

Tampilan inspect CSS Force element state

Jika benar maka muncul CSS seperti ini di panel Styles:

button[type="submit"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

Artinya, saat tombol di-hover, tampilannya jadi sedikit terangkat ke atas, lebih terang, dan bayangannya makin kuat sehingga terlihat lebih menonjol.

3.7.2 Mengedit CSS langsung di DevTools

Pertama, segarkan (refresh) halaman Anda untuk memastikan tampilan kembali ke kondisi awal. Setelah itu, pilih kembali tombol 'Kirim' menggunakan alat Inspect yang tadi. Di panel Styles, cari properti bernama border-radius yang terdapat pada class btn (saat ini nilainya mungkin 12px). Klik nilai 12px tersebut hingga berubah menjadi mode edit, kemudian ubah nilainya menjadi 0px dan tekan Enter. Anda akan segera melihat bahwa sudut tombol tersebut kini menjadi tidak lagi membulat.

Perlu diketahui, dalam praktik pengembangan web sehari-hari, para developer sering melakukan uji coba dan penyesuaian (trial-and-error) untuk mendapatkan nilai piksel yang paling ideal. Dengan fitur Inspect ini, kita dapat melakukan penyesuaian CSS secara real-time dan langsung mengamati bagaimana perubahan tersebut di render pada layar.

3.7.3 Menambahkan CSS baru

Terakhir, mari kita mencoba menambahkan aturan CSS yang benar-benar baru. Sebagai contoh, kita akan memberikan warna latar (background color) khusus pada elemen input field atau text area yang bertuliskan 'Pesan'.

Dengan cara:
  • Klik pesan text area, klik kanan lalu inspects, dan ke styles.
  • Klik tombol plus "+" dipaling bawah kanan dari textarea {}.
  • Akan muncul blok CSS baru untuk h1.
  • Klik area di dalam h1 { ... }, lalu ketik properti baru: background: white;
  • Tekan Enter. Jika benar, maka panel Styles akan menampilkan properti itu dan teks input field text arena sekarang mempunyai background warna yang dimasukan.
  • Jika sempat salah klik elemen lain atau tertekan tombol yang lain, tinggal ulangi saja dengan cara: klik lagi tombol "+" dan tulis ulang propertinya.

Dengan selesainya modul 3, Anda kini telah menguasai seni menata struktur HTML menjadi tampilan visual yang menarik dan responsif melalui CSS. Anda mampu mengontrol palet warna, tata letak, dan tipografi untuk menghadirkan estetika profesional. Namun, sebuah website modern menuntut lebih dari sekadar tampilan statis, pengguna mengharapkan adanya interaksi dan dinamika. 

Oleh karena itu, perjalanan kita akan berlanjut ke dalam pembahasan modul selanjutnya yaitu JavaScript Fundamental. Di sini, Anda akan mempelajari cara memberikan 'kehidupan' pada halaman web Anda melalui implementasi logika, animasi, dan interaktivitas. Inilah saatnya bertransisi: dari hanya menata tampilan menjadi menciptakan pengalaman pengguna yang cerdas dan interaktif."

Materi video: 


Komentar

Posting Komentar

Postingan populer dari blog ini

SIPD Chrome Extension untuk Migrasi Data dari SIPD ke SIMDA PINK Th. Anggaran 2022

Gambar
1. Siapkan Server untuk tempat backup DB lokal menggunakan WP-SIPD Sangat disarankan menggunakan hardware PC server untuk menginstall web server yang akan digunakan untuk migrasi data. Penggunaan hardware akan berpengaruh pada kecepatan saat melakukan singkronisasi. Sebaiknya juga menggunakan domain dan IP publik agar aplikasi bisa diakses dari internet. Hal ini akan mempermudah dikemudian hari untuk melakukan singkronisasi dari manapun. Pastikan web server aplikasi wp-sipd dapat terhubung dengan jaringan dari server database sql server simda. Berikut langkah-langkah install WP-SIPD pada PC server windows: Download xampp dengan php versi 7.xx, jangan menggunakan versi 8.xx karena saat ini driver odbc belum support. File dapat didownload di  https://www.apachefriends.org/download.html . Selain XAMPP dapat menggunakan web server lain sesuai kebutuhan. Yang terpenting adalah modul PHP dan database MYSQL Edit file php.ini yang bisa diakses melalui control panel XAMPP. Klik menu Config ...
Baca selengkapnya

Mapping Sumber Dana di WP-SIPD

Gambar
Permasalah mapping sumber dana di SIPD kemendagri terjadi karena settingan sumber dana melekat pada sub kegiatan dan nilai pagunya tidak mengunci atau hasil akumulasi pada rincian belanja. Hal ini membuat pemda sangat kesulitan dalam melakukan monitoring evaluasi pagu per sumber dana melalui aplikasi SIPD. Fitur custom mapping sumber dana pada aplikasi WP-SIPD dibuat untuk menyelesaikan masalah ini. Untuk menggunakan fitur ini silahkan mengikuti langkah berikut ini: Update plugin wp-sipd yang terbaru dari master zip di repository  https://github.com/agusnurwanto/wp-sipd . Jika menggunakan tool GIT tinggal jalankan perintah git pull origin master untuk mengupdate script terbaru wp-sipd. Singkronkan dulu data master Sumber Dana dari SIPD ke WP-SIPD pada menu Referensi - Sumber Dana menggunakan sipd-chrome-extension. Untuk cara installasinya bisa cek artikel  https://smkasiyahhomeschooling.blogspot.com/2021/12/sipd-chrome-extension-untuk-migrasi.html . Pada dashboard admin word...
Baca selengkapnya

Dokumentasi Aplikasi Migrasi Aset SIMDA BMD

Gambar
  Aplikasi migrasi aset dari SPBMD ke SIMDA BMD ini berbentuk plugin wordpress. Untuk melakukan installasi harus sudah menginstall wordpress terlebih dulu. Selanjutnya bisa donwload atau clone plugin SIMDA BMD di  https://github.com/agusnurwanto/SIMDA-BMD . Upload plugin di folder wp-content/plugins dan aktifkan plugin. 1. Setting Koneksi Database Login menggunakan user administrator wordpress. Buka menu SIMDA BMD  dan isi form koneksi database. Status koneksi database SIMDA . Berwarna merah berarti konfigurasi belum terkoneksi ke database SIMDA BMD. Berwarna hijau berarti sudah terkoneksi. URL API SIMDA berisi url dari aplikasi repository  https://github.com/agusnurwanto/SIMDA-API-PHP . Aplikasi ini berfungsi untuk membuat API PHP ke database SQL server. APIKEY SIMDA berisi random string untuk keperluan pengamanan request API Database SIMDA adalah nama database yang dipakai oleh SIMDA BMD Status koneksi database MYSQL SPBMD . Berwarna merah berarti belum terkone...
Baca selengkapnya