Advanced CSS: Responsive Design, Animations, SASS(50)
تم تصميم دورة تخطيطات CSS layouts لتعليمك كل ما تحتاجه حول إنشاء تخطيطات جميلة وعملية لمواقع الويب الخاص بك.
- +500طالب
- 52درس
- 16قسم
- 8اختبارات
تعرّف على الدورة
هل تتطلع إلى الارتقاء بمهاراتك في CSS إلى المستوى المتقدم؟
تم تصميم دورة تخطيطات CSS layouts لتعليمك كل ما تحتاجه حول إنشاء تخطيطات جميلة وعملية لمواقع الويب الخاص بك.
هل سئمت من المعاناة مع التخطيطات العائمة floating layouts التي لا تعمل بالطريقة المثلى؟
سنعرض لك ثلاث طرق مختلفة لبناء المخططات، بما في ذلك كيفية استخدام floats لإنشاء تصميمات مرنة وسريعة الاستجابة.
هل تريد أن تتعلم أحدث وأروع التقنيات لإنشاء تصميمات حديثة ومرنة؟
سنستفيض في شرح Flexbox ونوضح لك كيفية إنشاء تخطيطات مركبة بسهولة.
هل تريد نقل مهاراتك في تخطيط CSS إلى المستوى المتقدم؟
سنعلمك كيفية استخدام CSS Grid ، أحدث نظام تخطيط أحدث ثورة في عالم تطوير الويب. باستخدام CSS Grid ، ستتمكن من إنشاء تخطيطات مركبة وديناميكية تتكيف مع أي حجم شاشة.
لن تضطر بعد الآن لقبول تخطيطات تصميمية متواضعة المستوى!
قم بالتسجيل في دورة CSS Layouts اليوم وتعلم كيفية إنشاء تخطيطات جميلة وعملية تميز مواقع الويب الخاص بك.
تشمل الدورة
- مبتديء
- شهادة موثقة
- قياس مستوى التقدم والانجاز عبر الدورة
- إجابة من مشرفي الطلاب على كل الأسئلة
- فاعليات حصرية
- شارات تميز للطلبة المتقدمين
- اشعارات تذكير وتحفيز لإنهاء الدورة
- اشتراك مدى الحياة
دفع آمن ووصول فوري للدورة
ماذا ستتعلم خطوة بخطوة
اضغط على أي قسم لعرض دروسه. الدروس المجانية متاحة للمشاهدة قبل الاشتراك.
محتوى الدورة
- 1مقدمة دورة Advanced CSS
- 2مواد الدورة
- 3إعداد المشروع5 دروس · 1 اختبار
- إعداد المشروع
- نظرة عامة على المشروع
- التهيئة وإعادة ضبط أنماط CSS
- وحدات CSS
- متغيرات CSS
- اختبار الوحدة: إعداد المشروع
- 4مكون الترويسة5 دروس · 2 اختباران
- التخطيط
- روابط التنقل
- مختصر كتابي: Navigation Links
- مفتاح التبديل
- مختصر كتابي: Toggle Input
- اختبار قصير: Toggle Input
- اختبار الوحدة: مكون الترويسة
- 5مكون النبذة التعريفية6 دروس · 3 اختبارات
- منهجية BEM
- مختصر كتابي: BEM
- اختبار قصير: BEM
- جزء البيانات
- تحريك السهم
- مختصر كتابي: Arrow Animation
- اختبار قصير: Arrow Animation
- الصورة الشخصية
- اختبار الوحدة: مكون النبذة التعريفية
- 6مكون المهارات2 درسان · 1 اختبار
- التحدي وجزء HTML
- جزء CSS
- اختبار الوحدة: مكون المهارات
- 7مكون الوسائط3 دروس · 2 اختباران
- الفيديو كعنصر وسائط
- مختصر كتابي: Video as media
- اختبار قصير: Video as media
- الفيديو كخلفية
- اختبار الوحدة: مكون الوسائط
- 8مكون المشاريع2 درسان · 1 اختبار
- جزء HTML
- جزء CSS
- اختبار الوحدة: مكون المشاريع
- 9مكون العملاء3 دروس · 2 اختباران
- جزء HTML
- جزء CSS
- مختصر كتابي: CSS Part
- اختبار قصير: CSS Part
- اختبار الوحدة: مكون العملاء
- 10مكون التواصل3 دروس · 2 اختباران
- البريد الإلكتروني وروابط التواصل الاجتماعي
- النموذج وحقول الإدخال
- مختصر كتابي: Form and Inputs
- اختبار قصير: Form and Inputs
- اختبار الوحدة: مكون التواصل
- 11ميزات وتحسينات إضافية5 دروس · 1 اختبار
- مكون التذييل
- الترويسة الثابتة
- روابط التمرير السلس
- مختصر كتابي: Scroll smooth links
- الوضع الداكن
- اختبار الوحدة: ميزات وتحسينات إضافية
- 12التصميم المتجاوب5 دروس · 2 اختباران
- نظرة عامة على التصميم المتجاوب
- التعلم بالأمثلة
- مختصر كتابي: Learn by Example
- اختبار قصير: Learn by Example
- جعل الموقع متجاوبًا
- قائمة البرجر
- اختبار الوحدة: التصميم المتجاوب
- 13لغة SASS4 دروس · 2 اختباران
- نظرة عامة على SASS
- مختصر كتابي: Overview of SASS
- اختبار قصير: Overview of SASS
- استخدام SASS في المشروع
- ضغط ملفات CSS
- اختبار الوحدة: لغة SASS
- 14نشر الموقع2 درسان · 1 اختبار
- رفع المشروع إلى GitHub
- اعرض عملك
- اختبار الوحدة: نشر الموقع
- 15خاتمة دورة Advanced CSS
- الاختبار النهائي
- الاختبار النهائي: Advanced CSS
تعلّم على يد م. محمد أبو سريع
م. محمد أبو سريعمهندس برمجيات ذو خبرة أكثر من عشر سنوات في كبرى شركات الخليج وأوروبا. يعمل حاليًا ككبير مهندسي البرمجيات في شركة رائدة في مجال تصنيع الأدوية والتكنولوجيا الحيوية. لديه خبرة كبيرة في تطوير الواجهات الأمامية، بجانب خبرته في إلقاء المحاضرات في الجامعات المختلفة، وقناته التعليمية على اليوتيوب التي يشرح فيها البرمجة وعلومها بطريقة مبسطة.
ماذا قال الطلاب عن الدورة
التقييمات والمراجعات
اللهم لك الحمد
ربنا يجازيكوا خير وينفع بكم جميعا
تدريب عملي واقعي لتطوير موقع. جزاك الله خيرا بمشهندس محمد ابو سريع
شرح مبسط وجميل، شكرًا م/ محمد أبو سريع بالنسبالى كواحد من خارج المجال ما شاء الله تجربة ممتعة وشيقة ، ومستمرة بإذن الله ويوم عن يوم الصورة بتوضح اكتر و بتكون ممتعة اكتر جزاكم الله خيرا وبارك الله فيكم
تقييم دورة Advanced CSS: Responsive Design, Animations, SASS تُعد هذه الدورة من أقوى الدورات المتقدمة في مجال تنسيق واجهات الويب، حيث تنقل المتعلم من مرحلة كتابة CSS التقليدية إلى مستوى احترافي يعتمد على بناء أنظمة تصميم متكاملة وقابلة للتوسع ✨ تغطي الدورة محور التصميم المتجاوب باحترافية عالية 📱💻، حيث يتعلم المتدرب كيفية بناء تخطيطات مرنة باستخدام Flexbox وGrid، وتطبيق منهجية Mobile-First، وإدارة نقاط التوقف بطريقة مدروسة تضمن توافق الموقع مع جميع الشاشات بسلاسة ودقة 🎯 في جانب الحركات والتأثيرات 🎬، تقدم الدورة شرحًا عمليًا لإنشاء انتقالات وانيميشن احترافية باستخدام transitions وkeyframes، مع التركيز على الأداء وتحسين تجربة المستخدم دون التأثير على سرعة الموقع ⚡ أما SASS 🧩 فيتم شرحه بعمق من خلال استخدام المتغيرات، وmixins، والدوال، وتنظيم الملفات بطريقة احترافية تسهّل إدارة المشاريع الكبيرة وتجعل الكود نظيفًا وقابلًا لإعادة الاستخدام ♻️ أبرز نقاط القوة 💎 ⭐ شرح عملي تطبيقي ⭐ تنظيم احترافي للكود ⭐ تحسين أسلوب التفكير كمطور واجهات ⭐ محتوى متقدم مناسب لسوق العمل النتائج بعد إتمام الدورة 🚀 ✔️ بناء مواقع متجاوبة بالكامل ✔️ إنشاء تأثيرات بصرية جذابة ✔️ إدارة مشاريع CSS كبيرة بكفاءة ✔️ كتابة كود نظيف وقابل للصيانة التقييم العام ⭐⭐⭐⭐⭐ المحتوى ⭐⭐⭐⭐⭐ جودة الشرح ⭐⭐⭐⭐⭐ القيمة العملية ⭐⭐⭐⭐⭐ الخلاصة 🎓 دورة قوية ومتكاملة تمثل خطوة حقيقية نحو احتراف تطوير واجهات الويب وإتقان CSS بأسلوب عصري ومنهجي.
بجد كورس جميل جدا وربنا يبارك في حضرتكم و وفقكم الله
أهم ما يميز الدورة التطبيق العملي اللي بيخليك تفهم كل اللي اتعلمته
شرح واضح، ومحتوى ثري، وتسلسل ممتاز يجعلها مثالية لتطوير مهارات CSS بشكل احترافي.
السلام عليكم ورحمة الله وبركاته أنا علي ياسر [من_السودان] أتقدم بخالص الشكر والتقدير للأستاذ محمد أبو سريع على الشرح المميز والمفيد فقد تعلمت من هذه الدورة الكثير ليس فقط في مجال البرمجة بل أيضًا في الصبر والاستمرار وأن التطبيق المستمر هو الطريق الحقيقي للوصول شكرًا لكم من القلب ولا تنسونا من صالح دعائكم ونسأل الله أن يوفقنا لنصبح من المبرمجين المحترفين داخل وخارج الشرق الأوسط تحياتي للجميع وبالتوفيق للجميع بإذن الله 🤍
الكورس كان يفيض بالمعلومات الثمينة و كان التطبيق العملي هو الشيء اللي زرع الثقة و الامل في نفسي ك مبتدئ
انا بجد قبل الدورة غير بعدها مهاراتي زادت واستفدت كتير لان ده مكانش مجرد مشروع وخلاص دي كانت طريقه بناء مشروع وطريقه التفكير في حل للمشكله ومعرفه سببها وزيادة مهاراتك البحثيه والتقنيه لو صبرت علي المشاكل الي هتقابلك ومشيت واحده واحده هتجني ثمار الصعوبة الي هتقابلك وصدقني الموضوع ده يستاهل جدا لان دي من اقوي الدورات في مسار بناء المواقع التفاعليه ومش قادر اوصفلك هتبقي فرحان ازاي وانته عامل موقعك الشخصي وحاطط فيه بياناتك .....انته محتاج تجرب
الدورة أكثر من رائعة والبشمهندس محمد أبو سريع كفى ووفى وأفاض وفعلا الواحد خرج من الدورة مستفيد كثير جدا مما كان قبلها شكرا
.
بيرفيك
كورس منظم وسلس وشرح بسيط ورائع
كورس ممتع جدا اتبسطت وانا شغال عليه رغم المشاكل الى ظهرت وحلتها بفضل الله
الكورس ماشاء الله تطرق لمواضيع متقدمة و مهمة، و الاحلى من كده ان كل المعلومات كانت بتتشرح في اطار مشروع جميل جدا مش مجرد كلام نظري و تطبيق بسيط، اللهم بارك ربنا يحفظ البشمهندس و يجزيه عنا خير الجزاء و يجعل كل ثانية من الدورة في ميزان حسناته
شكرا مدرسه دمتم موفقين
شرح جميل بيخليك مستمتع ومتحمس انك تجرب كل حاجة و اهم حاجة انه هيخليك تستخدم اللي انت اتعلمته كله
جزاك الله كل خير يابشمهدس دوره 10 من 10
جزاكم الله خيرا
الكورس غطى تفاصيل كتير و مهمة لتصميم مواقع responsive. و اتعلمت إزاي أستخدم SASS و اقرأ ال documentation بتاعته وإزاي أضيف animation.
"Abusrea's Advanced CSS and Responsive Designs with SASS course is an absolute game-changer! With expert guidance and practical projects, it's the perfect blend of skill-building and creativity, elevating my web design capabilities to new heights."
ربنا يبارك ف حضرتك ياهندسه ويجزيك كل خير
حاجة ما شاء الله ,اللهم بارك
أفضل حاجه فكرة ان لما يكون في error البشمهندس بيحله قدامنا من غير تقطيع عشان نتعلم ازاي نتعامل مع ال error
جزاك الله كل خير
نفع الله بنا وبكم جزاكم الله كل خير
الشرح ممتاز ومنظم تبارك الله
الحمدلله تعلمت الكثير من م.محمد ابو سريع
دورة جميلة جدا بحيث بتطور من مهاراتك اكتر في شرح المفاهيم المتقدمة في ال CSS والتطبيق عليها
انا والله معايا كذا كورس من ناس اجانب بس اقسم بالله الكورس ده ضافلي معلومات ما كنتش عارفها ربنا يبارك في مؤسسي المدرسة
كورس جميل وغني بالمعلومات والتطبيقات العملية, وفيه تكنيكات من سوق العمل مالقيتها بالكورسات المشابهة على منصات آخرى, جزاكم الله كل خير
من أفضل الكورسات انشاء مشروع كامل بتفاصيل كبيره باستخدام وتنشيط كل من HTML & CSS & CSS Grid & Flexbox & Responsive Design & SASS شكرا جزيلا للبشمهندس المحترف محمد ابو سريع
شرح مبسط جدا جدا
ممتاز عشان تطبق الإتعلمتو بال html و css ونصيحة: أي خاصية جديدة عليك في الكورس أقرا عنها عشان تاخد أكبر استفادة ممكنة
كالعادة المحتوي جميل وشرح الباشمهندس جميل بتاخد الخلاصه كالعادة بس نرجع ناكد انك لازم تتطبق علي اللي اتعلمته
كورس قيم وممتاز ومتهيألي أفضل كورس في الدورة محتاج بس وقت كبير للتطبيق والتدريب
انا اضع التقييم ذلك لانه يستحق التقييم . .. الكورس عظيم جدا وممتاز فوق الوصف حرفيا مفيش ثانية من الكورس الا وبتكتسب فيها معلومة .. والمهندس محمد خلوق جدا وبيبسط المعلومة ليك جدا ..حقا شكرا من القلب
.
بارك الله فيك على الكورس الخرافي
ماشاء الله شرح سلس, مميز ,واضح
جزاكم الله خيرا
اكثر شئ لاحظتة هو ان البشمهندس مش مجرد بيعلمك حاجة عن ال css لكن بيعلمك الطريقة الاحترافية والصحيحة لعملها زي BEM كمثال وبتطلع بتكبت كود احترافي مش مجرد عملت مشروع وخلاص
الدورة دي تحديدا عبارة عن ملخص خبرة سنين طحن ومذاكرة وتجميع أفكار من كل مكان .. حقيقي ربنا يكرم حضرتك يا باشمهندس ويرفع شأنك في العالمين ..
لكن حد حجم الملف عائق خلاني غير في الملفات كثير
حقيقي الكورس غني بالمعلومات القيمة شكرا للمهندس محمد ومتشوق جدا لكورس الجافاسكربت
شكرا للمدرسة ومن نجاح لنجاح إن شاء الله
شرح سلس و واضح
الأسئلة الشائعة
يشير 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 هذه يُتوقع الانتهاء منها في خلال أسبوع إلى أسبوعين تقريبًا.
ابدأ Advanced CSS: Responsive Design, Animations, SASS اليوم
اشتراك مدى الحياة، شهادة إتمام، ودعم من فريق المدرسة طوال رحلتك.
جزاكم الله خيرا