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!

Development bootstrap Sekolahkoding
Category Label Platform
Membuat bootstrap sendiri

Free Courses : Membuat bootstrap sendiri


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

Related Posts:
  1. Fungsi fungsi php pada website
  2. Belajar python untuk pemula
  3. Mengenal Event, Queue dan Listener Laravel
  4. Concurrency dengan goroutine di GoLang
  5. Sistem Relasi Eloquent di Laravel

You can support us by donate with buy us a coffee. We appreciate your donation to our work for share free udemy courses.

Get courses alert everyday on our Telegram Channel. Join Now

Insidelearn Telegram Channel

Share this courses to your friends, community.

10,000+ People trust Insidelearn! Get courses alert on Telegram or Discord.