Masih dengan pengalaman belajar desain web meskipun belum masuk kelas premium. Berikut ini tulisan lanjutan tentang cara install bootstrap secara offline. Kali ini saya akan belajar memasukan kode bootstrap kedalam file htm atau file html.
Bagi yang belum tahu, file htm atau html adalah jenis file halaman web standar di internet. Halaman inilah yang menjadi project kita dalam belajar desain web.
Adapun tool yang digunakan seperti biasa yaitu Visual Studio Code. Untuk itu, bagi yang terlewat silahkan install terlebih dahulu via Microsoft Store atau installer. Dan bagi teman-teman pengguna Linux juga bisa install vscode.
Langsung saja, berikut ini pengalaman belajar saya tentang cara input kode bootstrap secara offline.
Cara Input Kode Bootstrap Secara Offline
Cara memasukan kode bootstrap secara offline bisa dilakukan dengan beragam tool. Namun untuk artikel kali ini kita mencoba VSCode. Karena saya lihat dari para mentor juga menggunakan Visual Studio Code.
Terlebih lagi tool ini memiliki kemampuan yang bisa diperluas dengan extension. Salah satunya adalah live server untuk melihat preview pada browser. Untuk itu, agar bisa mengikuti tutorial ini disarankan sudah install live server pada vscode.
Begitu juga file css dan javascript bawaan booststrap yang harus sudah diunduh. Untuk cara unduh serta pengaturannya di vscode bisa melihat kembali pada tautan berikut ini. Setelah itu, silahkan simak cara input kode bootstrap ke dalam file html di bawah ini.
1. Buka Visual Studio Code dan lihat bagian primary side bar.
2. Pada saat folder "bootstrap" terseleksi silahkan buat sebuah file html. Caranya dengan menekan kombinasi tombol: Ctrl + Alt + Windows + N. Cara lainnya dengan klik icon "New file" seperti terlihat pada screenshot di bawah.
3. Ketik nama file, misalnya "index.html" atau "index.htm" kemudian tekan enter.
4. Pindah ke bagian isi file html yang baru saja dibuat. Silahkan ketik "!" kemudian klik "! Emmet Abreviation".
5. Sintaks html dasar secara otomatis tertulis di layar. Tag