Membuat bootstrap sendiri

Penasaran gimana sih struktur dibalik css framework seperti bootstrap atau bulma. Kita lihat yuk cara bikinnya, dengan itu kita punya struktur layout dasar yang bisa kita pakai di berbagai proyek, sangat menghemat waktu!

Poin: 120 EXP

trailer bootstrap sendiri setup gulp locked icon sistem grid dasar locked icon container dan grid locked icon membuat cards locked icon cards versi horizontal locked icon membuat variasi tombol locked icon section hero locked icon mempercantik input locked icon helper css locked icon menyusun navigasi locked icon mengatur responsive locked icon

Detail Kelas

trailer bootstrap sendiri

Penasaran gimana sih bikin css framework macam bootstrap atau bulma, mau nyoba bikin bootstrap sendiri? yo lihat trailernya dulu


setup gulp

Sebelum terjun ke html dan cssnya, kita siapin dulu file gulp yang akan ngebantu kita selama proses ngerjainnya


sistem grid dasar

Dasar dari website yaitu sistem kolomnya. Gimana bikin sistem grid atau kolom yang baik dengan flexbox?


container dan grid

Membuat container dan memperbaiki grid sebelumnya


membuat cards

Membuat cards, element yang biasa menampilkan feature-feature dari website kita atau hal hal yang menggunakan gambar


cards versi horizontal

Membuat cards, kali ini versi horizontalnya, seperti yang biasa ada di komentar-komentar timeline facebook. Ada juga cara membuat avatar dengan gambar bulat


membuat variasi tombol

Membuat tombol cantik yang beraksi saat di hover dan punya pilihan ukuran juga warna


section hero

Bagian section hero yang biasanya ada di awal halaman dengan isi judul dan subjudul dari website


mempercantik input

Sekarang kita percantik input type text dan textarea yang umum digunakan di form


helper css

Beberapa fungsi tambahan, walaupun kecil tapi sering kita ulang-ulang. Untuk itu kita buat kelas css nya untuk menghemat waktu nantinya!


menyusun navigasi

Membuat navigasi sederhana dengan menyediakan tempat logo dan menu nantinya


mengatur responsive

Yang ngga boleh lewat bagian responsive, dengan stuktur layout dari flexbox, mengatur pada ukuran layar kecil jadi lebih mudah


Membuat bootstrap sendiri

time icon 11 bulan yang lalu
level icon Pertengahan