Basic Web Programming - M. Rafli Maftuh A.

PENGENALAN BOOTSTRAP Pengertian Bootstrap      Bootstrap adalah framework open-source dan gratis yang digunakan untuk membuat situs web dan aplikasi web, Bootstrap menggunakan HTML, CSS, dan JavaScript untuk menyederhanakan proses pembuatan situs web. Dengan Bootstrap, pengembang dapat membuat situs web yang responsif dan seluler, serta meningkatkan tampilan dan nuansa visual situs web. Keuntungan Menggunakan Bootstrap Bootstrap memiliki fitur-fitur yang mudah dipelajari, serta banyak tutorial dan forum online. Bootstrap dapat menyesuaikan tampilan situs web dengan baik di berbagai perangkat. Bootstrap memiliki komunitas pengembang yang besar dan aktif, sehingga Anda dapat menemukan banyak sumber daya jika mengalami masalah. Praktek menggunakan Bootstrap 1. Membuat Hello World      Buka website Bootstrap  dan copy kode yang disediakan      Paste kode nya di vs code     perbandingan jika tidak di link dengan bootstrap 2. Co...

 GRID DI CSS Pengertian Grid      Grid di CSS adalah spesifikasi yang memungkinkan pengembang untuk mendefinisikan tata letak halaman web dalam bentuk grid dua dimensi. Grid ini terdiri dari baris dan kolom yang dapat diisi dengan elemen-elemen HTML. Fungsi Grid Membagi halaman menjadi beberapa wilayah utama Menyelaraskan elemen ke dalam kolom dan baris Membuat desain yang lebih kompleks dan responsif 1. Grid Layout 2. Grid Element 3. Inline-grid 4. Grid : Column-gap 5. Grid : Row-gap 6. Grid : Gap Source code di  GitHub

 Belajar Flex Box di HTML Pengertian Flexbox      Flexbox adalah sebuah konsep layout atau mode pengaturan dalam CSS yang digunakan untuk mengatur elemen atau container beserta item di dalamnya pada halaman web, Flexbox memungkinkan pengaturan layout, posisi, dan tampilan dari suatu konten yang ukurannya belum diketahui atau bernilai dinamis, nama Flexbox diambil dari kata flexibel yang berarti mudah diatur, disesuaikan, dan ditukar-tukar. Latihan 1. Flex Wrap     Buat file latihanflexbox.html dan style.css     Hasil untuk flex-wrap : wrap     tampilan akan turun kebawah jika jendela diperkecil      Hasil untuk  flex-wrap : nowrap           Dengan nowrap, semua item flex akan mencoba untuk menyesuaikan diri dalam satu baris atau kolom. Jika ruang tidak cukup, item-item akan mengecil dan menyesuaikan diri.      Hasil untuk  flex-wrap : wrap-reverse      ...