يمكنني ان افهم لا يمكنني التطبيق .. ما مشكلتي ؟

لا أملك الكثير لأقوله بعد ما قاله الأخ راشد، لذا لما لا نأخذ مثالا حيا وأرشدك لكيف تفكر في كيفية تطبيق التصميم.

لنقل أنك تريد تصميم صفحة مستقلة ما، صفحة تعريفية، سنأخذ تصميما قمت به من قبل ونعمل عليه

في البداية ستنسى أمر التصميم لبعض الوقت وتفتح محررك المفضل وتقول بدأ صفحة فارغة جديدة بالمحتوى التالي

ذلك المحتوى بسيط جدا، أكتبه كل مرة عندما أبدأ صفحة بسيطة ما، هو يدرج لك الكود الذي تحتاجه، يجعل التصميم قابلا للتوافق في الهواتف (عبر viewport) ويضيف أساسا لحل بعض المشاكل في المتصفحات (عبر normalize)

أنت في الأغلب تعرف ولا تحتاج لما سبق، ولكن شخص آخر يقرأ هذا التعليق يحتاج له

الآن تستطيع العودة للتصميم، صغره قليلا وألقي نظرة شاملة عليه، ماذا ترى؟ ماهو الذي يبدو صعب التحقيق؟ ما الذي يبدو بسيطا من أول وهلة

أرى هيدر، بإرتفاع كامل، يحتوي على شعار كبير، على روابط تصفح، على زر للتسجيل (اشترك الآن) ويحتوي على تصميم سيارة كبير. لا مشكلة مع الهيدر

أرى المحتوى الريسي الذي ينقسم ل4 أجزاء متشابهة تقريبا في الهيكلة، عنوان ومحتوى. لا مشكلة في ثالث ورابع جزء منه، لكن الأول والثاني قد يشكلون مشكلة لك، لا مشكلة سنحلهم لاحقا عندما نصل لهم.

نبدأ بهيكلة التصميم في الكود، لا عناصر مشتركة بين الهيدر والمحتوى الرئيسي، لذا سنضع الهيدر لوحده والمحتوى لوحده. سنضع الروابط في ul ثم نهيكلها عبر flex ونجعل آخل عنصر على اليسار، بدون الاستعانة ب float حتى لا نكسر الهيكلة، ثم نكمل الهيدر

ستنظر لأول قسم وتنظر لعناصره، كيف هي مقسمة؟ 4 أجزاء أساسية متساوية، إذا نضع كل عنصر بربع العرض، والأفضل أن تقوم بالأمر عبر flex لتجنب المشاكل أيضا.

كذلك القسم الذي بعده، مقسم إلى 3 أجزاء بسيطة، كل قسم بدوره مقسم إلى 4 أقسام، الهيدر حيث اسم وسعر الباقة، تفاصيل الباقة، زر طلب المزيد من التفاصيل، زر الطلب.

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

مرحباً عزيزي، هذه تحصل نتيجة متابعة دروس كثيرة بدون تطبيق تلك الدروس. عندما تتابع مثلاً ثلاثون درساً متتالياً بدون تطبيق، يحصل هذا النوع من المشاكل. لذلك انصحك، بعد كل درس تراه فيديو أو تقراءه حاول ان تطبّق يجب أن يتعوّد العقل وتتعود الاصابع على كتابة الشفرة.

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

واجهتني هذه مشكلة مع css بعد تعلم الأساسيات حيث لم أكن قادر على تطبيق أي شيء بها حتى مجرد شريط تصفح بسيط!! بعدها دخلت عالم تعريب قوالب هذا أفادني جدا حيث تعلمت من خلاله css بشكل أكبر وأفضل و تعلمت أيضا هيكلة html بشكل أفضل كان تعريب قوالب كتدريب تطبيقي لي وتعلمت كثير من خلال هذه التجربة،

أنصحك بقراءة أكواد مواقع عبر DevTool ستساعدك على فهم كيف تم عمل أجزاء الموقع في html و css مهما كان معقدا

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

بالتوفيق :)

كم عمرك.. تبدوا من صورتك رجل متزوج له اطفال لكن !! o__ُُُُُُُُُُُُُُُُُُُُُُُُُُُُُُُُُُّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّّ__O

وما قصة هذا الرقم الكبـــــــــــــــــــــــــــــــــــــــير 235 ؟؟