CSS Layouting Unveiled: Strategies for Effective Web Design

Published in

Amikom Computer Club

13 min readFeb 11, 2024

Lohaa, hallloooooo guys welcome back di pelatihan ke-3. Yuhuuu pasti dah gasabarrrr kannn 😁🔥. Oke baik, kali ini guys, kita akan membahas dan mempelajari tentang CSS layouting dan responsive.

Kita flashback bentar materi pertemuan kemarin yahh, supaya lebih paham dan mantap lagi. Ada yang masih ingat pertemuan kemarin membahas apa? yupss betul,, CSS dasar. Kenapa si kak kita harus belajar dasar dulu, kenapa ga langsung slicing web aja. Hmm tentu kamu bisa saja langsung terjun ke pembelajaran frontend tingkat mahir seperti react.js. Akan tetapi pasti kamu akan menemui banyak kesulitan memahaminya. Bak kata pepatah ‘“Pohon yang besar bermula dari biji yang kecil”, begitu juga seorang frontend web expert, mereka juga memulainya dari dasar dulu. Jika fondasi kuat maka belajar ditingkat yang lebih tinggi menjadi lebih mudah.

Di CSS dasar kita mempelajari tentang seluk beluk CSS, mulai dari:

Struktur penulisan CSS : bagaimana cara kita untuk menulis kode CSS
Selector : bagaimana cara CSS mengeksekusi element html
Pseudoclass: Memilih dan mengubah gaya dari elemen HTML berdasarkan kondisi atau keadaan tertentu.
CSS unit: satuan ukuran dari CSS (px, pt, rem, em, %, cm, vmax, vh, vw, dsb)
Beberapa property dasar CSS: memanipulasi elemen HTML.
Selengkapnya, bisa dicek kembali di materi sebelumnya yaa. Supaya ga terlalu panjang materinya hehehe.

Dasar-dasar tadi sangat penting untuk dipelajari terlebih dahulu supaya di pemahaman materi kali ini menjadi lebih mudah. Let’s goo kita lanjut ke materi utama (●'◡'●).

Table of Content

· Mengenal Layouting dan Responsive CSS
∘ 1. Layouting CSS
∘ 2. Responsive CSS
· Memahami Layouting CSS
∘ A. Display
∘ B. Overflow
∘ C. Box Model
∘ Border
∘ Padding
∘ Margin
∘ D. Box Sizing
∘ E. Position
∘ static
∘ relative
∘ fixed
∘ absolute
∘ sticky
∘ E. Z-Index
· Memahami FLEXBOX, The Power of CSS Display
∘ Property pada elemen container
∘ display
∘ flex-direction
∘ flex-wrap
∘ justify-content
∘ align-items
∘ align-content
∘ Property pada elemen item
∘ order
∘ flex-grow
∘ align-self
· Responsive — Kewajiban Frontend Web Developer
· Penutup

Mengenal Layouting dan Responsive CSS

1. Layouting CSS

Kamu pasti sering membuka website, entah itu website seperti dicoding, tokopedia, unplash, ataupun yang lain. Kamu pernah tidak berpikir gimana sih cara mendesain halaman website supaya tertata rapi, terstruktur, dan bisa dimanipulasi. Misalkan didalam website pasti ada yang namanya Navigation Bar atau biasanya anak web menyebutnya Navbar, ketika halaman website di scroll keatas ataupun kebawah biasanya Navbar akan mengikuti kemana kita ngescroll. dan juga Navbar diletakkan di side atas.

Nah gimana cara buatnya? Yups betul menggunakan layouting ^_^. Masih pada gif diatas ya guys, kalian liat ada icon chat di pojok kanan bawah? dia juga sama cara buatnya dengan menggunakan layouting.

Kegunaan layouting bukan hanya itu saja, layouting juga berguna untuk mengatur tata letak elemen dari website.

Dari gambar diatas kita bisa tau bahwa membuat sebuah website diperlukan perencanaan untuk tata letaknya. Karena jika tanpa tata letak sebuah website tidak tersusun rapi dan sulit untuk di maintenance.

Didalam pembelajaran layouting CSS kamu nanti akan belajar tentang Display, Box Model, Position, Z-Index. So, baca sampai selesai ya guys ^_^

2. Responsive CSS

Kalian pasti sudah tahu bahwa website itu bisa dibuka di device manapun asalkan ada internetnya :-D. Dalam proses developing website, tidak hanya mendesain website di ukuran layar lebar saja tetapi juga harus bisa dibuka di ukuran device berapapun.

