🚀🚀 10 مواقع أو تطبيقات يمكنها أن تجعل تطوير الواجهة الأمامية الخاص بك إلى المستوى الاحترافي
كارثيك قراءة 3 دقائقهذه هي المواقع / التطبيقات / extenstion التي وجدتها مفيدة جدًا في تطوير الواجهة الأمامية.
يمكنهم في النهاية 5 أضعاف سرعة التطوير.
متجاوب
سأضع هذا في المرتبة الأولى ، إنه أحد تطبيقات Electorn مفتوحة المصدر الناشئة حيث يمكنك التحقق من استجابة العديد من الهواتف والشاشات.
ليس هذا فقط فكر في هذا السيناريو ، يمكنك فحص وإضافة كود CSS ، حيث يتم تغييره في جميع الشاشات ، يمكنك التحقق من كيفية تأثير الرمز في جميع الشاشات المتجاورة في نافذة واحدة!
لا استطيع ان اصبح بارد
عنوان URL لـ Github: https://github.com/manojVivek/responsively-app
مقسم الشكل
حصل على الشارة الأولى في عملية البحث عن المنتج هنا ، وهو حامل الأكياس الثاني.
في عالم التصميم الحديث ، سنحصل على العديد من الخلفية أو الأشكال العائمة مثل الموجات والمنحنى وما إلى ذلك.
يمكن لهذا التطبيق أن يحل بسهولة أنه يمكن أن يكون مفيدًا في صنع نوع مختلف من الأشكال وإنشاء CSS للشكل
رابط التطبيق: https://www.shapedivider.app/
الرسوم المتحركة
إذا استخدمنا النمط والرسوم المتحركة لنص أو أي عنصر متحرك هو أول شيء يسترعي انتباه المستخدم. يمكننا أن نشكو حتى أنا هناك أولاً 😂
يمكن أن يساعدك Animista في ذلك ، فهو يحتوي على العديد من قوالب الرسوم المتحركة التي يمكنك تحديدها والتحقق من كيفية عملها في الواقع. خارج الصندوق ، يقومون بإنشاء CSS للرسم المتحرك المعين. يمكن أن تكون الرسوم المتحركة بسيطة الآن: يتجاهل الرجل:
رابط التطبيق: https://animista.net/
نصف قطر الحد
هذا هو رمز أو قالب نصف قطر الحدود الوحيد الذي رأيته منذ عامين border-radius:10pxأوborder-radius:50%
ولكن الآن الطريق إلى الأمام مع وجود أشكال حدود متعددة في تصميم اليوم. التصميم جميل ، فكيف يمكننا توليد ذلك بمجرد فحص عنصر: face_with_rolling_eyes:
هذا الموقع يحل مشكلتي حول نصف قطر الحدود مؤخرًا أصبح الأمر سهلاً! لنقم بنصف قطر حد مختلف
رابط الموقع: https://9elements.github.io/
الانحدار
ألوان التدرج هي التي تستخدم غالبًا للخلفية والأشياء الأخرى. لا يمكن للتفتيش نفسه أن يساعد أكثر من ذلك بكثير. لكن Css-matic يمكن أن يساعدها في توليد تدرجات باردة.
في بلدي الأخيرة آخر أنا خلقت الخلفية باستخدام هذا الموقع انها باردة
يمكن أن يتعامل مع أشياء أخرى مثل مربع الظل ، نصف قطر الحدود ، نسيج الضجيج
رابط الموقع: https://www.cssmatic.com/
مسار مقطع CSS
مسار مقطع CSS هو المسار المستخدم لتشكيل svg أو الصورة بخلاف استخدام نصف قطر الحد. يمكن استخدامه لتوليد الأشكال الهندسية المركزية المتاحة.
يمكن أن يساعد هذا الموقع في قص الأشكال وإنشاء قيمة CSS لهذا الشكل
رابط التطبيق: https://bennettfeely.com/clippy/
قوالب الأشكال
هذه هي بعض الأشكال التي تم إنشاؤها باستخدام css والتي يمكن أن تكون بمثابة مؤقت لك. حسنًا ، قمت بنسخ شبه منحرف مؤخرًا من هنا.
رابط التطبيق: https://css-tricks.com/the-shapes-of-css/
أيقونات
الرموز هي الأشياء التي لا يمكن تجنبها في إنشاء موقع ويب حيث يمكن أن يكون من svg أو من الخط الرائع.
يحتوي هذا الموقع على عدد محدود من الرموز ولكنه يغطي الرموز الرئيسية في حالة الاستخدام مجانًا
رابط التطبيق: https://heroicons.dev/
محدد الخط
نرى الكثير من الموقع هو يومنا على شبكة الإنترنت سيرفر بعض الخطوط التي تتأثر بنا كثيرًا ، يمكن أن يساعد امتداد الكروم البسيط هذا في العثور على الخط المستخدم في أي من المواقع
رابط التطبيق: https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm؟hl=ar
يمكن القيام بذلك باستخدام فحص أيضًا 😝 ولكن لا يمكنك فحص كل نص مستخدم قد يحتوي على خطوط متعددة
محدد الألوان
تمامًا مثل محدد الخط ، فهو محدد اللون الذي كان العديد منكم قد استخدمه بالفعل للتذكير هنا
رابط التطبيق: https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp؟hl=ar
هذا الريبو جيثوب لديه قائمة أخرى من الروابط أو الموارد التي يمكن أن تساعدك في تطوير الموقع
https://github.com/bradtraversy/design-resources-for-developers
شارك الموارد الأخرى التي ساعدتك كثيرًا