تعلم CSS Layouts
تم تصميم دورة تخطيطات CSS layouts لتعليمك كل ما تحتاجه حول إنشاء تخطيطات جميلة وعملية لمواقع الويب الخاص بك.
- +500طالب
- 29درس
- 7أقسام
- 06اختبارات
تعرّف على الدورة
هل تتطلع إلى الارتقاء بمهاراتك في CSS إلى المستوى المتقدم؟
تم تصميم دورة تخطيطات CSS layouts لتعليمك كل ما تحتاجه حول إنشاء تخطيطات جميلة وعملية لمواقع الويب الخاص بك.
هل سئمت من المعاناة مع التخطيطات العائمة floating layouts التي لا تعمل بالطريقة المثلى؟
سنعرض لك ثلاث طرق مختلفة لبناء المخططات، بما في ذلك كيفية استخدام floats لإنشاء تصميمات مرنة وسريعة الاستجابة.
هل تريد أن تتعلم أحدث وأروع التقنيات لإنشاء تصميمات حديثة ومرنة؟
سنستفيض في شرح Flexbox ونوضح لك كيفية إنشاء تخطيطات مركبة بسهولة.
هل تريد نقل مهاراتك في تخطيط CSS إلى المستوى المتقدم؟
سنعلمك كيفية استخدام CSS Grid ، أحدث نظام تخطيط أحدث ثورة في عالم تطوير الويب. باستخدام CSS Grid ، ستتمكن من إنشاء تخطيطات مركبة وديناميكية تتكيف مع أي حجم شاشة.
لن تضطر بعد الآن لقبول تخطيطات تصميمية متواضعة المستوى!
قم بالتسجيل في دورة CSS Layouts اليوم وتعلم كيفية إنشاء تخطيطات جميلة وعملية تميز مواقع الويب الخاص بك.
تشمل الدورة
- مبتديء
- شهادة موثقة
- قياس مستوى التقدم والانجاز عبر الدورة
- إجابة من مشرفي الطلاب على كل الأسئلة
- فاعليات حصرية
- شارات تميز للطلبة المتقدمين
- اشعارات تذكير وتحفيز لإنهاء الدورة
- اشتراك مدى الحياة
ماذا ستتعلم خطوة بخطوة
اضغط على أي قسم لعرض دروسه. الدروس المجانية متاحة للمشاهدة قبل الاشتراك.
محتوى الدورة
- 1مقدمة دورة CSS Layouts يحتوي على دروس مجانية
- 2مواد الدورة
- 3الطرق الثلاث لبناء التخطيطات1 درس · 1 اختبار يحتوي على دروس مجانية
- مختصر كتابي: The 3 Ways of Building Layouts درس مجاني
- اختبار القسم: الطرق الثلاث لبناء التخطيطات
- 4العناصر العائمة Floats8 دروس · 2 اختباران
- استخدام العناصر العائمة
- مختصر كتابي: Using Floats
- إلغاء تأثير العناصر العائمة
- بناء تخطيط بسيط باستخدام العناصر العائمة
- الخاصية box-sizing: border-box
- مختصر كتابي: box-sizing – border-box
- اختبار قصير: box-sizing – border-box
- النسخة العربية
- التحدي 1
- اختبار القسم: العناصر العائمة Floats
- 5خاصية Flexbox11 درسًا · 4 اختبارات
- مقدمة إلى Flexbox
- نظرة عامة على Flexbox
- مختصر كتابي: A Flexbox Overview
- اختبار قصير: A Flexbox Overview
- التباعد ومحاذاة عناصر Flex
- مختصر كتابي: Spacing and Aligning Flex Items
- اختبار قصير: Spacing and Aligning Flex Items
- الخاصية flex
- مختصر كتابي: The flex Property
- اختبار قصير: The flex Property
- بناء تخطيط مكوّن باستخدام Flexbox
- بناء تخطيط صفحة باستخدام Flexbox
- النسخة العربية: التخطيط النهائي باستخدام Flexbox
- التحدي 2
- اختبار القسم: خاصية Flexbox
- 6شبكة CSS Grid9 دروس · 2 اختباران
- مقدمة إلى CSS Grid
- مختصر كتابي: Introduction to CSS Grid
- اختبار قصير: Introduction to CSS Grid
- نظرة عامة على CSS Grid
- مختصر كتابي: CSS Grid Overview
- تحديد أحجام أعمدة الشبكة وصفوفها
- وضع عناصر الشبكة وتمديدها
- محاذاة عناصر الشبكة ومساراتها
- بناء تخطيط بسيط باستخدام CSS Grid
- التحدي 3
- اختبار القسم: شبكة CSS Grid
- 7خاتمة دورة CSS Layouts يحتوي على دروس مجانية
- الاختبار النهائي
- الاختبار النهائي لدورة CSS Layouts
تعلّم على يد م. محمد أبو سريع
م. محمد أبو سريعمهندس برمجيات ذو خبرة أكثر من عشر سنوات في كبرى شركات الخليج وأوروبا. يعمل حاليًا ككبير مهندسي البرمجيات في شركة رائدة في مجال تصنيع الأدوية والتكنولوجيا الحيوية. لديه خبرة كبيرة في تطوير الواجهات الأمامية، بجانب خبرته في إلقاء المحاضرات في الجامعات المختلفة، وقناته التعليمية على اليوتيوب التي يشرح فيها البرمجة وعلومها بطريقة مبسطة.
ماذا قال الطلاب عن الدورة
التقييمات والمراجعات
جزاكم الله خيرا
الكورس مفيد جدا للناس ال هذه هي اول مرة لتعاملهم مع الرمجة👍
الحمد لله
طريقة الشرح بسيطه جدا وجميله تجعلك دائمآ متحمس للدرس القادم
محمد ابوعيسىشرح واضح و شامل لل 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 تساعدنا علي حل المشاكل بصورة افضل وابسط من المفاهيييم العادية مع جانب التطبيق المستمر وعمل مشاريع جديدة باستخدام الخصائص الجديدة
الدوره بالفعل محتواها جميل جدا بجانب طبعا الشرح الجميل فعلا في توصيل المعلومه هتفهم يعني هتفهم بس برده ما ننساش ان احنا نبحث علشان نزود ونتعمق في المعرفه
الشرح البسيط مع الأنيميشن سهل عملية الفهم
أهم شيئ التطبيق مع المهندس باستمرار وبخصوص الدورة هي رائعة ولذيذة جدا
.
صراحه شرح رائع ومبسط اللهم انفعنا بما علمتنا
جزاكم الله خيرا
اهم حاجة ف الدورة من وجهه ظري هاوا التطبيق بعد كل درس والمشريع الي بنفزها
كثرة التطبيقات وقوة الشرح تجعلك تخرج من الدورة كأنك شخص آخر
الدورة افضل حاجة انها عملية وعبارة عن مشروع بحد ذاته وبالتالي التطبيق باللي بتتعلمة بيرسخ معلومات ويوضحها بشكل كويس و انك تعرف هتستخدمها في ايه و ازاي
جزاكم الله خيرا
تشجع المدرسة المستخدمين على مشاركة تجاربهم على منصات التواصل الاجتماعي، مما يعزز الشعور بالانتماء للمجتمع بين المتعلمين
الكورس به معلومات كثيره جدا ومحتاج لمراجعة المعلومات به اكثر من مره لتثبت ، و البشمهندس ابدع في الشرح
الكورس جدا منظم!
البشمهندس ابو سريع ابدع
اقوي محتوي عربي ويضاهي افضل الامحتويات الاجنبيه
المحتوى الكتابي ممتاااز جدا
الدورة ممتازة جدا , و أسلوب الشرح مبسط و جميل , و المختصرات الكتابية ممتازة جدا للمراجعة فيما بعد ❤
أكثر ما يعجبني هو التسلسل في طرح المواضيع كطريقة من طرق التعليم الفريدة التي تتمتع بها المدرسة .. شكرا لجهودكم
انا سعيد جدا مما تعلمته من خصائص جديدة في هذا الدورة وسهولة ال 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 اليوم
اشتراك مدى الحياة، شهادة إتمام، ودعم من فريق المدرسة طوال رحلتك.
جزاكم الله كل خير