Daftar Sekarang Lihat Instruksi Lihat Rubrik

Ujian

Harap buat antarmuka desktop interaktif sempurna-piksel dan browser seluler dari mockup desain berikut.

  • Harus menggunakan React.js, Flexbox, dan kerangka pustaka komponen React UI.
  • Hosting sebagai halaman statis (tanpa back-end) di Firebase atau solusi gratis alternatif.

Desktop UI

Mobile UI

Persyaratan

  1. RWD. Desain Web Responsif untuk seluler dan web.
  2. Harus menggunakan JavaScript.
  3. Harus menggunakan React.js.
  4. Harus menggunakan CSS Flexbox
  5. Harus menggunakan kerangka UI React dari daftar ini:
  6. Material UI
  7. Semantic UI
  8. React Bootstrap
  9. React Toolbox
  10. Elemental UI
  11. Harus menghosting situs Anda sebagai halaman statis langsung.
  12. Gunakan layanan hosting gratis seperti Heroku, Firebase, ZEIT, atau Netilfy untuk menghosting situs Anda sebagai halaman statis langsung.
  13. Ini bukan ujian back-end. Interaksi halaman web semuanya harus dari sisi klien.

Pengingat

  • Kami lebih suka Anda melakukan beberapa fitur dengan baik, daripada semua fitur dengan buruk.
  • Harap pastikan untuk mengunggah kode ke GitHub / GitLab.
  • Pada tanda 2,5 jam:
  • Harap kirimkan sebanyak apa pun yang telah Anda selesaikan, terlepas dari apakah Anda telah selesai atau belum.
  • Pastikan situs Anda aktif, dan kirimkan URL.
  • Pastikan untuk melengkapi [Formulir Pengiriman Ujian] (https://docs.google.com/document/d/15tA1qlVOg14cmpX0DbIPPnUQa9GYlSXcb9haRCojVEU/edit).

Menampilkan Rubrik

  1. Pixel perfect pada:
  2. Desktop (Chrome)
  3. Seluler (Android, iOS)
  4. Isi celah, bukan pada maket desain dengan cara yang dipoles
  5. Efek
  6. Hover
  7. Selection
  8. Disable
  9. Keyboard and mouse events
Skor Fiture
50 Nomor Kotak Masuk
50 Diagram Radial dan Panel Statistik
60 Filter Pencarian dan Menu Dropdown (20 poin per jenis selektor)
40 Panel Utama dan Hashtag

Lihat Rubrik Ujian

Daftar Fiture

Pilih salah satu fitur berikut untuk diterapkan. Tidak ada pemesanan yang diperlukan.

1. Nomor Kotak Masuk

  • Hanya angka (0-9), titik (.), Dan garis miring terbalik (/) yang diperbolehkan dalam kotak angka.
  • Panah kanan dan kiri dinonaktifkan untuk kotak angka.
  • Mengklik dinonaktifkan untuk kotak angka.
  • Keyboard secara otomatis fokus pada kotak angka pada pemuatan halaman. Tidak perlu mengklik kotak angka untuk memfokuskannya.
  • Teks “Tekan Enter” dan tombol “Kirim” menjadi aktif hanya jika angka dimasukkan ke kotak angka.

2. Diagram Radial dan Panel Statistik

  • Pixel desktop dan seluler yang sempurna
  • Bukan gambar statis, tetapi grafik nyata yang dapat diperbarui jika halaman terhubung ke sisi server.

Desktop UI

UI Seluler

3. Filter Pencarian dan Menu Dropdown

  • Pixel desktop dan seluler yang sempurna
  • 3 jenis filter
    • Pemilih Sederhana
    • Beberapa Selector
    • Kotak centang

Pemilih Sederhana

Pemilih Ganda

Pemilih Kotak Centang

4. Panel Utama dan Hashtag

  • Pixel desktop dan seluler yang sempurna

UI Desktop

Mobile UI

Introduction keyboard_arrow_right
Principles keyboard_arrow_right
People keyboard_arrow_right
Recruiting keyboard_arrow_right
Engineering keyboard_arrow_right
Product keyboard_arrow_right
Growth keyboard_arrow_right