Landing Page تفاعلية بـ HTML CSS JS بتصميم متغير

لو نفسك تعمل Landing Page مودرن بشكل مختلف عن المعتاد، فالدرس ده هيعجبك جدًا 😎
الفكرة ببساطة: هتعمل موقع لعرض موبايلات iPhone، وكل ما تضغط على موبايل… التصميم كله بيتغيّر (ألوان + خلفيات + صور + شكل الصفحة) بشكل جذاب يدي إحساس “Dynamic UI” حقيقي ✨

الشرح مناسب جدًا للمبتدئين، وفي نفس الوقت هيديك فكرة احترافية تقدر تستخدمها في:

• Portfolio شخصي 💼
• صفحة منتج (Product Landing Page) 🛍️
• صفحة إعلان لحملة تسويق 🎯
• أو حتى تدريب عملي على DOM و Events في JavaScript ⚡

هتتعلم إيه من الدرس ده؟ 🎓✅​

• إزاي تبني Landing Page من الصفر بـ HTML
• تنسيق مودرن وسهل بـ CSS (ألوان، Layout، Responsive)
• استخدام JavaScriptعلشان تعمل:
  • تغيير التصميم بالكامل عند الضغط 👆
  • تبديل الصور والخلفيات بشكل سلس 🔄
  • تفاعل بصري يخلي الصفحة “تتحس” حية 🌟

---

​

فكرة الموقع: تصميم بيتغيّر بضغطة واحدة 🎨🧠​

الموقع بيعرض كذا iPhone في الصفحة…
ولما المستخدم يضغط على أي جهاز:
✅ الخلفية بتتغير
✅ لون العناصر بيتغير
✅ الصورة الرئيسية بتتبدل
✅ ستايل الصفحة كله بياخد Theme جديد
يعني بدل ما تعمل صفحة ثابتة… بتعمل Landing Page بتجربة تفاعلية تخلي الزائر يقعد أطول ✅ وده مفيد جدًا للسيو وتجربة المستخدم.

---

​

مثال بسيط لفكرة التغيير بالـ JavaScript ⚡​

ده مثال سريع جدًا يوضح الفكرة (للتبسيط):

const phones = document.querySelectorAll(".phone");
const body = document.body;
const mainImg = document.querySelector("#mainImg");

phones.forEach(phone => {
  phone.addEventListener("click", () => {
    const theme = phone.dataset.theme;
    const img = phone.dataset.img;

    body.setAttribute("data-theme", theme);
    mainImg.src = img;
  });
});

✅ الفكرة إنك تخزن بيانات كل iPhone في data-* وبعدها تغير Theme + صورة بمجرد Click.

---

​

رابط الصور المستخدمة في الشرح 🖼️​

تقدر تحمل الصور اللي مستخدمها صاحب الدرس من هنا:
https://drive.google.com/file/d/1G0wHiY0g6DEUiAFa9uwOxwLKfAflBSJ9/view

---

​

مشاهدة الدورة على يوتيوب 🎥​

الفيديو الكامل للشرح موجود هنا:

👆 أضغط على الصورة لمشاهدة الفيديو 👆

نصايح مهمة علشان تطلع بنتيجة احترافية 💎​

• خليك مع ألوان بسيطة ومريحة 👌
• استخدم Transitions علشان التغيير يبقى ناعم 😍
• خلي التصميم Responsive للموبايل والتابلت 📱💻
• استخدم صور مضغوطة علشان سرعة الموقع تتحسن ⚡ (وده مفيد للسيو)