دورة أساسيات تقنيات الويب
أتقن تقنيات الويب الحديثة لبناء تطبيقات مستجيبة وقابلة للوصول باستخدام HTML وCSS وJavaScript وواجهات برمجة التطبيقات وإطار عمل واجهة أمامية. تعلم هيكلة المشاريع الواقعية والأدوات والاختبار لنشر واجهات احترافية موثوقة بسرعة أكبر.
ماذا ستتعلم:
توفر دورة تقنيات الويب مهارات عملية لبناء صفحات ويب حديثة وقابلة للوصول بسرعة. ستتعلم هيكلة مشاريع متعددة الملفات، كتابة HTML دلالي، وإنشاء تخطيطات مستجيبة باستخدام Flexbox وGrid وأساسيات نظام تصميم قوي. تعلم JavaScript الجانب العميل، واجهات برمجة التطبيقات، التحسين التدريجي، وإطار عمل خفيف، بالإضافة إلى الاختبار وإدارة الإصدارات وأدوات بناء بسيطة لنشر واجهات موثوقة وقابلة للصيانة.
كيف تدرس بشكل عملي دورة أساسيات تقنيات الويب
كيف تتدرب عملياً دورة أساسيات تقنيات الويب
لك إذا كنت شركة وتريد تدريب فريقك
في Elevify للشركات، يأتي الدورة مع تمارين وأمثلة من عملك نفسه وبالطريقة التي تحتاجها شركتك.
محتوى الدورة
7 فصول • 28 دروسمدة بين 4 و 360 ساعة (أنت تقرر)
الفصل 1إخفاءإخفاء التفاصيلعرض التفاصيلأسس صفحات الويب الحديثة
أسس صفحات الويب الحديثة
الدرس 1 • هيكلة مشروع متعدد الملفات: index.html، الأصول، CSS، JS، وقواعد المجلدات
يغطي هذا القسم تنظيم مشروع ويب متعدد الملفات بمجلدات واضحة لـ HTML و CSS و JavaScript والأصول. ستتعلم قواعد التسمية، والمسارات النسبية، واستراتيجيات تحافظ على قابلية التوسع وقابلية القراءة وسهولة الصيانة للمشاريع.
الدرس 2 • نماذج HTML وعناصر الإدخال: صناديق البحث، التسميات، سمات aria، ووصولية النموذج
يستعرض هذا القسم نماذج HTML، مع التركيز على أنواع الإدخال والتسميات وسمات ARIA التي تحسن الوصولية. ستتعلم بناء صناديق بحث ونماذج معقدة ودية للوحة المفاتيح، وواعية بقارئ الشاشة، وصحيحة دلالياً.
الدرس 3 • HTML الدلالي: المعالم، العناوين، القوائم، النماذج، الجداول، والدلالات الوصولية
يشرح هذا القسم عناصر HTML الدلالية مثل المعالم والعناوين والقوائم والنماذج والجداول. ستتعلم كيف تحسن الدلالات الوصولية وهيكل الوثيقة وتحسين محركات البحث، وكيف تعتمد تقنيات المساعدة على الترميز ذي المعنى.
الفصل 2إخفاءإخفاء التفاصيلعرض التفاصيلالتخطيطات المتجاوبة والتصميم
التخطيطات المتجاوبة والتصميم
الدرس 1 • أساسيات نظام التصميم: تباين الألوان، مقياس التباعد، ومكونات واجهة مستخدم وصولية
تعلم أساسيات نظام التصميم الذي يحافظ على اتساق الواجهات وقابليتها للوصول. حدد رموز الألوان، مقاييس التباعد، والطباعة، وطبق إرشادات التباين والمكونات لبناء عناصر واجهة مستخدم قابلة لإعادة الاستخدام وشاملة.
الدرس 2 • تقنيات الاستجابة: استعلامات الوسائط، الطباعة السائلة، ونقاط الانهيار
أتقن تقنيات التصميم المتجاوب باستخدام استعلامات الوسائط والوحدات السائلة ونقاط الانهيار. تعلم تصميم تخطيطات أولاً للهواتف، توسيع الطباعة والتباعد، واختبار السلوك عبر الأجهزة لتجارب متسقة وقابلة للاستخدام.
الدرس 3 • نموذج صندوق CSS، التموضع، والتدفق لاستقرار التخطيط
فهم نموذج صندوق CSS بما في ذلك المحتوى والحشو والحدود والهوامش، وكيف يؤثر box-sizing على التخطيط. تعلم التموضع والتراكم وتدفق الوثيقة لتجنب تحولات التخطيط والتداخل أو العناصر غير المستقرة.
الدرس 4 • CSS Grid للتخطيطات ثنائية الأبعاد وإعادة الترتيب المتجاوب
استكشف CSS Grid لبناء تخطيطات ثنائية الأبعاد تتكيف عبر أحجام الشاشات. تعلم المسارات والمناطق والمحاذاة، ثم طبقها على هياكل صفحات حقيقية مثل لوحات التحكم والمعارض وشبكات الاستجابة المعقدة.
الدرس 5 • أساسيات Flexbox وأنماط شائعة للقوائم وشرائط الأدوات
تعلم Flexbox من المفاهيم الأساسية إلى الأنماط العملية لشرائط التنقل والأدوات والبطاقات والقوائم. فهم المحاذاة والتوزيع والالتفاف وأدوات الفجوات لإنشاء تخطيطات أحادية البعد مرنة وقوية.
الفصل 3إخفاءإخفاء التفاصيلعرض التفاصيلأساسيات JavaScript من جانب العميل
أساسيات JavaScript من جانب العميل
الدرس 1 • العمل مع JSON: التحليل، التحقق من بيانات موظفين عينة، ومعالجة الأخطاء
تعلم استهلاك JSON بأمان في المتصفح عن طريق التحليل والتحقق وتحويل بيانات موظفين عينة. مارس كشف الحمولات الخاطئة، وعرض رسائل خطأ واضحة، وتصميم تدفقات بيانات عميل مرنة.
الدرس 2 • التحكم في DOM: اختيار العناصر، تحديث القوائم، القوالب، وإعادة التدفق الفعالة
مارس اختيار وتحديث عناصر DOM بكفاءة بـ JavaScript. تعلم عرض قوائم ديناميكية، واستخدام قوالب HTML، وتجميع كتابات DOM، وتقليل إرهاق التخطيط لتجارب مستخدم سلسة وأدائية.
الدرس 3 • إدارة الحالة للتطبيقات الصغيرة: الحالة المحلية، منطق التصفية، والعروض المشتقة
فهم كيفية نمذجة وتحديث الحالة المحلية في تطبيقات الويب الصغيرة. ستطبق منطق التصفية، وتشتق عرض محسوب من البيانات الخام، وتجنب واجهة غير متسقة، وتحافظ على تغييرات الحالة متوقعة وسهلة التصحيح.
الدرس 4 • معالجة الأحداث: أحداث الإدخال، تأخير إدخال البحث، ووصولية لوحة المفاتيح
استكشف كيفية الاستماع والرد على إجراءات المستخدم بأحداث JavaScript. طبق إدخالات بحث مؤجلة، وأدر التركيز واختصارات لوحة المفاتيح، وضمن سلوك وصولي ومتوقع عبر الأجهزة وأدوات المساعدة.
الفصل 4إخفاءإخفاء التفاصيلعرض التفاصيلإطارات الواجهة الأمامية والتعزيزات التدريجية
إطارات الواجهة الأمامية والتعزيزات التدريجية
الدرس 1 • التعزيز التدريجي: تقديم نسخة HTML وظيفية ثم تعزيزها بـ JS
تعلم شحن تجربة HTML وظيفية كاملة أولاً، ثم طبق تعزيزات JavaScript. تعامل مع الشبكات غير الموثوقة والمتصفحات القديمة والفشل بسلاسة مع تقديم تفاعلات غنية حديثة.
الدرس 2 • تنفيذ قائمة الموظفين كمكونات: القائمة، العنصر، عنصر التحكم في البحث/التصفية
نمذج واجهة قائمة موظفين كمكونات قابلة لإعادة الاستخدام، فصل منطق القائمة والعنصر والبحث. صمم واجهات واضحة، وأدر الحالة، وضمن بقاء المكونات قابلة للاختبار والوصولية وسهلة التوسع.
الدرس 3 • متى تستخدم JS العادي مقابل إطار: التوازنات للنماذج الأولية الصغيرة
حلل متى يكون JavaScript العادي كافياً ومتى تضيف إطار قيمة. قارن التعقيد والأداء ومنحنى التعلم والصيانة طويلة الأمد لاتخاذ خيارات مدروسة لحجوم مشاريع مختلفة.
الدرس 4 • مقدمة في مفاهيم React أو Vue الأساسية: المكونات، الخصائص، الحالة، ودورة الحياة (اختر واحداً)
استكشف مفاهيم React الأساسية بما في ذلك المكونات والخصائص والحالة ودورة الحياة. سترى كيف يهيكل React واجهات المستخدم ويدير تدفق البيانات ويحدث DOM بكفاءة باستخدام نهج إعلاني قائم على المكونات.
الفصل 5إخفاءإخفاء التفاصيلعرض التفاصيلتحميل البيانات، APIs، والتزييف
تحميل البيانات، APIs، والتزييف
الدرس 1 • جلب البيانات بـ Fetch API: الوعود، async/await، ومعالجة الأخطاء
استكشف Fetch API لطلب البيانات في المتصفحات الحديثة. تعلم استخدام الوعود و async/await، ومعالجة الأخطاء والمهل، وتحليل ردود JSON، وهيكلة مساعدات قابلة لإعادة الاستخدام لجلب بيانات نظيف وموثوق.
الدرس 2 • أساسيات CORS وكيفية التعامل مع الطلبات عبر الأصول أثناء التطوير
فهم سياسة نفس الأصل للمتصفح ولماذا يوجد CORS. تعلم كيفية عمل طلبات التحقق المسبق، وكيفية تكوين الرؤوس أثناء التطوير، وأنماط آمنة للوكلاء وخوادم التطوير عند استدعاء APIs الخارجية.
الدرس 3 • استراتيجيات البيانات الثابتة: تضمين ملفات JSON المحلية مقابل المصفوفات المبرمجة مسبقاً
قارن استراتيجيات تجميع البيانات الثابتة مع الواجهة الأمامية. تعلم متى تضمن ملفات JSON، ومتى تستخدم مصفوفات مبرمجة مسبقاً، وكيف يتعامل المجمّعات مع هذه الأصول، وكيف تحافظ على البيانات الثابتة قابلة للصيانة وسهلة التحديث.
الدرس 4 • إنشاء واستخدام API مزيف: json-server، Mock Service Worker (MSW)، أو نقاط نهاية محلية بسيطة
تعلم محاكاة الخلفيات للتطوير باستخدام أدوات مثل json-server و Mock Service Worker. فهم متى تستخدم نقاط نهاية محلية، وكيفية تحديد المسارات والردود، وكيف يدعم التزييف الاختبار والنمذجة السريعة.
الفصل 6إخفاءإخفاء التفاصيلعرض التفاصيلقابلية الاستخدام، الوصولية، والاختبار
قابلية الاستخدام، الوصولية، والاختبار
الدرس 1 • أنماط التعليقات: عرض حالات الفارغة، مؤشرات التحميل، ورسائل الخطأ
تعلم تصميم أنماط تعليقات واضحة توجه المستخدمين خلال حالات الفارغة ومراحل التحميل وظروف الخطأ. صمم رسائل وصور بصرية تقلل الالتباس، وتضع التوقعات، وتدعم التعافي السريع.
الدرس 2 • نماذج وcontrols وصولية: التسميات، aria-live لنتائج البحث، وإدارة التركيز
فهم كيفية بناء نماذج وcontrols تفاعلية وصولية باستخدام تسميات وأدوار ومعالجة تركيز صحيحة. استخدم aria-live لنتائج البحث الديناميكية وضمن استخدام لوحة المفاتيح وقارئ الشاشة السلس.
الدرس 3 • فحوصات آلية أساسية: Lighthouse، تدقيقات الوصولية، واختبارات وحدة بسيطة لمنطق التصفية
اكتشف كيفية تشغيل فحوصات آلية أساسية بـ Lighthouse وأدوات الوصولية واختبارات الوحدة البسيطة. فسر التقارير، وحدد أولويات الإصلاحات، وتحقق من المنطق الأساسي مثل سلوك التصفية في واجهتك.
الدرس 4 • الاختبار اليدوي المتجاوب: محاكاة الأجهزة، اختبار نافذة العرض، وقائمة تحقق للهواتف/سطح المكتب
استكشف تقنيات عملية للاختبار اليدوي المتجاوب باستخدام أدوات المتصفح والأجهزة الحقيقية. تحقق من التخطيطات والتفاعلات والمحتوى عبر نوافذ العرض، وطبق قوائم تحقق منظمة للهواتف وسطح المكتب.
الفصل 7إخفاءإخفاء التفاصيلعرض التفاصيلتنظيم المشروع، أدوات البناء، والتسليم
تنظيم المشروع، أدوات البناء، والتسليم
الدرس 1 • تنظيم ملفات المصدر وقواعد التسمية للوضوح والصيانة
يشرح هذا القسم كيفية تنظيم HTML و CSS و JavaScript والأصول في هيكل مجلد واضح. ستتعلم قواعد تسمية الملفات والمكونات والوحدات التي تحسن القراءة وإعادة الاستخدام والصيانة طويلة الأمد.
الدرس 2 • أساسيات التحكم في الإصدارات: الالتزامات، README، وتضمين تعليمات التشغيل
يقدم هذا القسم التحكم في الإصدارات بـ Git، مع التركيز على الالتزامات ذات المعنى والرسائل الواضحة والحفاظ على README مفيد. ستتعلم توثيق الإعداد والتشغيل وبناء التعليمات حتى يتمكن الآخرون من العمل مع كودك بموثوقية.
الدرس 3 • الحزمة والتسليم: إنشاء ملف توزيع واحد (افتح index.html) وصيغة التوثيق
يغطي هذا القسم إعداد تطبيق ويب للتوزيع بما في ذلك هيكلة مجلد عام، وتكوين نقطة دخول index.html، واختيار صيغ توثيق تساعد الآخرين على التثبيت والتشغيل وتوسيع مشروعك.
الدرس 4 • استخدام أدوات بناء بسيطة ومجمّعات (اختياري): سكريبتات npm، Parcel، أو Vite لتطبيق صغير
يقدم هذا القسم أدوات بناء بسيطة لتطبيقات الويب الصغيرة، مع التركيز على سكريبتات npm ومجمّعات ودية للمبتدئين مثل Parcel أو Vite. ستتعلم أتمتة المهام مثل خوادم التطوير والبناء والتحسينات الأساسية.
شهادتك الصالحة للتخرج
ماذا يقول طلابنا
آراء من درسوا معنا:
دروسكم مثالية. اشتريت الباقة السنوية، وأخيراً أصبح لدي الفرصة لمتابعة مواضيع متنوعة تهمني دون الحاجة لتغيير المنصة... أشكركم على كل ما تقومون به، لقد أوصيت بكم لأشخاص آخرين...
أحب كيف أن الدروس مباشرة ومركزة وكيف يمكنني تغيير الفصول وتخطي المحتوى الذي لا أحتاجه.
أحب المحتوى وطريقة العرض ونسخ الفيديوهات، مما يسرّع العملية!
المنصة سريعة وبسيطة الاستخدام. تنوع المحتوى والفيديوهات التكميلية تساعد كثيراً في التعلم.
أهم الدورات
الأسئلة الشائعة
من هي Elevify؟ كيف تعمل؟
هل الدورات تتضمن شهادات؟
هل الدورات مجانية؟
ما هو عبء الدورة؟
كيف تبدو الدورات؟
كيف تعمل الدورات؟
ما هي مدة الدورات؟
ما هو سعر أو تكلفة الدورات؟
ما هو التعليم عن بعد أو الدورة عبر الإنترنت وكيف تعمل؟
دورة PDF