بناء موقع من الصفر

[L.Da]

أنا أيضا سأحاول الإطلاع وأشاركك ملاحظاتي البسيطة.

[L.Da]

شكرا جدا على الثقة أخي
وللأسف سيكون هذا آخر نشاط لي هنا في الأكاديمية، سعدت حقا بالتعامل معكم جميعا .
بالنسبة لعملك أهنئك على هذا المجهود المحترم وملاحظاتي لك كالتالي:

هيكلة ملفات المشروع
قد هيأت مجلد من أجل وضع ملف الـ js باسم java script والأجدر أنك تكتبه بهذا الشكل javascript أو فقط js وتتفادى وضع مسافة بين كلمتين وهذا ينطبق على تسمية أي ملف أو مجلد تقوم بانشائه وتسميته، فإن تحتم عليك إعطاءه اسم متكون من كلمتين أو أكثر، أقترح عليك بربطهم برمز المطة مثلا first-second وليس first second
الصور

• فتحت صفحة الـ index.html بدون سرفر فلم تظهر الصورة بينما شغلت المشروع بالسرفر ظهرت، لتفادي ذلك أنصحك بإضافة نقطتين في بداية رابط الصور لتعلم المتصفح أنه عليه أن يبحث عن مكان الصورة وذلك بالخروج من مجلد css ليجد نفسه في المجلد الأب ثم يتابع بقية الرابط ليدخل إلى مجلد images ليجد الصورة المشار المستهدفة،
  url('../images/720310.jpg')
  لأن النقطتين تدلان عن المجلد الأب ونقطة واحدة على المجلد الحالي
• أيضا بالنسبة لشعار الموقع الموجود في الـ nav والـ footer هناك خطأ في اسم الصورة بحيث في عنصر img الخاص به

<img src="images/lmirifit.png" alt="Image Logo Miri Fit">

فقط احذف حرف l الزائد ليكون كالتالي

<img src="images/mirifit.png" alt="Image Logo Miri Fit">

وتسمية ملف الصورة ronnie coleman rc.png بـ ronnie-coleman-rc.png

<img src="images/ronnie-coleman-rc.png" alt="redcon1 image" class="image">

أيضا بالنسبة لشعار الـ nav أنصحك بتكبيره لأنه يكاد لايرى

زر المزيد
أنصحك بزيادة قيمة العرض قليلا

تجاوبية الصفحة
لاحظ معي صفحتك على شاشة الهاتف

- أنصحك باستعمال الـ media query لتكبير النص الخاص بقسم التغذية عند التصفح من جهاز الهاتف من أجل تجربة المستخدم أفضل
- عرض الـ divs عموديا بدلا من مجاورة بعضهم البعض في شاشة الكمبيوتر، يمكنك إرجاع الـ viewport الذي تخليت عنه بعملك comment عليه ليصبح شكل الصفحة هكذا

<meta name="viewport" content="widht=device-width, initial-scale=1">

- أنصحك أيضا باستعمال تقنية الـ media query من أجل التحكم في اختلاف عرض صفحتك حسب مقاسات مختلف شاشات الأجهزة
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

: ذيل الصفحة footer
أرى أنك هنا استخدمت خاصية flex grow وكانت النتيجة هكذا

أنصحك بتوزيع الـ columns بصفة متوازية لتصبح أيضا في المنتصف وذاك باستبدال خاصية الـ grow بـ justify-content على هذا النحو

/* قبل */
.footer .flex-widgets {
    display: flex;
    padding: 15px 0;
}

.footer .flex-widgets .box-widgets {
    flex-grow: 1;
}

/* بعد */
.footer .flex-widgets {
    display: flex;
    padding: 15px 0;
    justify-content: space-around;
   /* OR */
    justify-content: space-between;
}

.footer .flex-widgets .box-widgets {
    /* لاشيء يوضع هنا وتستطيع مسح هذا المعيار */
    /* إلا إذا احتجته لشيء آخر */
}

لاتنسى الملاحظات السابقة أن تأخذها بعين الإعتبار كي لا أعيد ذكرها وأتمنى لك وللجميع التوفيق والسلام عليكم ورحمة الله وبركاته.

[abdallahmiri]

يؤسفنى سماع ذالك, شكراً لكى وعلى مجهودك الرئع. @L.Da
سوف اعدل المشروع , شكرا مره اخرى.