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