freeCodeCamp

4.8 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7158d8c442eddfaeb5bd18	Build a Tribute Page	true	3		بناء صفحة تحية

Description

الهدف: إنشاء تطبيق CodePen.io تشبه وظيفيًا هذا: https://codepen.io/freeCodeCamp/full/zNqgVx . تحقق من قصص المستخدمين أدناه واجتاز جميع الاختبارات. اعطها اسلوبك الشخصي. يمكنك استخدام HTML و JavaScript و CSS لإكمال هذا المشروع. يوصى باستخدام CSS العادي لأن هذا هو ما غطته الدروس حتى الآن ، ويجب أن تحصل على بعض التمرين باستخدام CSS عادي. يمكنك استخدام Bootstrap أو SASS إذا اخترت. لا يوصى باستخدام هذا النوع من التقنيات الإضافية (على سبيل المثال jQuery أو React أو Angular أو Vue) ، ويكون استخدامها على مسؤوليتك الخاصة. سوف تعطيك مشاريع أخرى فرصة للعمل مع مكدسات التكنولوجيا المختلفة مثل React. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم مجموعة التكنولوجيا المقترحة لهذا المشروع. الترميز سعيدة! قصة المستخدم رقم 1: يجب أن تحتوي صفحة الجزية على عنصر له رقم id="main" ، والذي يحتوي على جميع العناصر الأخرى. قصة المستخدم رقم 2: يجب أن أرى عنصرًا به id="title" ، والذي يحتوي على سلسلة (أي نص) تصف موضوع صفحة الجزية (على سبيل المثال "Dr. Norman Borlaug"). قصة المستخدم رقم 3: من المفترض أن أرى عنصر div يحتوي على id="img-div" مناظر id="img-div" . قصة المستخدم رقم 4: في عنصر img-div ، ينبغي أن أرى عنصر img id="image" مناظر id="image" . قصة المستخدم رقم 5: في عنصر img-div ، يجب أن أرى عنصرًا به id="img-caption" المقابل الذي يحتوي على محتوى نصي يصف الصورة المعروضة في img-div . قصة المستخدم رقم 6: ينبغي أن أرى عنصرًا يحمل id="tribute-info" مقابلاً id="tribute-info" ، يحتوي على محتوى نصي يصف موضوع صفحة الجزية. قصة المستخدم رقم 7: يجب أن تشهد a عنصر المقابلة مع id="tribute-link" ، الذي يربط إلى موقع خارجي يحتوي على معلومات إضافية حول موضوع الصفحة الجزية. تلميح: يجب أن تمنح عنصرك سمة target _blank على _blank حتى يفتح الرابط الخاص بك في علامة تبويب جديدة (مثل target="_blank" ). قصة المستخدم رقم 8: يجب تغيير عنصر img سريعة ، بالنسبة إلى عرض العنصر الرئيسي ، دون تجاوز الحجم الأصلي. قصة المستخدم رقم 9: يجب توسيط عنصر img داخل العنصر الرئيسي. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js . بمجرد الانتهاء ، أرسل عنوان URL إلى مشروع عملك مع كل اختباراته تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

4.8 KiB Raw Blame History