Tag: Facebook Page

Photo by Solen Feyissa on Unsplash

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 Studi kasus pembuatan 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

eperti 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.

Selanjutnya, pada 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.

    <header>
      <section class="container">
        .... diisi logo dikiri dan form login di kanan ....
      </section>
    </header>
    <section class="content">
      <section class="container">
        .... diisi intro dikiri dan form registrasi di kanan
      </section>
    </section>
    <footer>
      <section class="container">.... disi menu footer ....</section>
    </footer>

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).

<header>
      <section class="container">
        <h3 class="logo leftContent">Facebook</h3>
        <section class="login-form rightContent">
          <form action="">
            <table>
              <tr>
                <td>Email or Phone</td>
                <td>Password</td>
                <td></td>
              </tr>
              <tr>
                <td><input type="email" /></td>
                <td><input type="password" /></td>
                <td><button type="submit">Log in</button></td>
              </tr>
              <tr>
                <td></td>
                <td><a href="">Forgetten account?</a></td>
                <td></td>
              </tr>
            </table>
          </form>
        </section>
      </section>
    </header>

dan untuk CSS nya akan kita buat sebagai berikut :

* {
margin:0; padding: 0;
}
*, *:after, *:before {
          box-sizing: border-box;
}
header {
          width:100%;
          background:#435F9C;
}
header:after, .content:after, .form-group:after, footer .menuFooter:after {
          content:"";
          display:block;
          clear:both;
}
body {
          font-family: Helvetica, Arial, sans-serif;
          color:#333;
}
.display-block {
          display: block;
          width:100%;
}
.container {
          width:960px;
          margin:0 auto;
}
a {
          text-decoration: none;
          display: inline-block;
}
h3.logo {
          padding:20px 0px;
          color:#FFF;
          font-size: 36px;
}
.leftContent {
          width:58%;
          padding:20px 55px 0px 0px;
          float: left;
}
.rightContent {
          width:42%;
          float: right;
}
.login-form {
          padding: 20px 0px 5px;
}
.login-form table {
          border-collapse: collapse;
}
.login-form table td {
          color:#FFF;
          font-size:12px;
          padding:3px 5px;
}
.login-form a {
          font-size: 12px;
          color :#9cb4d8;
}
.login-form button {
          background-color: #4267b2;
          border: 1px solid #29487d;
          padding:2px 4px;
          color:#FFF;
          font-weight:bold;
          display: inline-block;
          width: 55px;
}
.login-form input {
          border: 1px solid #29487d;
          background: #FFF;
          padding:2px 4px;
}

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.

Itulah artikel Studi kasus pembuatan facebook registration page yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

keep Learning ^_^
Semangat