Hai palcomster, bagaimana kabar nya semoga sehat-sehat selalu ya, kali ini admin mau share cara membuat desain ui menggunakan html 5, software visual studio code sebagai text editornya, framework css3 bootstrap sebagai style nya serta chrome sebagai web browsernya. Jadi silahkan teman-teman persiapkan dahulu software yang dibutuhkan untuk tutorial ini.
- Text editor visual studio code
Link : https://code.visualstudio.com/download
- Browser google chrome
Link : https://www.google.com/intl/id_id/chrome/
Oke kalau sudah di download dan di instal sekarang buka aplikasi text editor visual studio codenya
- Nah seperti ini tampilan visual studio codenya, sekarang klik new file untuk membuat file baru
- Kemudian buat nama file nya login.html lalu klik create file untuk membuat filenya
- Selanjutnya buat template html 5 dengan mengetikan ! (tanda seru) lalu tekan tab pada keyboard
- Maka hasil yang tampil akan seperti berikut, next teman-teman isi elemen tag <title> nya seperti gambar berikut ya
- Kemudian setelah kita membuat template html nya sekarang mari menambahkan link css framework nya kedalam projek kita caranya silahkan kunjungi web https://getbootstrap.com/docs/5.2/getting-started/introduction/ kemudian scroll kebagian cdn links salin link css dan js yang ada di dalam kotak merah.
- Next kita buat tag <link> html cukup dengan mengetikan link pada vs code kalian dan pilih link:css
- Maka akan tampil kode seperti berikut silahkan copy kan css ke dalam link href dan timpa code sebelumnya, ingat ! letakan tag <link> di antara tag html <head></head>
- Selanjutnya copy kan juga link javascript ke dalam attribute src di dalam tag <script> dengan mengetikan tag <script> dan letekan sebelum tag </body>
- Silahkan kunjungi facebook.com sebagai acuan desain form login kita kurang lebih tampilannya seperti ini ygy.
Kalau semua persiapan sudah let’s code
- Pertama buat tag <div> dengan kelas continer-fluid dan vh-100 serta style warna background disini admin menggunakan warna gainsboro lihat baris
- Kedua silahkan buat dua tag <div> dengan class col-4 dan col-3 untuk membuat dua buah kolom untuk konten kita nanti lihat baris 12-17
- Ketiga buat elemen text di dalam kolom pertama seperti contoh form login facebook sebelumnya disini admin menggunakan 2 buah tag text yaitu <h2> untuk judulnya dan <p> untuk teks biasa untuk pemihan font kalian bebas mengguankan font yang kalian suka tetapi disini admin menggunakan font-family arial untuk judul dan verdana untuk teks lainnya untuk class gunakan text-primary untuk membuat warna text jadi biru fs-1 dan fs-4 untuk memperbesar ukuran huruf serta fw-bolder untuk mempertebal text lihat baris 13-16
- Ke empat buat konten untuk kolom kedua disini jika kita melihat desain form login facebook diatas kolom ini berisi form untuk login nah jadi kita akan buat tag <form> sebagai parent nya serta 2 buah tag <input> bertipe text dengan class form-control untuk tampilan input ala bootstrap dan form-control-lg untuk memperbesar ukuran form serta kita tambah kan mb-3 (margin bottom 3) untuk memberikan jarak antar elemen input nya lalu buat attribute placeholder dan isi sesuai dengan contoh form facebooknya , terakhir tambahkan tag <button> dengan class btn btn-lg untuk membuat tombol ala bootstrap ukuran besar btn-primary untuk membuat warna biru serta fw-bold untuk mempertebal elemen text dan style width:100% untuk membuat tombol memenuhi lebar kolom pada tombol lihat baris 17 sampai 21
- Nah sekarang coba kita lihat hasil nya di web browser chrome kita dengan cara klik kanan file login.html pilih open with dan kemudian klik google chrome
- Maka hasilnya akan seperti ini, gimana sudah mulai mirip tampilan login facebook kan guys
- Nah di tahap ke lima kita akan mengatur tampilannya dengan menambahkan class d-flex untuk membuat konten flexible justify-content-center untuk membuat konten di tengah secara horizontal serta align-items-center untuk membuat item ketengah secara vertikal, serta tambahkan pula tak pembungkus untuk untuk konten form lihat baris 17-21 dengan membuat class bootstrap card sebagai parent nya dan card-body sebagai child nya fungsinya untuk membuat tampilan seperti kartu pada background form nya serta shadow untuk membuat bayangan pada elemen card nya
- Tahap ke enam masukan konten form ke dalam card yang kita buat sehingga menjadi seperti ini, oh ya kalian juga bisa menambahkan class border-0 di card nya jika ingin membuat pinggiran kartu nya terlihat lebih halus
- Tahap ketuju tambahkan text “lupa kata sandi ?” bungkus menggunakan tak <p> dengan class text-center untuk membuat text ketengah my-3 untuk membuat margin secara vertikal serta tag <a> untuk membuat nya menjadi link dan class text-decoration-none untuk menghilangkan garis bawah pada link nya serta tag <hr> untuk membuat garis horizontal
- Tahap kedelapan buat tombol dengan tag seperti di gambar yah seperti kita membuat tombol sebelumnya tetapi untuk tombol kali ini kita beri style warna limegreen dan bungkus mengunakan tag dengan kelas d-flex agar posisi tombol bisa diatur lihat baris 27-31
- Tahap terakhir buat teks opsional seperti yang ada di halaman login facebook menggunakan tag <p> dengan class mt-4 untuk memberikan jarak keatas serta text-center untuk membuat gambar ketengah lihat baris 33
- Finally Palcomster akhirnya selesai sudah seluruh kode yang perlu kita buat terakhir kalian cukup refresh tampilan login.html yang telah kalian buka sebelumnya dan hasilnya seperti ini gimana mirip kan
- Nah gimana palcomster sekarang udah tau kan gimana web designer facebook membuat ui halaman login mereka see you on the next tips and happy coding
