تقييمات الطلاب
( 5 من 5 )
١ تقييمات
فيديو شرح تعلم DOM Manipulation من خلال بناء أداة اختيار الألوان ضمن كورس تطبيقات على JavaScript شرح قناة Mohammed Code محمد كود، الفديو رقم 38 مجانى معتمد اونلاين
في هذا الفيديو رح نبرمج خطوة بخطوة أداة احترافية لاختيار الألوان Color Palette Generator باستخدام HTML, CSS, JavaScript فقط – بدون أي مكتبات خارجية.
رابط ملفات وأكواد المشروع
https://www.mohammedcode.com/go/3e1ss
ما الذي ستتعلمه في هذا الفيديو؟
بناء هيكل صفحة بسيط بـ HTML
تصميم واجهة أنيقة لمربعات الألوان بـ CSS Grid
استخدام JavaScript لتوليد ألوان عشوائية بـ Math.random()
التعامل مع الـ DOM و events (click)
استخدام Clipboard API لنسخ كود اللون بضغطة واحدة
إضافة hover effects و transitions تعطي إحساس احترافي للتطبيق
هذا المشروع مناسب لـ:
• المبتدئين في تعلم البرمجة و JavaScript
• أي شخص يتعلم Front-End Development (HTML, CSS, JS)
• اللي حاب يبني مشاريع صغيرة وسريعة لمعرض أعماله
• مطوري واجهات أمامية يحبوا يجربوا أفكار تصميم وألوان
مفاهيم مهمة داخل الدرس:
• DOM Manipulation (querySelectorAll, getElementById)
• Events & Event Listeners
• Random Colors Generation
• Clipboard API لنسخ النصوص
• CSS Grid + Flexbox + Transitions
كود المشروع (الملفات المستخدمة في الشرح):
index.html
style.css
script.js
جرّب تكتب الكود بنفسك، وبعدها طوّر الفكرة:
• زِد عدد الألوان
• أضف زر لحفظ الألوان المفضلة في localStorage
• غيّر التصميم بما يناسب أسلوبك
اشترك في القناة وفعل الجرس عشان يوصلك كل جديد عن تعلم تطوير الويب من الصفر حتى الاحتراف:
قناة Mohammed Code على يوتيوب
اكتب في التعليقات:
إيش مشروع JavaScript الجاي اللي حاب تشوفه؟
To-Do List؟ Password Generator؟ ولا فكرة ثانية؟
لا تنسَ:
• لايك للفيديو لو استفدت
• مشاركة الفيديو مع أي شخص يتعلم Front-End
#JavaScript #FrontEnd #WebDevelopment #تعلم_البرمجة #MohammedCode
الطوابع الزمنية المقترحة:
00:00 مقدمة واستعراض التطبيق
00:45 تجهيز ملف HTML
01:40 تصميم الواجهة بـ CSS
07:05 كتابة JavaScript لتوليد الألوان
14:40 استعراض المشروع والخاتمة