Lebih Rapi dengan CSS Bootstrap

-

 

Day 3 – Lebih Rapi dengan CSS Bootstrap

Apa itu Bootstrap?

‌Bootstrap adalah sebuah framework untuk membangun website di sisi front-end . framework yang disediakan oleh Bootstrap yaitu framework CSS dan Javascript. Untuk saat ini kita hanya akan pakai CSS nya saja. Keunggulan penggunaan Bootstrap di antaranya :

  • sistem grid yang responsive yang berarti menyesuaikan lebar layar atau viewport sehingga jika website kita dibuka dengan berbagai macam device seperti laptop, tablet dan handphone tampilannya dinamis dapat menyesuaikan agar tetap nyaman dilihat.
  • mempunyai banyak elemen UI (User Interface) seperti pop-up modal, tombol buttons, card dan lain-lain yang dapat dimanfaatkan untuk mempercantik tampilan web.
  • class yang reusable atau dapat kita pakai berulang kali yang artinya kita tidak usah repot membuat style di berbagai halaman, cukup panggil classyang diinginkan untuk dapat memberikan styling pada element atau tag.
  • kompatibel dengan berbagai macam browser

‌

Menginstall Bootstrap

Dalam dokumentasi ini akan digunakan Bootstrap 4 sebagai contoh kasus. Bootstrap 4 memiliki halaman dokumentasi tersendiri yang dipakai sebagai pedoman pemakaian di link berikut.

Terdapat beberapa cara untuk memasangkan Bootstrap pada halaman web atau html:

  • memasangkan file CDN
  • mendownload source file Bootstrap

memasangkan file CDN

File CDN yaitu  segala file yang dibutuhkan untuk menggunakan Bootstrap yang bersumber dari suatu pranala atau link tertentu. Keuntungannya adalah cara ini merupakan cara termudah untuk memasangkan Bootstrap pada project web kita dan tidak usah mendownload apapun. Kekurangannya adalah dalam pengembangan project web kita harus selalu terhubung dengan internet karena file CDN tersebut diperoleh dari website luar.

Di halaman dokumentasi bootstrap kita dapat copy bagian CSS:

copy baris code link stylesheet lalu paste di halaman html

setelah copy lalu paste di halaman html yang sudah kita buatkan misalkan index.html. (pastikan paste di bagian element <head>)

setelah itu di bagian body kita dapat mulai menuliskan element-element HTML. contohnya berikan saja sebuah heading untuk melihat perubahan style yang diberikan bootstrap:

<h1>Header ini ditulis dengan Bootstrap</h1>

download file Bootstrap

file Bootstrap dapat didownload di halaman berikut. Pada bagian “Compiled CSS and JS” terdapat tombol download.

setelah terdownload maka akan terdownload sebuah file .zip, ekstraksi file zip tersebut lalu kita akan dapati dua buah folder yaitu css dan js.

tempatkan index.html sejajar dengan folder css dan js

kita dapat tempatkan file css dan js di satu folder terpisah misalkan folder dengan nama public atau assets atau kita cukup saja tempatkan kedua folder tersebut sejajar dengan index.html kita.

Di dalam folder css terdapat file seperti berikut:

dari list file tersebut kita cukup ambil satu file saja untuk bisa dipasangkan di index.html, misalkan dipilih bootstrap.min.css . maka kita hubungkan index html kita dengan file css tersebut seperti berikut:

pastikan href yang kita berikan sesuai dengan tempat file css berada

setelah itu kita siap untuk mulai menulis elemen-elemen HTML di bagian body dengan Bootstrap. contohnya kita tulis sebuah heading maka akan tampil di browser sebuah heading yang sudah diberikan styling oleh Bootstrap

<h1>Heading ini ditulis dengan Bootstrap</h1>

Mulai Berkenalan dengan Komponen Bootstrap

Setelah pemasangan Bootstrap berhasil, kita dapat lanjutkan untuk mulai berkenalan dengan sistem grid dan komponen-komponen yang disediakan oleh Bootstrap. Hal ini berguna agar kita dapat berlatih membuat layout web dengan lebih mudah menggunakan bantuan CSS Bootstrap.

Berikut beberapa tutorial yang dapat diikuti:

  • Video Tutorial Channel Framework Indonesia berikut : 
sumber: youtube channel Framework Indonesia



Day 3 – CSS Bootstrap Challenge

Target

‌

  • Membuat layout HTML dengan CSS Bootstrap

‌

Petunjuk Pengerjaan

‌

1. Menambahkan Bootstrap pada HTML 

‌

Buatlah sebuah file html dengan nama index.html lalu masukkan blok kode di bawah ini di bagian head.exit: Ctrl+↩

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

‌

