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