دورة CSS: تعلّم تنسيق المواقع خطوة بخطوة
تعلم بناء المواقع من الصفر باستخدام CSS3 مع مشاريع عملية وتصميم متجاوب على كل الشاشات.
📚 6 درسًا 🧩 56 موضوعًا تعليميًا ⏱ PT5H 🎯 المستوى: مبتدئ
ابدأ التعلّم الآن ↓ ✓ الدورة مجانية بالكامل بعد أن تعلّمت بناء هيكل الصفحات بـ HTML، تأتي CSS لتحوّل هذا الهيكل إلى تصميم جميل ومتجاوب يعمل على الجوال والكمبيوتر باحترافية. وبصفتي مطوّر ويب ومعلّمًا، أرى أن CSS هي ما يفرّق بين موقع يبدو هاويًا وموقع يبدو احترافيًا — وهذه الدورة تأخذك من الصفر إلى احتراف تنسيق المواقع وتصميمها.
ما يميّز هذه الدورة عن غيرها هو الأدوات التفاعلية المباشرة: في كل درس تجرّب الخصائص بنفسك وترى النتيجة فورًا، بدل الحفظ النظري. تتعلّم Flexbox وGrid والتصميم المتجاوب بطريقة عملية تثبّت المعلومة، صمّمتها من واقع ما رأيته ينفع طلابي فعلًا.
🎓 ماذا ستتعلم؟
- الفرق بين id وclass ومتى تستخدم كلًا منهما
- التحكم الكامل في الألوان والخطوط والمسافات (Box Model)
- ترتيب العناصر باحتراف باستخدام Flexbox
- بناء تخطيطات معقدة بسهولة عبر CSS Grid
- تصميم متجاوب لكل الشاشات (Mobile-First وMedia Queries)
- إضافة الحركات والانتقالات (Transitions وAnimations)
📋 متطلبات الدورة
- معرفة أساسيات HTML ( يُفضّل إكمال دورة HTML أولًا)
- جهاز كمبيوتر + محرر أكواد مثل VS Code
- متصفح حديث (Chrome أو Firefox)
- رغبة في التطبيق العملي أكثر من الحفظ
🗺️ خريطة الدورة
منهج متسلسل مبني بعناية — كل درس يمهّد لما بعده، ابدأ من الأول والتزم بالترتيب
1 ← 2 ← 3 ← 4 ← 5 ← 6 ←
أساسيات CSS: أول تصميم احترافي بـ Class و ID
تعرّف على مفهوم CSS وأهميتها في تصميم المواقع، والفرق بين Class و ID ومتى تستخدم كلًا منهما، مع تطبيق عملي تبني فيه أول تصميم منسق بنفسك.
تنسيق النصوص والألوان في CSS وفهم Box Model
تعلّم تنسيق النصوص والألوان والخطوط في CSS، وفهم نموذج الصندوق Box Model والتحكم في المسافات الداخلية والخارجية Margin و Padding بأمثلة عملية.
إنشاء تخطيطات احترافية باستخدام Flexbox
شرح Flexbox في CSS خطوة بخطوة: display flex و justify-content و align-items وبقية الخصائص، لتنظيم العناصر وبناء تخطيطات مرنة بسهولة.
بناء تخطيطات متقدمة ومتجاوبة باستخدام CSS Grid
تعلّم CSS Grid لبناء تخطيطات متقدمة ومتجاوبة: تقسيم الصفحة إلى صفوف وأعمدة والتحكم بمواضع العناصر لإنشاء تصميمات حديثة يستخدمها المطورون.
التصميم المتجاوب Responsive Design و Media Queries
تعلّم التصميم المتجاوب Responsive Design باستخدام Media Queries وأسلوب Mobile-First ليعمل موقعك بشكل ممتاز على الجوال والتابلت والكمبيوتر.
الحركات في CSS: Transitions و Animations
أضف الحياة لموقعك باستخدام Transitions و Animations في CSS: تأثيرات حركة سلسة ولمسات احترافية تحسّن تجربة المستخدم وتجعل واجهتك أكثر جاذبية.