سير للمحتوى
حمّل التطبيق

السميستر 3 · IA · MI · CPGE · ENSA · EST · FSR · FST

تطوير الويب

أنشئ صفحات الويب الأولى: بنية HTML، تنسيق CSS، Flexbox وGrid، ثم موقع كامل تُنجزه من البداية إلى النهاية.

على هاد الكورس

هذا الكورس هو نقطة انطلاقك في تطوير الويب. تتعلّم كيف تبني صفحة بلغة HTML، وكيف تنسّقها بـ CSS، ثم تجمع كل ذلك في مشروع حقيقي: موقعك الأول. جزء HTML: • المتطلبات، المحرر وبنية الصفحة • العناصر، الخصائص وتنسيق النص • الروابط، الصور، الصوت والفيديو • الجداول، القوائم والنماذج • العناصر الدلالية وعنصر head • تمارين تطبيقية وتمرين ختامي جزء CSS: • المحدِّدات، الألوان، الحدود والخلفيات • نموذج الصندوق: padding وmargin وoutline • inline وblock وinline-block وvisibility • خصائص النص وحالات العناصر (hover…) • التموضع، z-index وfloat • التخطيط الحديث باستخدام Flexbox وCSS Grid المشروع النهائي: موقع ويب أول يُبنى خطوة بخطوة في 3 فيديوهات. 27 فيديو · تمارين · مشروع كامل

قبل ما تبدا

لا توجد متطلبات مسبقة: يبدأ هذا الكورس من الصفر. جهّز: • حاسوبًا مع متصفح حديث • Visual Studio Code (مجاني) وإضافة Live Server نصيحة: أنشئ مجلدًا خاصًا بالكورس وأعد كتابة كل مثال أثناء المتابعة، فهذه أفضل طريقة لحفظ الوسوم والخصائص.

شنو غادي تتعلم

7 فصول · 27 درس · 7 س 11 د

  1. 01البداية

    1. مقدمة في تطوير الويبفابور5 د
    2. متطلبات تطوير الويبفابور2 د
    3. مقدمة في HTMLفابور13 د

  2. 02محتوى صفحة HTML

    1. العناصر والخصائصمسدود13 د
    2. تنسيق النصمسدود10 د
    3. الروابط والصورمسدود18 د
    4. التمرين 1: HTMLمسدود3 د

  3. 03الوسائط والجداول والقوائم

    1. الوسائط: الصوت والفيديومسدود16 د
    2. الجداولمسدود13 د
    3. القوائممسدود7 د

  4. 04النماذج وبنية الصفحة

    1. النماذجمسدود13 د
    2. حقول النماذجمسدود11 د
    3. العناصر الدلاليةمسدود5 د
    4. العنصر headمسدود6 د
    5. التمرين الختامي في HTMLمسدود5 د

  5. 05أساسيات CSS

    1. مقدمة في CSSمسدود16 د
    2. الألوان والحدود والخلفياتمسدود17 د
    3. الخصائص padding وmargin وoutlineمسدود15 د
    4. أنماط العرض inline وblock وinline-block والخاصية visibilityمسدود12 د
    5. خصائص النص وحالات العناصرمسدود17 د

  6. 06التخطيط باستخدام CSS

    1. التموضعمسدود21 د
    2. الخاصيتان z-index وfloatمسدود12 د
    3. التخطيط باستخدام Flexboxمسدود37 د
    4. التخطيط باستخدام CSS Gridمسدود47 د

  7. 07مشروع: موقعك الأول

    1. موقعك الأول، الجزء 1مسدود30 د
    2. موقعك الأول، الجزء 2مسدود30 د
    3. موقعك الأول، الجزء الأخيرمسدود38 د