Preliminary Test Kulina - Frontend Programmer.md

Preliminary Test Kulina - Frontend Programmer

Objective: Membuat satu halaman html sesuai dengan yang ada di desain (responsive desktop & mobile device).

Soal

• Desain dapat didapatkan disini:
  • Desktop
  • Mobile
  • Logo (warna logo memang putih, langsung di-save aja)
• Asset berupa gambar bisa mencari gambar yang sesuai di unsplash, atau bisa mencari gambar yang sesuai dan berlisensi CC0
• Publish jadi github project page (wajib)

Dikerjakan maksimal dalam satu hari (24 jam).

Guidelines

• Responsive:
  • layar minimum adalah layar iphone 5 → width: 320px
  • layar tablet, bisa menggunakan layout desktop
  • untuk container desktop, width: 100%, max-width: 1440px, center (margin-left|right: auto)
• Jangan lupa berikan meta <meta name="viewport" content="width=device-width, initial-scale=1"> biar bisa responsive
• Pelajari dan gunakan flexbox untuk mempermudah pembuatan layout
• Font yang dipakai adalah Roboto
• Untuk icon social di footer, bisa generate icon fonts dari flaticon

Submission

• Buat repository di github dengan kriteria nama repo adalah sha-1 dari username github-mu, coba generate disini (masukin username github, klik hash)
• Push project kamu ke repository tersebut
• Buat Github Page dari repository tersebut. (Opsional) *kalau bikin, akan jadi nilai tambah
• Kalau bikin github page, kirim link github page
• Dikirim ke hireme@kulina.id dengan subject: Preliminary Test - Frontend

Tips

Strategi Timing

• Buat folder di local, kasih index.html
• Buat repository di github, jangan lupa nama repository adalah hasil generate sha-1 dari username github-mu.
• Jalankan git init di folder yang di local
• Setelah initial commit langsung di push
• Langsung aja bikin github page
• Editting, setiap komponen dibuat, commit setelahnya, banyakin commit lebih bagus
• Jangan lupa di push secara berkala jika ada update

Development Tools

Kamu bisa pakai development tools yang biasa kamu pakai buat bikin web. Ini yang biasa kami pakai untuk bikin html dan styling:

• Sublime Text / VS Code / Atom
• Ruby SASS / LESS (CSS Preprocessor, mempermudah bikin css)
• Bower / NPM
• Git
• Chrome Dev Tools (bisa untuk cek responsiveness / multi screen test, audit, dll)

Gunakan git dari awal membuat project, commit setiap perubahan file (saving). Kamu akan mulai terbiasa dengan git.

Project Sturcture

Usahakan memiliki struktur project yang rapi, misalkan:

.
├── index.html
├── images
|   ├── hero-image.png
|   └── logo.png
├── styles
|   └── style.css

Library

Kamu bisa pakai library yang sudah ada seperti twitter bootstrap, bulma, atau yang lain. Dan kami sarankan diambil komponen yang dibutuhkan saja.

Jika ada pertanyaan, bisa chat telegram kesini

Selamat Mengerjakan 💪