Studi kasus pembuatan facebook registration page

Pada materi sebelumnya, kita sudah belajar mengenai bagaimana cara pembuatan style, table, form dan lain-lain. kali ini, untuk mengasah skill dan mengingat kembali materi yang sudah kita pelajari sebelumnya maka kita akan membuat facebook registration page, demonya bisa anda lihat disini  atau melalui url https://mangcoding.github.io/fb.

Dengan adanya tutorial ini, mudah-mudahan memberikan gambaran proses pembuatan layout yang terstuktur dan penyisipan style yang lebih tepat kedalam elemen yang telah kita buat. langsung saja simak dan ikuti tutorial dibawah ini

1. Menentukan Elemen layout

seperti halnya web-web pada umumnya, halaman web selalu terdiri dari header, content dan footer. sedangkan untuk navigasi, bisa kita sisipkan di bagian header, content atau bahkan footer. di beberapa website ada juga yang menyediakan sidebar untuk navigasi dan banner. Untuk membuat halaman registrasi seperti faceboo, navigasi menu diletakkan dibagian footer. secara garis besar layoutnya bisa kita gambarkan seperti dibawah ini.

2. Membuat Elemen sesuai dengan layout

Perhatikan gambar sebelumnya, tiap elemen HTML kita anggap sebagai sebuah kotak yang melingkar. lalu kita isi kotak itu dengan elemen-elemen yang kita butuhkan. dalam satu kotak besar terdapat sebuag kotak lain yang mungkin didalamnya ada kotak lagi yang lebih kecil.

dengan melihat layout diatas, kita akan buat elemen HTML sesuai dengan racangan yang telah kita buat.

Perhatikan rancangan elemen diatas. pada tiap elemen baik itu header, content dan footer kita sisipkan class container. class container disini berfungsi agar content yang kita buat dari atas ke bawah sejajar. Perhatikan gambar berikut ini.

Perlu diingat, kita bebas menulis nama class sesuai yang kita mau dan tentu saja masalah sejajar/simetris dari atas-kebawah tergantung dari layout yang kita buat. Untuk kasus kali ini kita akan buat sejajar biar lebih rapih dan elegan.

3. Membuat Header

Setelah memahami pembahasan diatas, mari kita buat rancangan header sesuai dengan facebook aslinya. kali ini, kita akan membuat logo facebook di sebelah kiri dengan membuat class leftContent dan form login disebalah kanan dengan membuat class rightContent (perhatikan kembali gambar acuan/sketsa yang kita buat diatas).

Untuk pembuatan logo, kita akan cukupkan dengan membuat heading, sedangkan untuk form login, kita akan menggunakan table agar layouting lebih mudah. (Materi layouting sesungguhnya akan kita bahas pada materi berikutnya).

dan untuk CSS nya akan kita buat sebagai berikut :

lengkapnya sebagai berikut :

Bagaimana kawan-kawan? Menarik bukan?
Saya harap jika ada pertanyaan seputar materi yang ada di artikel ini langsung tanyakan di kolom komentar, atau melalui facebook page saya di halaman ini.

demikian tutorial studi kasus pembuatan registration facebook bagian 1. untuk lanjutannya, akan kita bahas pada artikel selanjutnya.

keep Learning ^_^
Semangat