الهدف: إنشاء تطبيق CodePen.io تشبه وظيفيًا هذا: https://codepen.io/freeCodeCamp/full/RKRbwL . تحقق من قصص المستخدمين أدناه واجتاز جميع الاختبارات. اعطها اسلوبك الشخصي. يمكنك استخدام HTML و JavaScript و CSS لإكمال هذا المشروع. يوصى باستخدام CSS العادي لأن هذا هو ما غطته الدروس حتى الآن ، ويجب أن تحصل على بعض التمرين باستخدام CSS عادي. يمكنك استخدام Bootstrap أو SASS إذا اخترت. لا يوصى باستخدام هذا النوع من التقنيات الإضافية (على سبيل المثال jQuery أو React أو Angular أو Vue) ، ويكون استخدامها على مسؤوليتك الخاصة. سوف تعطيك مشاريع أخرى فرصة للعمل مع مكدسات التكنولوجيا المختلفة مثل React. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم مجموعة التكنولوجيا المقترحة لهذا المشروع. الترميز سعيدة! قصة المستخدم # 1: الصفحة المقصودة المنتجات بلدي يجب أن يكون header عنصر المقابلة مع id="header" . قصة المستخدم رقم 2: يمكنني رؤية صورة داخل عنصر header باستخدام id="header-img" مناظر id="header-img" . شعار الشركة سيجعل صورة جيدة هنا. قصة المستخدم رقم 3: داخل عنصر #header أستطيع أن أرى عنصر nav باستخدام id="nav-bar" . قصة المستخدم رقم 4: يمكنني مشاهدة ثلاثة عناصر قابلة للنقر على الأقل داخل عنصر nav ، كل منها يحتوي على nav-link للفئة. قصة المستخدم رقم 5: عندما أنقر على زر .nav-link في عنصر nav ، يتم نقلي إلى القسم المقابل من الصفحة المقصودة. قصة المستخدم رقم 6: يمكنني مشاهدة فيديو منتج مضمّن باستخدام id="video" . قصة المستخدم رقم 7: تحتوي صفحتي المقصودة على عنصر form له id="form" مناظر id="form" . قصة المستخدم رقم 8: داخل النموذج ، هناك حقل input به id="email" حيث يمكنني إدخال عنوان بريد إلكتروني. قصة المستخدم رقم 9: يجب أن يحتوي حقل إدخال #email # على نص #email للسماح للمستخدم بمعرفة ما هو الحقل. قصة المستخدم # 10: #email حقل إدخال يستخدم التحقق من صحة HTML5 للتأكد من أن النص الذي تم إدخاله هو عنوان البريد الإلكتروني. قصة المستخدم رقم 11: في النموذج ، هناك input إرسال مع id="submit" المقابلة id="submit" . قصة المستخدم رقم 12: عندما أنقر على عنصر " #submit ، يتم إرسال الرسالة الإلكترونية إلى صفحة ثابتة (استخدم هذا العنوان #submit : https://www.freecodecamp.com/email-submit ) الذي يؤكد إدخال عنوان البريد الإلكتروني و نشرت بنجاح. قصة المستخدم رقم 13: يجب أن يكون شريط التنقل دائمًا في أعلى منفذ العرض. قصة المستخدم رقم 14: يجب أن تحتوي صفحتي المقصودة للمنتج على استعلام وسائط واحد على الأقل. قصة المستخدم رقم 15: يجب أن تستخدم الصفحة المقصودة للمنتج My CSS flexbox مرة واحدة على الأقل. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة.