Monthly Subscription Starting at AED 99 + VAT

HTML وCSS بالتفصيل

About

في هذه الدورة التدريبية، ستستخدم أدوات تطوير البرامج مثل HTML لبناء صفحات الويب الجذابة التي تعمل بشكل جيد—وستقوم باستخدام البيانات الدلالية المنظمة للتحكم في كيفية ظهور المواقع الإلكترونية للمستخدم النهائي. ستقوم بعد ذلك بالتعمق بشكل أكبر في CSS من خلال تطبيق أسلوب محدد بشكل متزايد على عناصر مختلفة. وستتعلم كيفية استخدام نظام شبكة Bootstrap لتكوين التخطيطات والتعامل مع المكونات والسمات. وأخيرًا، ستقوم باستكشاف تصحيح الأخطاء ومعرفة كيف يمكن استخدامه لإقصاء أخطاء الواجهة الأمامية.. بنهاية هذه الدورة التدريبية؛ ستكون قادرًا على: • إنشاء نموذج بسيط مع تخطيط سريع الاستجابة باستخدام HTML5 وCSS • إنشاء تخطيط سريع الاستجابة باستخدام CSS • إنشاء واجهة مستخدم باستخدام Bootstrap • تنفيذ أدوات تصحيح الأخطاء هذا عبارة عن دورة تدريبية للمبتدئين للمتعلمين الذين قد يرغبون في إعداد أنفسهم للعمل في تطوير الواجهة الأمامية. ولتحقيق النجاح في هذه الدورة التدريبية، لست بحاجة إلى خبرة سابقة في مجال التطوير، بل تكفيك المهارات الأساسية للتنقل عبر الإنترنت والحرص على البدء بتعلم ترميز البيانات.

Modules

مقدمة حول الدورة التدريبية

    • 4 Videos
    • 3 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • ما الذي تأمل تعلمه؟

4 Videos

  • مقدمة للبرنامج
  • مقدمة إلى HTML وCSS بالتفصيل
  • كيف يتم استخدام HTML وCSS في العالم الحقيقي؟
  • ملخص: ما تعرفه عن HTML وCSS

3 Readings

  • المنهج الدراسي للدورة التدريبية
  • كيفية النجاح في هذه الدورة التدريبية
  • العمل مع المختبرات في هذه الدورة التدريبية

العلامات الدلالية واللفظية

    • 6 Videos
    • 5 Readings
    • 4 Assignment
Show info about module content

4 Assignment

  • التحقق من المعرفة: الممارسة باستخدام العلامات الدلالية
  • التحقق من المعرفة: البيانات الوصفية
  • التحقق من المعرفة: بروتوكول الرسم البياني المفتوح
  • التحقق من المعرفة: العلامات الدلالية والوصفية

6 Videos

  • العلامات الدلالية ولماذا نحتاجها
  • العلامات الدلالية عمليًا
  • البيانات الوصفية
  • تخطيط العظام المكشوفة
  • تجربة المستخدم مع العلامات الوصفية
  • إعداد بطاقة وسائل التواصل الاجتماعي

5 Readings

  • صفحة التعليمات HTML الدلالية
  • ورقة تعليمات البيانات الوصفية
  • تصميم التخطيط
  • بطاقات وسائل التواصل الاجتماعي
  • موارد إضافية

نماذج ومدخلات المستخدم

    • 7 Videos
    • 8 Readings
    • 2 Lab
    • 5 Assignment
Show info about module content

5 Assignment

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

2 Labs

  • إنشاء نموذج واختباره
  • تكوين نموذج معقد

7 Videos

  • النماذج والتحقق
  • إنشاء نموذج
  • الاستفادة القصوى من عملية التحقق من جانب العميل
  • أزرار الخيار
  • استخدام عناصر النموذج التفاعلي
  • تقديم النموذج
  • اختلافات المتصفح

8 Readings

  • أنواع المدخلات
  • كود Visual Studio على Coursera
  • إنشاء نموذج واختباره (حل)
  • صفحة التعليمات: عناصر النموذج التفاعلي
  • تقديم
  • قاموس المصطلحات: عناصر نموذج HTML
  • تكوين نموذج معقد (حل)
  • موارد إضافية

عناصر الوسائط

    • 6 Videos
    • 4 Readings
    • 1 Lab
    • 3 Assignment
Show info about module content

3 Assignment

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

1 Labs

  • تقييم الوسائط

