Setelah berhasil install bootstrap 5 snippet extension kita lanjutkan dengan praktikum. Tool yang diperlukan masih dengan Visual Studio Code. Dan dengan dua extension yang digunakan sampai detik ini. Yaitu bootstrap 5 snippet extension dan live server yang menghubungkan browser.
Bagi teman-teman yang terlewat episode sebelumnya jangan khawatir. Karena dokumentasi untuk hal tersebut sudah diarsipkan dalam blog. Bahkan sejak pertama kali install vscode; baik melalui installer maupun Microsoft Store.
Untuk itu silahkan akses materi sebelumnya dulu jika merasa ketinggalan. Seperti misalnya cara input kode bootstrap secara offline dan materi yang lainnya. Adapun bagi yang sudah mengikuti secara up to date silahkan simak tutorial kali ini tentang cara menggunakan bootstrap 5 snippet extension.
Adapun pemilihan versi Bootstrap yang beredar sengaja menggunakan versi ini. Alasannya karena versi terbaru pada saat artikel ini ditulis; yakni versi 5.
Cara Menggunakan Bootstrap 5 Snippet Extension
Bootstrap 5 Snippet Extension adalah salah satu dari sekian banyak extension yang ada di vscode. Kehadiran extension semisal ini tentu sangat membantu web designer maupun pemula. Meskipun sebagian pihak ada yang mengatakan untuk menghindari. Namun secara sudut pandang pembelajar otodidak tidaklah demikian.
Bahkan sebaliknya, kemudahan yang diberikan extension ini menarik minat untuk belajar dan mencoba. Berbeda halnya jika seorang pemula sudah diberikan metode yang sulit dengan cara biasa. Toh saya sendiri dulu pernah belajar Turbo Pascal versi 5. Dan seiring perkembangan zaman, popularitasnya semakin tenggelam meskipun disebut sebagai bahasa tingkat tinggi.
Begitu juga Microsoft Front Page Express yang juga pernah saya pelajari waktu itu. Sekarang bukankah sudah discontinued? Termasuk generasi penerusnya discontinued juga kan? Mungkin inilah seleksi alam dalam dunia pemograman. Karena sebagai manusia tentu kita ingin mencari cara yang lebih mudah untuk membuat sebuah web desain atau program.
Dan kembali ke titik permasalahan yang ingin saya sampaikan adalah: Visual Studio Code ini justru hadir dengan beragam extension agar hidup seorang web designer atau pembelajarnya semakin indah. Bootstrap 5 Snippet Extension adalah salah satu contoh kemudahannya.
Anda tertarik untuk mencobanya? Berikut ini cara menggunakannya dengan Visual Studio Code.
1. Buka Visual Studio Code.
2. Buat sebuah file htm atau html yang tidak hanya disertai struktur file html dasar. Tapi juga sudah memanggil css dan js bawaan bootstrap. Lihat kembali pada bagian cara input kode bootstrap secara offline.
3. Letakan kursor diantara tag <body> dan </body>.
4. Ketikan b5 dan arahkan kursor ke menu yang muncul otomatis.
5. Scroll ke bawah jika belum menemukan kode snippet yang diinginkan.
6. Cara lainnya dengan mengetikan beberapa kata dari kode snippet. Misalnya ketik b5-nav untuk memunculkan kode snippet navigasi dari bootstrap. Nav ini biasa digunakan untuk membuat menu.
7. Pada contoh kali ini kita pilih b5-navbar dengan cara sorot tulisan tersebut kemudian klik. Untuk Anda yang ingin memilih lainnya bisa coba b5-nav, b5-nav-base, b5-nav-pill, b5-nav-tab atau lainnya.
8. Jika memilih kode snippet "b5-navbar" ini maka akan tertulis otomatis baris kode seperti berikut.
9. Tekan Ctrl + S atau tekan tombol File > Save untuk menyimpan.
10. Klik kanan dan pilih "Open with live server".
11. Hasil pada browser akan tampak menu navigasi seperti ini.
12. Silahkan edit kode secara manual jika hasilnya belum sesuai dengan apa yang anda inginkan.
13. Tambahkan baris kode lainnya melalui snippet tadi dan edit juga agar semakin mempesona.
Kesimpulan
Teknologi snippet seperti tongkat sihir yang cuma butuh beberapa kata mantra. Sebagaimana terlihat pada contoh di atas ketika membuat menu navigasi. Bukankah cara seperti ini terlihat sangat mudah dan menyenangkan?
Selamat mencoba.
Tidak ada komentar:
Posting Komentar