12

هل هده الصفحة جيدة ؟ html & css

yassir3arfat

هده الصفحة هي ثالث صفحة أنشأتها

يمكنكم معاينتها من هنا

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

رغم أني لست متخصّصًا إلّا أنّ الصفحة شدّت انتباهي بمجرّد رؤيتها.

أزرار home وما جنبها تبدو كبيرة "بعض الشيء".

عاينت الصفحة لكنها لم تكن منسّقة بنفس الشكل الموجود في صورتك.

مادا ينقصها

يبدو أنّ الصفحة غير متوافقة مع متصفحي. لا تظهر النصوص في أماكنها

هل تستعمل كروم وما الجهاز الدي تستعمله

الصفحة متجاوبة مع فيرفوكس و أوبرا و كرووم

التجاوب يكون مع حجم الشاشات و ليس المتصفحات .

مادا عنها الأن

من الافضل ان تستعمل % بدل من px حتى تصبح الصفحة متجاوبة مع جميع المتصفحات

الصفحه بها مشاكل على الشاشات الكبيره

سبب المشاكل بانك تستعمل

position: absolute;

وتقوم بتحديد قيمه x ,y على مقاسات المتصفح في جهازك

كم عرض جهازك

الصفحة متجاوبة مع اعلى عرض وهو 1000px فكم طول شاشة جهازك

راسلني على الخاص اخي الكريم

لا استطيع ارسال رسائل خاصه راسلني على

bawanehcoder@live.com

كيف اصلح المشكل

انصحك باستعمال bootstrap لتفادي مشاكل المحاذاه والمسافات والتايبوجرافي

لا أرجوك مازال في بداية تعلمه ,يجب أن يحل هذه المشكل بإستعمال ال css و ال html فقط

أنت تقوم بتشتيته

بالعكس اخي بوتسراب سهل جد

التشتيت لن يكون من بوتسراب بل من الذين يقولن له ان يتعلم flex وmedia بهذا الوقت انا صاحب قوالب على ثيم فوريست و للان لم افكر في تعلم خواص ال flex

هل قمت بالاطلاع على الكود المصدري للصفحه الخاصه به

كانها عباره عن طبقات مرتبه (اقرب لصوره تم تصميمها على فوتوشوب)

لم أصمم الصورة على الفوتوشوب

اعلم اخي الكريم

انا قمت بالتشبيه فقط بناء على ما رايته في الكود

مادا راية في الكود

ك css الاساس كامل خطا

التسنيق لديك يعتمد على ازاحه العناصر من مختلف الاتجاهات لهذا يصبح هنالك اخطاء في الاجهزه الاخرى

نعم انا استعمل الازاحة

تواصل معي

yassir.page@outlook.com

كيف أستعمله

تجد العديد من الدروس في يويتيوب

هو عباره عن فريم ورك يختصر عليك كتابه اكواد css وتنسيق الصفحه بشكل عام

إسمع حاول أن تحل المشكل فقط بال css سهلة جدا

ستتعلم مهارة البحث عن الحلول .لا تمر للbootstrap إلا بعد أن تتقن ال html و ال css

لتصلح المشكل يجب عليك تعلم طرق جعل العناصر تتوسط الصفحة ، بعد ذلك تعلم ال @media في ال css بإمكانك بإستخدامها أن تجعل الصفحة متجاوبة مع كافة الأجهزة.

مادا عنها الان

ما زالت نفس المشكله موجوده على جهازي

لتحسين تصميم على جميع الاجهزه يجب عليك جمع التصميم في تاج معي مثلا div وتسميها wrapper ويكون التنسيق الخاص بها

.wrapper{

width:1200px;

margin:0 auto;

}

margin:0 auto; تعني الازاحه من الاعلى والاسفل 0 ومن يمين واليسار اوتماتيكي مم يجعل المحتوى في منتصف اي شاشه

وانصحك بعدم استعمال absolute في كل مكان

والتركيز على حجم معين قبل الانتقال الي الريسبونسف

جميل عمل موفق ولكن هناك بعض الأمور التي ربما عليك ان تتعلمها قبل ان تبدء ببناء صفحات كهذه.

فمثلا لجعل العناصر في منتصف الصفحة.

.home {
width: 50%;
margin: 0 auto;
}

ولجعل القائمة و عناصر الواجهة متساويين بجانب بعضهم ربما عليك ان تقرأ اكثر عن flexbox

أحسنت ، لكن قبل أن ينتقل إلى ال flexbox عليه أن يتقن مختلف طرق توسيط العناصر في الصفحة .

ذاك الزر في الوسط أسود والخلفية شبه سوداء وهذه مشكلة فيحتاج الزر أن يبرز قليلا جرب جعله ابيضا مثلا...

وكذلك قائمة الأزرار فوق يمينا تحتاج لمحاذاة أفضل وتغيرا طفيفا يجعلها أجمل

ادا قمت بلمسه سيتحول الى الأبيض

ومالذي سيجعلني ألمسه ؟ :) فهذا ماقصدته فالزر المهم في الصفحة يجب أن يكون بارزا من البداية وملفتا

صممها ببوستراب و تخلص من وجع الرأس

هذا ليس جيدا للمبتدئين ففعلها بأنفسهم أفضل من الإعتماد على الجاهز

تصميم جيدا كـ بداية لك ...بالنسبة لموضوع الريسبونسيف او بوتستراب لا تشغل عقلك به حاليا ..سوف تصل له بعد الانتهاء من الخطوات السابقه مثل html5 ,css3, js ..الموضوع يحتاج وصبر وعمل

انصحك باتباع مسار الاستاذ اسامة محمد واذا كنت لا تعرفه هذا رابط

elzero.org/learning-paths

من يريد النجاح عليه تسلق السلم درجة درجة