easybank landing page

معلم الواجهة - صفحة مقصودة EasyBank

مرحباً!

شكرا للتحقق من تحدي الترميز في الواجهة الأمامية.

تساعدك تحديات Frontend Mentor على تحسين مهاراتك في الترميز من خلال بناء مشاريع واقعية.

للقيام بهذا التحدي ، تحتاج إلى فهم أساسي لـ HTML و CSS و JavaScript.

التحدي

يتمثل التحدي الخاص بك في بناء هذه الصفحة المقصودة والحصول عليها على مقربة من التصميم قدر الإمكان.

يمكنك استخدام أي أدوات ترغب في مساعدتك في إكمال التحدي. لذا ، إذا كان لديك شيء ترغب في ممارسته ، فلا تتردد في منحه.

يجب أن يكون المستخدمون قادرين على:

• عرض التصميم الأمثل للموقع اعتمادًا على حجم شاشة جهازهم
• انظر حالات Hover لجميع العناصر التفاعلية على الصفحة

تريد بعض الدعم في التحدي؟ انضم إلى مجتمعنا وطرح أسئلة في قناة #HELP .

أين تجد كل شيء

تتمثل مهمتك في إنشاء المشروع إلى التصميمات داخل مجلد /design . ستجد كل من الهاتف المحمول وسطح المكتب من التصميم.

التصميمات بتنسيق ثابت JPG. سيعني استخدام JPGS أنك ستحتاج إلى استخدام أفضل حكمك للأنماط مثل font-size padding margin .

إذا كنت ترغب في الحصول على ملفات التصميم (نقدم إصدارات Sketch & Figma) لتفقد التصميم بمزيد من التفصيل ، فيمكنك الاشتراك كعضو محترف.

ستجد جميع الأصول المطلوبة في مجلد /images . تم تحسين الأصول بالفعل.

يوجد أيضًا ملف style-guide.md يحتوي على المعلومات التي ستحتاجها ، مثل لوحة الألوان والخطوط.

بناء مشروعك

لا تتردد في استخدام أي سير عمل تشعر بالراحة معه. فيما يلي عملية مقترحة ، لكن لا تشعر أنك بحاجة إلى اتباع هذه الخطوات:

1. تهيئة مشروعك كمستودع عام على Github. سيجعل إنشاء ريبو من السهل مشاركة الكود الخاص بك مع المجتمع إذا كنت بحاجة إلى مساعدة. إذا لم تكن متأكدًا من كيفية القيام بذلك ، فاحرص على قراءة مورد GIT هذا.
2. قم بتكوين مستودعك لنشر الكود على عنوان ويب. سيكون هذا مفيدًا أيضًا إذا كنت بحاجة إلى بعض المساعدة أثناء التحدي حيث يمكنك مشاركة عنوان URL لمشروعك باستخدام عنوان URL الخاص بك. هناك عدد من الطرق للقيام بذلك ، ونقدم بعض التوصيات أدناه.
3. انظر من خلال التصميمات لبدء التخطيط لكيفية معالجة المشروع. هذه الخطوة أمر بالغ الأهمية لمساعدتك على التفكير في فصول CSS لإنشاء أنماط قابلة لإعادة الاستخدام.
4. قبل إضافة أي أنماط ، بنية المحتوى الخاص بك باستخدام HTML. يمكن أن تساعد كتابة HTML أولاً في تركيز انتباهك على إنشاء محتوى جيد التنظيم.
5. اكتب الأنماط الأساسية لمشروعك ، بما في ذلك أنماط المحتوى العامة ، مثل font-family font-size .
6. ابدأ في إضافة أنماط إلى أعلى الصفحة والعمل لأسفل. انتقل فقط إلى القسم التالي بمجرد أن تكون سعيدًا لأنك أكملت المنطقة التي تعمل عليها.

نشر مشروعك

كما ذكر أعلاه ، هناك العديد من الطرق لاستضافة مشروعك مجانًا. مضيفينا الموصى بهم هم:

• صفحات جيثب
• Vercel
• NetLify

يمكنك استضافة موقعك باستخدام أحد هذه الحلول أو أي من مقدمي الخدمات الموثوق بهم الآخرين. اقرأ المزيد عن المضيفين الموصى بهم والموثوق بهم.

إنشاء README.md مخصص

نوصي بشدة بكتابة هذا README.md مع واحد مخصص. لقد قدمنا ​​قالبًا داخل ملف README-template.md في رمز البداية هذا.

يوفر القالب دليلًا لما يجب إضافته. سوف تساعدك README المخصص في شرح مشروعك والتفكير في تعلماتك. لا تتردد في تحرير قالبنا بقدر ما تريد.

بمجرد إضافة معلوماتك إلى القالب ، قم بحذف هذا الملف وقم بإعادة تسمية ملف README-template.md إلى README.md . سيجعل ذلك يظهر كملف ReadMe لمستودعك.

إرسال الحل الخاص بك

أرسل الحل الخاص بك على النظام الأساسي لبقية المجتمع ليرى. اتبع "الدليل الكامل لتقديم الحلول" للحصول على نصائح حول كيفية القيام بذلك.

تذكر ، إذا كنت تبحث عن تعليقات على الحل الخاص بك ، فتأكد من طرح الأسئلة عند إرسالها. كلما كنت أكثر تحديدًا وتفصيلًا مع أسئلتك ، كلما زادت فرصة الحصول على تعليقات قيمة من المجتمع.

مشاركة الحل الخاص بك

هناك أماكن متعددة يمكنك مشاركة الحل الخاص بك:

1. شارك صفحة الحل الخاصة بك في قناة #منتهية للمجتمع.
2. Tweet @frontendmentor وذكر @frontendmentor ، بما في ذلك repo و urls الحية في تغريدة. نود أن نلقي نظرة على ما قمت بإنشائه ونساعد مشاركته.
3. شارك الحل الخاص بك على القنوات الاجتماعية الأخرى مثل LinkedIn.
4. بلوق عن تجربتك في بناء مشروعك. يعد الكتابة عن سير العمل والخيارات الفنية والتحدث عبر الكود طريقة رائعة لتعزيز ما تعلمته. منصات رائعة للكتابة عليها هي Dev.to و Hashnode و CodeNewbie.

نحن نقدم قوالب لمساعدتك على مشاركة الحل الخاص بك بمجرد إرساله على النظام الأساسي. يرجى تحريرها وتضمين أسئلة محددة عندما تبحث عن ملاحظات.

كلما كنت أكثر تحديدًا مع أسئلتك ، زاد احتمال أن يعطيك عضو آخر في المجتمع ملاحظات.

هل لديك ردود فعل لنا؟

نحن نحب تلقي التعليقات! نحن نتطلع دائمًا إلى تحسين تحدياتنا ومنصتنا. لذا ، إذا كان لديك أي شيء ترغب في ذكره ، فيرجى إرسال بريد إلكتروني إلى مرحبًا [في] Frontendmentor [dot] IO.

هذا التحدي مجاني تمامًا. يرجى مشاركتها مع أي شخص سيجدها مفيدة للممارسة.

استمتع ببناء!