🌟 مشروع تدريبي شامل: إنشاء موقع تعريفي شخصي (Portfolio)

📝 عنوان المشروع
✅ تصميم موقع تعريفي من صفحة واحدة يعرض معلومات شخصية، معرض أعمال، ونموذج تواصل.

🎯 هدف المشروع
تطبيق كل المفاهيم التي تعلمتها في HTML وCSS من خلال مشروع حقيقي يجمع بين:

  • تنسيق النصوص والعناصر.

  • تنظيم تخطيط الصفحة.

  • إضافة الصور والنماذج والقوائم.

  • إنشاء تأثيرات تفاعلية.

  • تصميم شريط تنقل ثابت.

  • جعل الموقع متجاوبًا مع الشاشات المختلفة.

🛠 خطوات تنفيذ المشروع بالتفصيل

✅ 1) إنشاء ملفات المشروع:

  • أنشئ مجلد خاص بالمشروع.

  • داخل المجلد، أنشئ ملف الصفحة الرئيسية (HTML).

  • أنشئ ملف التنسيقات (CSS) لتطبيق التصميم.

  • جهّز صورك أو اختر صورًا مجانية لاستخدامها في الموقع.

✅ 2) تصميم الهيكل الأساسي للصفحة:

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

  • أسفل شريط التنقل، أضف قسمًا تعريفيًا يضم صورة شخصية أو شعار بسيط مع فقرة تعريفية قصيرة.

  • بعد التعريف، أضف قسمًا خاصًا بالمهارات والخدمات التي يمكنك تقديمها.

  • أنشئ قسمًا لعرض معرض الصور الخاصة بالأعمال أو المشاريع التي تود إبرازها.

  • في نهاية الصفحة، أضف نموذج تواصل ليسهل على الزوار إرسال رسائل إليك.

  • أضف تذييلًا أسفل الموقع فيه نص حقوق النشر وروابط سريعة.

✅ 3) تنسيق شريط التنقل:

  • حدّد لونًا مميزًا لخلفية الشريط.

  • اجعل الشريط ثابتًا في أعلى الشاشة عند التمرير.

  • ضع الروابط بشكل أفقي مع تباعد مناسب بينها.

  • أضف تأثيرًا لتغيير لون الرابط عند مرور الماوس عليه.

✅ 4) تنسيق قسم التعريف:

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

  • أضف فقرة تعريفية بخط واضح وحجم خط متوسط.

  • يمكنك إضافة أزرار صغيرة لروابط حسابات التواصل الاجتماعي.

✅ 5) تصميم قسم المهارات والخدمات:

  • استخدم قائمة منظمة تعرض مهاراتك بشكل مرتب.

  • أضف عناوين فرعية لكل مجال خدمة مع وصف قصير.

  • اختر ألوانًا وخلفيات مختلفة لتوضيح تقسيم الأقسام.

✅ 6) إعداد معرض الأعمال:

  • نظّم الصور في صفوف أو شبكة باستخدام تخطيط مناسب.

  • ضع عنوانًا لكل صورة مع وصف موجز.

  • أضف ظلًا خفيفًا خلف الصور ليظهر تأثير جمالي.

  • اجعل الصور تتغير قليلاً عند تمرير الماوس عليها.

✅ 7) إنشاء نموذج التواصل:

  • أضف الحقول الأساسية: الاسم، البريد الإلكتروني، موضوع الرسالة، نص الرسالة.

  • أضف أزرار الإرسال وإعادة التعيين.

  • نسّق الحقول ليكون العرض مرتبًا ومتناسقًا مع باقي الصفحة.

✅ 8) إضافة تأثيرات التصميم:

  • اجعل بعض العناصر تتحرك أو يتغير لونها عند المرور بالماوس (مثل الأزرار والصور).

  • أضف تدرجات الألوان عند الحاجة.

  • اجعل الزوايا مستديرة لتظهر بشكل جذاب.

  • استخدم تأثير الظلال خلف الصناديق والصور.

