Responsive websites with HTML and CSS

Advanced CSS: Responsive Design, Animations, SASS
(50)

تم تصميم دورة تخطيطات CSS layouts لتعليمك كل ما تحتاجه حول إنشاء تخطيطات جميلة وعملية لمواقع الويب الخاص بك.

سعر الدورة $29
اشترك الآن
تصفح المنهج
  • +500طالب
  • 52درس
  • 16قسم
  • 8اختبارات
عن الدورة

تعرّف على الدورة

هل تتطلع إلى الارتقاء بمهاراتك في CSS إلى المستوى المتقدم؟

تم تصميم دورة تخطيطات CSS layouts لتعليمك كل ما تحتاجه حول إنشاء تخطيطات جميلة وعملية لمواقع الويب الخاص بك.

هل سئمت من المعاناة مع التخطيطات العائمة floating layouts التي لا تعمل بالطريقة المثلى؟

سنعرض لك ثلاث طرق مختلفة لبناء المخططات، بما في ذلك كيفية استخدام floats لإنشاء تصميمات مرنة وسريعة الاستجابة.

هل تريد أن تتعلم أحدث وأروع التقنيات لإنشاء تصميمات حديثة ومرنة؟

سنستفيض في شرح Flexbox ونوضح لك كيفية إنشاء تخطيطات مركبة بسهولة.

هل تريد نقل مهاراتك في تخطيط CSS إلى المستوى المتقدم؟

سنعلمك كيفية استخدام CSS Grid ، أحدث نظام تخطيط أحدث ثورة في عالم تطوير الويب. باستخدام CSS Grid ، ستتمكن من إنشاء تخطيطات مركبة وديناميكية تتكيف مع أي حجم شاشة.

لن تضطر بعد الآن لقبول تخطيطات تصميمية متواضعة المستوى!

قم بالتسجيل في دورة CSS Layouts اليوم وتعلم كيفية إنشاء تخطيطات جميلة وعملية تميز مواقع الويب الخاص بك.

تشمل الدورة

  • مبتديء
  • شهادة موثقة
  • قياس مستوى التقدم والانجاز عبر الدورة
  • إجابة من مشرفي الطلاب على كل الأسئلة
  • فاعليات حصرية
  • شارات تميز للطلبة المتقدمين
  • اشعارات تذكير وتحفيز لإنهاء الدورة
  • اشتراك مدى الحياة
سعر الدورة $29
اشترك الآن

دفع آمن ووصول فوري للدورة

منهج الدورة

ماذا ستتعلم خطوة بخطوة

اضغط على أي قسم لعرض دروسه. الدروس المجانية متاحة للمشاهدة قبل الاشتراك.

محتوى الدورة

  1. 1
    Introduction to the Advanced CSS Course
  2. 2
    Course Materials
  3. 3
    Setting Up the Project5 دروس · 1 اختبار
    1. Setting Up the Project
    2. Project Overview
    3. Initialization and CSS Reset
    4. CSS Units
    5. CSS Variables
    6. اختبار الوحدة: Setting Up the Project
  4. 4
    Header Component5 دروس · 2 اختباران
    1. Planning
    2. Navigation Links
    3. مختصر كتابي: Navigation Links
    4. Toggle input
    5. مختصر كتابي: Toggle Input
    6. اختبار قصير: Toggle Input
    7. اختبار الوحدة: Header Component
  5. 5
    Bio Component6 دروس · 3 اختبارات
    1. BEM
    2. مختصر كتابي: BEM
    3. اختبار قصير: BEM
    4. Data Part
    5. Arrow Animation
    6. مختصر كتابي: Arrow Animation
    7. اختبار قصير: Arrow Animation
    8. Personal Image
    9. اختبار الوحدة: Bio Component
  6. 6
    Skills Component2 درسان · 1 اختبار
    1. Challenge and HTML Part
    2. CSS Part
    3. اختبار الوحدة: Skills Component
  7. 7
    Media Component3 دروس · 2 اختباران
    1. Video as Media
    2. مختصر كتابي: Video as media
    3. اختبار قصير: Video as media
    4. Video as Background
    5. اختبار الوحدة: Media Component
  8. 8
    Projects Component2 درسان · 1 اختبار
    1. HTML Part
    2. CSS Part
    3. اختبار الوحدة: Projects Component
  9. 9
    Clients Component3 دروس · 2 اختباران
    1. HTML Part
    2. CSS Part
    3. مختصر كتابي: CSS Part
    4. اختبار قصير: CSS Part
    5. اختبار الوحدة: Clients Component
  10. 10
    Contact Component3 دروس · 2 اختباران
    1. Email and Social Links
    2. Form and Inputs
    3. مختصر كتابي: Form and Inputs
    4. اختبار قصير: Form and Inputs
    5. اختبار الوحدة: Contact Component
  11. 11
    More Features and Tweaks5 دروس · 1 اختبار
    1. Footer Component
    2. Sticky Header
    3. Smooth Scroll Links
    4. مختصر كتابي: Scroll smooth links
    5. Dark Theme
    6. اختبار الوحدة: More Features and Tweaks
  12. 12
    Responsive Design5 دروس · 2 اختباران
    1. Overview of Responsive Design
    2. Learn by Example
    3. مختصر كتابي: Learn by Example
    4. اختبار قصير: Learn by Example
    5. Make It Responsive
    6. Burger Menu
    7. اختبار الوحدة: Responsive Design
  13. 13
    SASS (Syntactically Awesome Style Sheets)4 دروس · 2 اختباران
    1. Overview of SASS
    2. مختصر كتابي: Overview of SASS
    3. اختبار قصير: Overview of SASS
    4. Using SASS in the Project
    5. Compress CSS
    6. اختبار الوحدة: SASS (Syntactically Awesome Style Sheets)
  14. 14
    Make It Live2 درسان · 1 اختبار
    1. Upload the Project to GitHub
    2. Show Your Work
    3. اختبار الوحدة: Make It Live
  15. 15
    Conclusion of the Advanced CSS Course
  1. الاختبار النهائي
    1. الاختبار النهائي
