ضع إعلانك هنا
📁 أحدث الأخبار

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

وادي التكنولوجيا | بالعربية: 10 أدوات مهمة لمطوري 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- حساب نسبة التباين

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




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

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




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

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




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

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




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- الفيديوهات المجانية


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

  1. رابط الموقع الأولhttps://www.pexels.com/videos
  2. رابط الموقع الثانيhttps://isorepublic.com/videos
  3. رابط الموقع الثالثhttps://lifeofvids.com
  4. رابط الموقع الرابعhttps://coverr.co


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

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


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


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

أصبحت صور Vectors أو صور illustration يتم استخدامها بكثرة في المواقع، لذلك سوف أقدم لك موقعين يمكنك من خلالهما إنشاء صور فيكتورز بألوان تتناسب مع ألوان تصميمك لأنها ليست صور جهازة بل قابلة للتعديل.

  1. رابط الموقع الأولhttps://undraw.co/illustrations
  2. رابط الموقع الثانيhttps://freeillustrations.xyz



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

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



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

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




14- الخطوط

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




15- المراجع

أخيرًا، أقدم لك موقع به مجموعة كبيرة من المراجع والوثائق Documentation لأمور كثيرة جدًا بمكان واحد، وعملية البحث به سهلة جدًا.

رابط الموقع: https://devdocs.io/dom


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


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