بعض المشاكل في صفحة هبوط

اقتباس

1- علي الرغم من عدم استخدام اي مكتبة مثل ال Bootstrap إالا ان الموقع بطئ جدا في التحميل ارجو توضيح السبب

تأكد من تقليل حجم ملفات css, js و الصور أيضا أو تاكد من مسار الملفات انها صحيحة أو ايضا لا يوجد أخطاء في أكواد js.

2- يجب تغيير مسار الصورة 

header{
    background-image: url(img/header-img.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
}

اقتباس

3- استخدمت مكتبة Wow.js تظهر مشاكل في الصفحة مثل هذه أثناء ظهور التأثير

لأنك تستخدم تأثيرات تخرج من يمين أو يسار الصفحة لذلك يظهر شريط التمرير ويختفي مجرد إكتمال البلوك كاملاً

اقتباس

4- من خلال خبراتكم ما هي مقاسات الشاشة التي يجب أن اراعيها 

@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

اقتباس

5- بعد اضافة كلمة wow والتأثير عند ال class يتم منع بعض التنسيقات من التنفيذ مثل أزرار المتاجر في البداية كان التأثير عند عمل hover هو scale(1.3) لم يتم تنفيذه بعد اضافة wow في ال class

لا توجد تنسيقات لإزرار المتاجر.

اقتباس

6- كيف احصل علي cdn الخاص ب wow.js  من علي الموقع الرسمي (<script src="?" ></script>) لأني استخدم ملف قد انزلته مسبقا واذا كان يوجد تحديث فلن بعمل

يمكنك استخدام 

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" integrity="sha512-Eak/29OTpb36LLo2r47IpVzPBLXnAMPAVypbSZiZ4Qkf8p/7S/XRG5xp7OKWPPYfJT6metI+IORkR5G8F900+g==" crossorigin="anonymous"></script>

أو 

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js" integrity="sha512-Rd5Gf5A6chsunOJte+gKWyECMqkG8MgBYD1u80LOOJBfl6ka9CtatRrD4P0P5Q5V/z/ecvOCSYC8tLoWNrCpPg==" crossorigin="anonymous"></script>

اقتباس

7- من خلال خبراتكم هل بناء الموقع هكذا بدون استخدام اي مكتبة مثل ال Bootstrap افضل ام يُفضل استخدام المكتبات

أستخدم المكتبات أفضل لك و توفر عليك العناء والتعب.

لقد إطلعت على الملف المرفق وأرى أنك قمت بعمل رائع أحسنت 

1- الموقع بطئ لأن حجم الصور كبيير جدا جدا  ف تحتاج إلى عمل ضغط للصور وعمل resizing للصور  بإستخدام ادوات مثل فوتوشوب يمكنك الإستعانة بهذا الموقع في عملية ضغط الصور. 
2- بالنسبة للنقطة الخاصة ب الخلفية الخاصة بالهيدر فتحتاج إلى تعديل المسار في ملف css ليكون بهذا الشكل 

background-image: url('./img/header-img.png');

3- بالنسبة للنقطة هذه ف تحتاج إلى تعديل ال responsive للصفحه  لحل هذا الأمر 

4- يمكنك إستخدام هذه المقاسات الشائعه 
Small (smaller than 640px)
Medium (641px to 1007px)
Large (1008px and larger)

5- بالنسبة لهذه النقطة قم بإضافة ال class على وسم "a" بدلا من الصورة 

6- رابط ال cdn لمكتبة wow.js
7- للاجابة على النقطة الأخيره تختلف بإختلاف طبيعة المشروع 
حيث في أغلب الأحيان يساعدك استخدام مكتبة على أنجاز المشروع في وقت أقل ومساعدتك في إنجاز ال responsive في المشروع في وقت أقل ومجهود أقل 

بتاريخ 23 دقائق مضت قال خالد عبدالناصر:

1- علي الرغم من عدم استخدام اي مكتبة مثل ال Bootstrap إالا ان الموقع بطئ جدا في التحميل ارجو توضيح السبب

هذا بسبب حجم الصور الضخم، يجب تصغير الصور وضغطها أيضًا من خلال ومواقع مثل tinypng.com

اقتباس

2- اذا قمت بفتح الملف باستخدام live server تظهر الخلفية الخاصة بال Header اما اذا قمت بفتحه بدون live server تختفي الخلفية وعند الفحص باستخدام ادوات المطور في جوجل كروم اجد انه لم يتم العثور علي الصورة بالرغم من وجودها في ملف الصور

يحدث هذا بسبب وجود / في بداية مسار الصورة في ملف style.css في السطر 61

اقتباس

3- استخدمت مكتبة Wow.js تظهر مشاكل في الصفحة مثل هذه أثناء ظهور التأثير

يمكنك أن تضيف خاصية overflow: hidden لجسم الصفحة وبالتالي لن يظهر شريط التمرير الأفقي

body {
    overflow-x: hidden;
}

بتاريخ 29 دقائق مضت قال خالد عبدالناصر:

4- من خلال خبراتكم ما هي مقاسات الشاشة التي يجب أن اراعيها 

يمكنك الإطلاع على المقاسات الرئيسية المستخدمه في أحد إطارات العمل مثل Bootstrap ، مع العلم أنك قد تواجهة مشكلة في حجم شاشة معين وحينها تقوم بإصلاح المشكلة من خلال Media Query مخصصة لهذا الحجم.

بتاريخ 40 دقائق مضت قال خالد عبدالناصر:

5- بعد اضافة كلمة wow والتأثير عند ال class يتم منع بعض التنسيقات من التنفيذ مثل أزرار المتاجر في البداية كان التأثير عند عمل hover هو scale(1.3) لم يتم تنفيذه بعد اضافة wow في ال class

يجب أن تقوم بإزالة تأثير الأصناف الخاصة بمكتبة Wow من خلال إضافة التأثيرات التالية:

.header_info ul li a img:hover{
    transform: scale(1.2);
    transition: all ease-in-out 0.3s;
  
  	/* هذه التأثيرات هنا */
    -webkit-animation-name: unset;
    animation-name: unset;
}

أو يمكنك أن تقوم بوضع أصناف WOW للعنصر الحاوي للصورة

بتاريخ 43 دقائق مضت قال خالد عبدالناصر:

6- كيف احصل علي cdn الخاص ب wow.js  من علي الموقع الرسمي (<script src="?" ></script>) لأني استخدم ملف قد انزلته مسبقا واذا كان يوجد تحديث فلن بعمل

أستخدم موقع cdnjs للحصول على رابط CDN خاص بأي مكتبة معروفة، روابط CDN خاصة بمكتبة wow موجودة هنا

بتاريخ 44 دقائق مضت قال خالد عبدالناصر:

7- من خلال خبراتكم هل بناء الموقع هكذا بدون استخدام اي مكتبة مثل ال Bootstrap افضل ام يُفضل استخدام المكتبات

يفضل إستخدام أحد إطارات العمل المعروفة مثل Bootstrap لأنها ستسهل عليك الكثير العمل لكن يجب أن تكون قد أتقنت إستخدام CSS و HTML جيدًا بدون إطارات عمل، بعد ذلك يمكنك البدء في تعلم أحد إطارات العمل.

شكرا جزيلا علي المساعدة 

طبقت كل الحلول وتم بحمد الله تجاوز بعض المشكلات 

ولكن يوجد مشكلتين وهما:

بتاريخ 23 ساعات قال Abdullah Muhammad:

1- الموقع بطئ لأن حجم الصور كبيير جدا جدا  ف تحتاج إلى عمل ضغط للصور وعمل resizing للصور  بإستخدام ادوات مثل فوتوشوب يمكنك الإستعانة بهذا الموقع في عملية ضغط الصور. 

بتاريخ 23 ساعات قال سامح أشرف:

هذا بسبب حجم الصور الضخم، يجب تصغير الصور وضغطها أيضًا من خلال ومواقع مثل tinypng.com

1- بُطئ الموقع علي الرغم من ضغط الصور كما ذكرتم في بعض المواقع مثل https://tinypng.com/ ولكن لم ينفع ذلك ذلك الحل نجح في نصف الصفحة العلوي ومن بداية قسم ال Team تبدأ الصفحة في عملية تشنج ولا يتم اظهار تأثيرات مكتبة wow 

2- مشكلة عند اضافة wow والتأثير وعند عمل hover علي العنصر لا يتم اظهار خصائص ال hover قمت بتجربة هذا الحل 

بتاريخ 23 ساعات قال سامح أشرف:

 

.header_info ul li a img:hover{
    transform: scale(1.2);
    transition: all ease-in-out 0.3s;
  
  	/* هذه التأثيرات هنا */
    -webkit-animation-name: unset;
    animation-name: unset;
}

 

ولكن بعد ابعاد المؤشر يُعيد تأثير wow من البداية

شكرا مرة أخري علي مجهودكم الرائع 💖

app-template.rar