كيف تستفيد من موقع front end mentor لتطوير مهاراتك

 اذا كنت تريد احتراف تطويرالواجهات الاماميه فانت بحاجه الي تطوير مهاراتك باستمرار ولن يتم ذلك إلا بالعمل المستمر والتطبيق للتعرف علي الجديد. وفي هذه المقاله سنقوم بشرح موقع رائع جدا انا شخصيا استفيد منه كثيرا وهو موقع frontend mentor افضل موقع لتطوير مهاراتك عمليا.

كيف تستفيد من موقع front end mentor لتطوير مهاراتك

{tocify} $title={محتويات الموضوع}

نعلم جميعًا أن هناك موقعًا إلكترونيًا يسمى Frontend Mentor حيث يمنحك بعض التحديات الرائعة وكانه مشروع حقيقي مما يسمح بممارسة مهاراتك كمطور واجهات اماميه وتعزيزها.

وبفضل موقع Frontend Mentor ، ستكمل عشرات التحديات ، و ستتعلم منها الكثير حقًا وستلاحظ ذلك عند البدا في التعامل مع اول مشروع لك.


كيف ابدا في العمل مع هذا الموقع الرائع؟

👈 طريقه التسجيل في الموقع 

اذهب إلي محرك البحث جوجل واكتب Frontend Mentor.
قم بتسجيل الدخول عن طريق حسابك علي موقع Github.

تسجيل الدخول عن طريق حسابك علي موقع Github
تسجيل الدخول عن طريق حسابك علي موقع Github

👈 بعد نجاح التسجيل واتباع الخطوات الصحيحه انتقل إلى علامة التبويب challenge.


انتقل إلى علامة التبويب challenge

👈 افتح التحدي وقم بتنزيل الملفات الاساسيه للمشروع (بتنسيق zip.)
تنزيل الملفات الاساسيه للمشروع



تنزيل الملفات الاساسيه للمشروع


كيف ابدأ مشروعي بعد التحميل؟

  • افتح مجلد مشاريعك.
  • قم بإنشاء دليل جديد
كيف ابدأ مشروعي بعد التحميل

قم بأستخدم هيكل المشروع بالاعلي. وستجد ملف الدليل باسم style-guide.md وملفات الصور في الكود المبدئي. فقط انسخها في محرر الاكواد الذي تفضله.

ملف designs يحتوي على لقطات شاشة الإخراج الخاصة بك وإذا كنت ترغب في ذلك ، يمكنك تضمينها في ملف readme.md.


الكود المبدئي لملف HTML

يمكنك استخدام الكود المبدئي لملف HTML فقط انسخ المحتوي في محرر الاكواد الخاص بك وقم بالتعديل عليه كما تريد واطلق العنان لنفسك.

الكود المبدئي لملف HTML

👈 هذا هوالكود المبدئي index.html


الكود المبدئي لانماط CSS

عندما يتعلق الأمر بـ CSS ، أحب دائمًا أن أبدأ من الصفر ولك حريه الاختيار في البدا من البدايه او استخدام الكود المبدئي المهم هو ان تستفيد وتتعلم من التطبيق العملي.

يحتوي المتصفح على أنماط افتراضية تسمى User Agent Stylesheet والتي تضيف هامشًا إلى العناوين والفقرات وتطبق خصائص الخط على جميع العناصر.

ملف الانماط  styles.css

👈 هذا هو ملف الانماط  styles.css

مبروك انت الان تقوم بالتطبيق علي أول مشروع حقيقي ، والآن يمكننا البدء في كتابة المحتوى الفعلي لتصميم الصفحة.

ستكون تحديات Frontend Mentor مفيدة حقًا لأولئك الذين يتطلعون إلى تعزيز مهاراتهم في تطويرالواجهات الأمامية.


المراجع
-------
محمد موسي
محمد موسي
مطور واجهات أمامية وصانع محتوى لدي شغف بتصميم وتطوير مواقع الويب وتطوير ووردبريس وكتابة المقالات. متابع لأحدث اتجاهات التصميم والتطوير على الويب. لدي خبره سابقا في منتديات الدعم الفني والمدونات ، احترف كتابه المحتوي من عام 2017 لتقديم محتوي راقي ومفيد.
تعليقات