بسم الله الرحمن الرحيم
مسابقة تطوير موقع شركة خدمات طلابية يتكون من 3 صفحات
الجائزة 160$
المطلوب:
تطوير 3 صفحات تجاوبية (Responsive)، التصميم جاهز وكذلك الصور المستخدمة في الصفحات بإمكانك الوصول إليها والإطلاع على الملفات من هنا
المجلد أعلاة يحتوي على:
1- مجلد pages: يحتوي على تصاميم كل الصفحات
2- مجلد pages assets: يحتوي على الصور المستخدمة والعناصر التي ستحتاجها
3- PSD.zip: ملف التصميم الخاص بالفوتوشوب في حال كنت تحتاج إلية
معايير إختيار الفائز:
1- دقة العمل من نظافة الأكود وتوافقها مع المعايير القياسية
2- تجاوبية الموقع (Responsive web design)
3- تطبيق التصميم بحذافيرة
4- سرعة أداء الموقع
مدة العمل
سته أيام
تبدأ من يوم 27/5/2018 وتنتهي يوم 1/6/2018
ما الذي ستستفيدة من المسابقة
1- التدرب وتطوير مهاراتك
2- دخول عالم العمل الحر
3- بحصولك على الجائزة تستطيع طلب freelancer MasterCard والتي بإمكانك إستخدامها لسحب أموالك من منصات العمل الحر من خلال الصرافات الآلية (ATM)
اين ومتى يتم تقديم الأعمال
تم إنشاء المسابقة في منصة العمل الحر freelancer.com
1- قم بإنشاء الحساب الخاص بك
2- بعد إنشاء الحساب قم بالدخول على المسابقة من هنا
3- قم بإستكشاف الموقع وتعلم طريقة المشاركة بالمسابقات
4- بمجرد إكمالك العمل على الموقع قم برفع صورة screenshot لاي صفحة و وضع رابط المشروع في الوصف إما بإستخدام Github او google drive او أي طريقة أخرى ما يهم هو أن أحصل على ملفات الموقع.
ملاحظات
1- الخط الذي يجب إستخدامه هو PT Serif قم بتضمينة من هنا
2- عناصر القائمة يجب أن تكون ثابته (fixed) عند عمل scroll down
3- الأيقونات التالية يتم إستخدامها من مكتبة Fontawesome
لكن تذكر لا تقوم بإستدعاء كل المكتبة من اجل سبع أيقونات بل قم بـ customization بإختيار الأيقونات المطلوبة فقط ومن ثم تحميلها كـ font من خلال موقع https://icomoon.io
4- شعار الموقع قم بتصميمة كتابتاً وليس كصورة
5- في الصفحة الرئيسية هناك ظل يظهر كتأثير ظل الورقة لا تقم بوضعة كصورة بل إستخدم خاصية الـ shadow في الـ css
بإمكانك الإستفادة من هذا المثال:
6- الألوان المستخدمة في الموقع:
اللون الثالث لـ
1- العناوين heading
2- رابط الصفحة المفعلة بالـ sidebar
اللون الرابع لـ
1- الفقرات p
2- رابط الصفحة الغير مفعلة بالـ sidebar
7- تأكد من إختبارك للموقع على الشاشات المختلفة وفي حالة الشاشات الصغيرة جداً قم بإخفاء الأيقونات الموضحة بالصورة التالية واجعل الفقرات تأخذ العرض كاملاً
8- الأيقونات تم يتم عملها بإستخدام CSS Image Sprites كما سبق وشرحنا في دروس ورشة عمل الفيسبوك
موقع سيفيدك لتحديد موقع الصور
www.spritecow.com
9- في حال أردتم الوصول لدروس ورش العمل التي تم طرحها سابقاً بإمكانكم تحميلها من الرابط التالي:
https://goo.gl/RHH9Zd
10- لإختبار الموقع وسرعتة قبل تسليمة إستخدم المواقع التالية:
https://testmysite.withgoogle.com/intl/en-gb
