معرض المشاريع
مكتبة لأفضل المشاريع التطبيقية التي قمنا ببنائها، اختر مشروعاً وابدأ في
تعلم كيفية برمجته من الصفر.
HTML/CSS
Design
موقع شخصي (Portfolio)
مشروع بناء موقع شخصي متجاوب لعرض مهاراتك وأعمالك، باستخدام HTML5 و
CSS3 الحديثة.
React
Node.js
متجر إلكتروني متكامل
بناء متجر إلكتروني مع سلة مشتريات ونظام دفع، مشروع متقدم لتعلم React
و Backend.
Python
Django
تطبيق إدارة المهام
تعلم أساسيات بايثون وقواعد البيانات من خلال بناء تطبيق لإدارة المهام
اليومية (ToDo App).
JavaScript
API
تطبيق الطقس (Weather App)
تعلم كيفية التعامل مع الـ APIs الخارجية وجلب بيانات الطقس وعرضها
بشكل ديناميكي.
function initializeIntersectionObserver(elements,options={threshold:0.1,rootMargin:'0px 0px -50px 0px'}){const observer=new IntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.style.opacity='1';entry.target.style.transform='translateY(0)'}})},options);elements.forEach(el=>{el.style.opacity='0';el.style.transform='translateY(30px)';el.style.transition='opacity 0.6s ease, transform 0.6s ease';observer.observe(el)})}
function initializeSmoothScrolling(){document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){e.preventDefault();const target=document.querySelector(this.getAttribute('href'));if(target){target.scrollIntoView({behavior:'smooth',block:'start'})}})})}
function initializeLazyLoading(images){const imageObserver=new IntersectionObserver((entries,observer)=>{entries.forEach(entry=>{if(entry.isIntersecting){const img=entry.target;img.src=img.dataset.src||img.src;img.classList.remove('lazy');imageObserver.unobserve(img)}})});images.forEach(img=>{img.dataset.src=img.src;img.classList.add('lazy');imageObserver.observe(img)})}
function debounce(func,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);func(...args)};clearTimeout(timeout);timeout=setTimeout(later,wait)}}
document.addEventListener('DOMContentLoaded',()=>{initializeSmoothScrolling();initializeLazyLoading(document.querySelectorAll('img'));initializeHeroSection();initializeFeaturedLessons();initializeBeginnersGuide();initializeRecentProjects();initializeNewsletter();initializeFAQ();initializeLatestArticles()})
function copyCode(btn){const codeBlock=btn.closest('.code-block');const code=codeBlock.querySelector('code').innerText;navigator.clipboard.writeText(code).then(()=>{const originalText=btn.innerText;btn.innerText="تم النسخ! ✅";setTimeout(()=>{btn.innerText=originalText},2000)}).catch(err=>{alert("فشل النسخ!")})}