✅ 9) ضبط تجاوب الموقع:

  • تأكد أن الموقع يظهر بشكل جيد على مختلف أحجام الشاشات (كمبيوتر، لوحي، هاتف).

  • اضبط المساحات والتباعد لتتناسب مع العرض الصغير.

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

✅ 10) اللمسات الأخيرة:

  • تأكد من صحة الروابط بين الأقسام.

  • تأكد أن جميع الصور تظهر بشكل صحيح.

  • أضف نصًا في التذييل يشير إلى حقوق النشر.

  • راجع جميع الأقسام وتأكد من تناسق الألوان والخطوط.

🎁 نصائح إضافية لتحسين المشروع:

  • اختر ألوانًا متناسقة تعكس هوية الموقع.

  • استخدم خطًا واضحًا ومريحًا للقراءة.

  • لا تكثر من التفاصيل حتى يبقى التصميم بسيطًا وسهل التصفح.

  • حاول أن يكون النموذج واضحًا وسهل الاستخدام.

✅ طريقة التسليم:

  • ضع جميع الملفات والصور في مجلد واحد.

  • اضغط المجلد في ملف ZIP.

  • تأكد من عمل جميع الروابط والتنسيقات.

  • سلّم المشروع في الوقت المحدد.

🌟 التمرين الشامل للأسبوع السادس

📝 عنوان التمرين
✅ تصميم موقع واجهة مستخدم متكامل يطبق تقنيات CSS المتقدمة

🎯 هدف التمرين
تطبيق جميع مهارات الأسبوع السادس في مشروع عملي يركز على:

  • التحكم في شكل العناصر باستخدام الحدود والزوايا.

  • التعامل مع تدفق المحتوى (Overflow).

  • استخدام الـ Inline-Block وFlexbox لتخطيط العناصر.

  • إنشاء شريط تنقل (Navbar) ثابت.

  • تصميم نموذج تواصل احترافي.

  • إضافة تأثيرات Pseudo Classes وBox Shadow.

  • تثبيت عناصر في الشاشة باستخدام Position Fixed.

🛠 المطلوب خطوة بخطوة

✅ 1) إنشاء الصفحة:
أنشئ ملف HTML باسم:
advanced_layout.html

✅ 2) إعداد الهيكل الأساسي:

  • أنشئ شريط تنقل (Navbar) أعلى الصفحة يحتوي على روابط وهمية مثل: الرئيسية – الخدمات – تواصل معنا.

  • أضف قسم رئيسي يحتوي على عدة مربعات معلومات.

  • أضف نموذج تواصل أسفل الصفحة.

✅ 3) كتابة أكواد CSS:
أنشئ ملف CSS خارجي باسم:
style.css
واربطه بالصفحة باستخدام الوسم <link> داخل <head>.

✅ 4) تنسيق شريط التنقل (Navbar):

  • اجعل الـ Navbar ثابتًا أعلى الصفحة (position: fixed).

  • حدّد له لون خلفية مميز وارتفاع مناسب.

  • اجعل الروابط تظهر بشكل أفقي باستخدام Inline-Block.

  • أضف تباعد بين الروابط.

✅ 5) تصميم المربعات باستخدام Flexbox:

  • أنشئ صفًا من 3 مربعات بجانب بعضها باستخدام Flexbox.

  • حدّد أبعاد المربعات (width & height).

  • أضف Margin وPadding لتنسيق المسافات.

✅ 6) إضافة تأثيرات CSS:

  • أضف border-radius لكل مربع لتصبح الزوايا مستديرة.

  • أضف box-shadow ليظهر ظل خفيف خلف المربعات.

  • اجعل عند مرور الماوس على المربعات (hover) يتغير لون الخلفية (Pseudo Classes).

✅ 7) التحكم في Overflow:

  • أنشئ مربعًا يحتوي على نص طويل مع خاصية overflow:auto حتى يظهر شريط التمرير عند الحاجة.

