todo app frontend mentor

مرشد الواجهة الأمامية - تطبيق TOD

مرحباً!

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

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

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

التحدي

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

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

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

• عرض التصميم الأمثل للتطبيق اعتمادًا على حجم شاشة جهازهم
• انظر حالات Hover لجميع العناصر التفاعلية على الصفحة
• أضف Todos جديد إلى القائمة
• مارك تودوس على أنه كامل
• حذف Todos من القائمة
• تصفية من قبل كل/نشط/كامل todos
• امسح كل تودوس مكتمل
• تبديل الضوء والوضع المظلم
• المكافأة : سحب وإسقاط لإعادة ترتيب العناصر في القائمة

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

أين تجد كل شيء

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

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

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

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

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

بناء مشروعك

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

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

نشر مشروعك

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

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

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

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

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

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

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

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

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

رعاة المجتمع

شكراً هائلاً لرعاة مجتمعنا!

• Zero to Mastery هو مورد تعليمي لا يصدق لجميع الأشياء تطوير الويب. بقيادة Andrei Neagoie ، تعد الدورات محتوى عالي الجودة وتغطي مجموعة واسعة من المهارات المطلوبة.
• تنوع التكنولوجيا هو مورد رائع للأشخاص الممثلة تمثيلا ناقصا في التكنولوجيا. يتميز الموقع بقوائم الوظائف لأي شخص يبحث عن فرص جديدة. قسم الموارد مليء أيضًا بالروابط المفيدة للغطس في!
• يعد TripleByte عرضًا رائعًا حقًا إذا كنت تبحث عن دور جديد. إنها خدمة مجانية تتيح لك إجراء اختبار سري. بناءً على نتائجك ، ستقوم شركاتك بعرض أدوارها الشاغرة!