المعلم

تعلّم على يد م. محمد أبو سريع

  • م. محمد أبو سريع
    م. محمد أبو سريع

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

آراء الطلاب

ماذا قال الطلاب عن الدورة

التقييمات والمراجعات

5.0
متوسط التقييمات
50 عدد التقييمات
5
49
4
1
3
0
2
0
1
0
كيف كانت تجربتك؟ نود أن نعرف!
Gamal ElSaeed
تم النشر قبل شهر واحد
جزاكم الله خيرا

جزاكم الله خيرا

Hamdy Ahmed
تم النشر قبل شهرين
الحمد لله

اللهم لك الحمد

Remaz Mahmoud
تم النشر قبل 4 أشهر
قق

ربنا يجازيكوا خير وينفع بكم جميعا

محمد ابوعيسى
تم النشر قبل 7 أشهر
تجربة ممتعه.

تدريب عملي واقعي لتطوير موقع. جزاك الله خيرا بمشهندس محمد ابو سريع

أحمد عقيله
تم النشر قبل 7 أشهر
تجربة ممتعة

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

Mohamed Ahmed Helmy
تم النشر قبل 8 أشهر
رأي شخص جرب الدورة

تقييم دورة Advanced CSS: Responsive Design, Animations, SASS تُعد هذه الدورة من أقوى الدورات المتقدمة في مجال تنسيق واجهات الويب، حيث تنقل المتعلم من مرحلة كتابة CSS التقليدية إلى مستوى احترافي يعتمد على بناء أنظمة تصميم متكاملة وقابلة للتوسع ✨ تغطي الدورة محور التصميم المتجاوب باحترافية عالية 📱💻، حيث يتعلم المتدرب كيفية بناء تخطيطات مرنة باستخدام Flexbox وGrid، وتطبيق منهجية Mobile-First، وإدارة نقاط التوقف بطريقة مدروسة تضمن توافق الموقع مع جميع الشاشات بسلاسة ودقة 🎯 في جانب الحركات والتأثيرات 🎬، تقدم الدورة شرحًا عمليًا لإنشاء انتقالات وانيميشن احترافية باستخدام transitions وkeyframes، مع التركيز على الأداء وتحسين تجربة المستخدم دون التأثير على سرعة الموقع ⚡ أما SASS 🧩 فيتم شرحه بعمق من خلال استخدام المتغيرات، وmixins، والدوال، وتنظيم الملفات بطريقة احترافية تسهّل إدارة المشاريع الكبيرة وتجعل الكود نظيفًا وقابلًا لإعادة الاستخدام ♻️ أبرز نقاط القوة 💎 ⭐ شرح عملي تطبيقي ⭐ تنظيم احترافي للكود ⭐ تحسين أسلوب التفكير كمطور واجهات ⭐ محتوى متقدم مناسب لسوق العمل النتائج بعد إتمام الدورة 🚀 ✔️ بناء مواقع متجاوبة بالكامل ✔️ إنشاء تأثيرات بصرية جذابة ✔️ إدارة مشاريع CSS كبيرة بكفاءة ✔️ كتابة كود نظيف وقابل للصيانة التقييم العام ⭐⭐⭐⭐⭐ المحتوى ⭐⭐⭐⭐⭐ جودة الشرح ⭐⭐⭐⭐⭐ القيمة العملية ⭐⭐⭐⭐⭐ الخلاصة 🎓 دورة قوية ومتكاملة تمثل خطوة حقيقية نحو احتراف تطوير واجهات الويب وإتقان CSS بأسلوب عصري ومنهجي.

Mohamed Alasfer
تم النشر قبل 9 أشهر
كورس مومتاز علي طريقه بشمهندس محمد ابوسريع

بجد كورس جميل جدا وربنا يبارك في حضرتكم و وفقكم الله

Abdulrahman Alhaytham
تم النشر قبل 9 أشهر
ممتاز اللهم بارك

أهم ما يميز الدورة التطبيق العملي اللي بيخليك تفهم كل اللي اتعلمته

Mohamed Nasser Abdalla
تم النشر قبل 11 شهرًا
دورة منظمة ومليئة بالتطبيقات العملية

شرح واضح، ومحتوى ثري، وتسلسل ممتاز يجعلها مثالية لتطوير مهارات CSS بشكل احترافي.

علي ياسر
تم النشر قبل 11 شهرًا
استمر في التعلم وطبق ما تعلمته واستعن بالله دائمًا🤍

السلام عليكم ورحمة الله وبركاته أنا علي ياسر [من_السودان] أتقدم بخالص الشكر والتقدير للأستاذ محمد أبو سريع على الشرح المميز والمفيد فقد تعلمت من هذه الدورة الكثير ليس فقط في مجال البرمجة بل أيضًا في الصبر والاستمرار وأن التطبيق المستمر هو الطريق الحقيقي للوصول شكرًا لكم من القلب ولا تنسونا من صالح دعائكم ونسأل الله أن يوفقنا لنصبح من المبرمجين المحترفين داخل وخارج الشرق الأوسط تحياتي للجميع وبالتوفيق للجميع بإذن الله 🤍

لديك سؤال؟

الأسئلة الشائعة

يشير 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 اليوم

اشتراك مدى الحياة، شهادة إتمام، ودعم من فريق المدرسة طوال رحلتك.

اشترك الآن
تصفح المنهج