📋 محتويات الصفحة
📖 الوصف
Frontend Mentor توفر تصميمات جاهزة (Figma) لتحويلها إلى كود. تحاكي بيئة العمل الحقيقية حيث يعمل المطور من تصميم محدد ويضيف وظائف تفاعلية.
🎯 يستخدم في
مجالات استخدام هذه الأداة
بناء portfolio قوي
تحسين مهارات الكود من التصميم
الممارسة على responsive design
تعلم CSS و JavaScript متقدم
الاستعداد لاختبارات العمل
بناء مشاريع حقيقية
✨ المميزات
أبرز مميزات هذه الأداة
تصميمات احترافية (Figma + Sketch + XD)
مستويات متعددة (Beginner → Advanced)
كود HTML/CSS/JS جاهز للبدء
مجتمع نشط (Solutions Sharing)
مراجعة الكود من الأقران
تحديات أسبوعية
تصميمات واقعية (Business Cards
Landing Pages)
شارة لكل مشروع منجز
⚠️ العيوب
نقاط يجب مراعاتها
بعض التصميمات مدفوعة (£3.5/شهر)
لا يشرح المفاهيم (فقط تصميمات)
يحتاج معرفة مسبقة بـ HTML/CSS/JS
قد يكون صعباً على المبتدئين
لا يوجد فيديوهات تعليمية
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
## التحديات المتاحة:
### Beginner (Newbie):
- QR Code Component
- Testimonials Grid Section
- Stats Preview Card Component
- Single Price Grid Component
- Three Column Preview Card
### Intermediate (Junior):
- Blog Preview Card
- Room Design Page
- News Homepage
- E-Commerce Product Page
- Social Proof Section
### Advanced:
- Rock Paper Scissors Game
- Tip Calculator App
- Expenses Chart Component
- GitHub User Search App
- Country Guide App
## مثال على التحدي:
// QR Code Component (Beginner)
// التصميم: بطاقة بها QR code + نص
// المطلوب:
// - HTML structure
// - CSS styling (responsive)
// - رفع المشروع على GitHub
// - نشره على Netlify/Vercel
// - مشاركة الرابط في المجتمع📚 أدوات أخرى في Learning
قد يعجبك أيضاً
freeCodeCamp
⭐منصة تعليم مجاني لتطوير الويب (Free Web Development Education)
freeCodeCamp
⭐منصة تعليم مجاني لتطوير الويب (Free Web Development Education)
Frontend Masters
⭐منصة تعليمية احترافية لمطوري الويب (Professional Web Development Education)
Frontend Masters
⭐منصة تعليمية احترافية لمطوري الويب (Professional Web Development Education)
Frontend Mentor
⭐منصة تحديات التصميم والمشاريع العملية (Design Challenges Platform)
JavaScript.info
⭐مصدر تعلّم