رئيس مجلس الإدارة ورئيس التحرير أحمد حمدي

دورة تعلم CSS كاملة 🌟 أفضل كورس

👤 Coder Shiyar (كودر شيار) 🎬 61 درس ⏱️ 7 ساعة 34 دقيقة 📶 مبتدئ 🇪🇬 عربي
تعلم CSS في 5 دقائق 🚀 اقوى شرح 2024 🌟 كورس تعلم CS
🏆أوائل أكاديمية مصر 24اتعلّم كل يوم ونافس على التاج 👑الترتيب ←
EG-24 ACADEMY
EG24
EG-24ACADEMY
— أكاديمية مصر 24 —
CERTIFICATE
OF COMPLETION
THISCERTIFICATE IS PROUDLY PRESENTED TO
اسمك هنا
FOR SUCCESSFULLY COMPLETING THE COURSE
دورة تعلم CSS كاملة 🌟 أفضل كورس
ISSUED ON
09 أكتوبر 2026
Ahmed Hamdy
AHMED HAMDY
FOUNDER
VERIFY CERTIFICATE
CERTIFICATE ID
PREVIEW
رقم تحقق الشهادة
EG24
ACADEMY
LEARN GROW
🔒

شاهد 50% من الكورس واحصل على شهادة إتمام باسمك

✅ تتبع تقدمك في الكورس
🏆 شهادة مجانية عند الإتمام
📊 إحصائياتك محفوظة دائماً
🔖 استكمل من حيث توقفت

إنشاء حساب مجاني يأخذ ثوانٍ فقط

