time tracking dashboard

Frontend Mentor - Dasbor pelacakan waktu

Selamat datang!

Terima kasih telah mencoba tantangan pengkodean front-end ini.

Tantangan Mentor Frontend membantu Anda meningkatkan keterampilan coding dengan membangun proyek yang realistis.

Untuk melakukan tantangan ini, Anda memerlukan pemahaman dasar tentang HTML, CSS, dan JavaScript.

Tantangannya

Tantangan Anda adalah membuat dasbor ini dan membuatnya sedekat mungkin dengan desainnya.

Anda dapat menggunakan alat apa pun yang Anda suka untuk membantu Anda menyelesaikan tantangan. Jadi, jika Anda memiliki sesuatu yang ingin Anda praktikkan, silakan mencobanya.

Jika Anda ingin berlatih menggunakan data JSON, kami menyediakan file data.json lokal untuk aktivitasnya. Artinya, Anda dapat mengambil data dari sana alih-alih menggunakan konten dalam file .html .

Pengguna Anda harus dapat:

• Lihat tata letak optimal situs bergantung pada ukuran layar perangkat mereka
• Lihat status hover untuk semua elemen interaktif di halaman
• Beralih antara melihat statistik Harian, Mingguan, dan Bulanan

Ingin dukungan dalam tantangan ini? Bergabunglah dengan komunitas kami dan ajukan pertanyaan di saluran #help .

Perilaku yang diharapkan

• Teks untuk waktu periode sebelumnya harus berubah berdasarkan jangka waktu aktif. Untuk Harian, seharusnya tertulis "Kemarin" misalnya "Kemarin - 2 jam". Untuk Mingguan, seharusnya tertulis "Minggu Lalu" misalnya "Minggu Terakhir - 32 jam". Untuk bulanan, seharusnya tertulis "Bulan Lalu" misalnya "Bulan Lalu - 19 jam".

Di mana menemukan segalanya

Tugas Anda adalah membangun proyek sesuai desain di dalam folder /design . Anda akan menemukan desain versi seluler dan desktop.

Desainnya dalam format statis JPG. Menggunakan JPG berarti Anda harus menggunakan penilaian terbaik Anda untuk gaya seperti font-size , padding dan margin .

Jika Anda ingin file desain (kami menyediakan versi Sketch & Figma) untuk memeriksa desain lebih detail, Anda dapat berlangganan sebagai anggota PRO.

Anda akan menemukan semua aset yang diperlukan di folder /images . Aset sudah dioptimalkan.

Ada juga file style-guide.md yang berisi informasi yang Anda perlukan, seperti palet warna dan font.

Membangun proyek Anda

Jangan ragu untuk menggunakan alur kerja apa pun yang Anda rasa nyaman. Di bawah ini adalah proses yang disarankan, namun Anda tidak merasa perlu mengikuti langkah-langkah berikut:

1. Inisialisasi proyek Anda sebagai repositori publik di GitHub. Membuat repo akan mempermudah berbagi kode Anda dengan komunitas jika Anda memerlukan bantuan. Jika Anda tidak yakin bagaimana melakukan hal ini, bacalah sumber daya Coba Git ini.
2. Konfigurasikan repositori Anda untuk mempublikasikan kode Anda ke alamat web. Ini juga akan berguna jika Anda memerlukan bantuan selama tantangan karena Anda dapat membagikan URL proyek Anda dengan URL repo Anda. Ada beberapa cara untuk melakukan hal ini, dan kami memberikan beberapa rekomendasi di bawah ini.
3. Lihatlah desainnya untuk mulai merencanakan bagaimana Anda akan menangani proyek tersebut. Langkah ini penting untuk membantu Anda berpikir ke depan tentang kelas CSS untuk membuat gaya yang dapat digunakan kembali.
4. Sebelum menambahkan gaya apa pun, susun konten Anda dengan HTML. Menulis HTML terlebih dahulu dapat membantu memusatkan perhatian Anda pada pembuatan konten yang terstruktur dengan baik.
5. Tuliskan gaya dasar untuk proyek Anda, termasuk gaya konten umum, seperti font-family dan font-size .
6. Mulai tambahkan gaya ke bagian atas halaman dan lanjutkan ke bawah. Hanya lanjutkan ke bagian berikutnya setelah Anda puas telah menyelesaikan area yang sedang Anda kerjakan.

Menyebarkan proyek Anda

Seperti disebutkan di atas, ada banyak cara untuk menghosting proyek Anda secara gratis. Host yang kami rekomendasikan adalah:

• Halaman GitHub
• Vercel
• Netlifikasi

Anda dapat menghosting situs Anda menggunakan salah satu solusi ini atau penyedia tepercaya kami lainnya. Baca lebih lanjut tentang host kami yang direkomendasikan dan tepercaya.

Buat README.md khusus

Kami sangat menyarankan untuk menimpa README.md ini dengan yang khusus. Kami telah menyediakan template di dalam file README-template.md di kode awal ini.

Templat ini memberikan panduan tentang apa yang harus ditambahkan. README khusus akan membantu Anda menjelaskan proyek Anda dan merefleksikan pembelajaran Anda. Silakan mengedit template kami sebanyak yang Anda suka.

Setelah Anda menambahkan informasi Anda ke templat, hapus file ini dan ganti nama file README-template.md menjadi README.md . Itu akan membuatnya muncul sebagai file README repositori Anda.

Mengirimkan solusi Anda

Kirimkan solusi Anda pada platform agar dapat dilihat oleh komunitas lainnya. Ikuti "Panduan lengkap untuk mengirimkan solusi" kami untuk mendapatkan tips tentang cara melakukan hal ini.

Ingat, jika Anda mencari masukan mengenai solusi Anda, pastikan untuk mengajukan pertanyaan saat mengirimkannya. Semakin spesifik dan mendetail pertanyaan Anda, semakin tinggi peluang Anda mendapatkan masukan berharga dari komunitas.

Berbagi solusi Anda

Ada beberapa tempat di mana Anda dapat membagikan solusi Anda:

1. Bagikan halaman solusi Anda di saluran #proyek selesai di komunitas.
2. Tweet @frontendmentor dan sebutkan @frontendmentor , sertakan repo dan URL aktif dalam tweet. Kami ingin melihat apa yang telah Anda buat dan membantu membagikannya.
3. Bagikan solusi Anda di saluran sosial lain seperti LinkedIn.
4. Blog tentang pengalaman Anda membangun proyek Anda. Menulis tentang alur kerja Anda, pilihan teknis, dan membicarakan kode Anda adalah cara brilian untuk memperkuat apa yang telah Anda pelajari. Platform yang bagus untuk menulis adalah dev.to, Hashnode, dan CodeNewbie.

Kami menyediakan templat untuk membantu Anda membagikan solusi Anda setelah Anda mengirimkannya ke platform. Harap edit pertanyaan tersebut dan sertakan pertanyaan spesifik saat Anda mencari masukan.

Semakin spesifik pertanyaan Anda, semakin besar kemungkinan anggota komunitas lain akan memberi Anda masukan.

Punya masukan untuk kami?

Kami senang menerima masukan! Kami selalu berupaya meningkatkan tantangan dan platform kami. Jadi jika ada yang ingin Anda sampaikan, silakan kirim email ke hi[at]frontendmentor[dot]io.

Tantangan ini sepenuhnya gratis. Silakan bagikan kepada siapa saja yang merasa bermanfaat untuk latihan.

Selamat membangun!