أدوات مهمة لمطوري Front End

مرحبًا بك عزيزنا الزائر لمدونة وادي التكنولوجيا | بالعربية، إذا كنت مطور Front End لكن ليس لديك أفكار تطبقها وبالتالي لا تستغل مهارتك في بناء المشاريع، في هذه المقالة سوف نقدم لك أفضل الأدوات التي سوف تساعدك في بناء مشروعك من الصفر.

هيا بنا نبدأ في سرد هذه الأدوات.

1- تصميم الصفحة layout

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

1. رابط الموقع الأول: https://www.awwwards.com
2. رابط الموقع الثاني: https://www.webdesign-inspiration.com
3. رابط الموقع الثالث: https://dribbble.com/shots/popular/web-design

2- الألوان color schemes

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

1. رابط الموقع الأول: https://yeun.github.io/open-color
2. رابط الموقع الثاني: https://flatuicolors.com
3. رابط الموقع الثالث: https://colorhunt.co
4. رابط الموقع الرابع: https://color.adobe.com/create/color-wheel

3- حساب نسبة التباين

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

• رابط الموقع: https://contrast-ratio.com

4- إنشاء أشكال SVG

أقدم لك موقع يسمح لك أن تقوم بإنشاء أشكال SVG عشوائية، وبألوان مختلفة حسب اختيارك بحيث تستطيع أن تستخدمها بموقعك أو تصميمك.

• رابط الموقع: https://www.softr.io/tools/svg-shape-generator

5- إنشاء موجات Waves

أقدم لك موقع يمكنك من خلاله أن تقوم بتصمم موجات Waves كـ SVG  فهناك الكثير من  المواقع التي تستخدم هذه الخاصية وهي بالفعل تعطي مظهر جميل.

• رابط الموقع: https://getwaves.io

6- إنشاء انحدارات Gradient

هل تعاني من أجل إنشاء منحدرات Gradient بشكل جميل؟ سوف أقدم لك موقع سوف يساعدك كثيرًا في هذا الأمر.

• رابط الموقع: https://cssgradient.io

7- إنشاء صناديق box

هل تريد إنشاء box يحتوي على مجموعة من العناصر سواء كانت form أو gallery أو navigation أو pricing  أو products،  لذلك سوف أقدم لك ثلاثة مواقع فيها أفكار لتصاميم رهيبة جدًا.

1. رابط الموقع الأول: https://www.uidesigndaily.com
2. رابط الموقع الثاني: http://www.calltoidea.com
3. رابط الموقع الثالث: https://codepen.io/trending

8- الأيقونات

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

1. رابط الموقع الأول: https://fonts.google.com/icons
2. رابط الموقع الثاني: https://fontawesome.com/v5.15/icons?d=gallery&p=2
3. رابط الموقع الثالث: https://ionic.io/ionicons

9- الفيديوهات المجانية

10- الصور المجانية

كثير من الناس حتى الآن يستخدمون في مواقعهم صور من جوجل التي أغلب صورها عليها حقوق ملكية، لذلك سوف أقدم لك أربعة مواقع فيها ملايين الصور وجودتها عالية جدًا و مجانية ما عليها copyright، كل ما عليك فعله أن تبحث عن الشيء الذي تريده.

1. رابط الموقع الأول: https://unsplash.com
2. رابط الموقع الثاني: https://www.pexels.com
3. رابط الموقع الثالث: https://pixabay.com/photos
4. رابط الموقع الرابع: https://www.freepik.com

11- إنشاء صور Vectors مجانية

12- صور شخصية مجانية

13- إمكانية استخدام العناصر بالمتصفحات

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

• رابط الموقع: https://caniuse.com

14- الخطوط

بالطبع هذه الأدوات مستحيل أن تكتمل بدون ذكر Google fonts الذي يمدك بأنواع خطوط كثيرة يمكنك استخدامها بموقعك بشكل مجاني.

• رابط الموقع: https://fonts.google.com

15- المراجع

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