📋 محتوى الكورس 61 درس · 7 ساعة 34 دقيقة
  • 1 تعلم CSS في 5 دقائق 🚀 اقوى شرح 2024 🌟 كورس تعلم CSS: الدرس 1 5:36
  • 2 شرح ماهي ادوات اللازمة لتعلم CSS وكيفية إنشاء سيرفر محلي 🌟 كورس تعلم CSS: الدرس 2 11:59
  • 3 شرح كيفية ربط ملف css بملف html بسهولة 🌟 كورس تعلم CSS: الدرس 3 10:55
  • 4 شرح كيفية استخدام CSS لتصميم عناصر HTML بسهولة 🌟 دورة تعلم CSS: الدرس 4 7:41
  • 5 شرح CSS comments - طريقة إنشاء تعليقات في CSS 🌟 كورس تعلم CSS: الدرس 5 2:25
  • 6 طريقة تحديد عناصر html في CSS عبر اسم id و class 🌟 دورة تعلم CSS: الدرس 6 6:03
  • 7 طريقة تحديد عناصر html في CSS (الجزء الثاني) 🌟 دورة تعلم CSS: الدرس 7 6:02
  • 8 طرق تحديد الألوان بدقة عالية - القيمة الاسمية والـRGB والـHSL والـHEX 🌟 كورس تعلم CSS: الدرس 8 5:07
  • 9 طريقة تحديد لون خلفية الموقع بالتفصيل - ونصائح لاختيار الألوان المناسبة 🌟 كورس تعلم CSS: الدرس 9 4:27
  • 10 طريقة تحديد صورة كخلفية لموقعك وتحكم بحجمها وتكرارها 🌟 كورس تعلم CSS: الدرس 10 10:21
  • 11 تحديد تموضع الخلفية وطريقة عمل العمليات الحسابية لتحسين تصميم موقعك🌟 كورس تعلم CSS: الدرس 11 9:57
  • 12 شرح كيفية جعل صورة خلفية موقعك ثابتة ومرتبة بشكل أفضل 🌟 كورس تعلم CSS: الدرس 12 10:58
  • 13 شرح كيفية مزج الألوان مع صور الخلفية بسهولة🌟 كورس تعلم CSS: الدرس 13 2:58
  • 14 شرح الفرق بين عناصر inline و block و inline-block 🌟 كورس تعلم CSS: الدرس 14 5:43
  • 15 شرح ما هو أمر important وكيف يؤثر على تصميم المواقع 🌟 كورس تعلم CSS: الدرس 15 4:30
  • 16 شرح الفرق بين initial و unset و inherit في CSS 🌟 كورس تعلم CSS: الدرس 16 5:28
  • 17 شرح width max-width و min-width - طريقة تحديد قياس عناصر html 🌟 كورس تعلم CSS: الدرس 17 10:34
  • 18 شرح الفرق بين height و min-height و max-height 🌟 كورس تعلم CSS: الدرس 18 10:27
  • 19 شرح ما هو padding وكيفية استخدامه 🌟 كورس تعلم CSS: الدرس 19 11:05
  • 20 شرح ما هو margin وكيفية استخدامه 🌟 كورس تعلم CSS: الدرس 20 9:48
  • 21 تصميم موقع ويب كامل ب html و css 🌟 كورس تعلم CSS: الدرس 21 9:20
  • 22 شرح text-align وكيفية استخدامه لتحديد محاذاة النص بشكل دقيق وجميل 🌟 كورس تعلم CSS: الدرس 22 4:05
  • 23 شرح border و كيفية عرض موقعك في هاتف بالمتصفح على الكمبيوتر 🌟 كورس تعلم CSS: الدرس 23 10:12
  • 24 شرح outline و outline-offset - كيفية إضافة تأثيرات لحدود العناصر في موقعك 🌟 كورس تعلم CSS: الدرس 24 2:46
  • 25 طريقة قطع زوايا بشكل دائري او منحني - شرح border-radius 🌟 كورس تعلم CSS: الدرس 25 4:37
  • 26 شرح تصميم النصوص في CSS: كيفية تحديد حجم الخط ونمط الخط و نوع الخط 🌟 كورس تعلم CSS: الدرس 26 8:01
  • 27 تغيير نوع الخط في CSS: شرح font-family واستخدام Google Fonts 🌟 كورس تعلم CSS: الدرس 27 7:37
  • 28 شرح CSS Text و Word Spacing و indent و Line-height 🌟 كورس تعلم CSS: الدرس 28 3:47
  • 29 شرح Direction و Text decoration و transform في CSS 🌟 كورس تعلم CSS: الدرس 29 4:00
  • 30 شرح Float في و كيفية إنشاء بطاقات باستخدام html و css 🌟 كورس تعلم CSS: الدرس 30 5:06
  • 31 شرح الفرق بين Opacity و Visibility و display none 🌟 كورس تعلم CSS: الدرس 31 2:53
  • 32 شرح hover, focus, cursor و active في CSS 🌟 كورس تعلم CSS: الدرس 32 3:25
  • 33 شرح CSS pagination | إنشاء ترقيم الصفحات + not 🌟 كورس تعلم CSS: الدرس 33 4:12
  • 34 شرح الفرق بين Text و Drop و Box Shadow 🌟 كورس تعلم CSS: الدرس 34 5:46
  • 35 شرح كيفية تصميم HTML buttons في CSS بجمال يطير العقل 🌟 كورس تعلم CSS: الدرس 35 8:26
  • 36 طريقة إضافة محتوى إلى html ب CSS و تصميم نصوص بإحترافية 🌟 كورس تعلم CSS: الدرس 36 4:08
  • 37 شرح var و Counter وكيفية استخدامهم 🌟 كورس تعلم CSS: الدرس 37 5:09
  • 38 شرح كيفية تصميم HTML Lists بCSS بجمال يطير العقل 🌟 كورس تعلم CSS: الدرس 38 4:36
  • 39 تعلّم تصميم HTML Table بإحترافية 🌟 كورس تعلم CSS: الدرس 39 4:10
  • 40 شرح Linear Gradient - تعلّم إنشاء خلفيات متعددة الألوان 🌟 كورس تعلم CSS: الدرس 40 4:01
  • 41 شرح الفرق بين position absolute, sticky, fixed, relative, static 🌟 كورس تعلم CSS: الدرس 41 11:22
  • 42 شرح CSS Flexbox - تعلم كل شي عن Flex مع امثلة 🌟 كورس تعلم CSS: الدرس 42 16:32
  • 43 شرح CSS Media Queries وكيفية تصميم صفحات الويب لأجل الطابعة 🌟 كورس تعلم CSS: الدرس 43 6:04
  • 44 احترف تصميم مواقع متجاوبة: أسرار Media Query مع امثلة 🌟 كورس تعلم CSS: الدرس 44 19:53
  • 45 احترف تصميم مواقع متجاوبة حسب وضعية الشاشة 🌟 كورس تعلم CSS: الدرس 45 7:21
  • 46 شرح CSS Grid كامل مع أمثلة تطبيقية 🌟 كورس تعلم CSS: الدرس 46 17:48
  • 47 شرح css transitions مع امثلة 🌟 كورس تعلم CSS: الدرس 47 5:38
  • 48 شرح css overflow و text-overflow و resize مع امثلة 🌟 كورس تعلم CSS: الدرس 48 5:42
  • 49 شرح Object Fit و Object Position و Filter مع امثلة 🌟 كورس تعلم CSS: الدرس 49 6:23
  • 50 شرح CSS Box Sizing و Clip Path مع امثلة 🌟 كورس تعلم CSS: الدرس 50 4:43
  • 51 شرح css valid, invalid, required, disabled, enabled, blur, focus 🌟 كورس تعلم CSS: الدرس 51 8:59
  • 52 طريقة تحديد عناصر html عبر خصائص (Attribute Selectors) 🌟 كورس تعلم CSS: الدرس 52 7:24
  • 53 إنشاء صفحة تسجيل الدخول في المواقع احترافي وسهل (Login Page) 🌟 كورس تعلم CSS: الدرس 53 4:02
  • 54 إنشاء صفحة التسجيل في المواقع احترافي و سهل (Register Page) 🌟 كورس تعلم CSS: الدرس 54 5:23
  • 55 كيفية جعل صورة كا لون النص + شرح Background-Clip 🌟 كورس تعلم CSS: الدرس 55 7:15
  • 56 شرح webkit-text-stroke - كيفية إضافة حدود حول النص بإحترافية 🌟 كورس تعلم CSS: الدرس 56 5:12
  • 57 شرح CSS 2D Transforms: translate, rotate, skew و scale 🌟 كورس تعلم CSS: الدرس 57 5:24
  • 58 شرح CSS 3D Transforms - تغير اتجاه المحتوى بإحترافية 🌟 كورس تعلم CSS: الدرس 58 4:11
  • 59 تعلّم كيفية إنشاء رسوم متحرّكة مذهلة - شرح CSS Animations 🌟 كورس تعلم CSS: الدرس 59 13:57
  • 60 دورة شاملة Git و GitHub للمبتدئين | Git and GitHub for Beginners: Crash Course 2024 29:06
  • 61 نهاية دورة تعلم CSS - توجيهك للخطوات التالية في رحلتك نحو الاحتراف 🌟 كورس تعلم CSS: الدرس 60 4:05
