Pada video ini kita akan latihan untuk membuat bagian hero dari situs Startup kita. Bagian hero adalah bagian paling depan dan paling atas dari situs kita. Mengapa disebut hero? Karena bagian inilah yang paling menentukan apakah pengunjung kita akan tertarik untuk membaca lebih lanjut atau tidak. Biasanya bagian hero dibuat dengan menggunakan huruf berukuran besar, disertai dengan gambar menarik.

Pada Bootstrap 4, komponen untuk membuat bagian Hero disebut dengan nama Jumbotron. Namun pada Bootstrap 5, komponen Jumbotron sudah dihilangkan dengan alasan Jumbotron ini bisa dengan mudah dibuat menggunakan Utility seperti yang telah kita pelajari pada video sebelumnya.

Nah, ini adalah jumbotron yang hendak kita buat sebagai latihan pada video ini. Pada bagian kiri terdapat judul dan satu paragraf deskripsi singkat dari aplikasi kita. Kemudian dibawahnya ada 2 buah tombol untuk mengunduh melalui Google Play atau App Store. Dan di sebelah kanan ada gambar screenshot dari aplikasi dengan menggunakan Tablet dan Smartphone.

Perhatikan bahwa Hero yang hendak kita buat bersifat responsive. Jadi apabila kita mengecilkan ukuran browser hingga breakpoint medium, maka gambar dan teks yang tadinya bersusun menyamping berubah menjadi bersusun ke bawah. Gambar ditampilkan terlebih dahulu.

Source code awal untuk latihan ini bisa diunduh dari deksripsi video. Jadi teman-teman yang ingin mengerjakan latihan ini bisa mengunduh source code awal terlebih dahulu. Setelah di-unzip, ambil dari folder dengan nama sebelum. Kemudian teman-teman bisa pause video ini terlebih dahulu dan mencoba mengerjakan latihan pada komputer masing-masing. Setelah selesai latihan, barulah melanjutkan video ini dan kita akan membahas bagaimana cara mengerjakannya.

Kita mulai kerjakan latihan kita. Pertama kita perlu membuat container terlebih dahulu ya. Baik untuk nav maupun untuk Hero. Pertama kita ke tag nav terlebih dahulu. Setelah tag pembuka Nav. Kita tambahkan div dengan kelas container. Lalu kita pindahkan seluruh isi tag Nav ke dalam div container. Sekarang bagian navigasi kita sudah memiliki margin baik di kiri maupun kanannya.

Selanjutnya kita buat juga container untuk bagian Hero. Setelah tag section, kita tambahkan div dengan kelas container. Lalu kita pindahkan seluruh isi section ke dalam container. Sekarang bagian Hero kita pun sudah memiliki margin dan sejajar dengan bagian navigasi.

Tentunya teman-teman masih ingat ya, untuk menggunakan Bootstrap Grid System, kita memerlukan 3 buah kelas, yaitu container, row dan col. Kita sudah ada container. Maka div berikutnya adalah row. Berhubung kita ingin membagi baris menjadi 2 kolom yang sama besar, maka setelah row kita gunakan 2 buah kelas col-6. Nah, sekarang posisi text dan gambar sudah bersampingan. Namun tidak responsive ya.

Kita ingin agar gambar dan text ini bersampingan dimulai dari ukuran layar medium ke atas. Oleh karena itu kita tambahkan breakpoint md pada kelas col-6. Nama kelasnya menjadi col-md-6. Nah, sekarang gambar dan text bersampingan hanya pada ukuran browser menengah keatas.

Dan masih ada satu perubahan lagi yang kita inginkan. Kita ingin agar pada saat gambar menjadi di samping, urutannya berubah menjadi text di kiri dan gambar di kanan. Ada 2 cara untuk melakukan hal ini. Yang pertama adalah merubah flex-direction menjadi row reverse pada saat breakpoint medium. Jadi pada div row kita bisa tambahkan flex-md-row-reverse.

Atau kita bisa gunakan cara kedua. Yaitu kita tambahkan order-md-1 pada kolom gambar. Jadi pada saat browser ukuran medium keatas, posisi gambar berubah menjadi di akhir.