Dalam pembelajaran sebelumnya kita hanya mendesain website di ukuran layar lebar saja yaitu laptop atau sejenisnya. Ketika nanti website tersebut dibuka di device dengan ukuran layar kecil yaitu handphone, maka desainnya akan amburadul dan berantakan stylingnya🫠. Nah maka dari itu guys perlu yang namanya responsive CSS, supaya website kita aman dibuka di device dengan ukuran layar apapun, entah itu handphone, tablet, laptop, notebook, ataupun tv digital ^_^.

Di pembelajaran responsive kali ini, kamu akan belajar tentang media query.

Memahami Layouting CSS

A. Display

Display adalah salah satu property dari CSS. Kegunaan dari property ini adalah mengontrol tata letak elemen HTML, menentukan bagaimana elemen HTML ditampilkan di website. Property display memiliki beberapa value, yaitu:

inline : elemen akan sejajar ketika menggunakan value ini. Yang artinya tidak ada baris baru. di inline juga mengabaikan width dan height. Jadi meskipun kamu menambahkan width dan height mereka akan diabaikan.

block : elemen akan berada seperti tumpukan pada batu bata, yang mana memiliki baris baru. Di block width dan height dieksekusi. Sebagai contoh seperti pada tag <div>, <p> dan <section>

inline-block : mirip dengan inline akan tetapi ia menggunakan lebar dan tinggi. Cocok bagi kamu yang ingin letak elemen sejajar tapi tetap menggunakan width dan height.

flex : value yang paling banyak digunakan. Membuat elemen menjadi kontainer yang flexible dan menata tata letak dengan teori row dan column.

grid : menata tata letak elemen dengan container grid. Grid itu bisa dibayangkan seperti kumpulan gambar di galeri handphone kamu atau website seperti https://unsplash.com/ yang menerapkan value ini. Dimana gambar nya bisa berbeda-beda ukuran.

B. Overflow

Property di CSS yang mengontrol bagaimana konten yang melebihi batas pada suatu element tertentu ditampilkan. Overflow property memiliki 4 value yaitu:

visible : nilai default dari overflow property. Konten akan tetap terlihat meskipun melebihi batas pada container yang membungkusnya.
hidden : konten yang melebihi batas container akan dipotong dan tak terlihat.
scroll : konten yang melebihi batas akan dipotong dan ditambahkan scrollbar, jadi kita bisa menggeser kebawah atau atas konten yang melebihi batas tersebut.
auto : jika scroll value memberikan scrollbar meskipun konten tidak melebihi batas, akan tetapi di auto value tidak demikian. Ia hanya memberikan scrollbar ketika konten melebihi batas, jika tidak melebihi batas maka tidak akan ditambahkan scrollbar.

C. Box Model

Pernah dengar istilah padding dan margin? Jika belum tau, sini biar kakak kasih tau ^_^. Istilah padding dan margin itu merupakan salah satu property css yang tergabung dalam konsep Box Model. Apa itu Box Model? Box Model adalah konsep dimana elemen yang ada pada halaman website diproses sebagai kotak. Mulai dari paragraf, header, form, gambar, logo hingga video, sebenarnya di tampilkan oleh web browser sebagai ‘box’ atau kotak.

Didalam Box Model terdapat property-property css yang mengaturnya, yaitu:

Border

border merupakan property css yang memberikan garis pada tepi kotak.

Seperti gambar diatas border property menerima 3 value, yaitu ukuran border, style border, dan warna border. Masing-masing value harus urut tak boleh dibalik peletakannya, jika dibalik atau kamu menaruh secara acak maka property ini tidak akan bekerja.

width border value mengatur ketebalan border.
style border value mengatur jenis garis yang diberikan. ada solid, dashed, dan dotted.
color border value mengatur warna dari border.

Padding

Padding adalah jarak tepi elemen dengan konten didalamnya. Sangat berguna untuk mengatur konten supaya ada jaraknya dari tepi kotak. Padding property menerima 1– 4 width padding value. Jumlah dari width padding value yang kamu berikan berpengaruh terhadap hasil padding kamu. Contohnya bisa dilihat di gambar dibawah ini.

Margin

Kalau padding mengatur jarak tepi kotak dengan konten didalamnya, maka margin mengatur jarak tepi elemen dengan elemen lainnya. Sama seperti padding, margin memiliki 1– 4 width margin value. Berikut penerapan margin.

D. Box Sizing

Jika kamu menambahkan padding, margin atau border pada suatu elemen, maka ukuran dari elemen itu akan bertambah. Misalkan kamu memiliki kotak berukuran panjang (width) 200px dan tinggi (height) 100px. Kamu mau menambahkan padding yaitu 10px dan margin 5px. Maka ukuran panjang (width) sekarang adalah 200px + 10px + 10px + 5px + 5x => 230px.

Nah supaya ukuran elemen tidak bertambah ketika kamu menambahkan padding atau margin, maka gunakanlan property box-sizing. Beberapa value yang bisa gunakan adalah content-box | border-box. Default value-nya adalah content-box, jika kamu ingin ukurannya tidak berubah gunakan border-box.

