تعلم أساسيات CSS
في دورة أساسيات CSS – سواء كنت جديدا في تطوير الويب أو تتطلع إلى البناء على مهاراتك الحالية – ستساعدك هذه الدورة على إنشاء مواقع ويب مذهلة وسريعة الاستجابة تميزك عن أقرانك.
- +500طالب
- 39درس
- 5أقسام
- 17اختبار
تعرّف على الدورة
هل تتطلع إلى أن تصبح خبيرا في تصميم الويب؟
في دورة أساسيات CSS – سواء كنت جديدا في تطوير الويب أو تتطلع إلى البناء على مهاراتك الحالية – ستساعدك هذه الدورة على إنشاء مواقع ويب مذهلة وسريعة الاستجابة تميزك عن أقرانك.
هل سئمت من الشعور بأن قدراتك في تصميم الويب محدودة؟
في هذه الدورة ستتعلم كيفية استخدام CSS لتصميم كل عنصر من عناصر موقع الويب الخاص بك، والتي تشمل النصوص والروابط مرورا بالصور والمزيد.
لست متأكدا من أين تبدأ؟
تبدأ دورتنا بمقدمة تعلمك أساسيات CSS المضمنة “Inline” والداخلية “Internal” والخارجية” External”، وكيفية استخدامها لجعل موقعك يبدو في أبهى حالاته. لكننا لن نتوقف عند هذا الحد! تغطي دورتنا كل شيء بدءا من تصميم النص والجمع بين المحددات “selectors” إلى العمل مع الألوان وحل التعارض بين المحددات. ومع التغطية المتعمقة لنموذج صندوق CSS، ستتعلم كيفية إضافة الأبعاد، والهوامش “margins”، والحشوات “paddings”، وكيفية استخدام تحديد الموضع المطلق “absolute positioning” لإنشاء تصميمات لافتة للنظر.
في نهاية الدورة، ستتمكن من إنشاء مواقع ويب ذات مظهر احترافي بسهولة باستخدام أحدث التقنيات وأفضل الممارسات لنقل صفحات الويب الخاصة بك إلى ما هو أبعد من مجرد النص الأسود على خلفية بيضاء!
فماذا تنتظر؟ اشترك الآن وابدأ التعلم واتخذ خطوتك الأولى كي تصبح محترفًا في CSS!
تشمل الدورة
- مبتديء
- شهادة موثقة
- قياس مستوى التقدم والانجاز عبر الدورة
- إجابة من مشرفي الطلاب على كل الأسئلة
- فاعليات حصرية
- شارات تميز للطلبة المتقدمين
- اشعارات تذكير وتحفيز لإنهاء الدورة
- اشتراك مدى الحياة
ماذا ستتعلم خطوة بخطوة
اضغط على أي قسم لعرض دروسه. الدروس المجانية متاحة للمشاهدة قبل الاشتراك.
محتوى الدورة
- 1Introduction to the CSS Fundamentals Course
- 2Course Materials
- 3CSS Fundamentals21 درسًا · 9 اختبارات
- Introduction to CSS
- مختصر كتابي: Introduction to CSS
- اختبار قصير: Introduction to CSS
- Inline, Internal and External CSS
- مختصر كتابي: Inline, Internal and External CSS
- اختبار قصير: Inline, Internal and External CSS
- Styling Text
- مختصر كتابي: Styling Text
- اختبار قصير: Styling Text
- Combining Selectors
- مختصر كتابي: Combining Selectors
- Class and ID Selectors
- مختصر كتابي: Class and ID Selectors
- اختبار قصير: Class and ID Selectors
- Working with Colors
- مختصر كتابي: Working with Colors
- اختبار قصير: Working with Colors
- Pseudo-classes
- مختصر كتابي: Pseudo-Classes
- اختبار قصير: Pseudo-Classes
- Styling Hyperlinks
- مختصر كتابي: Styling Hyperlinks
- اختبار قصير: Styling Hyperlinks
- Using Chrome DevTools
- Conflicts Between Selectors
- مختصر كتابي: Conflicts Between Selectors
- اختبار قصير: Conflicts Between Selectors
- Inheritance and the Universal Selector
- Challenge 1
- CSS Fundamentals
- 4Spacing in CSS8 دروس · 3 اختبارات
- The CSS Box Model
- مختصر كتابي: The CSS Box Model
- اختبار قصير: The CSS Box Model
- Using Margins and Paddings
- مختصر كتابي: Using Margins and Paddings
- اختبار قصير: Using Margins and Paddings
- Adding Dimensions
- Centering Our Page
- مختصر كتابي: Centering our Page
- Challenge 2
- Spacing in CSS
- 5Other Topics10 دروس · 4 اختبارات
- Types of Boxes
- مختصر كتابي: Types of Boxes
- اختبار قصير: Types of Boxes
- Absolute Positioning
- مختصر كتابي: Absolute Positioning
- اختبار قصير: Absolute Positioning
- Pseudo-elements
- مختصر كتابي: Pseudo-elements
- اختبار قصير: Pseudo-elements
- Arabic Version
- مختصر كتابي: Arabic Version
- Best Practices and Tricks
- Challenge 3
- Other Topics
- 6Conclusion of the CSS Fundamentals Course
- الاختبار النهائي
- الاختبار النهائي
تعلّم على يد م. محمد أبو سريع
م. محمد أبو سريعمهندس برمجيات ذو خبرة أكثر من عشر سنوات في كبرى شركات الخليج وأوروبا. يعمل حاليًا ككبير مهندسي البرمجيات في شركة رائدة في مجال تصنيع الأدوية والتكنولوجيا الحيوية. لديه خبرة كبيرة في تطوير الواجهات الأمامية، بجانب خبرته في إلقاء المحاضرات في الجامعات المختلفة، وقناته التعليمية على اليوتيوب التي يشرح فيها البرمجة وعلومها بطريقة مبسطة.
ماذا قال الطلاب عن الدورة
التقييمات والمراجعات
Mohamed Ibrahim Al Oqailyانا اخدت دورات كتير CSS و صراحة دي تعتبر من افضل الدورات الي اخدتها والبشمهندس محمد ابوسريع كان ممتاز جدا في توصيل المعلومة وبسيط وان شاء الله مستمر ❤️
i have learnd a lot
شرح ممتاز وممتع وسهوله في توصيل المعلومه
Abdullah Mokhtarشرح مبسط بالأضافة الي التعلم لاساليب احترافيه
AbdElaziz Ahmed Ibrahimهذا الكورس ممتاز جدا للمبتدئين و الذين يحبون تطوير المواقع, أقدم شكر خالص لمنصة المدرسة علي جهودها لتعليم البرمجة بسهوله, و شكر خالص أيضا للأستاذ محمد أبو سريع علي هذا الكورس السهل و المميز, جزاك الله يا مستر علي جهودك و بارك الله فيك تحياتي عبد العزيز أحمد ابراهيم
مفيد جدا
it makes my web page even more powerful, especially the box model
درست html ,css مع المهندس محمد ابوسريع كانت طريقة الشرح شيقة والتطبيق وسع نظرتي لصفحات الويب الزاي بتشتغل وخلاني متشوق لمعرفة المزيد ودرست اساسياتpython مع المهندس احمد فتحي وكان الشرح جميل وعرفت حاجه كنت اول مره اعرفها زي العمليات الحسابيه مين يتم قبل مين فيها جزاكم الله خير علي العمل ده وتيسيره بلغتنا العربيه الحبيبه 🌷🌷🌷🌷🌷
هنا بقى هتبدأ تخش في الصنعة علشان تبقى نقاش محترف وتلون وتزخرف الأمور براحتك، دورة قيّمة ومعلوماتها جميلة، بارك الله فيكم (:
محمد ابوعيسىجزاك الله خيرا يا بشمهندس محمد على الشرح السلس
السلاسه في الشرح مع عدم التعمق في المواضيع. وترك المجال للدارسين في البحث عن المعلومات يجعل التعلم فعال وهذا مايسمى التعلم النشط حيث يشارك المتعلم في إيجاد المعلومات فلا يبقي المتعلم في دور المتلقي فقط بل يبحث عن المعلومات ومن الماكد ان ما يبحث من معلومات تدوم أكثر وتثبت المعلومات أكثر.
الصعود يتطلب المثابرة والاستمرار. الدورة واضحة الأهداف وتسلسلها سلس ومنطقي، ويظهر فيها جهد كبير لإخراجها بهذا الشكل المتميز. ومع ذلك، فإن وتيرة أبو سريع المتميزة تبدو سريعة بعض الشيء، حيث إنني لا أفضّل تقليل سرعة الفيديو لأنه لا يبدو طبيعيًا.
الدورة واضحة الهدف وتسلسلها سلس ومنطقي - مجهود كبير واضح لكي تخرج بهذا الشكل - لكن أبو سريع المتميز سريع شوية - "لا أحب تقليل سرعة الفيديو - لا يبدو طبيعي"
دورة أساسيات CSS كانت منظمة ومليئة بالمفاهيم العملية التي تعزز فهم تصميم الواجهات. أنصح بها لكل من يريد بناء أساس قوي في تنسيق صفحات الويب.
ما شاء الله الدورة سلسة وسهلة الفهم والشرح مبسط ورائع
شرح سلس وجميل css سهله ما شاء الله علشان الشرح كان بسيط ربنا يبارك فيكم جميعا
الحمدلله بعد ما خلصت اساسيات HTML, CSS مع مهندس محمد أبوسريع قدرت اعمل أول مشروع لوحدي تقدر تشوفه من هنا https://github.com/baselelsrogy/simple-omelette-recipe-page و حقيقي مبسوط اني جزء من هذه المنصه و لسه مكمل. شكرا لجميع القائمين علي هذه المنصه بارك الله فيكم.
Mahmoudما يعجبني تبسيط المعلومة قدر المستطاع استخدام مهارة البحث لزيادة الفهم والاخيره التدريبات والأسئلة والتحديات ما لا يعجبني السرعة العالية في بعض الفيديوهات بعض المعلومات شرحت بشكل سريع جداا دون تعمق رغم أهميتها بالنسبة لي دون تعمق بعض النقاط كانت تحتاج تعمق أكثر في الشرح ولم يحدث هذا عم تحديث الكورس ومعالجته النقاط السلبيه قدر المستطاع وفي النهاية انا استمتعت بالرحلة حتى الآن ولكم جزير الشكر وأتمنى أن أكون قد وفقت في كلامي وان لايكون فيه اي تجريح أو تقليل وما من توفيق فمن الله وحده وما من خطأ فمني ومن الشيطان
التطبيق مهم جدا جدا , محتوي الكورس سلس ومنظم
السهولة والتدرج و تعليم الاعتمادية علي المصادر الخارجية و عدم الحشو المبالغ فيه للمعلومات بيعتمد على العملية اكثر من الاكاديمية . جزاكم الله خيرا و زادكم الله علما وقدرا
10/10
جزاكم الله خيرا أعجبني أن الكورس قائم على التطبيق و يركز على طريقة التفكير و مهارات البحث الذي لم يعجبني و حسب رأيي الشخصي أن الأخ الفاضل يسرع قليلا في الشرح وفقكم الله
بالرغم من اني حدت كورسات مجانية ومدفوعة علي يودمي كمان ولكن يظل الكورس ده هو الأفضل
شكرا مدرسه
الشرح اكثر من رائع لانه تطبيق علي امثلة علطول وبينتقل تدريجي في المواضيع بشكل ممتاز ربنا يجازيك خير
ممتاز
سرعه الفيديو في التنفيذ - بعيد الفيديو بسبب عدم ترتيب الافكار وفي حاجات بتتعمل ومش بتتقال في الفيديو
one of the top courses i've ever had and the challenges make you have fun time without getting bored and the way of eng/abusrea in explaining and providing you with tips just make you don;'t want to stop
تنظيم موفق وشرح في المستوى. بارك الله فيكم
طريقة الشرح مختلفة عن طريف الكورسات العادية مثل انو لا يعطيك قاعدة كتابة الكود مثل الدالة الشرطية وما الى ذلك بل يطبق امامك دون ذكر المصطلح اللي ممكن يدوخ الشخص اللي ما عندو خلفية برمجية شكرا لجهودكم 👏^_^
ربنا يبارك في الباشمهندس محمد شرح جميل و انك بتمارس اللي اتعلمته ده بيديك شعور جميل انك تشوف النتائج قدام عينك بتحس فعلا بقيمة المعلومات اللي اتعلمتها بجد شرح ممتع و واضح و فعلا ان ايدك تكون في الممارسه افضل من انك تكون متفرج فقط ربنا يبارك في الباشمهندس محمد و كل القائمين على المحتوى
شكرا لك يا مهندس على هذه دروس
جزاك الله كل خير يهندسه
Muhammad Jalal Abu Ameishالدورة مدتها صغيرة نعم، لكن هتطلع بكم معلومات ضخم وهتحتاج تطبقها، لو مطبقتش هتلاقي نفسك مش بتنتفع من الدورة، حقيقي الدورة متعوب عليها جامد، جزى الله خيرا البشمهندس محمد.
اعجبتني كثيرا
شكرا لكل المقيمين علي هذا الكورس و المحتوي الجيد الذي النا علي بداية الطريق لعلم كنا نجهله ولكن بفضل الله سبحانه و تعالي وفضلكم بدانا تلك الرحلة عسي ان خير الرحلات العلمية لنا جميعا
بارك الله فيكم
شكرا على الشرح السلس البسيط
الدورة رائعة, تدرج ممتاز فى عرض الموضوعات والالقاء السهل البسيط غير التحديات والنصائح. جزاك الله خير الجزاء يا بشمهندس محمد
المهندس أبو سريغ أسلوبه في الإلقاء رائع مرة
شغل فاخر جدا الحمدلله استفدت كتير من هذه الدوره شكرا بشمهندس ابوسريع شكرا منصه المدرسه
ماشاء الله قمة في الاتقان والرقي
طريقة العرض غير عاديه من البشمهندس قمة في الاستمتاع والتطبيق بكل سهوله . بارك الله فيكم جميعا ❤️
كورس بعنوان السهل الممتنع ودا طبعا معتمد على اللي بيشرح وطريقته في توصيل المعلومة
انا درست كذا كورس والله العظيم ولسة بكتشف حاجات جديدة في الكورس ده اهو
شكراََ جداََ علي شرح حضرتك الجميل
سهوله الشرح وتوصيل المعلومه
دورة قيمة مليئة بالمعلومات والتطبيقات شرط التطبيق خلف البشمهندس فى كل موضوع يتطرق إليه شكرا جزيلا لكم
مشاء الله كرس رائع من أول المحاضر إلي الشرح إلي التغطيه والملاحظات و.و.وو. من هنا لبكره
يساعدك تنمي مهارات البحث عن طريق تبحث عن كيفية عمل حاجة معينة
شرح سهل وبسيط لكل العناصر المهمة في الcss الحث علي اتقان المهارات البحثية بالنسبة لك كمبرمج بجانب التطبيق العملي بنفسك
.
بساطه و سلاسه و تدرج ممتاز في الموضوعات والرائع فيها وجود التفاعل و التحديات مما يعزز الفهم جزاكم الله عنا خير الجزاء
انا بدأت كورسات html و css على اليوتيوب قبل أن اتعرف على المدرسة ولم أجد بمثل جودة والمعلومات القيمة اللي في الكورس ده في أي كورس عربي ، شكرًا على المجهود وسلاسة الشرح 🙏
دورة ممتازة اخي الفاضل .. لم أظن اني ساخرج بهذا الكم من المعلومات القيمة .. جزاك الله خيرا
دورة ممتازة لك اذا كنت ذو حس فني ومميز فهي تمكنك من انشاء صفحة بتنسيقاتها الكامله والالوان الرائعة
سلاسة فى الشرح وتشجيع دائم. شكرا يا باشمهندس محمد
جزاكم الله خيرا
طريقة عرض و شرح تجعل كل الدروس سهلة وبسيطة
الأسئلة الشائعة
Cascading Style Sheets (CSS) هي المكملة للصورة الجمالية لصفحة الويب عن طريق تنسيق الخطوط، وإضافة الألوان، والمؤثرات الخاصة، وغيرها من الميزات التي تجعل شكل الصفحة أكثر جمالًا؛ لذلك يمكنك القول إن CSS هي المسؤولة عن تنسيق شكل صفحات الويب والمواقع.
يتم استخدام HTML لتصميم هيكل الصفحة، كالصفحة التي أنت فيها الآن. و HTML هي مزيج من نص تشعبي (Hypertext) ولغة ترميز (Markup language). النص التشعبي يحدد الرابط بين صفحات الويب، ولغة الترميز تُستخدم لتعريف وثائق النص (text documentation).
تهدف CSS إلى جعل صفحات الويب قابلة للعرض (presentable)؛ حيث تسمح لك CSS بتطبيق الأنماط (styles) على صفحات الويب، وذلك بشكل مستقل عن HTML التي تشكل كل صفحة ويب.
لذا فإن تعلم كلتا اللغتين HTML و CSS يعتبر من الأشياء الأساسية لكل مطوري صفحات الويب Web developers.
يُمكنك تعلم CSS باتباع الخطوات التالية:
1- فهم أساسيات HTML: قبل تعلم CSS، يجب أن يكون لديك فهم جيد لأساسيات HTML، حيث يتم استخدام CSS لتنسيق عناصر HTML وتنسيقها.
2- ممارسة كتابة كود CSS: أفضل طريقة لتعلم CSS هي من خلال التدرب على كتابة الكود والبرمجة. يمكنك البدء بإنشاء صفحات ويب بسيطة والانتقال تدريجيًا إلى مشاريع أكثر تعقيدًا.
3- تعلم أطر عمل CSS: توفر أطر CSS مثل Bootstrap و Foundation و tailwind css كود CSS مكتوب مسبقًا يمكنك استخدامه لتصميم صفحات الويب الخاصة بك بسرعة وسهولة. يمكن أن يوفر لك تعلم هذه الأطر الوقت والجهد في عملية التصميم.
وستجد هذا وأكثر من خلال هذه الدورة “CSS fundamentals”، والدورة القادمة “CCS layout”.
تُستخدم CSS متى أردت تطبيق التصميم والتنسيق على عناصر HTML في صفحة الويب. وفيما يلي بعض الحالات التي يجب فيها استخدام CSS:
1- لتصميم عناصر HTML: يتم استخدام CSS لإضافة أنماط مثل الخطوط والألوان وصور الخلفية والتخطيط إلى عناصر HTML.
2- لإنشاء تصميمات سريعة الاستجابة: يمكن استخدام CSS لإنشاء تصميمات سريعة الاستجابة تتكيف مع أحجام الشاشات والأجهزة المختلفة.
3- لإنشاء الرسوم المتحركة والانتقالات (Animations & Transitions): يمكن استخدام CSS لإنشاء الرسوم المتحركة والانتقالات التي تضيف التفاعل المرئي إلى صفحة الويب.
4- للحفاظ على التناسق (consistency): يمكن استخدام CSS لإنشاء تصميم متسق عبر صفحات أو أقسام متعددة من موقع الويب.
5- لتحسين أداء موقع الويب: يمكن استخدام CSS لتحسين أداء موقع الويب وسرعته في تحميل الصفحات.
يختلف وقت تعلم أساسيات CSS من شخص لآخر نتيجةً لاختلاف الظروف والوقت المتاح لكل شخص، ولكن في المتوسط، فإن دورة أساسيات CSS هذه يُتوقع الانتهاء منها في خلال أسبوعين تقريبًا.
ابدأ تعلم أساسيات CSS اليوم
اشتراك مدى الحياة، شهادة إتمام، ودعم من فريق المدرسة طوال رحلتك.
he is one of the best rapper in this web design field ...really thanx a lot for this beat