social media dashboard with theme switcher

Frontend Mentor - Dasbor Media Sosial dengan tema switcher

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 dasar tentang HTML, CSS dan sedikit javascript.

Tantangannya

Tantangan Anda adalah membangun dasbor media sosial 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 situs tergantung pada ukuran layar perangkat mereka
• Lihat Status Hover untuk semua elemen interaktif di halaman
• Beralih tema warna ke preferensi mereka

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 sketsa untuk memeriksa desain secara lebih rinci, tersedia untuk dibeli dari halaman tantangan di platform.

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:

1. 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.
2. 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 Zeit sekarang. Kami memiliki informasi lebih lanjut tentang menggunakan proyek Anda dengan Zeit di bawah ini.
3. 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.
4. 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.
5. Tuliskan gaya dasar untuk proyek Anda, termasuk gaya konten umum, seperti font-family dan font-size .
6. 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 penggunaan Zeit sekarang karena ini adalah layanan yang luar biasa dan sangat sederhana untuk diatur. Jika Anda ingin menggunakan Zeit, berikut adalah beberapa langkah untuk diikuti untuk memulai:

1. Daftar ke Zeit sekarang dan selesaikan aliran onboarding, memastikan akun GitHub Anda terhubung dengan menggunakan ZEIT mereka sekarang untuk integrasi GitHub.
2. Hubungkan proyek Anda ke Zeit sekarang dari halaman "Buat Proyek Baru", menggunakan tombol "Proyek baru dari GitHub" dan memilih proyek yang ingin Anda gunakan.
3. Setelah terhubung, setiap kali Anda git push , Zeit sekarang akan membuat penyebaran baru dan URL penyebaran akan ditampilkan di dasbor Zeit Anda. Anda juga akan menerima email untuk setiap penyebaran dengan URL.

Berbagi solusi Anda

Ada beberapa tempat yang dapat Anda bagikan solusi:

1. Kirimkan di platform sehingga pengguna lain akan melihat solusi Anda di situs. Pengguna lain akan dapat memberi Anda umpan balik, yang dapat membantu meningkatkan kode Anda untuk proyek berikutnya.
2. Bagikan Repositori Anda dan URL Langsung di saluran #-Projects Finish-Projects dari Komunitas Slack.
3. 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!