E. Position

Pernahkah guys mengunjungi website yang memiliki navbar? Pasti pernahlah yaa ^_^, hampir tiap website pasti memiliki navbar. Ketika navbar di scroll ke bawah atau keatas biasanya ia akan mengikuti kemanapun kita scroll halaman website.

Pasti kalian bertanya-tanya gimana yah cara buatnya 🤔? Sebenarnya mudah kok guys cara buatnya, kita tinggal memakai property di css yang namanya adalah position dengan memberikan value fixed atau sticky di elemen navbar tersebut.

Jadi apa itu position property? Position adalah properti css yang digunakan untuk menentukan dan mengatur posisi elemen HTML. Kita bisa memposisikan elemen HTML secara bebas tanpa terpengaruh elemen lainnya di halaman website. Position memiliki beberapa value :

static

static adalah value default dari position. Jika kamu menggunakan value ini, maka elemen akan mengikuti alur urutan halaman. Jadi jika ada 3 elemen, elemen-elemen tersebut akan bertumpuk urut dari elemen pertama sampai ke elemen ketiga.

relative

Relative value membuat elemen bisa dipindah-pindahkan. Elemen tetap berada pada tempatnya (tidak berpindah) kecuali kamu memindahkannya dengan property top, left, right, dan bottom maka elemen akan berpindah.

.container {
  width: 300px;
  background-color: #ede88d;
  box-sizing: border-box;
}

