Postingan

Layout dengan flex di Bootstrap

Gambar
 Layout dengan flex di Bootstrap Pengetian Display Flex        Display flex atau d-flex adalah properti CSS yang mengaktifkan flexbox, yaitu modul tata letak kotak fleksibel. Fungsi display flex adalah untuk mengatur layout, posisi, dan tampilan konten dengan ukuran yang belum diketahui atau bernilai dinamis contoh tanpa menggunakan d-flex Menggunakan d-flex Display Inline Flex Display inline-flex adalah deklarasi tampilan CSS yang membuat flex-container berperilaku seperti elemen level inline. Dengan begitu, elemen inline lainnya, seperti tombol, dapat mengalir di sampingnya.  contoh: Row Direction      Row direction adalah properti CSS yang menentukan arah baris atau kolom dari elemen flex. beberapa contohnya yaitu flex-row dan flex-row-reverse. contoh: bagian atas merupakan flex-row, dan yang bawah merupakan contoh flex-row-reverse Column Direction      Column direction adalah pengaturan tata letak elemen dalam sebuah f...
Posting Komentar
Baca selengkapnya

Pengenalan Bootstrap

Gambar
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...
Posting Komentar
Baca selengkapnya

TUTORIAL DAN APLIKASI GRID DI CSS

Gambar
 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
Posting Komentar
Baca selengkapnya

Belajar Flex Box di HTML

Gambar
 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      ...
Posting Komentar
Baca selengkapnya

CSS Dasar

Gambar
 CSS DASAR      CSS adalah singkatan dari Cascading Style Sheets yang merupakan bahasa pemrograman yang digunakan untuk mengatur tampilan dan format website.      CSS memiliki beberapa fungsi, di antaranya: Membuat tampilan website lebih menarik, Memisahkan konten dari tampilan visual website, Membuat tampilan website rapi dan optimal di berbagai ukuran layar, Memudahkan pengelolaan kode, Mempercepat loading halaman web. Inline CSS Inline CSS adalah metode menambahkan CSS langsung ke dalam elemen HTML Contoh: Internal CSS Berbeda dengan inline CSS yang diterapkan di elemen individu, internal CSS ditempatkan di dalam tag < style > yang berada di bagian < head > dari dokumen HTML Contoh: Eksternal CSS External CSS adalah metode di mana kamu menyimpan semua CSS rule dalam sebuah file terpisah dengan ekstensi .css dan menghubungkannya dengan halaman HTML menggunakan elemen < link > yang berapada di <head> contoh: Komment di CSS K...
Posting Komentar
Baca selengkapnya