▶ يُشغَّل الآن
تعلم CSS في 5 دقائق 🚀 اقوى شرح 2024 🌟 كورس تعلم CSS: الدرس 1

📘 نظرة عامة على الكورس

يتكوّن الكورس من 61 درسًا من تقديم Coder Shiyar (كودر شيار) بإجمالي مدة 7 ساعات و34 دقيقة. تبدأ الرحلة بدرس «دقائق اقوى» وتنتهي بدرس «نهاية دورة - توجيهك للخطوات التالية في رحلتك نحو الاحتراف». أطول الدروس «دورة شاملة Git و GitHub للمبتدئين - Git and GitHub for Beginners…» بمدة 29 دقيقة، ومتوسط مدة الدرس 7 دقائق. المحتوى موجّه إلى المبتدئين في مجال برمجة وتطوير المواقع. بمعدل نصف ساعة يوميًا يمكنك إتمام الكورس في 16 يومًا.

لماذا تتعلم CSS كاملة أفضل؟

  • الوعي بالصحة واللياقة ارتفع بشكل كبير، مع زيادة الطلب على المدربين المتخصصين.
  • مجاني بالكامل — ابدأ الآن دون أي رسوم
  • شهادة إتمام باسمك من أكاديمية مصر 24 — أضفها لـ CV وLinkedIn
  • تعلّم في أي وقت — بالسرعة التي تناسبك
  • 30 دقيقة نشاط بدني يومياً تُقلل خطر الأمراض المزمنة بنسبة 50%.

مسار التعلم في هذا الكورس

