الدروس في هذا المسار
مقدمة عن الإنترنت
فهم أساسيات عمل الإنترنت والويب، والفرق بين Client وServer.
ما هو الموقع الإلكتروني؟
تعرّف على مفهوم الموقع الإلكتروني، واكتشف الفرق بين المواقع الثابتة والديناميكية.
تعلم CSS3 من الأساسيات
التصميم الحديث باستخدام CSS3 مع Flexbox & Grid والفرق بينها.
2.5 ساعة
قريبا
أساسيات Git وGitHub
إدارة الإصدارات والعمل الجماعي باستخدام Git وGitHub.
1.5 ساعة
قريبا
أفضل الممارسات في البرمجة
تنظيم الكود وكتابة تعليقات واضحة وقابلة للصيانة بسهولة.
1 ساعة
قريبا
التصميم المتجاوب
جعل المواقع تعمل على جميع الأجهزة والشاشات باحترافية.
2 ساعة
قريبا
المشروع الختامي لهذا المسار
بناء صفحة Landing Page كاملة ورفعها على GitHub Pages
عرض تفاصيل المشروع
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()})
