social media dashboard with theme switcher

Frontend Mentor - لوحة معلومات وسائل التواصل الاجتماعي مع Switcher Switcher

مرحباً!

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

تتيح لك تحديات Mentor Frontend تحسين مهاراتك في سير عمل حقيقي.

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

التحدي

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

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

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

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

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

أين تجد كل شيء

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

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

إذا كنت ترغب في الحصول على ملف Sketch من أجل فحص التصميم بمزيد من التفصيل ، فهو متاح للشراء من صفحة التحدي على النظام الأساسي.

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

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

بناء مشروعك

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

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

نشر مشروعك

كما ذكر أعلاه ، هناك عدد من الطرق لاستضافة مشروعك مجانًا. نوصي باستخدام Zeit الآن لأنها خدمة مذهلة وبسيطة للغاية للحصول عليها. إذا كنت ترغب في استخدام Zeit ، فإليك بعض الخطوات التي يجب متابعتها للبدء:

1. اشترك في Zeit الآن وانتقل عبر التدفق على متن الطائرة ، مما يضمن توصيل حساب GitHub الخاص بك باستخدام Zeit الآن لتكامل GitHub.
2. قم بتوصيل مشروعك بـ Zeit الآن من صفحة "إنشاء مشروع جديد" ، باستخدام زر "المشروع الجديد من Github" واختيار المشروع الذي تريد نشره.
3. بمجرد الاتصال ، في كل مرة تقوم git push ، ستنشئ Zeit الآن نشرًا جديدًا وسيتم عرض عنوان URL للنشر على لوحة معلومات Zeit الخاصة بك. ستتلقى أيضًا بريدًا إلكترونيًا لكل عملية نشر مع عنوان URL.

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

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

1. أرسله على النظام الأساسي حتى يرى المستخدمون الآخرون الحل على الموقع. سيتمكن المستخدمون الآخرون من تقديم ملاحظات لك ، والتي يمكن أن تساعد في تحسين الكود الخاص بك للمشروع التالي.
2. شارك المستودع الخاص بك وعنوان URL الحية في قناة #منتهية من مجتمع Slack.
3. Tweet @frontendmentor وذكر @frontendmentor بما في ذلك repo و url live في التغريدة. نود أن نلقي نظرة على ما قمت بإنشائه ونساعد مشاركته.

إعطاء ردود الفعل

تكون التعليقات موضع ترحيب دائمًا ، لذلك إذا كان لديك أي شيء للاحتيال على هذا التحدي ، فيرجى إرسال بريد إلكتروني إلى المرسال [في] Frontendendmentor [DOT] IO.

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

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