يسير الكورس بترتيب متدرّج: دقائق اقوى ← الفرق بين initial و unset و inherit ← الفرق بين Opacity و Visibility و display none ← Grid كامل مع أمثلة تطبيقية ← نهاية دورة - توجيهك للخطوات التالية في رحلتك نحو الاحتراف.

المتطلبات السابقة

لا يحتاج الكورس خبرة سابقة في برمجة وتطوير المواقع؛ يبدأ معك من الأساسيات. كل ما تحتاجه: جهاز متصل بالإنترنت، ووقت ثابت للتطبيق بعد كل درس.

أول درس في الكورس: «دقائق اقوى».

أدوات شائعة في مجال برمجة وتطوير المواقع

  • تطبيق MyFitnessPal
  • Fitbit
  • تطبيقات التمارين
  • أجهزة رياضية

ما تحتاجه لتطبيق الكورس

  • لابتوب بمعالج Core i5 أو Ryzen 5 أو أحدث
  • رام 8 جيجا على الأقل، و16 جيجا أفضل
  • قرص SSD لتشغيل أدوات التطوير بسرعة

الوظائف المرتبطة بهذا الكورس

  • مطور واجهات أمامية: بناء واجهات المواقع التفاعلية
  • مصمم مواقع: تصميم المواقع وإطلاقها بأدوات مثل ووردبريس
  • مبرمج: كتابة الكود وبناء البرامج وحل المشكلات التقنية

متوسط رواتب مطور واجهات أمامية في 2026

  • مصر: 9,520 – 45,997 جنيه شهريًا
  • السعودية: 6,493 – 22,019 ريال شهريًا
  • الإمارات: 12,782 – 33,231 درهم شهريًا

وللمقارنة: مصمم مواقع في مصر 11,055 – 30,673 جنيه، ومبرمج في مصر 11,248 – 45,108 جنيه.

أرقام شهرية تقريبية من بيانات Paylab، آخر مراجعة سبتمبر 2026. الراتب الفعلي يختلف حسب الخبرة والمدينة والشركة.

كم من الوقت تحتاج لإتقان CSS كاملة أفضل؟

إجمالي مدة الدروس الفعلية: 7 ساعات و34 دقيقة. إذا خصصت 30 دقيقة يوميًا ستنهيه في 16 يومًا، وبساعة يوميًا في 8 أيام. ومع التطبيق العملي وإعادة المشاهدة احسب ضعف المدة تقريبًا، فالإتقان يأتي من التطبيق وليس من المشاهدة وحدها.

شهادات مهنية يمكنك التقدم لها لاحقًا في مجال برمجة وتطوير المواقع

شهادات دولية مستقلة لا يمنحها هذا الكورس، لكنه خطوة نحوها.

  • Meta Front-End Developer (Coursera)
  • AWS Certified Developer – Associate
  • Oracle Certified Professional: Java SE

مشاريع شائعة في مجال برمجة وتطوير المواقع

  • خطة تمرين 12 أسبوع
  • تحديات اللياقة
  • برنامج تدريب مخصص

ماذا بعد هذا الكورس؟

بعد ما تنهي الكورس وتطبّق ما تعلمته، كمّل رحلتك بواحد من هذه الكورسات:

الأقسام الجامعية ذات الصلة

  • كلية الحاسبات والمعلومات
  • كلية الهندسة (قسم الحاسبات)
  • المعاهد العليا لنظم المعلومات

ابدأ مصدر دخلك من المجال

تقدر تشتغل عمل حر وتبني مواقع لعملاء على منصات زي مستقل وUpwork.

C
المدرّس / القناة
Coder Shiyar (كودر شيار)
🎬
عدد الدروس
61 درس
⏱️
المدة الإجمالية
7 ساعة 34 دقيقة
📶
المستوى
مبتدئ
🌍
اللغة
العربية
🎓
الشهادة
شهادة إتمام باسمك
✅
المتطلبات
لا توجد متطلبات مسبقة
📂
التصنيف
برمجة وتطوير المواقع

🎯 ماذا ستتعلم في هذا الكورس

