تعلم CSS Layouts
تم تصميم دورة تخطيطات CSS layouts لتعليمك كل ما تحتاجه حول إنشاء تخطيطات جميلة وعملية لمواقع الويب الخاص بك.
- +500طالب
- 29درس
- 7أقسام
- 06اختبارات
تعرّف على الدورة
هل تتطلع إلى الارتقاء بمهاراتك في CSS إلى المستوى المتقدم؟
تم تصميم دورة تخطيطات CSS layouts لتعليمك كل ما تحتاجه حول إنشاء تخطيطات جميلة وعملية لمواقع الويب الخاص بك.
هل سئمت من المعاناة مع التخطيطات العائمة floating layouts التي لا تعمل بالطريقة المثلى؟
سنعرض لك ثلاث طرق مختلفة لبناء المخططات، بما في ذلك كيفية استخدام floats لإنشاء تصميمات مرنة وسريعة الاستجابة.
هل تريد أن تتعلم أحدث وأروع التقنيات لإنشاء تصميمات حديثة ومرنة؟
سنستفيض في شرح Flexbox ونوضح لك كيفية إنشاء تخطيطات مركبة بسهولة.
هل تريد نقل مهاراتك في تخطيط CSS إلى المستوى المتقدم؟
سنعلمك كيفية استخدام CSS Grid ، أحدث نظام تخطيط أحدث ثورة في عالم تطوير الويب. باستخدام CSS Grid ، ستتمكن من إنشاء تخطيطات مركبة وديناميكية تتكيف مع أي حجم شاشة.
لن تضطر بعد الآن لقبول تخطيطات تصميمية متواضعة المستوى!
قم بالتسجيل في دورة CSS Layouts اليوم وتعلم كيفية إنشاء تخطيطات جميلة وعملية تميز مواقع الويب الخاص بك.
تشمل الدورة
- مبتديء
- شهادة موثقة
- قياس مستوى التقدم والانجاز عبر الدورة
- إجابة من مشرفي الطلاب على كل الأسئلة
- فاعليات حصرية
- شارات تميز للطلبة المتقدمين
- اشعارات تذكير وتحفيز لإنهاء الدورة
- اشتراك مدى الحياة
ماذا ستتعلم خطوة بخطوة
اضغط على أي قسم لعرض دروسه. الدروس المجانية متاحة للمشاهدة قبل الاشتراك.
محتوى الدورة
- 1CSS Layouts Course Introduction يحتوي على دروس مجانية
- 2Course Materials
- 3The 3 Ways of Building Layouts1 درس · 1 اختبار يحتوي على دروس مجانية
- مختصر كتابي: The 3 Ways of Building Layouts درس مجاني
- اختبار القسم: The 3 Ways of Building Layouts
- 4Floats8 دروس · 2 اختباران
- Using Floats
- مختصر كتابي: Using Floats
- Clearing Floats
- Building a Simple float Layout
- Box-Sizing: Border-Box
- مختصر كتابي: box-sizing – border-box
- اختبار قصير: box-sizing – border-box
- Arabic Version
- Challenge 1
- اختبار القسم: Floats
- 5Flexbox11 درسًا · 4 اختبارات
- Introduction to Flexbox
- A Flexbox Overview
- مختصر كتابي: A Flexbox Overview
- اختبار قصير: A Flexbox Overview
- Spacing and Aligning Flex Items
- مختصر كتابي: Spacing and Aligning Flex Items
- اختبار قصير: Spacing and Aligning Flex Items
- The Flex Property
- مختصر كتابي: The flex Property
- اختبار قصير: The flex Property
- Building a Component Layout with Flexbox
- Building a Page Layout with Flexbox
- Arabic Version: final Flexbox Layout
- Challenge 2
- اختبار القسم: Flexbox
- 6CSS Grid9 دروس · 2 اختباران
- Introduction to CSS Grid
- مختصر كتابي: Introduction to CSS Grid
- اختبار قصير: Introduction to CSS Grid
- CSS Grid Overview
- مختصر كتابي: CSS Grid Overview
- Sizing Grid Columns and Rows
- Placing and Spanning Grid Items
- Aligning Grid Items and Tracks
- Building a Simple CSS Grid Layout
- Challenge 3
- اختبار القسم: CSS Grid
- 7CSS Layouts Course Conclusion يحتوي على دروس مجانية
- الاختبار النهائي
- الاختبار النهائي
تعلّم على يد م. محمد أبو سريع
م. محمد أبو سريعمهندس برمجيات ذو خبرة أكثر من عشر سنوات في كبرى شركات الخليج وأوروبا. يعمل حاليًا ككبير مهندسي البرمجيات في شركة رائدة في مجال تصنيع الأدوية والتكنولوجيا الحيوية. لديه خبرة كبيرة في تطوير الواجهات الأمامية، بجانب خبرته في إلقاء المحاضرات في الجامعات المختلفة، وقناته التعليمية على اليوتيوب التي يشرح فيها البرمجة وعلومها بطريقة مبسطة.
ماذا قال الطلاب عن الدورة
التقييمات والمراجعات
جزاكم الله خيرا
الكورس مفيد جدا للناس ال هذه هي اول مرة لتعاملهم مع الرمجة👍
الحمد لله
طريقة الشرح بسيطه جدا وجميله تجعلك دائمآ متحمس للدرس القادم
محمد ابوعيسىشرح واضح و شامل لل CSS Layouts
السهل الممتنع شرح البشمهندس جميل و ممتع وسهل ممتنع اللهم بارك و بيحمس للتعمق أكتر جزاكم الله خير ❤️
شرح البشمهندس جميل و ممتع وسهل ممتنع اللهم بارك و بيحمس للتعمق أكتر جزاكم الله خير ❤️
بالرغم من توفر المعلومات والمقاطع التعليمية والمصادر والذكاء الاصطناعي التي لا تدع لأي أحد عذر في عدم التميز والتفوق - إلا أن وجود مواقع عربية مثل "المدرسة" وشباب طموح ونحسبه مخلص يسهل الحصول على الخبرة بسرعة - أرجو أن يتواصل الشباب القائم على المدرسة باستمرار مع المتعلمين حتى يثبتوا أنهم موجودين - كما أرجو تحديث المحتوى والأخبار والمدونة والتواريخ حتى تبث الثقة في النفوس -
دورة CSS Layouts قدّمت شرحًا عمليًا ومنهجيًا للتحول من الـ floats إلى Flexbox وGrid بأسلوب مبسط وفعّال. أنصح بها لكل من يريد إتقان تصميم الواجهات باحتراف.
طريقة الشرح ممتازة ومرتبة
.
شرح مفيد جدا ومبسط ❤❤❤❤
شكرا لكم
لكن بارك الله في المهندس محمد أبوسريع كورس جميل جدا هنقلك نقلة تانية
جزاك الله كل خير
⚡Adhamاستفدت كثيرا ورتبت ما برأسي جيدا م. محمد أبو سريع بارك الله فيك وجزيت خيرا
Abusrea's knack for simplifying complex concepts ensures that learners of all levels can grasp the fundamentals effortlessly. From responsive designs to advanced animations, each module is crafted with clarity and practicality in mind.
دوره ممتازه جدا ماشاء الله
شرح الlayout جميل وبسط الدنيا اكتر
ما أعجبني بخصوص هذه الدوره هو تأكيد المهندس أبوسريع علي مهارة البحث وتعلم المزيد مع نفسك
اسلوب شرح مميز وبسيط
اولا سهولة في توصيل المعلومة ثانيا التسلسل في المواضيع بحيث تدرك لماذا تم تطوير css
شرح سهل ومفيد جداً
كل شئ باذن الله
دوره تنقلك من مستوي مبتدي في css إلي مستوي أخر تماما وتعميق فهم المعلومات بشكل جيد
الدورة رائعة جدا
إضافة للأساسيات هذه الدورة مهمة جدا لإحتراف تظبيط الlayouts بسهولة ودقة باستخدام ال flexbox وال CSS Grid
ما شاء الله من أجمل وأمتع الدورات , سلاسة فى الشرح وتبسيط للمفاهيم المعقدة بشكل رائع وكيفية توظيفها فى المشاريع العملية
معرفه كل نوع واهمية واستخدامه فى اى وقت ومكان
تعليم خواص جديدة في ال css تساعدنا علي حل المشاكل بصورة افضل وابسط من المفاهيييم العادية مع جانب التطبيق المستمر وعمل مشاريع جديدة باستخدام الخصائص الجديدة
الدوره بالفعل محتواها جميل جدا بجانب طبعا الشرح الجميل فعلا في توصيل المعلومه هتفهم يعني هتفهم بس برده ما ننساش ان احنا نبحث علشان نزود ونتعمق في المعرفه
الشرح البسيط مع الأنيميشن سهل عملية الفهم
أهم شيئ التطبيق مع المهندس باستمرار وبخصوص الدورة هي رائعة ولذيذة جدا
.
صراحه شرح رائع ومبسط اللهم انفعنا بما علمتنا
جزاكم الله خيرا
اهم حاجة ف الدورة من وجهه ظري هاوا التطبيق بعد كل درس والمشريع الي بنفزها
كثرة التطبيقات وقوة الشرح تجعلك تخرج من الدورة كأنك شخص آخر
الدورة افضل حاجة انها عملية وعبارة عن مشروع بحد ذاته وبالتالي التطبيق باللي بتتعلمة بيرسخ معلومات ويوضحها بشكل كويس و انك تعرف هتستخدمها في ايه و ازاي
جزاكم الله خيرا
تشجع المدرسة المستخدمين على مشاركة تجاربهم على منصات التواصل الاجتماعي، مما يعزز الشعور بالانتماء للمجتمع بين المتعلمين
الكورس به معلومات كثيره جدا ومحتاج لمراجعة المعلومات به اكثر من مره لتثبت ، و البشمهندس ابدع في الشرح
Mohamedالكورس جدا منظم!
البشمهندس ابو سريع ابدع
اقوي محتوي عربي ويضاهي افضل الامحتويات الاجنبيه
المحتوى الكتابي ممتاااز جدا
الدورة ممتازة جدا , و أسلوب الشرح مبسط و جميل , و المختصرات الكتابية ممتازة جدا للمراجعة فيما بعد ❤
أكثر ما يعجبني هو التسلسل في طرح المواضيع كطريقة من طرق التعليم الفريدة التي تتمتع بها المدرسة .. شكرا لجهودكم
انا سعيد جدا مما تعلمته من خصائص جديدة في هذا الدورة وسهولة ال grid لترتيب الصفحة بشكل جدا بسيط وممتع ونقدم شكرنا للقأمين على هذه المنصة ومن جهد يبذلونه لتقديم لنا كل ما ينفعنا ويطورنا جزاهم الله خير وكتب الله اجرهم
دورة ممتازة
I have been struggling with CSS a long time ago, the way it is explained in the course is wonderful, and the advice of practicing projects from Frontendmentor was helpful. many thanks
ممتاز
الدورة جميلة واسلوب الشرح ما شاء الله سهل واحترافي في نفس الوقت, بالتوفيق إن شاء الله في الدورات القادمة
دوره جميله وفيها معلومات دسمه تحتاج التركيز بشكل كبير
الأسئلة الشائعة
يشير CSS layout إلى ترتيب وتفاعل عناصر HTML في صفحة الويب باستخدام CSS؛ وذلك للتحكم في العرض المرئي لهذه العناصر. ويتضمن CSS layout تعيين خصائص مثل العرض width والطول height والـ margin والـ padding والـ position لإنشاء التخطيط (layout) المطلوب لصفحة الويب.
يعد تخطيط CSS layout أمرًا بالغ الأهمية في تطوير الويب؛ لأنه يحدد كيفية عرض محتوى صفحة الويب للمستخدم. فهو يمكّن المطورين developers من إنشاء صفحات ويب web pages جذابة بصريًا، وسهلة الاستخدام، وقابلة للتكيف والعرض على أجهزة وأحجام الشاشات المختلفة. بدون CSS layout، سيكون من الصعب قراءة صفحات الويب والتنقل فيها واستخدامها.
هناك عدة أنواع من تخطيطات CSS، ومنها:
Float layout: حيث يتم وضع العناصر باستخدام خاصية Float لمحاذاتهم إلى يسار أو يمين الحاوية container الخاصة بهم.
Flexbox layout: حيث يتم وضع العناصر باستخدام نموذج flexbox؛ مما يسمح بمحاذاة العناصر وتوزيعها بسهولة في الحاوية container.
Grid layout: حيث يتم وضع العناصر باستخدام نموذج الشبكة Grid، مما يسمح بترتيبات معقدة complex arrangements من العناصر في الحاوية container.
هناك أنواع أخرى، ولكن في هذه الدورة سيتم التركيز على هؤلاء التخطيطات؛ لعرض صفحة الويب الخاصة بك بصورة جذابة ومتناسقة.
يختلف وقت تعلم أساسيات CSS layout من شخص لآخر نتيجةً لاختلاف الظروف والوقت المتاح لكل شخص، ولكن في المتوسط، فإن دورة CSS layout هذه يُتوقع الانتهاء منها في خلال أسبوع إلى أسبوعين تقريبًا.
ابدأ تعلم CSS Layouts اليوم
اشتراك مدى الحياة، شهادة إتمام، ودعم من فريق المدرسة طوال رحلتك.
جزاكم الله كل خير