دورة تصميم مواقع ويب متجاوبة

الدرس 1 • عناصر HTML5 الدلالية: header، nav، main، section، article، footer واستخداماتها المناسبة

استكشف العناصر الهيكلية الأساسية لـ HTML5 وكيفية استخدام header وnav وmain وsection وarticle وaside وfooter لإنشاء تخطيطات واضحة ومنطقية تتكيف جيداً مع التصميم المتجاوب وتدعم أدوات الوصول.

الدرس 2 • هيكلة محتوى صفحة واحدة: ترتيب منطقي لـ hero، about، plans، amenities، contact

تعلم التخطيط وكتابة كود تخطيط صفحة واحدة بترتيب قراءة واضح، يغطي hero وabout وplans وamenities وcontact، والتي تبقى متجاوبة وقابلة للوصول وسهلة المسح على سطح المكتب والجوال.

الدرس 3 • أدوار معالم الوصول وأساسيات ARIA لمواقع صفحة واحدة

اكتشف كيف تحدد أدوار المعالم وسمات ARIA الأساسية مناطق الصفحة، وتحسن التنقل بالكيبورد، وتدعم تقنيات المساعدة في تخطيطات صفحة واحدة دون إساءة استخدام ARIA أو تكرار الدلالات.

الدرس 4 • إنشاء نماذج بمدخلات دلالية: تسميات، placeholders، مطلوب، وسمات التحقق

تعلم بناء نماذج قابلة للوصول ومتوافقة مع الجوال باستخدام مدخلات HTML5 الدلالية والتسميات وسمات التحقق التي تعمل جيداً مع قارئات الشاشة والأجهزة اللمسية والتحققات الجانب العميل الأساسية دون الاعتماد فقط على JavaScript.

الدرس 1 • دمج Grid وFlexbox: متى تستخدم كل منهما لـ hero، cards، وتخطيطات التذييل

تعلم دمج Grid وFlexbox بفعالية في التخطيطات الحقيقية. قرر متى يكون كل أداة أفضل لـ heroes ومجموعات البطاقات والتذييلات، وهيكلة المكونات لتبقى قابلة للصيانة وقابلة للوصول وسهلة التوسعة مع الوقت.

الدرس 2 • أنماط عملية: تخطيط جوال مكدس، لوحي عمودين، سطح مكتب متعدد أعمدة

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

الدرس 3 • غوص عميق في CSS Flexbox: المحور، المحاذاة، الالتفاف، وأنماط متجاوبة شائعة

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

الدرس 4 • غوص عميق في CSS Grid: grid-template، المناطق، مسارات ضمنية/صريحة وإعادة ترتيب متجاوب

دراسة CSS Grid بعمق، من تحديد المسارات إلى استخدام المناطق المسماة. تعلم الشبكات الصريحة والضمنية، الوضع التلقائي، وتقنيات إعادة ترتيب المحتوى متجاوباً دون تغيير هيكل HTML الأساسي.

الدرس 1 • تقنيات تبديل CSS فقط (حيلة checkbox) والتحسين التدريجي بـ JavaScript قليل

تعلم كيف تعمل أنماط تبديل CSS فقط باستخدام حيلة checkbox، ثم انظر كيف تحسنها تدريجياً بـ JavaScript قليل لتحسين الوصول والتحكم في الحالة والمرونة عندما تكون دعم CSS أو البرمجة محدوداً.

الدرس 2 • وصول الكيبورد وإدارة التركيز لقوائم الجوال

ركز على وصول الكيبورد لقوائم الجوال والمتجاوبة. ستتعلم إدارة ترتيب التركيز، حبس التركيز في القوائم المفتوحة، دعم Escape للإغلاق، وضمان وصول جميع العناصر التفاعلية ووضوحها عبر الكيبورد.

الدرس 3 • التفاعلات الدقيقة: hover، focus، active states وأهداف لمس ودية

غوص في التفاعلات الدقيقة التي تجعل التنقل يبدو متجاوباً وبديهياً. تعلم تصميم حالات hover وfocus وactive التي تعمل للفأرة والكيبورد واللمس، مع أحجام أهداف كافية، تباين، وحركة تدعم لا تشتت.

الدرس 4 • تصميم التنقل المتجاوب: nav أفقي، قائمة مكدسة، وأنماط hamburger قابلة للوصول

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

الدرس 1 • الطباعة المتجاوبة: نوع سائل، clamp()، وحدات نسبية (rem، vw)، واعتبارات طول السطر