✅ 8) إنشاء نموذج التواصل:
في أسفل الصفحة:

  • أنشئ نموذجًا يحتوي على:

    • حقل الاسم.

    • حقل البريد الإلكتروني.

    • حقل الرسالة (textarea).

    • زر إرسال.

  • نسّق النموذج بحيث يكون بعرض 60% من الصفحة ومركزيًا.

🎁 نقاط إضافية (اختياري):

  • اجعل الزر يتحرك قليلًا للأعلى عند المرور عليه (hover).

  • أضف تأثير انتقال سلس (transition) عند تغيير الألوان.

  • اجعل الـ Navbar شفافًا مع تأثير خلفية عند التمرير.

✅ طريقة التسليم:

  • اجمع ملفات HTML وCSS وكل العناصر المستخدمة.

  • تأكد من عمل جميع التأثيرات والتنسيقات بشكل صحيح.

  • اضغط الملفات في ملف ZIP واحد.

  • سلّم التمرين قبل نهاية الأسبوع السادس.

🌟 التمرين الشامل للأسبوع الخامس

📝 عنوان التمرين
✅ تصميم صفحة ويب تطبيقية توضح مهارات التحكم في تنسيق العناصر باستخدام CSS

🎯 هدف التمرين
دمج جميع مهارات الأسبوع الخامس في مشروع عملي يركز على:

  • كتابة أكواد CSS بشكل صحيح.

  • تنسيق النصوص.

  • التحكم في أبعاد العناصر.

  • تنظيم تخطيط الصفحة (Layout).

  • استخدام الـ Margin وPadding وBorder.

🛠 المطلوب خطوة بخطوة

✅ 1) إنشاء الصفحة:
أنشئ ملف HTML باسم:
layout_practice.html

✅ 2) إعداد الهيكل الأساسي:

  • أنشئ 3 أقسام رئيسية باستخدام <section> أو <div>:

    • رأس الصفحة (Header): يحتوي على عنوان رئيسي.

    • المحتوى الرئيسي (Main): يحتوي على مقطع نصي وصورة تجريبية.

    • تذييل الصفحة (Footer): يحتوي على نص حقوق النشر.

✅ 3) كتابة أكواد CSS:
أنشئ ملف CSS خارجي باسم:
style.css
واربطه بصفحة HTML باستخدام الوسم <link> في <head>.

✅ 4) تنسيق النصوص:

  • اجعل العنوان الرئيسي بلون مميز وحجم خط كبير.

  • اجعل النص داخل المحتوى بخط مختلف وحجم متوسط.

  • اجعل تذييل الصفحة بخط أصغر ولون باهت.

✅ 5) تحديد الأبعاد:

  • حدد عرض وارتفاع مخصصين للصورة داخل المحتوى (مثلاً width:300px, height:200px).

  • اجعل عرض القسم الرئيسي بنسبة 80% من عرض الشاشة.

✅ 6) تنظيم تخطيط الصفحة (Page Layout):

  • اجعل الأقسام تظهر فوق بعضها بتباعد مناسب.

  • أضف لون خلفية مختلف لكل قسم لتمييزه.

✅ 7) إضافة Margin وPadding:

  • أضف Margin خارجي حول كل قسم بمقدار 20px.

  • أضف Padding داخلي بمقدار 15px داخل الأقسام.

✅ 8) إضافة Border:

  • أضف حدود Border حول الأقسام بلون محدد وسُمك 2px.

  • اجعل الحدود مستديرة (border-radius) بمقدار 6px.

🎁 نقاط إضافية (اختياري):

  • أضف تأثير ظل للصورة (box-shadow).

  • اجعل الصورة تتحرك بخفة عند تمرير الماوس (Hover Effect).

  • اجعل الصفحة متجاوبة مع حجم الشاشة باستخدام Media Queries.

✅ طريقة التسليم:

  • اجمع ملفات HTML وCSS والصورة المستخدمة.

  • تأكد من عمل جميع التنسيقات بشكل صحيح.

  • اضغط الملفات في ملف ZIP واحد.

  • سلّم التمرين قبل نهاية الأسبوع الخامس.

