🧪 التدريبات
كل تمرين «جرّب بنفسك» في مكان واحد: اقرأ المطلوب، ثم اكتب الحل وشغّله داخل صفحة الدرس.
الوحدة 1: تصميم المخطط الهيكلي
حلّل واجهة موقع تعرفهسهل · الدرس 1: ما الواجهة الأمامية؟ وتجربة المستخدم
اختر موقعًا أو تطبيقًا تستخدمه كثيرًا (مثل موقع جامعة أو متجر أو تطبيق حكومي)، وحلّل واجهته بمبادئ تجربة المستخدم. اكتب تحليلك في ورقة أو مستند، وسلّمه لمعلمك.←دليل هوية لمقهىمتوسط · الدرس 2: مبادئ التصميم: الألوان والخطوط والتباين
صمّم دليل هوية لمقهى خيالي اسمه «بُنّ». يكفي ورقة واحدة (على الورق أو في Canva أو Figma) فيها قرارات الهوية كلها.←شاشة جوال في Figmaسهل · الدرس 3: أدوات التصميم: Figma و Canva
صمّم في Figma شاشة جوال واحدة لصفحة مقهى «بُنّ» الرئيسية، مستخدمًا دليل الهوية من الدرس السابق. أرسل رابط المشاركة لمعلمك.←
اختر موقعًا أو تطبيقًا تستخدمه كثيرًا (مثل موقع جامعة أو متجر أو تطبيق حكومي)، وحلّل واجهته بمبادئ تجربة المستخدم. اكتب تحليلك في ورقة أو مستند، وسلّمه لمعلمك.←دليل هوية لمقهىمتوسط · الدرس 2: مبادئ التصميم: الألوان والخطوط والتباين
صمّم دليل هوية لمقهى خيالي اسمه «بُنّ». يكفي ورقة واحدة (على الورق أو في Canva أو Figma) فيها قرارات الهوية كلها.←شاشة جوال في Figmaسهل · الدرس 3: أدوات التصميم: Figma و Canva
صمّم في Figma شاشة جوال واحدة لصفحة مقهى «بُنّ» الرئيسية، مستخدمًا دليل الهوية من الدرس السابق. أرسل رابط المشاركة لمعلمك.←
الوحدة 2: رسم المخطط الهيكلي
مخطط صفحة تسجيل الدخولسهل · الدرس 4: ما المخطط الهيكلي؟
ارسم على ورقة مخططًا هيكليًّا منخفض الدقة لصفحة تسجيل الدخول في تطبيق جوال. صوّر الورقة وسلّمها لمعلمك.←نموذج حجز موعدمتوسط · الدرس 5: عناصر الواجهة: الأزرار والقوائم والحقول
ارسم مخططًا هيكليًّا (على الورق أو في Figma) لنموذج حجز موعد في عيادة أسنان، واختر العنصر المناسب لكل معلومة.←مخطط الصفحة الرئيسية لمركز تدريبمتوسط · الدرس 6: رسم مخطط صفحة كاملة
ارسم في Figma (أو على ورق مربعات) مخططًا هيكليًّا للصفحة الرئيسية لمركز تدريب يقدّم دورات في البرمجة: نسخة للجوال ونسخة للحاسوب. هذا المخطط هو بداية مشروعك في المقرر.←
ارسم على ورقة مخططًا هيكليًّا منخفض الدقة لصفحة تسجيل الدخول في تطبيق جوال. صوّر الورقة وسلّمها لمعلمك.←نموذج حجز موعدمتوسط · الدرس 5: عناصر الواجهة: الأزرار والقوائم والحقول
ارسم مخططًا هيكليًّا (على الورق أو في Figma) لنموذج حجز موعد في عيادة أسنان، واختر العنصر المناسب لكل معلومة.←مخطط الصفحة الرئيسية لمركز تدريبمتوسط · الدرس 6: رسم مخطط صفحة كاملة
ارسم في Figma (أو على ورق مربعات) مخططًا هيكليًّا للصفحة الرئيسية لمركز تدريب يقدّم دورات في البرمجة: نسخة للجوال ونسخة للحاسوب. هذا المخطط هو بداية مشروعك في المقرر.←
الوحدة 3: التعرف على HTML
بطاقة تعريفسهل · الدرس 7: أول صفحة HTML وهيكلها
اكتب صفحة كاملة تعرّف بنفسك: عنوان كبير فيه اسمك، وفقرتان: الأولى عن تخصصك، والثانية عن هوايتك. واجعل عنوان التبويب «بطاقتي».←خبر في صحيفة المدرسةسهل · الدرس 8: العناوين والفقرات وتنسيق النص
اكتب صفحة خبر عن «يوم المهنة» في الكلية: عنوان رئيسي، وقسمان بعنوانين فرعيين، وفقرات، مع تنسيق الكلمات المهمة.←صفحة مقهى «بُنّ»متوسط · الدرس 9: الروابط والصور
اكتب الصفحة الرئيسية لمقهى «بُنّ»: الشعار رابطًا إلى الرئيسية، وروابط تنقل، وصورة لمنتج، ورابط تواصل بالبريد. الصور جاهزة في مجلد
اكتب صفحة كاملة تعرّف بنفسك: عنوان كبير فيه اسمك، وفقرتان: الأولى عن تخصصك، والثانية عن هوايتك. واجعل عنوان التبويب «بطاقتي».←خبر في صحيفة المدرسةسهل · الدرس 8: العناوين والفقرات وتنسيق النص
اكتب صفحة خبر عن «يوم المهنة» في الكلية: عنوان رئيسي، وقسمان بعنوانين فرعيين، وفقرات، مع تنسيق الكلمات المهمة.←صفحة مقهى «بُنّ»متوسط · الدرس 9: الروابط والصور
اكتب الصفحة الرئيسية لمقهى «بُنّ»: الشعار رابطًا إلى الرئيسية، وروابط تنقل، وصورة لمنتج، ورابط تواصل بالبريد. الصور جاهزة في مجلد
images: logo.svg و coffee.svg و dessert.svg.←الوحدة 4: بناء عناصر الواجهة الأمامية
جدول الحصصمتوسط · الدرس 10: القوائم والجداول
اكتب صفحة فيها جدول حصصك ليومين، ثم قائمة بأدوات تحتاجها.←هيكل موقع مركز التدريبمتوسط · الدرس 11: العناصر الدلالية في HTML5
حوّل مخطط مركز التدريب الذي رسمته في الدرس 6 إلى هيكل HTML بالعناصر الدلالية (بلا تنسيق).←نموذج التسجيل في دورةمتوسط · الدرس 12: النماذج وحقول الإدخال
اكتب نموذج تسجيل في دورة بمركز التدريب. جرّب الإرسال في المعاينة لترى البيانات التي تصل.←صفحة درس مصوّرسهل · الدرس 13: الصوت والفيديو
اكتب صفحة لدرس مصوّر في مركز التدريب: عنوان، وفيديو الدرس، وتسجيل صوتي لملخصه. الملفات جاهزة في مجلد
اكتب صفحة فيها جدول حصصك ليومين، ثم قائمة بأدوات تحتاجها.←هيكل موقع مركز التدريبمتوسط · الدرس 11: العناصر الدلالية في HTML5
حوّل مخطط مركز التدريب الذي رسمته في الدرس 6 إلى هيكل HTML بالعناصر الدلالية (بلا تنسيق).←نموذج التسجيل في دورةمتوسط · الدرس 12: النماذج وحقول الإدخال
اكتب نموذج تسجيل في دورة بمركز التدريب. جرّب الإرسال في المعاينة لترى البيانات التي تصل.←صفحة درس مصوّرسهل · الدرس 13: الصوت والفيديو
اكتب صفحة لدرس مصوّر في مركز التدريب: عنوان، وفيديو الدرس، وتسجيل صوتي لملخصه. الملفات جاهزة في مجلد
media: intro.mp4 و poster.jpg و bell.mp3.←الوحدة 5: التعرف على CSS
أول ملف تنسيقسهل · الدرس 14: ما CSS؟ وطرق ربطها بالصفحة
نسّق صفحة مقهى «بُنّ» بملف style.css. الصفحة جاهزة ومربوطة بالملف؛ اكتب القواعد في تبويب style.css.←قائمة الأسعارمتوسط · الدرس 15: المحددات
نسّق قائمة أسعار المقهى في تبويب style.css باستخدام المحددات المناسبة. لا تعدّل index.html.←بطاقة دورة جذابةمتوسط · الدرس 16: ميزات CSS3 وتوافق المتصفحات
نسّق بطاقة دورة في مركز التدريب بميزات CSS3 (في تبويب style.css).←
نسّق صفحة مقهى «بُنّ» بملف style.css. الصفحة جاهزة ومربوطة بالملف؛ اكتب القواعد في تبويب style.css.←قائمة الأسعارمتوسط · الدرس 15: المحددات
نسّق قائمة أسعار المقهى في تبويب style.css باستخدام المحددات المناسبة. لا تعدّل index.html.←بطاقة دورة جذابةمتوسط · الدرس 16: ميزات CSS3 وتوافق المتصفحات
نسّق بطاقة دورة في مركز التدريب بميزات CSS3 (في تبويب style.css).←
الوحدة 6: تنسيق صفحات الويب باستخدام CSS
واجهة رئيسية بصورةمتوسط · الدرس 17: الألوان والخلفيات
نسّق القسم الرئيسي hero في صفحة المقهى: صورة خلفية مع طبقة تعتيم ونص أبيض، ثم صندوق تنبيه.←مقال مقروءمتوسط · الدرس 18: الخطوط والنصوص والروابط
نسّق مقالًا عن القهوة ليكون مريحًا للقراءة، ونسّق روابطه.←بطاقة في وسط الصفحةمتوسط · الدرس 19: نموذج الصندوق
نسّق بطاقة تسجيل في وسط الصفحة بنموذج الصندوق.←ترويسة وبطاقات الدوراتمتقدم · الدرس 20: ترتيب العناصر بـ Flexbox
رتّب صفحة مركز التدريب بـ Flexbox: ترويسة فيها الشعار والقائمة على الطرفين، وثلاث بطاقات دورات في صف.←صفحة الدورات المتجاوبةمتقدم · الدرس 21: التصميم المتجاوب
اجعل صفحة الدورات متجاوبة: عمود واحد في الجوال، وصف من ثلاث بطاقات من 700 بكسل فأكثر. جرّب بزري 📱 و 💻 فوق المعاينة.←
نسّق القسم الرئيسي hero في صفحة المقهى: صورة خلفية مع طبقة تعتيم ونص أبيض، ثم صندوق تنبيه.←مقال مقروءمتوسط · الدرس 18: الخطوط والنصوص والروابط
نسّق مقالًا عن القهوة ليكون مريحًا للقراءة، ونسّق روابطه.←بطاقة في وسط الصفحةمتوسط · الدرس 19: نموذج الصندوق
نسّق بطاقة تسجيل في وسط الصفحة بنموذج الصندوق.←ترويسة وبطاقات الدوراتمتقدم · الدرس 20: ترتيب العناصر بـ Flexbox
رتّب صفحة مركز التدريب بـ Flexbox: ترويسة فيها الشعار والقائمة على الطرفين، وثلاث بطاقات دورات في صف.←صفحة الدورات المتجاوبةمتقدم · الدرس 21: التصميم المتجاوب
اجعل صفحة الدورات متجاوبة: عمود واحد في الجوال، وصف من ثلاث بطاقات من 700 بكسل فأكثر. جرّب بزري 📱 و 💻 فوق المعاينة.←