اعطيني موقعاً مؤلفاً من html و css وسأحلله لك حرفاً حرفاً واقول لك ماذا يفعل كل امر
لكن اعطني صورة لموقع حتى احوله الى كود .. فهنا اعجز ولا استطيع فعله
هل واجهت هذه المشكلة في بداياتك ؟ ما الحل ؟
لا أملك الكثير لأقوله بعد ما قاله الأخ راشد، لذا لما لا نأخذ مثالا حيا وأرشدك لكيف تفكر في كيفية تطبيق التصميم.
لنقل أنك تريد تصميم صفحة مستقلة ما، صفحة تعريفية، سنأخذ تصميما قمت به من قبل ونعمل عليه
في البداية ستنسى أمر التصميم لبعض الوقت وتفتح محررك المفضل وتقول بدأ صفحة فارغة جديدة بالمحتوى التالي
ذلك المحتوى بسيط جدا، أكتبه كل مرة عندما أبدأ صفحة بسيطة ما، هو يدرج لك الكود الذي تحتاجه، يجعل التصميم قابلا للتوافق في الهواتف (عبر viewport) ويضيف أساسا لحل بعض المشاكل في المتصفحات (عبر normalize)
أنت في الأغلب تعرف ولا تحتاج لما سبق، ولكن شخص آخر يقرأ هذا التعليق يحتاج له
الآن تستطيع العودة للتصميم، صغره قليلا وألقي نظرة شاملة عليه، ماذا ترى؟ ماهو الذي يبدو صعب التحقيق؟ ما الذي يبدو بسيطا من أول وهلة
أرى هيدر، بإرتفاع كامل، يحتوي على شعار كبير، على روابط تصفح، على زر للتسجيل (اشترك الآن) ويحتوي على تصميم سيارة كبير. لا مشكلة مع الهيدر
أرى المحتوى الريسي الذي ينقسم ل4 أجزاء متشابهة تقريبا في الهيكلة، عنوان ومحتوى. لا مشكلة في ثالث ورابع جزء منه، لكن الأول والثاني قد يشكلون مشكلة لك، لا مشكلة سنحلهم لاحقا عندما نصل لهم.
نبدأ بهيكلة التصميم في الكود، لا عناصر مشتركة بين الهيدر والمحتوى الرئيسي، لذا سنضع الهيدر لوحده والمحتوى لوحده. سنضع الروابط في ul ثم نهيكلها عبر flex ونجعل آخل عنصر على اليسار، بدون الاستعانة ب float حتى لا نكسر الهيكلة، ثم نكمل الهيدر
ستنظر لأول قسم وتنظر لعناصره، كيف هي مقسمة؟ 4 أجزاء أساسية متساوية، إذا نضع كل عنصر بربع العرض، والأفضل أن تقوم بالأمر عبر flex لتجنب المشاكل أيضا.
كذلك القسم الذي بعده، مقسم إلى 3 أجزاء بسيطة، كل قسم بدوره مقسم إلى 4 أقسام، الهيدر حيث اسم وسعر الباقة، تفاصيل الباقة، زر طلب المزيد من التفاصيل، زر الطلب.
سأترك الباقي عليك، جرب هذه الصفحة وجرب تصممها، في حال احتجت مساعدة فأنا هنا إلى مالا نهاية وما بعدها
مرحباً عزيزي، هذه تحصل نتيجة متابعة دروس كثيرة بدون تطبيق تلك الدروس. عندما تتابع مثلاً ثلاثون درساً متتالياً بدون تطبيق، يحصل هذا النوع من المشاكل. لذلك انصحك، بعد كل درس تراه فيديو أو تقراءه حاول ان تطبّق يجب أن يتعوّد العقل وتتعود الاصابع على كتابة الشفرة.
بعد متابعتك لدرس، قم بتطبيق الدرس، وحاول اكتشاف امور اخرى من خلال الدرس لم يتطرق لها الشارح. يجب ان تتعوّد على كتابة الشفرة ان تكتسب المهارة. بدون تطبيق للدروس انت تتعلم نظرياً ولكن اكتساب المهارة في تطبيق الدروس. هذا ما اراه سبباً لهذه المشلكة وربما اكون مخطئ.
لست مخطئاً ولست صائباً 100% .. لم اشاهد درساً الا وطبقت عليه لكني مثلاً عندما ابدأ بتكويد موقع ما ابدأ بالهيدر ومن ثم اتوقف لا اعلم لماذا
او مثلاً اصل الى حد معين واظل نصف ساعة لاحرك شيئ ما لليسار مثلا ولا يتحرك فأقوم بحذف كل الكود من اوله وآخره وابدأ بالشتم على css ههه
طبيعي، ياصديقي هذه المشاكل تحصل مع المحترفين ايضاً ولكن اقل نسبة من المبتدئين، حتى تقللها لاتصمم شيء من الصفر. جِد مواقع مصممه كصورة، وحاول تطبيقها. لأنك مادمت تكوّد وتفكّر بالشكل يستغرق منك هذا وقتاً اكثر. جِد موك أب جاهز واحاول تطبيقة ستجد أنك أسرع في كل مرة من المرة الي قبلها. وحتى نثري الموضوع، دعني ادعوا اصحاب الخبرة.
@assassinateur انت مطلوب هنا ياصديقي :))
اضيف على تعليقك:
الكثير يطبق لكن مشكلة المبتديء انه يطبق نقلاً. من المفترض يشاهد دقيقتين او اكثر وسيتوعبها تماماً ثم يكتب الكود دون النظر الى الشاشة. ثم يعود يكمل الفيديو.
بعد إنتهاء الدرس، على المبتديء ان يطبق الدرس من الصفر دون الرجوع للفيديو من اجل ترسيخ الفهم.
علينا ان نبتعد عن التعلم بطريقة التلقيم بالملعقة. هذه المصيبة غرست فينا في المدارس حينما كنا نتبع المعلم وهو يلقمنا دون ان نقف ونفكر ونسأل ونجرب
واجهتني هذه مشكلة مع css بعد تعلم الأساسيات حيث لم أكن قادر على تطبيق أي شيء بها حتى مجرد شريط تصفح بسيط!! بعدها دخلت عالم تعريب قوالب هذا أفادني جدا حيث تعلمت من خلاله css بشكل أكبر وأفضل و تعلمت أيضا هيكلة html بشكل أفضل كان تعريب قوالب كتدريب تطبيقي لي وتعلمت كثير من خلال هذه التجربة،
أنصحك بقراءة أكواد مواقع عبر DevTool ستساعدك على فهم كيف تم عمل أجزاء الموقع في html و css مهما كان معقدا
تعريب القوالب ..
قل تقصد انك تنظر الى القالب الاجبني وتقوم بتقليده عربياً .. ام انك تقوم بتحميل قال اجنبي وتعدل عليه ليصبح عربي ؟
لا بل كنت أحمل وأعدل قوالب بلوجر الأجنبية لكي تصلح لإستخدام بمدونات بلغة عربية، وهذا أول واحد عربته ^^
التعليقات