Cara lain menambahkan CSS Bootstrap ke dalam project HTML adalah dengan mendownload file CSS dari link https://getbootstrap.com/docs/4.3/getting-started/download/ lalu simpan ke dalam folder project HTML. Memasangkan CSS Bootstrap ke dalam HTML sama dengan memasangkan file CSS biasa ke halaman HTML seperti pada materi kemarin.‌

2. Membaca Layout / Wireframe

‌

Kita akan membuat mini e-commerce. Berikut ini adalah layout dari website yang ingin kita buat:

Enter a caption for this image (optional)

‌

Beberapa ketentuan:‌

  • untuk Bagian Jumbotron boleh menggunakan gambar statis saja atau slider atau carousel (silakan cari di google)
  • Box ITEM1 dst adalah Card yang memuat gambar (silakan cari component Card di Bootstrap). Di dalam Card tersebut harus memuat informasi harga, deskripsi, dan button Tambahkan ke Keranjang.

‌

3. Implementasi Layout pada HTML

‌

Mengimplementasikan layout dengan Bootstrap Setelah melihat layoutnya, coba implementasikan Bootstrap ke dalam index.html yang sudah kita buat agar tampilannya sesuai. Sangat dibolehkan untuk berkreasi menggunakan component atau class yang tersedia di Bootstrap.



Komentar

Posting Komentar

Postingan populer dari blog ini

Semi - CMD command prompt

-
Gambar
CMD atau Command Prompt adalah sebuah perintah DOS yang ada di windows dan dapat kita gunakan baik secara online (terkoneksi dengan internet) maupun offline (tidak terkoneksi dengan internet). CMD sekarang tersedia pada semua sistem yang berbasis Windows NT seperti Windows 2000, Windows 2003/2008/2012, Windows XP, Windows Vista, dan Windows 7/8/8.1/10. sedangkan pada windows 95 dan 98 baris perintahnya disebut dengan command.com. CMD ini seperti yang saya katakan kepada anda diatas tadi memilik beragam fungsi yang powerfull. Seperti pada jaringan yaitu jaringan LAN di WiFi, kita dapat mempercepat kecepatan koneksi internet kita sekaligus memperlambat koneksi orang. Kita juga dapat menyerang sebuah website untuk di down servernya dengan CMD, atau bisa kita gunakan untuk melihat alamat IP kita dan hebatnya kita dapat mengakses ftp sebuah website melalui cmd ini. Sedangkan cmd jika tidak terkoneksi dengan internet, dapat kita lakukan untuk melakukan banyak juga tugas,
Baca selengkapnya

Menghias HTML dengan CSS

-
Gambar
  Day 2 – Menghias HTML dengan CSS Cascading Style Sheet atau dikenal dengan CSS merupakan bahasa style sheet yang berguna untuk membantu menyajikan dokumen yang ditulis dengan HTML. CSS dipakai untuk mendesain halaman depan atau tampilan website ( front end ). Menggunakan CSS kita bisa mengatur warna , ukuran , posisi ,  background , dan lain lain. Sehingga ada nilai estetika yang ditambahkan dalam tampilan suatu website. Selektor , Properti dan Value  Pada CSS ada beberapa istilah biasa kita temukan diantara : selector , properti, dan value . Kita mempelajari terlabih dahulu pengertian dari ketiga istilah tersebut. Selektor  adalah metode pengelompokan syntax didalam CSS. Selector juga dapat diartikan sebagai aturan yang digunakan untuk memisahkan beberapa syntax dengan target yang berbeda. Properti  adalah suatu jenis style CSS yang berfungsi memberikan style pada selector yang telah ditentukan. Property pada CSS sangat banyak sekali. Banyak contoh properti css seperti :  background
Baca selengkapnya

Semi - PORT KASAR

-
Gambar
<   Komputer merupakan serangkaian sistem yang terdiri dari beberapa komponen, yang sering kita kenal dengan perangkat keras komputer. Perangkat keras komputer tersebut memiliki fungsi yang bermacam – macam, mulai dari melakukan pemrosesn informasi, penyimpanan data, hingga menampilkan display. Beberapa perangkat keras tersebut memiliki port-port tertentu untuk memaksimalkan fungsi dari perangkat tersebut. Port sendiri apabila dijelaskan sederhana sering kita sebut dengan istilah colokan. Colokan atau port ini dapat menghubungkan komputer dengan hardware eksternal dan hardware utilitas lainnya agar bisa bekerja dengan baik. Fungsi dari Port Fungsi utama dari port itu sendiri adalah untuk menghubungkan komputer dengan komponen eksternal komputer. Biasanya dengan menggunakan kabel, sehingga perangkat bisa saling terhubung dengan komputer. Contoh penggunaan port misalnya adalah port USB, port Keyboard, HDMI dan lainnya. Jenis dan Kegunaan Masing-masin
Baca selengkapnya