39 lines
5.8 KiB
Markdown
39 lines
5.8 KiB
Markdown
|
---
|
||
|
|
id: 587d78af367417b2b2512b04
|
||
|
|
title: Build a Product Landing Page
|
||
|
|
isRequired: true
|
||
|
|
challengeType: 3
|
||
|
|
videoUrl: ''
|
||
|
|
localeTitle: بناء صفحة هبوط منتج
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id="description"> <strong>الهدف:</strong> إنشاء تطبيق <a href="https://codepen.io" target="_blank">CodePen.io</a> تشبه وظيفيًا هذا: <a href="https://codepen.io/freeCodeCamp/full/RKRbwL" target="_blank">https://codepen.io/freeCodeCamp/full/RKRbwL</a> . تحقق من <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">قصص المستخدمين</a> أدناه واجتاز جميع الاختبارات. اعطها اسلوبك الشخصي. يمكنك استخدام HTML و JavaScript و CSS لإكمال هذا المشروع. يوصى باستخدام CSS العادي لأن هذا هو ما غطته الدروس حتى الآن ، ويجب أن تحصل على بعض التمرين باستخدام CSS عادي. يمكنك استخدام Bootstrap أو SASS إذا اخترت. لا يوصى باستخدام هذا النوع من التقنيات الإضافية (على سبيل المثال jQuery أو React أو Angular أو Vue) ، ويكون استخدامها على مسؤوليتك الخاصة. سوف تعطيك مشاريع أخرى فرصة للعمل مع مكدسات التكنولوجيا المختلفة مثل React. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم مجموعة التكنولوجيا المقترحة لهذا المشروع. الترميز سعيدة! <strong>قصة المستخدم # 1:</strong> الصفحة المقصودة المنتجات بلدي يجب أن يكون <code>header</code> عنصر المقابلة مع <code>id="header"</code> . <strong>قصة المستخدم رقم 2:</strong> يمكنني رؤية صورة داخل عنصر <code>header</code> باستخدام <code>id="header-img"</code> مناظر <code>id="header-img"</code> . شعار الشركة سيجعل صورة جيدة هنا. <strong>قصة المستخدم رقم 3:</strong> داخل عنصر <code>#header</code> أستطيع أن أرى عنصر <code>nav</code> باستخدام <code>id="nav-bar"</code> . <strong>قصة المستخدم رقم 4:</strong> يمكنني مشاهدة ثلاثة عناصر قابلة للنقر على الأقل داخل عنصر <code>nav</code> ، كل منها يحتوي على <code>nav-link</code> للفئة. <strong>قصة المستخدم رقم 5:</strong> عندما أنقر على زر <code>.nav-link</code> في عنصر <code>nav</code> ، يتم نقلي إلى القسم المقابل من الصفحة المقصودة. <strong>قصة المستخدم رقم 6:</strong> يمكنني مشاهدة فيديو منتج مضمّن باستخدام <code>id="video"</code> . <strong>قصة المستخدم رقم 7: تحتوي</strong> صفحتي المقصودة على عنصر <code>form</code> له <code>id="form"</code> مناظر <code>id="form"</code> . <strong>قصة المستخدم رقم 8:</strong> داخل النموذج ، هناك حقل <code>input</code> به <code>id="email"</code> حيث يمكنني إدخال عنوان بريد إلكتروني. <strong>قصة المستخدم رقم 9:</strong> يجب أن يحتوي حقل إدخال <code>#email</code> <strong># على</strong> نص <code>#email</code> للسماح للمستخدم بمعرفة ما هو الحقل. <strong>قصة المستخدم # 10:</strong> <code>#email</code> حقل إدخال يستخدم التحقق من صحة HTML5 للتأكد من أن النص الذي تم إدخاله هو عنوان البريد الإلكتروني. <strong>قصة المستخدم رقم 11:</strong> في النموذج ، هناك <code>input</code> إرسال مع <code>id="submit"</code> المقابلة <code>id="submit"</code> . <strong>قصة المستخدم رقم 12:</strong> عندما أنقر على عنصر " <code>#submit</code> ، يتم إرسال الرسالة الإلكترونية إلى صفحة ثابتة (استخدم هذا العنوان <code>#submit</code> : <a h
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id="instructions">
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests: []
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|