39 lines
4.8 KiB
Markdown
39 lines
4.8 KiB
Markdown
---
|
|
id: bd7158d8c442eddfaeb5bd18
|
|
title: Build a Tribute 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/zNqgVx" target="_blank">https://codepen.io/freeCodeCamp/full/zNqgVx</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>id="main"</code> ، والذي يحتوي على جميع العناصر الأخرى. <strong>قصة المستخدم رقم 2:</strong> يجب أن أرى عنصرًا به <code>id="title"</code> ، والذي يحتوي على سلسلة (أي نص) تصف موضوع صفحة الجزية (على سبيل المثال "Dr. Norman Borlaug"). <strong>قصة المستخدم رقم 3: من</strong> المفترض أن أرى عنصر <code>div</code> يحتوي على <code>id="img-div"</code> مناظر <code>id="img-div"</code> . <strong>قصة المستخدم رقم 4:</strong> في عنصر <code>img-div</code> ، ينبغي أن أرى عنصر <code>img</code> <code>id="image"</code> مناظر <code>id="image"</code> . <strong>قصة المستخدم رقم 5:</strong> في عنصر <code>img-div</code> ، يجب أن أرى عنصرًا به <code>id="img-caption"</code> المقابل الذي يحتوي على محتوى نصي يصف الصورة المعروضة في <code>img-div</code> . <strong>قصة المستخدم رقم 6:</strong> ينبغي أن أرى عنصرًا يحمل <code>id="tribute-info"</code> مقابلاً <code>id="tribute-info"</code> ، يحتوي على محتوى نصي يصف موضوع صفحة الجزية. <strong>قصة المستخدم رقم 7:</strong> يجب أن تشهد <code>a</code> عنصر المقابلة مع <code>id="tribute-link"</code> ، الذي يربط إلى موقع خارجي يحتوي على معلومات إضافية حول موضوع الصفحة الجزية. تلميح: يجب أن تمنح عنصرك سمة <code>target</code> <code>_blank</code> على <code>_blank</code> حتى يفتح الرابط الخاص بك في علامة تبويب جديدة (مثل <code>target="_blank"</code> ). <strong>قصة المستخدم رقم 8:</strong> يجب تغيير عنصر <code>img</code> سريعة ، بالنسبة إلى عرض العنصر الرئيسي ، دون تجاوز الحجم الأصلي. <strong>قصة المستخدم رقم 9:</strong> يجب توسيط عنصر <code>img</code> داخل العنصر الرئيسي. يمكنك بناء مشروعك عن طريق <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">تسجيل قلم CodePen هذا</a> . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> . بمجرد الانتهاء ، أرسل عنوان URL إلى مشروع عملك مع كل اختباراته تمر. تذكر استخدام طريقة <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> إذا واجهتك مشكلة. </section>
|
|
|
|
## 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>
|