🌟 التمرين الشامل للأسبوع الرابع

📝 عنوان التمرين

✅ إنشاء صفحة ويب لعرض محتوى وسائط متعددة لمعرض ثقافي

🎯 هدف التمرين

تطبيق جميع مهارات الأسبوع الرابع لإنشاء صفحة غنية بالوسائط وتصميم متكامل.

🛠 المطلوب خطوة بخطوة

✅ 1) إنشاء صفحة HTML

  • أنشئ ملفًا باسم: cultural_exhibit.html

✅ 2) تقسيم الصفحة

  • استخدم الوسوم <div> أو <section> لتقسيم الصفحة إلى 3 أقسام رئيسية:

    • القسم العلوي: عنوان المعرض وفقرة تعريفية.

    • القسم الأوسط: الفيديو والصوت.

    • القسم السفلي: محتوى نصي مع تغيير اتجاه الكتابة.

✅ 3) إضافة الفيديو

  • في القسم الأوسط:

    • أضف عنصر <video> يعرض فيديو تعريفي عن المعرض (يمكنك استخدام رابط فيديو مجاني أو فيديو تجريبي).

    • اجعل الفيديو:

      • قابلًا للتشغيل والتحكم.

      • بحجم 500px عرضًا.

      • مع كتابة نص بديل في حالة عدم دعم الفيديو.

✅ 4) إضافة مشغل الصوت

  • أسفل الفيديو:

    • أضف عنصر <audio> لتشغيل مقطع موسيقي يخص المعرض.

    • اجعل المشغل يحتوي على أزرار تحكم (تشغيل/إيقاف).

    • أضف نصًا توضيحيًا يشرح محتوى الصوت.

✅ 5) تغيير اتجاه الكتابة

  • في القسم السفلي:

    • أنشئ فقرة نصية تحتوي على وصف قصير للمعرض.

    • اجعل اتجاه الكتابة من اليمين لليسار (RTL).

    • استخدم خاصية CSS: direction: rtl;

✅ 6) دمج الوسوم

  • في محتوى الصفحة:

    • أنشئ فقرة تحتوي على:

      • وسوم عريضة <strong>.

      • وسوم مائلة <em>.

      • وسوم رابط <a> إلى موقع خارجي.

    • مثال:

      php-template
       
      هذا المعرض يضم <strong>أعمال فنية</strong> رائعة، يمكنك زيارة <a href="https://example.com">موقعنا الرسمي</a> لمزيد من التفاصيل.
  •  

🎁 (اختياري)

  • اجعل الفيديو يعمل تلقائيًا بدون صوت.

  • أضف إطارًا حول الأقسام باستخدام border.

  • أنشئ قائمة تحتوي على روابط لتنقل المستخدم بين الأقسام باستخدام الوسوم <a href="#sectionID">.

✅ طريقة التسليم

  • اجمع ملف HTML وأي ملفات وسائط تستخدمها.

  • اضغطهم في ملف ZIP.

  • سلّم التمرين قبل نهاية الأسبوع الرابع.

🌟 التمرين الشامل للأسبوع الثالث – موضوع جديد

📝 عنوان التمرين

✅ إنشاء صفحة ويب تعرض جدول حصص نادي رياضي مع الأيقونات وiframe

🎯 هدف التمرين

إنشاء صفحة تعريفية لنادي رياضي تعرض جدول الحصص، معلومات الصفحة، وأدوات تفاعلية.

🛠 المطلوب خطوة بخطوة

✅ 1) إنشاء صفحة HTML:

  • أنشئ ملفًا باسم: gym_schedule.html

✅ 2) إضافة التعليقات:

  • في بداية الكود أضف تعليقًا يوضّح:

    <!-- صفحة جدول حصص نادي القوة الرياضية -->
    <!-- أنشأها [اسمك] بتاريخ [تاريخ اليوم] -->

  • أضف تعليقات أخرى لشرح كل جزء (الجدول، الأيقونات، iframe…).