✓
دقائق اقوى
✓
ماهي ادوات اللازمة لتعلم وكيفية إنشاء سيرفر محلي
✓
كيفية ربط ملف بملف html بسهولة
✓
كيفية استخدام لتصميم عناصر HTML بسهولة دورة
✓
comments - طريقة إنشاء تعليقات
✓
طريقة تحديد عناصر html في عبر اسم id و class دورة
✓
طريقة تحديد عناصر html في ( ) دورة
✓
طرق تحديد الألوان بدقة عالية - القيمة الاسمية والـRGB والـHSL والـHEX
✓
+ 53 موضوعًا آخر داخل الكورس

💼 وظائف مرتبطة بهذا الكورس

💼
مطور واجهات أمامية
بناء واجهات المواقع التفاعلية
💰 مصر: 9.5–46 ألف ج.م · السعودية: 6.5–22 ألف ر.س
💼
مصمم مواقع
تصميم المواقع وإطلاقها بأدوات مثل ووردبريس
💰 مصر: 11–31 ألف ج.م · السعودية: 6.6–18 ألف ر.س
💼
مبرمج
كتابة الكود وبناء البرامج وحل المشكلات التقنية
💰 مصر: 11–45 ألف ج.م · السعودية: 3.7–18 ألف ر.س

❓ أسئلة شائعة عن الكورس

كم عدد دروس كورس CSS كاملة أفضل؟ +
يضم كورس CSS كاملة أفضل 61 درسًا بإجمالي مدة 7 ساعات و34 دقيقة. تتراوح مدة الدرس بين دقيقتين و29 دقيقة.
من يقدم كورس CSS كاملة أفضل؟ +
يقدمه Coder Shiyar (كودر شيار)، وتعرض مصر 24 دروسه مرتبة في صفحة واحدة مع حفظ تقدمك درسًا بدرس.
هل الكورس مناسب للمبتدئين؟ +
نعم، الكورس موجّه للمبتدئين ولا يحتاج خبرة سابقة. ويبدأ بدرس «دقائق اقوى».
كم يستغرق إتمام الكورس؟ +
إجمالي مدة الدروس 7 ساعات و34 دقيقة. بمعدل 30 دقيقة يوميًا تنهيه في 16 يومًا، وبساعة يوميًا في 8 أيام.
هل أحصل على شهادة بعد الكورس؟ +
نعم، تحصل على شهادة إتمام باسمك من أكاديمية مصر 24، وتُفتح بعد مشاهدة نصف الدروس على الأقل.
هل الكورس مجاني؟ +
نعم، كل الدروس متاحة للمشاهدة دون أي رسوم أو اشتراك.
ما الذي أحتاجه لتطبيق الكورس؟ +
لابتوب بمعالج Core i5 أو Ryzen 5 أو أحدث، ورام 8 جيجا على الأقل، و16 جيجا أفضل، وقرص SSD لتشغيل أدوات التطوير بسرعة.
هل يمكنني تحقيق دخل من هذا المجال؟ +
تقدر تشتغل عمل حر وتبني مواقع لعملاء على منصات زي مستقل وUpwork.
ما الوظائف المرتبطة بهذا الكورس؟ +
من الوظائف المرتبطة: مطور واجهات أمامية (من 9,520 إلى 45,997 جنيه شهريًا في مصر)، ومصمم مواقع (من 11,055 إلى 30,673 جنيه شهريًا في مصر)، ومبرمج (من 11,248 إلى 45,108 جنيه شهريًا في مصر). الأرقام تقريبية من بيانات Paylab لعام 2026.
ما لغة الشرح في الكورس؟ +
الشرح باللغة العربية.
✕
🎓 أكاديمية مصر 24
EG24
EG-24 ACADEMY
EG24
EG-24ACADEMY
— أكاديمية مصر 24 —
CERTIFICATE
OF COMPLETION
THISCERTIFICATE IS PROUDLY PRESENTED TO
اسمك هنا
FOR SUCCESSFULLY COMPLETING THE COURSE
اسم الكورس هنا
ISSUED ON
09 أكتوبر 2026
Ahmed Hamdy
AHMED HAMDY
FOUNDER
VERIFY CERTIFICATE
CERTIFICATE ID
PREVIEW
رقم تحقق الشهادة
EG24
ACADEMY
LEARN GROW
أقرب طريق لحلمك — سواء مشروعك الجديد أو وظيفة أحلامك — يبدأ من هنا، بكورسات مجانية 100% للأبد.