Frontend Mentor - Aplikasi Todo
Selamat datang!
Terima kasih telah memeriksa tantangan pengkodean front-end ini.
Tantangan Mentor Frontend memungkinkan Anda untuk meningkatkan keterampilan Anda dalam alur kerja kehidupan nyata.
Untuk melakukan tantangan ini, Anda memerlukan pemahaman yang baik tentang HTML, CSS dan JavaScript.
Tantangannya
Tantangan Anda adalah membangun aplikasi Todo ini dan membuatnya tampak sedekat mungkin dengan desain.
Anda dapat menggunakan alat apa pun yang Anda sukai untuk membantu Anda menyelesaikan tantangan. Jadi, jika Anda memiliki sesuatu yang ingin Anda latihan, jangan ragu untuk mencobanya.
Pengguna Anda harus dapat:
- Lihat tata letak optimal untuk aplikasi tergantung pada ukuran layar perangkat mereka
- Lihat Status Hover untuk semua elemen interaktif di halaman
- Tambahkan todos baru ke daftar
- Tandai todos sebagai lengkap
- Hapus todos dari daftar
- Filter dengan semua/aktif/lengkap todos
- Bersihkan semua Todos yang sudah selesai
- Sakelar Mode Light and Dark
- Bonus : Seret dan lepas untuk memesan ulang item di daftar
Ingin dukungan pada tantangan? Bergabunglah dengan komunitas Slack kami dan ajukan pertanyaan di saluran #help .
Di mana menemukan segalanya
Tugas Anda adalah membangun proyek ke desain di dalam folder /design . Anda akan menemukan versi seluler dan desktop dari desain untuk dikerjakan.
Desainnya dalam format statis JPG. Ini berarti bahwa Anda perlu menggunakan penilaian terbaik Anda untuk gaya seperti font-size , padding dan margin . Ini akan membantu melatih mata Anda untuk memahami perbedaan dalam jarak dan ukuran.
Jika Anda ingin file desain (kami menyediakan versi sketsa & figma) untuk memeriksa desain secara lebih rinci, 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 butuhkan, 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, tetapi jangan merasa Anda perlu mengikuti langkah -langkah ini:
- Inisialisasi proyek Anda sebagai repositori publik di GitHub. Ini akan membuatnya lebih mudah untuk membagikan kode Anda dengan komunitas jika Anda membutuhkan bantuan. Jika Anda tidak yakin bagaimana melakukan ini, baca melalui ini coba sumber daya git.
- Konfigurasikan repositori Anda untuk mempublikasikan kode Anda ke URL. Ini juga akan berguna jika Anda membutuhkan bantuan selama tantangan karena Anda dapat berbagi URL untuk proyek Anda dengan URL repo Anda. Ada beberapa cara untuk melakukan ini, tetapi kami sarankan menggunakan Vercel. Kami memiliki informasi lebih lanjut tentang menyebarkan proyek Anda dengan Vercel di bawah ini.
- Lihatlah desain untuk mulai merencanakan bagaimana Anda akan menangani proyek. Langkah ini sangat penting untuk membantu Anda berpikir ke depan untuk kelas CSS yang dapat Anda buat untuk membuat gaya yang dapat digunakan kembali.
- Sebelum menambahkan gaya apa pun, struktur konten Anda dengan HTML. Menulis HTML Anda terlebih dahulu dapat membantu memusatkan perhatian Anda pada membuat konten yang terstruktur dengan baik.
- Tuliskan gaya dasar untuk proyek Anda, termasuk gaya konten umum, seperti
font-family dan font-size . - Mulailah menambahkan gaya ke bagian atas halaman dan kerjakan. Hanya pindah ke bagian berikutnya setelah Anda senang Anda telah menyelesaikan area yang sedang Anda kerjakan.
Menyebarkan proyek Anda
Seperti disebutkan di atas, ada sejumlah cara untuk meng -host proyek Anda secara gratis. Kami merekomendasikan menggunakan Vercel karena ini adalah layanan yang luar biasa dan sangat sederhana untuk diatur. Jika Anda ingin menggunakan Vercel, berikut adalah beberapa langkah untuk diikuti untuk memulai:
- Daftar ke Vercel dan melalui aliran onboarding, memastikan akun GitHub Anda terhubung dengan menggunakan Vercel mereka untuk integrasi GitHub.
- Hubungkan proyek Anda ke Vercel dari halaman "Proyek Impor", menggunakan tombol "From Git Repository" dan memilih proyek yang ingin Anda gunakan.
- Setelah terhubung, setiap kali Anda
git push , Vercel akan membuat penyebaran baru dan URL penyebaran akan ditampilkan di dasbor Anda. Anda juga akan menerima email untuk setiap penyebaran dengan URL.
Berbagi solusi Anda
Ada beberapa tempat yang dapat Anda bagikan solusi:
- Kirimkan di platform sehingga pengguna lain akan melihat solusi Anda di situs. Inilah "Panduan Lengkap untuk Mengajukan Solusi" kami untuk membantu Anda melakukannya.
- Bagikan halaman solusi Anda di saluran #-Projects yang sudah jadi dari komunitas Slack.
- Tweet @frontendmentor dan sebutkan @frontendmentor termasuk repo dan URL langsung di tweet. Kami ingin melihat apa yang telah Anda bangun dan membantu membagikannya.
Memberikan umpan balik
Umpan balik selalu diterima, jadi jika Anda memiliki apa pun untuk diberikan pada tantangan ini, silakan email hai [at] frontendtendmentor [dot] io.
Tantangan ini sepenuhnya gratis. Silakan bagikan dengan siapa saja yang akan menganggapnya berguna untuk latihan.
Bersenang -senanglah membangun!
Sponsor Komunitas
Terima kasih banyak kepada sponsor komunitas kami!
- Nol to Mastery adalah sumber belajar yang luar biasa untuk semua hal pengembangan web. Dipimpin oleh Andrei Neagoie, kursus-kursus ini adalah konten yang sangat berkualitas tinggi dan mencakup berbagai keterampilan yang diminati.
- Diversify Tech adalah sumber yang luar biasa bagi orang -orang yang kurang terwakili dalam teknologi. Situs ini menampilkan daftar pekerjaan untuk siapa saja yang mencari peluang baru. Bagian Sumber Daya juga penuh dengan tautan yang berguna untuk menyelam!
- Triplebyte adalah penawaran yang sangat bagus jika Anda mencari peran baru. Ini adalah layanan gratis yang memungkinkan Anda mengikuti kuis rahasia. Berdasarkan hasil Anda, perusahaan akan melempar Anda untuk peran kosong mereka!
