المسارات التعليمية

<a href="/courses/python-basics" class="glass-card p-6 block group"> <div class="bg-gradient-to-br from-yellow-500/20 to-green-500/20 w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-4">🐍</div> <h2 class="text-xl font-bold mb-2 text-white group-hover:text-purple-400 transition">أساسيات بايثون</h2> <p class="text-gray-400 text-sm mb-4 leading-relaxed">تعلم أساسيات بايثون من الصفر: المتغيرات، الشروط، الحلقات، الدوال، OOP وأكثر.</p> <div class="flex items-center gap-3 text-sm text-gray-500"> <span class="tag">مبتدئ</span> <span><i class="fas fa-book-open ml-1"></i> 12 درس</span> <span><i class="fas fa-clock ml-1"></i> 8 ساعات</span> </div> <div class="mt-4 w-full bg-gray-700/30 rounded-full h-2"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-2 rounded-full" style="width:0%" id="progress-python-basics"></div> </div> </a> <a href="/courses/javascript-fundamentals" class="glass-card p-6 block group"> <div class="bg-gradient-to-br from-yellow-500/20 to-orange-500/20 w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-4">⚡</div> <h2 class="text-xl font-bold mb-2 text-white group-hover:text-purple-400 transition">أساسيات جافاسكربت</h2> <p class="text-gray-400 text-sm mb-4 leading-relaxed">تعلم JavaScript من المتغيرات حتى async/await مع تمارين تفاعلية.</p> <div class="flex items-center gap-3 text-sm text-gray-500"> <span class="tag">مبتدئ</span> <span><i class="fas fa-book-open ml-1"></i> 12 درس</span> <span><i class="fas fa-clock ml-1"></i> 10 ساعات</span> </div> <div class="mt-4 w-full bg-gray-700/30 rounded-full h-2"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-2 rounded-full" style="width:0%" id="progress-javascript-fundamentals"></div> </div> </a> <a href="/courses/html-css" class="glass-card p-6 block group"> <div class="bg-gradient-to-br from-orange-500/20 to-red-500/20 w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-4">🌐</div> <h2 class="text-xl font-bold mb-2 text-white group-hover:text-purple-400 transition">HTML و CSS</h2> <p class="text-gray-400 text-sm mb-4 leading-relaxed">بناء صفحات ويب احترافية من الصفر مع تصميم متجاوب.</p> <div class="flex items-center gap-3 text-sm text-gray-500"> <span class="tag">مبتدئ</span> <span><i class="fas fa-book-open ml-1"></i> 10 درس</span> <span><i class="fas fa-clock ml-1"></i> 7 ساعات</span> </div> <div class="mt-4 w-full bg-gray-700/30 rounded-full h-2"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-2 rounded-full" style="width:0%" id="progress-html-css"></div> </div> </a> <a href="/courses/react-basics" class="glass-card p-6 block group"> <div class="bg-gradient-to-br from-cyan-500/20 to-blue-500/20 w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-4">⚛️</div> <h2 class="text-xl font-bold mb-2 text-white group-hover:text-purple-400 transition">أساسيات React</h2> <p class="text-gray-400 text-sm mb-4 leading-relaxed">بناء واجهات تفاعلية مع React: Components، Hooks، State وأكثر.</p> <div class="flex items-center gap-3 text-sm text-gray-500"> <span class="tag">متوسط</span> <span><i class="fas fa-book-open ml-1"></i> 10 درس</span> <span><i class="fas fa-clock ml-1"></i> 9 ساعات</span> </div> <div class="mt-4 w-full bg-gray-700/30 rounded-full h-2"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-2 rounded-full" style="width:0%" id="progress-react-basics"></div> </div> </a> <a href="/courses/nodejs-express" class="glass-card p-6 block group"> <div class="bg-gradient-to-br from-green-500/20 to-emerald-500/20 w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-4">🟢</div> <h2 class="text-xl font-bold mb-2 text-white group-hover:text-purple-400 transition">Node.js و Express</h2> <p class="text-gray-400 text-sm mb-4 leading-relaxed">بناء APIs احترافية مع Node.js و Express وقواعد البيانات.</p> <div class="flex items-center gap-3 text-sm text-gray-500"> <span class="tag">متوسط</span> <span><i class="fas fa-book-open ml-1"></i> 10 درس</span> <span><i class="fas fa-clock ml-1"></i> 9 ساعات</span> </div> <div class="mt-4 w-full bg-gray-700/30 rounded-full h-2"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-2 rounded-full" style="width:0%" id="progress-nodejs-express"></div> </div> </a> <a href="/courses/sql-databases" class="glass-card p-6 block group"> <div class="bg-gradient-to-br from-blue-500/20 to-indigo-500/20 w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-4">🗄️</div> <h2 class="text-xl font-bold mb-2 text-white group-hover:text-purple-400 transition">SQL وقواعد البيانات</h2> <p class="text-gray-400 text-sm mb-4 leading-relaxed">تعلم SQL وتصميم قواعد بيانات فعالة.</p> <div class="flex items-center gap-3 text-sm text-gray-500"> <span class="tag">مبتدئ</span> <span><i class="fas fa-book-open ml-1"></i> 8 درس</span> <span><i class="fas fa-clock ml-1"></i> 6 ساعات</span> </div> <div class="mt-4 w-full bg-gray-700/30 rounded-full h-2"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-2 rounded-full" style="width:0%" id="progress-sql-databases"></div> </div> </a> <a href="/courses/git-github" class="glass-card p-6 block group"> <div class="bg-gradient-to-br from-gray-500/20 to-purple-500/20 w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-4">📦</div> <h2 class="text-xl font-bold mb-2 text-white group-hover:text-purple-400 transition">Git و GitHub</h2> <p class="text-gray-400 text-sm mb-4 leading-relaxed">إتقان التحكم بالإصدارات والعمل الجماعي.</p> <div class="flex items-center gap-3 text-sm text-gray-500"> <span class="tag">مبتدئ</span> <span><i class="fas fa-book-open ml-1"></i> 8 درس</span> <span><i class="fas fa-clock ml-1"></i> 5 ساعات</span> </div> <div class="mt-4 w-full bg-gray-700/30 rounded-full h-2"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-2 rounded-full" style="width:0%" id="progress-git-github"></div> </div> </a> <a href="/courses/typescript" class="glass-card p-6 block group"> <div class="bg-gradient-to-br from-blue-500/20 to-cyan-500/20 w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-4">🔷</div> <h2 class="text-xl font-bold mb-2 text-white group-hover:text-purple-400 transition">TypeScript</h2> <p class="text-gray-400 text-sm mb-4 leading-relaxed">JavaScript بقوة الأنواع — كود أكثر أماناً وتنظيماً.</p> <div class="flex items-center gap-3 text-sm text-gray-500"> <span class="tag">متوسط</span> <span><i class="fas fa-book-open ml-1"></i> 8 درس</span> <span><i class="fas fa-clock ml-1"></i> 7 ساعات</span> </div> <div class="mt-4 w-full bg-gray-700/30 rounded-full h-2"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-2 rounded-full" style="width:0%" id="progress-typescript"></div> </div> </a> <a href="/courses/prompt-engineering" class="glass-card p-6 block group"> <div class="bg-gradient-to-br from-purple-500/20 to-pink-500/20 w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-4">🧠</div> <h2 class="text-xl font-bold mb-2 text-white group-hover:text-purple-400 transition">هندسة الأوامر</h2> <p class="text-gray-400 text-sm mb-4 leading-relaxed">تعلم كتابة أوامر فعالة للذكاء الاصطناعي.</p> <div class="flex items-center gap-3 text-sm text-gray-500"> <span class="tag">مبتدئ</span> <span><i class="fas fa-book-open ml-1"></i> 10 درس</span> <span><i class="fas fa-clock ml-1"></i> 6 ساعات</span> </div> <div class="mt-4 w-full bg-gray-700/30 rounded-full h-2"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-2 rounded-full" style="width:0%" id="progress-prompt-engineering"></div> </div> </a> <a href="/courses/data-structures" class="glass-card p-6 block group"> <div class="bg-gradient-to-br from-red-500/20 to-orange-500/20 w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-4">🧮</div> <h2 class="text-xl font-bold mb-2 text-white group-hover:text-purple-400 transition">هياكل البيانات والخوارزميات</h2> <p class="text-gray-400 text-sm mb-4 leading-relaxed">أساس كل مبرمج محترف: Arrays، Trees، Graphs وأكثر.</p> <div class="flex items-center gap-3 text-sm text-gray-500"> <span class="tag">متقدم</span> <span><i class="fas fa-book-open ml-1"></i> 12 درس</span> <span><i class="fas fa-clock ml-1"></i> 15 ساعات</span> </div> <div class="mt-4 w-full bg-gray-700/30 rounded-full h-2"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-2 rounded-full" style="width:0%" id="progress-data-structures"></div> </div> </a>