شرح تحويل تصميم PSD إلى HTML و CSS (فورم تسجيل الدخول)
colorCop برنامج بسيط جدا يغنيك من الدخول للفوتوشوب من أجل الألوان فحسب
أستعمله منذ أن اكتشفته وقد أراحني جدا
مع ملاحظة أن انتاجيتك بطيئة بعض الشيء، خصوصا في HTML
جرب إضافة مثل emmet لتسريع العملية
مثلا هذا السطر سيطبع معظم الوسوم التي كتبتها أنت في الصفحة
أيضا، هناك بعض الأمور التي يجب عليك تجنبها دوما، أولها هو هذا السطر
* {margin:0;padding:0}
ناهيك عن كون السطر مسببا كبيرا لبطئ محرك المتصفح، خصوصا كلما كبرت الصفحة كلما كانت أبطئ، فهذا السطر يزيل الكثير من الخواص الأساسية للعديد من العناصر، وبذا تفقد شكلها وتصرفها الأصلي، فمثلا input التي طبعتهم أنتم كانوا بدون margin الأصلي الخاص بهم وبدون padding الخاص بهم
استخدم ملف normalize بدل هذا
أيضا، لا داعي لاستخدام لتقفز لسطر جديد، فهذه تستخدم فقط وسط المحتوى
استخدم خاصية display: block للعنصر حتى يأخذ السطر كاملا
ولا تستخدمها لإنشاء فراغ بين العناصر، استخدم margin
أيضا، في تسمية الclass يجب أن تستخدم مفهوما مناسبا ومحددا، من المكروه استخدام CamelCase اسم حرف كبير لكل كلمة، استخدم المطات بين كل كلمة وكلمة، مثلا بدل formInp استخدم form-inp
أيضا لا تستخدم أسماء مبهمة وقصيرة جدا إلى إذا كانت ستتكرر كثيرا، مثلا لا تستخدم cont بل استخدم container حتى يفهم المطور أن هذا هو الذي يحتوي كامل العناصر، لا تستخدم inp بل استخدم input وأيضا اسماء تعبر عن المحتوى، فمثلا academyatiFor لا يعني شيئا حقا
تستطيع استخدامها في الأمور المتكررة إذا كنت تعمل بمفهوم OOCSS فمثلا أنا أستخدم p-l و p-r و cf كاختصارات بدل كتابة clearfix و pull-left و pull-right
تذكر دوما عندما تستخدم float على العنصر فهو بشكل تلقائي سيخرج عن العنصر الذي يحتويه، وبالتالي يظهر خارج المحتوى، لذا استعمل في هذه الحالة clearfix للعنصر الذي يحتويه حتى يعمل بشكل جيد، والكود موجود في هذه المقالة مع الشرح
وكنهاية، كود css الخاص بك لا يطابق شروط المقرائية لكود أنظف وأسهل في القراءة
لم أكمل الفيديو، فلا تعليق لي على ما يوجد بعد أول 20 دقيقة
مع ملاحظة أن انتاجيتك بطيئة بعض الشيء، خصوصا في HTML جرب إضافة مثل emmet لتسريع العملية
مثلا هذا السطر سيطبع معظم الوسوم التي كتبتها أنت في الصفحة
نسيت ادراج السطر، عموما هاهو
!>.cont>.formLogin>h2{LOGIN FORM}^+.formInp>input*2^+.academyatiFor
ينتج
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="cont">
<div class="formLogin">
<h2>LOGIN FORM</h2>
</div>
<div class="formInp"><input type="text"><input type="text"></div>
<div class="academyatiFor"></div>
</div>
</body>
</html>
لم أكمل الفيديو، فلا تعليق لي على ما يوجد بعد أول 20 دقيقة
كنت اشاهد دورة PHP التي قدمها ايضا لم اكمل الدرس الاول من كثرة الاخطاء وايضا هناك اشياء تكون بحل بسيط يقول في الدرس ان العطل من سيرفر XAMPP !
لا نستطيع حقا لوم الناس على رغبتهم في المساعدة وتعليم الغير
ما يقوم به حميد هو شيء رائع حقا وهو محاولة مساعدة الجدد في هذا المجال حيث من النادر أن تجد شخصا يفعل
فلا أحد حقا يخصص وقتا ويقوم بمساعدة الناس عبر دورة في الانترنت أو فيديو أو مقالة، وهذا انطلاقا مني، فأنا لا أشرح شيئا إلا عند الطلب المباشر
قد يعطي الناس انطلاقة سيئة أو بعض المعلومات الخاطئة أو العادات السيئة في التطوير والبرمجة، ولكنه ساعدهم على البداية، وهذه الأمور تكتسب بالخبرة مع الزمن
فمعظم الأخطاء التي ذكرتها أنا قد قمت بها في يوم من الأيام، لازلت أملك أكوادا من أوقات عدم خبرتي، كلما أمر عليها يؤلمني رأسي من كثرت الأخطاء والمشكلات، ولكن تعلمت مع الوقت والخبرة
ما أقوله لحميد هو أن يكتسب المزيد من الخبرة بمشاهدة أعمال الغير وطريقة عملهم وقراءة المقالات وتطوير نفسه، وأتمنى أن يستمر على ما يقوم به
من يدري، فقد يقرأ ردك وردي ويكتسب معلومات جديدة ليعمل بها في دروسه القادمة
بالمناسبة، ما قصدته بأني لم أكمل الفيديو بعد 20 دقيقة هو أن الفيديو كان طويلا وأنا كنت مشغولا ولكن قررت تخصيص بعض الوقت لمشاهدة الفيديو وكتابة تعليق، وانتهى الوقت بسرعة D:
اجل هذا عمل عظيم جدا وانا اقدره واشكره وتعليقي هذا كي يطور نفسه ولا اريد ان احبطه
انا ايضا كنت مثله وايضا انا اقدم دروس على اليوتيوب ولاكن كنت اراجع الشرح اكثر من 3 مراة واخذ من مصادر جيدة مثل w3schools.com
ولاكن الان توقف لاني اكتشفت اني لا اقدم شئ جديد كل موجود في العربية وبشرح من اشخاص افضل مني
انا لم اتوقف تماما ولاكن قمت بتاجيل الموضع الى ان اصبح محترفا كي اقدم شئ افضل من موقع lynda.com واقدم شئ لا يوجد منه في المحتوى العربي
فلا أحد حقا يخصص وقتا ويقوم بمساعدة الناس عبر دورة في الانترنت أو فيديو أو مقالة، وهذا انطلاقا مني،
ايضا شكرا لك انك تساعد الاخرين عندما يطلبو منك وانا ايضا عندما طلبت مساعدتك تعلم الكثير من وابتعدت عن الاخطاء التي كنت واقع بها :)
شكرا اخي امومن انا لا اقصد ان احبطك ولاكن اريد منك ان تطور من معلوماتك كي تقدم المعلومة بشكل افضل :)
مرحبا امومن
شاهدت اول درسين من دروس برمجة موقع ب PHP ولم استطع الاكمال لشدة الخطاء والمعلومات الخاطة والضعيفة التي تقدمها !
مثل عندما ظهرت لك مشكلة في مداخل POST على المتصفح قلت في الشرح ان المشكلة من السيرفر اذا قمنا بتغيره سوف تنحل المشكلة
هذه ليست مشكلة بل من اصدار PHP الموجود في سيرفر XAMPP حلها بسيط جدا ضع isset قبل POST تنحل المشكلة
هناك الكثير من المشاكل التي تقع بها والدروس ضعيفة جدا وطويلة حاول التطوير من نفسك قبل ان تقدم الدروس وان تكتب بسرعة على الكبورد لان الدرس وقته 20د والشي الذي تشرحه يحتاج 3 دقائق
التعليقات