5.8 KiB
5.8 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
587d78af367417b2b2512b04 | Build a Product Landing Page | true | 3 | بناء صفحة هبوط منتج |
Description
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 إذا واجهتك مشكلة. Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required