أول مشروع صفحة ويب أمامية لي.
تفاصيل العمل
ممارسة لل HTML و CSS و Bootstrap والقليل من JavaScript - (متجاوب مع الأجهزة المحمولة).
تحضير الهيكل الأساسي لصفحة HTML:
بدأت بكتابة مستند HTML يحتوي على العناصر الأساسية مثل: <!DOCTYPE html>, <html>, <head>, و <body>.
أضفت وسم <title> لتحديد عنوان الصفحة.
إعداد التهيئة العامة للصفحة:
أضفت مجموعة من الوسوم لتحديد مجموعة من البيانات الوصفية (meta tags) مثل: charset, viewport.
أضفت الروابط المطلوبة لملفات CSS الخارجية لتحسين تصميم الصفحة وجعلها متجاوبة.
ربط الخطوط الخارجية:
استخدمت الروابط الخاصة بخطوط Google لتضمين خطي Roboto و Single Day.
ربط ملفات CSS الخارجية:
قمت بإضافة الروابط الخاصة بملفات CSS الموجودة ضمن مجلد style.
إضافة الشيفرات البرمجية لجافا سكريبت:
أضفت الروابط الخارجية لجافا سكريبت مثل jQuery و Popper.js.
أضفت كود جافا سكريبت يعرض رسالة ترحيبية للمستخدم عند تحميل الصفحة ويطبعها في وحدة التحكم.
إعداد شريط التنقل (Navigation Bar):
أضفت شريط التنقل باستخدام وسم <nav>.
أضفت عناصر شريط التنقل باستخدام وسوم <ul> و <li>.
أضفت كود جافا سكريبت لتفعيل خاصية القائمة المنسدلة في شريط التنقل.
إضافة الشعار الرئيسي للصفحة:
استخدمت وسم <label> لإضافة شعار "Absolute Bananas.com".
إنشاء نموذج الإدخال:
قمت بإنشاء نموذج إدخال يحتوي على حقول اسم المستخدم وكلمة المرور باستخدام وسوم <form> و <input>.
تضمين فيديو YouTube:
أضفت فيديو توضيحي باستخدام وسم <iframe>.
إنشاء ثلاثة صناديق توضيحية:
أضفت ثلاثة صناديق باستخدام وسوم <div> و <label> و <p> لعرض معلومات مختلفة حول الموز.
إضافة مقال وصورة:
أضفت مقال نصي وصورة مرافقة له باستخدام وسوم <article> و <image>.
إضافة حاسبة النسبة المئوية:
أضفت نموذج حاسبة النسبة المئوية باستخدام وسوم <form> و <input>.
أضفت كود جافا سكريبت لتنفيذ وظيفة الحاسبة.
تضمين فيديو إضافي:
أضفت فيديو آخر في قسم "footer" باستخدام وسم <iframe>.
إنشاء تذييل الصفحة:
أضفت تذييل يحتوي على أربع أعمدة باستخدام وسوم <footer> و <div> و <ul> و <li>.
النتيجة النهائية هي صفحة ويب تحتوي على:
شريط تنقل رئيسي متجاوب.
رسالة ترحيبية للمستخدم عند تحميل الصفحة.
شعار رئيسي.
نموذج إدخال لاسم المستخدم وكلمة المرور.
فيديو توضيحي.
ثلاثة صناديق توضيحية بمعلومات مختلفة حول الموز.
مقال وصورة مرافقة.
حاسبة للنسبة المئوية.
فيديو إضافي في التذييل.
تذييل يحتوي على روابط ونصوص إضافية.
ملفات مرفقة
بطاقة العمل
| اسم المستقل | Amr K. |
| عدد الإعجابات | 0 |
| عدد المشاهدات | 5 |
| تاريخ الإضافة | |
| تاريخ الإنجاز |