✅ 3) عنوان وأيقونة الصفحة:

  • داخل <head>:

    • اجعل عنوان الصفحة: جدول حصص نادي القوة الرياضي

    • أضف أيقونة Favicon (صورة دمبل أو كرة رياضية).

✅ 4) إضافة الأيقونات:

  • استخدم مكتبة Font Awesome لإضافة:

    • أيقونة 🏋️‍♂️ بجانب العنوان الرئيسي.

    • أيقونات ⏰ بجانب مواعيد التمارين.

    • أيقونات 💪 بجانب أنواع التمارين.

✅ 5) إنشاء جدول الحصص:

  • أضف جدولًا يعرض:

    • رقم الحصة.

    • اسم التمرين.

    • اليوم.

    • التوقيت.

    • المدرب.

✅ 6) إدراج Iframe:

  • أسفل الجدول:

    • أضف Iframe يعرض:

      • موقع النادي على Google Maps أو

      • فيديو يشرح تمارين لياقة بدنية من يوتيوب.

🎁 (تحدي اختياري)

  • اجعل الجدول قابلاً للتمرير أفقيًا.

  • أضف زرًّا للرجوع إلى الصفحة الرئيسية.

  • أضف فقرة تعريفية صغيرة عن النادي في أعلى الصفحة.

✅ طريقة التسليم:

  • اجمع الملفات (HTML + الصور ).

  • ضعها في مجلد واحد.

  • اضغطه في ملف ZIP.

  • سلّم التمرين قبل نهاية الأسبوع الثالث.

 

🌟 التمرين الشامل للأسبوع الثاني

📝 عنوان التمرين

✅ إنشاء موقع تعريفي بسيط لورشة عمل أو دورة تدريبية

 

🎯 هدف التمرين

دمج المهارات التالية:

  • إنشاء صفحات HTML متعددة والربط بينها.

  • إدراج القوائم.

  • إضافة صور.

  • إنشاء نموذج تواصل.

 

🛠 المطلوب خطوة بخطوة

✅ 1) إنشاء الصفحات:

  • أنشئ 3 صفحات:

    • index.html: الصفحة الرئيسية.

    • about.html: صفحة عن الدورة أو الورشة.

    • contact.html: صفحة التواصل.

 

✅ 2) التنقل بين الصفحات:

  • أضف قائمة تنقل أفقية (Navigation Menu) أعلى كل صفحة، تحتوي على روابط تنقل بين الصفحات الثلاث.

 

✅ 3) القوائم:

  • في صفحة about.html:

    • أنشئ قائمة مرتبة (Ordered List) فيها محاور الدورة.

    • أنشئ قائمة غير مرتبة (Unordered List) فيها متطلبات المشاركة بالدورة.

 

✅ 4) الصور:

  • في الصفحة الرئيسية index.html:

    • أضف صورة شعار الدورة.

    • أضف صورتين توضيحيتين (مثلاً صورة قاعة تدريب أو صورة حاسوب).

    • أضف تعليقًا لكل صورة باستخدام <figcaption>.

 

✅ 5) النموذج:

  • في صفحة contact.html:

    • أنشئ نموذج تواصل يحتوي على:

      • حقل الاسم.

      • حقل البريد الإلكتروني.

      • قائمة منسدلة لاختيار نوع الاستفسار (تسجيل – معلومات – شكاية).

      • مربعات اختيار لتحديد الأيام المناسبة للتواصل.

      • حقل نص كبير لكتابة رسالة.

      • زر إرسال.

      • زر إعادة تعيين.

✅ طريقة التسليم

  • اجمع جميع الصفحات والملفات (HTML + CSS + الصور).

  • تأكد من عمل الروابط والتنسيق.

  • اضغطها في ملف ZIP واحد.

  • سلّم التمرين قبل نهاية الأسبوع الثاني.