Selanjutnya, kita lihat bagian Hero terlalu berdempetan dengan navigasi. Kita perlu tambahkan jarak. Maka kita ke tag section. Lalu kita tambahkan kelas pt-5 untuk memberikan padding di bagian atas.

Lalu perhatikan ke bagian paragraf ini, terlalu dempet dengan bagian atas dan bawahnya. Oleh karena itu kita tambahkan margin baik di bagian atas maupun di bagian bawahnya. Kita tambahkan kelas mt-4 dan mb-4.

Dan sekarang perhatikan pada saat kita mengecilkan ukuran browser, maka bagian judul menjadi menempel dengan gambar. Kita tambahkan jarak diatas judul dengan memberikan kelas mt-4. Sekarang tulisan judul sudah memiliki jarak dengan gambar. Namun perhatikan bahwa pada ukuran browser besar, judulnya menjadi turun. Jadi kita mesti mengubah kembali nilai margin top menjadi 0 pada ukuran browser medium. Kita tambahkan lagi kelas mt-md-0.

Selanjutnya kita akan memberikan warna background biru pada hero. Pertama kita ke tag section Hero terlebih dahulu. Kita tambahkan kelas custom, yaitu bg-hero. Kita buka kode css kita. Kita tambahkan kelas css baru, yaitu .bg-hero. Kita beri properti background-color dengan nilai #88fff7. Dan sekarang kita pun sudah memiliki warna latar belakang untuk bagian Hero.

Namun perhatikan bahwa bagian bawah Hero terlalu menempel ya. Jadi kita perlu tambahkan sedikit padding di bagian bawah. Kita tambahkan lagi kelas pb-5. Jadi pada bagian paling bawah Hero masih ada sedikit warna background biru.

Dan bagian terakhir dalam video ini, kita hendak mengatur tampilan dari kedua tombol ini. Pada playlist ini kita belum ada video khusus yang membahas mengenai cara mengatur button ya. Tapi caranya gampang kok. Kalau teman-teman sudah belajar Bootstrap sejauh playlist ini, sekali lihat pasti bisa. Makanya saya tidak membuat video khusus hanya untuk button saja.

Kita buka getbootstrap.com, kita pilih dokumentasi. Lalu kita pilih komponen Button. Disini ada contoh beberapa button dari Bootstrap. Dan seperti biasa, kita diberi pilihan warna-warna dasar Bootstrap, seperti primary, secondary, success, dan lain-lain. Kita lihat contoh kodenya, untuk menggunakan komponen button kita tinggal menambahkan 2 buah kelas, yaitu btn dan btn dash nama warnanya. Untuk tombol pertama kita gunakan warna primary terlebih dahulu ya.

Jadi kita tinggal ke source code kita. Kita cari tag button. Kita tambahkan kelas btn dan btn-primary. Dan kita pun sudah mendapatkan button versi Bootstrap. Pada saat kita arahkan mouse kita ke atas button, warnanya akan sedikit lebih gelap. Dan pada saat kita klik, maka akan keluar shadow berwarna biru di sekitar Button.

Untuk tombol kedua, kita menggunakan gaya Outline. Kita geser ke bawah dokumentasi Bootstrap. Disini ada contoh tombol dan contoh kodenya. Bedanya hanya di kelas warnanya saja ya. Disini kita menggunakan kelas btn-outline- diikuti dengan warna dasar Bootstrap. Kita ke kode kita dan kita ke tag button nomor dua. Kita tambahkan kelas btn dan btn-outline-danger. Dan kita pun sudah mendapatkan button outline versi Bootstrap.

Berhubung tombol pertama terlalu dekat dengan tombol kedua, maka pada tag button pertama kita tambahkan kelas me-3.

Oke, sampai disini dulu video kita kali ini. Di video berikutnya kita akan membahas cara mempercantik tampilan situs kita dengan menambahkan icon pada button, dan kita akan menambahkan wave besar seperti ini sebagai pembatas antara bagian Hero dan bagian Fitur.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.