6 Videos

  • الفيديو والصوت
  • مشغلات مضمنة
  • إطارات iFrames
  • iFrame كصورة
  • عنصر لوحة الرسم
  • ملخص الوحدة: التعمق في HTML

4 Readings

  • تقييم الوسائط (حل)
  • الصور
  • صفحة تعليمات iFrame Sandbox
  • موارد إضافية

إنشاء التخطيطات

    • 6 Videos
    • 6 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • مراجعة ذاتية: إنشاء تخطيط شبكة
  • التحقق من المعرفة: إنشاء التخطيطات

1 Labs

  • إنشاء تخطيط شبكة

6 Videos

  • تخطيط ويب CSS
  • مربع flexbox الأساسي
  • مخططات Flex
  • شبكات CSS
  • عرض الشبكة
  • دراسة حالة: كيف يقوم Meta بتكوين عملية بناء سريعة الاستجابة

6 Readings

  • فهم flexbox
  • وحدات قياس CSS
  • صفحة التعليمات للشبكات ومربعات flexbox
  • مساحة قالب الشبكة
  • إنشاء تخطيط شبكة (حل)
  • موارد إضافية

محددات CSS

    • 4 Videos
    • 5 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • المراجعة الذاتية: CSS المستهدف
  • التحقق من المعرفة: محددات CSS

1 Labs

  • CSS المستهدف

4 Videos

  • المحددات واسعة الاستخدام
  • محددات الدمج
  • فئات Pseudo-classes
  • الاستخدام العملي لفئات pseudo

5 Readings

  • كل المحددات والتحديد الخاص بها
  • CSS المستهدف (حل)
  • عناصر Pseudo-elements
  • صفحة تعليمات CSS Pseudo
  • موارد إضافية

تأثيرات CSS

    • 5 Videos
    • 6 Readings
    • 1 Lab
    • 2 Assignment
Show info about module content

2 Assignment

  • مراجعة ذاتية: عناصر التحويل والانتقال
  • التحقق من المعرفة: تأثيرات CSS

1 Labs

  • عناصر التحويل والانتقال

5 Videos

  • ما هو التأثير
  • تأثيرات النص
  • عمليات تحويل CSS والانتقالات
  • الرسوم المتحركة في CSS
  • أمثلة للرسوم المتحركة

6 Readings

  • صفحة تعليمات تأثيرات النص
  • عناصر التحويل والانتقال (الحل)
  • الإطارات المفتاحية في CSS
  • صفحة التعليمات الخاصة بالرسوم المتحركة والتأثيرات
  • المعالجات المسبقة: sass وscss وStylus
  • موارد إضافية

تصحيح الأخطاء

    • 7 Videos
    • 3 Readings
    • 1 Discussion
    • 2 Assignment
Show info about module content

2 Assignment

  • التحقق من المعرفة: تصحيح الأخطاء
  • اختبار الوحدة: CSS التفاعلي

1 Discussions

  • ما بعض أخطاء CSS التي واجهت صعوبة معها؟

7 Videos

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

3 Readings

  • تثبيت أداة Linter خاصة بطرف آخر في كود VS
  • تصحيح أخطاء الواجهة الأمامية
  • موارد إضافية

التقييم المقيّم بالدرجات

    • 5 Videos
    • 4 Readings
    • 1 Discussion
    • 1 PeerReview
    • 1 Lab
    • 1 Assignment
Show info about module content

1 Assignment

  • التحقق من الجاهزية: هل أكملت الإعداد المبدئي؟

1 Peer Review

  • إرسال مشروع الحافظة

1 Discussions

  • مشاركة محفظتك المكتملة

1 Labs

  • بيئة الاختبار المعزولة للمشروع

5 Videos

  • ملخص الدورة التدريبية
  • اختيار الموضوع ورسم التخطيط
  • تحديد موضع العناصر، إنشاء عناصر نائبة
  • تخطيط تجربة المستخدم
  • مثال: جيد جدًا حتى الآن

4 Readings

  • نبذة عن مشروع الحافظة
  • اختيار الموضوع
  • إعداد بيئة التطوير المحلية الخاصة بك
  • إنشاء السمات

استعراض ختامي للدورة التدريبية

    • 1 Videos
    • 1 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • ما الذي وجدته أكثر إثارة للاهتمام في هذه الدورة التدريبية؟

1 Videos

  • تهانينا، قمت باستكمال HTMLS وCSS بالتفصيل!

1 Readings

  • الخطوات المقبلة

Auto Summary

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

Taught by Meta Staff
Instructor

Taught by Meta Staff