يشرح هذا القسم كيفية صياغة طباعة متجاوبة باستخدام نوع سائل، clamp()، ووحدات نسبية. ستتعلم توازن القراءة والتسلسل وطول السطر عبر النوافذ مع الحفاظ على نص قابل للوصول وقابل للتوسع.

الدرس 2 • الأيقونات والصور: تقنيات صور متجاوبة (srcset، sizes)، استخدام SVG، وصور زخرفية مقابل معلوماتية

يستكشف هذا القسم الأيقونات والصور المتجاوبة، بما في ذلك srcset وsizes وSVG. ستتعلم متى تكون الصور زخرفية أو معلوماتية، كيفية التعامل مع نص alt، وتحسين الأصول للأداء والوضوح.

الدرس 3 • نماذج قابلة للوصول ومتجاوبة: أحجام المدخلات، حالات الخطأ، التسميات، وأنواع لوحة مفاتيح الجوال

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

الدرس 4 • تصميم الأزرار: تباين، إرشادات الحجم لأهداف اللمس، ولغة بصرية متسقة

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

الدرس 1 • أنظمة المسافات: مقياس معياري، هوامش/حشو متسقة واستخدام خصائص CSS المخصصة

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

الدرس 2 • ربط الخطوط وأداء خطوط الويب: اختيار 1–2 Google Fonts وتحسين font-display

استكشف كيفية اختيار أزواج خطوط مكملة، تحديد المتغيرات، وتحميل Google Fonts بكفاءة. ستضبط font-display والاحتياطيات واستراتيجيات لتوازن الجماليات والأداء والقراءة على جميع الأجهزة.

الدرس 3 • رموز التصميم واستخدام متغيرات CSS للألوان والمسافات ونقاط الانهيار

افهم رموز التصميم كمصدر وحيد للحقيقة في القرارات البصرية. ستحدد رموزاً للون والمسافات ونقاط الانهيار، ثم تنفذها بمتغيرات CSS لتبقى واجهات UI المتجاوبة متسقة وسهلة التحديث.

الدرس 4 • متطلبات التباين واختبارها (نسب تباين WCAG) للنص وعناصر الواجهة

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

الدرس 1 • نهج التحسين التدريجي: HTML/CSS أساسي ثم إضافة JavaScript للتحسينات

افهم التحسين التدريجي كاستراتيجية لـ UX قوي. ابدأ بـ HTML دلالي وCSS قوي، ثم أضف تحسينات JavaScript تعزز التفاعلات دون كسر المحتوى الأساسي أو الوصول.

الدرس 2 • أساسيات الأداء: تقليل موارد حجب العرض، تحسين CSS، وتقليل إزاحات التخطيط

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

الدرس 3 • طرق اختبار متجاوب: محاكاة الأجهزة، اختبار أجهزة حقيقية، وأدوات فحص نوافذ عرض آلية

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

الدرس 4 • قائمة تحقق اختبار المتصفحات: Chrome، Firefox، Edge واختبار نوافذ عرض الأجهزة الشائعة

ابنِ روتين اختبار متصفحات متكرراً. ستتحقق من السلوك في Chrome وFirefox وEdge ومتصفحات الجوال، مع التركيز على التخطيط والميزات والأداء عبر نوافذ عرض أجهزة وأنظمة تشغيل شائعة.

الدرس 1 • قائمة تحقق التسليم النهائي: أقسام مطلوبة، تحقق دلالي، التحقق من الوصول والاستجابة

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

الدرس 2 • تقديم تعليقات داخلية واضحة في HTML/CSS/JS للصيانة

استكشف كيفية كتابة تعليقات داخلية موجزة ذات معنى في HTML وCSS وJavaScript توضح الهيكل، منطق التخطيط، والسلوك المتجاوب دون فوضى في قاعدة الكود، مما يحسن الصيانة للمساهمين والفرق المستقبلية.

الدرس 3 • كتابة مذكرة الاستراتيجية المتجاوبة: توثيق نقاط الانهيار، خيارات التخطيط، وسلوكيات الاحتياطي

تعلم كتابة مذكرة استراتيجية متجاوبة موجزة تسجل نقاط الانهيار المختارة، أنماط التخطيط، سلوكيات المكونات، والاحتياطيات، مما يعطي المصممين والمطورين وQA مرجعاً مشتركاً للتحديثات المستقبلية وحل المشكلات.

الدرس 4 • تنظيم ملفات المشروع: هيكل HTML، CSS، JS وقواعد التسمية

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