.box {
  width: fit-content;
  margin: 5px;
  background-color: #18a5c5;
  color: black;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.ini-position-relative {
  position: relative;
  left: 20px;
  top: 10px;
}

fixed

Di fixed value, elemen akan diposisikan relatif terhadap viewport, yang berarti elemen akan selalu di tempat yang sama meskipun halaman di-scroll.

absolute

Dengan menggunakan value ini, kamu bisa mengatur letak dimana elemen ditempatkan secara bebas di halaman website. Kamu bisa menggunakan property left, right, top dan bottom untuk memindahkan elemen-nya. Akan tetapi bila kamu ingin membatasi pergerakan value ini, kamu bisa menggunakan relative value di elemen pembungkus.

.container {
  width: 300px;
  height: 200px;
  background-color: #ede88d;
  box-sizing: border-box;
  position: relative;
}

.box {
  width: fit-content;
  background-color: #18a5c5;
  color: black;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: absolute;
  top: 40%;
  left: 70px;
}

Hasil position absolute dengan diberikan position relative pada elemen pembungkus

sticky

Seperti gabungan dari position relative dan fixed, dengan menggunakan value ini, maka kita bisa memposisikan elemen sesuai dengan scroll user. Value ini sering dipakai pada Navbar website.

E. Z-Index

Ketika beberapa elemen diberikan position absolute, maka elemen tersebut akan secara otomatis tumpah tindih. Nah untuk mengatasi hal itu, dimana kita diberikan kuasa untuk mengatur urutan dari elemen, kita bisa menggunakan z-index property .

Memahami FLEXBOX, The Power of CSS Display

Sangat penting bagi kamu seorang frontend web developer untuk memahami yang namanya Flexbox. Karena flexbox itu sering sekali dipakai di pembuatan halaman website. Alasannya adalah karena flexbox mengusung konsep row and column, sehingga mempermudah dalam memahaminya.

Oke kaks, jadi apa itu flexbox? Flexbox adalah sistem tata letak di CSS yang digunakan untuk mengatur, menyelaraskan, dan mendistribusikan ruang di antara item dalam container. Flexbox adalah mode pengaturan atau konsep layout pada CSS yang digunakan untuk mengatur elemen atau container beserta item di dalamnya pada halaman web.

Sebelum melangkah jauh ke flexbox kita harus mengenali terlebih dahulu, istilah-istilah yang nantinya akan muncul di flexbox. Berikut istilahnya:

Istilah yang ada di flexbox (Source: medium Ivy Hung)

flex container : elemen yang menjadi wadah atau container dari flex-item.
flex item : elemen yang berada di dalam flex-container.
main size : ukuran horizontal container.
cross size : ukuran vertical container.
main axis : peletakkan flex item secara horizontal.
cross axis : peletakkan flex item secara vertical.

Nah, setelah mengenal istilah di flexbox, sekarang kita lanjut ke bagian selanjutnya. Tadi kita sudah mengetahui di flexbox ada elemen container dan item. Elemen container memiliki property-property flexbox yang bisa digunakan, begitu juga dengan di elemen item. Akan tetapi sebelum kamu menggunakan property-property dari flexbox, kamu harus memberikan property display: flex di elemen container.

Beberapa property yang bisa digunakan di container:

Property pada elemen container

display

Supaya bisa menggunakan flexbox, kamu harus memberikan flex value pada display property di elemen container. Ini mendefinisikan bahwa elemen container tersebut menggunakan sistem flexbox.

flex-direction

Berfungsi mengatur arah urutan elemen item dalam elemen container. Property memiliki 1 value yang bisa ditambahkan. Kamu bisa menggunakan value row | row reverse | column | column reverse.

flex-wrap

Secara default, semua items di dalam container akan berada pada satu baris meskipun ukurannya sudah tidak cukup, wrap memungkinkan untuk memindahkan items ke baris di bawahnya. Beberapa value yang disupport flex-wrap → wrap | nowrap | wrap-reverse (Nilai default: nowrap)

justify-content

align-items

Properti CSS dalam Flexbox yang digunakan untuk mengatur penempatan dan penyebaran flex item sepanjang sumbu lintang (cross axis) dalam container flex. Beberapa value yang disupport oleh align-items → flex-start | flex-end | center | baseline | stretch.

Flex Items (Source: CSS Tricks from Chris Coyier)

align-content

Properti CSS dalam Flexbox yang digunakan untuk mengatur penempatan dan penyebaran flex lines (baris dari flex item) dalam container flex ketika terdapat ruang ekstra dalam sumbu lintang (cross axis). Beberapa value yang disupport align-content property → flex-start | flex-end | center | space-between | stretch (Default value: stretch).

Tadi kita sudah mengenal tentang property apa saja yang bisa digunakan di elemen container. Selanjutnya kita akan mengenal property apa saja yang bisa digunakan di elemen items. Let’s gooo 🤓

Property pada elemen item

order

Digunakan untuk mengontrol urutan tampilan dari flex item di dalam container flex. Secara default, flex item akan ditampilkan dalam urutan yang sama seperti dalam kode HTML, tetapi dengan properti order, Anda dapat mengubah urutan tampilan mereka tanpa mengubah urutan sebenarnya dalam kode HTML. Kamu bisa memberikan value nomor misal order: 1 di elemen item

flex-grow

Menentukan kemampuan sebuah flex item untuk memperbesar (mengisi) ruang tambahan dalam container flex jika ada. Properti ini menentukan seberapa banyak ruang tambahan yang akan diberikan kepada flex item relatif terhadap flex item lain dalam container flex

align-self

Responsive — Kewajiban Frontend Web Developer

Seorang frontend web developer tentu saja harus menguasi responsive dengan css. Karena seperti yang kalian ketahui website tidak hanya dibuka di device laptop/pc, ia juga bisa dibuka di device lain seperti handphone, tablet, notebook dan sebagainya. Device pastinya memiliki ukuran layar yang berbeda-beda, ada yang 560px, 1024px, 720px, 1800px dan sebagainya.

Baik oke, jadi apa itu responsive css? Responsive css adalah eknik pengembangan web yang dirancang untuk membuat halaman web dapat menyesuaikan diri dengan berbagai perangkat dan ukuran layar, termasuk desktop, tablet, dan ponsel. Tujuan dari responsive CSS adalah untuk memberikan pengalaman user yang optimal dengan memastikan bahwa tata letak dan desain halaman web merespons secara dinamis terhadap perubahan ukuran dan orientasi layar.

Di CSS untuk membuat website responsive kamu bisa menggunakan media query.

Struktur dasar pada media query ada media-type dan media-feature.

Di Media Type kamu bisa menggunakan screen | print | speech, tapi umumnya yang sering digunakan adalah screen untuk layar.
Media Feature adalah batas ukuran panjang media query berjalan. Kamu bisa menggunakan max-width | min-width disini. Misal aku setting max-width: 560px, maka css dalam media query berjalan sampai maximal widthnya adalah 560px, setelah itu melebihi ukuran tersebut css dalam media query tersebut tidak berjalan. Begitu juga dengan Min Width, css dalam media query berjalan dimulai minimal width yang diberikan.

Demo Resposnive

Penutup

Cukup sekian materi kali ini guys tentang layouting dan responsive, mungkin materi yang kubuat ini kurang lengkap ya. Nah untuk itu kamu bisa cari-cari juga materi tambahan di internet.

Oh iya guys, supaya pemahamanmu tentang layoting dan responsive mu makin mantap, kami ada beberapa rekomendasi website buat belajar:

https://flexboxfroggy.com/ : belajar flexbox yang dikemas dengan game
https://learnlayout.com/ : belajar layouting css
https://www.w3schools.com/css/default.asp : belajar css
https://cssgridgarden.com/ : game untuk belajar css grid

Semoga membantu guys🤓🔥.

Tetap semangat belajar. Menyala abangkuhh🔥🔥