easybank landing page

Frontend Mentor - Halaman Pendaratan EasyBank

Selamat datang!

Terima kasih telah memeriksa tantangan pengkodean front-end ini.

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

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

Tantangannya

Tantangan Anda adalah membangun halaman arahan 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

Ingin dukungan pada tantangan? Bergabunglah dengan komunitas 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 desain.

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

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:

1. Inisialisasi proyek Anda sebagai repositori publik di GitHub. Membuat repo akan memudahkan berbagi kode Anda dengan komunitas jika Anda membutuhkan bantuan. Jika Anda tidak yakin bagaimana melakukan ini, mintalah membaca ini, coba sumber daya git ini.
2. Konfigurasikan repositori Anda untuk mempublikasikan kode Anda ke alamat web. 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, dan kami memberikan beberapa rekomendasi 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 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 banyak cara untuk meng -host proyek Anda secara gratis. Host yang kami rekomendasikan adalah:

• Halaman GitHub
• Vercel
• Netlify

Anda dapat meng -host situs Anda menggunakan salah satu solusi ini atau penyedia tepercaya kami yang lain. Baca lebih lanjut tentang host yang kami rekomendasikan dan tepercaya.

Buat README.md khusus

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

Templat memberikan panduan untuk apa yang harus ditambahkan. README khusus akan membantu Anda menjelaskan proyek Anda dan merenungkan pembelajaran Anda. Silakan mengedit templat kami sebanyak yang Anda suka.

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

Mengirimkan solusi Anda

Kirimkan solusi Anda di platform untuk dilihat oleh seluruh komunitas. Ikuti "Panduan Lengkap kami untuk mengirimkan solusi" untuk tips tentang cara melakukan ini.

Ingat, jika Anda mencari umpan balik tentang solusi Anda, pastikan untuk mengajukan pertanyaan saat mengirimkannya. Semakin spesifik dan terperinci Anda dengan pertanyaan Anda, semakin tinggi kemungkinan Anda akan mendapatkan umpan balik yang berharga dari komunitas.

Berbagi solusi Anda

Ada beberapa tempat yang dapat Anda bagikan solusi:

1. Bagikan halaman solusi Anda di saluran #proyek jadi komunitas.
2. Tweet @frontendmentor dan sebutkan @frontendmentor , termasuk repo dan URL langsung di tweet. Kami ingin melihat apa yang telah Anda bangun 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 berbicara melalui kode Anda adalah cara yang brilian untuk memperkuat apa yang telah Anda pelajari. Platform yang bagus untuk ditulis adalah dev.to, hashnode, dan codenewbie.

Kami menyediakan templat untuk membantu Anda membagikan solusi Anda setelah Anda mengirimkannya di platform. Silakan edit dan sertakan pertanyaan spesifik saat Anda mencari umpan balik.

Semakin spesifik Anda dengan pertanyaan Anda, semakin besar kemungkinan anggota komunitas lain akan memberi Anda umpan balik.

Punya umpan balik untuk kami?

Kami senang menerima umpan balik! Kami selalu ingin meningkatkan tantangan dan platform kami. Jadi, jika Anda memiliki sesuatu yang ingin Anda sebutkan, silakan kirim email ke hai [at] frontendtendentor [dot] io.

Tantangan ini sepenuhnya gratis. Silakan bagikan dengan siapa saja yang akan menganggapnya berguna untuk latihan.

Bersenang -senanglah membangun!