freeCodeCamp

6.8 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
587d78b0367417b2b2512b05	Build a Technical Documentation Page	true	3		بناء صفحة التوثيق الفني

Description

الهدف: إنشاء تطبيق CodePen.io تشبه وظيفيًا هذا: https://codepen.io/freeCodeCamp/full/NdrKKL . تحقق من قصص المستخدمين أدناه واجتاز جميع الاختبارات. اعطها اسلوبك الشخصي. يمكنك استخدام HTML و JavaScript و CSS لإكمال هذا المشروع. يوصى باستخدام CSS العادي لأن هذا هو ما غطته الدروس حتى الآن ، ويجب أن تحصل على بعض التمرين باستخدام CSS عادي. يمكنك استخدام Bootstrap أو SASS إذا اخترت. لا يوصى باستخدام هذا النوع من التقنيات الإضافية (على سبيل المثال jQuery أو React أو Angular أو Vue) ، ويكون استخدامها على مسؤوليتك الخاصة. سوف تعطيك مشاريع أخرى فرصة للعمل مع مكدسات التكنولوجيا المختلفة مثل React. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم مجموعة التكنولوجيا المقترحة لهذا المشروع. الترميز سعيدة! قصة المستخدم رقم 1: يمكنني رؤية عنصر main يحتوي على id="main-doc" مناظر id="main-doc" ، والذي يحتوي على المحتوى الرئيسي للصفحة (الوثائق الفنية). قصة المستخدم رقم 2: داخل عنصر #main-doc ، يمكنني مشاهدة عدة عناصر من section ، لكل منها فئة من main-section . يجب أن يكون هناك حد أدنى من 5. قصة المستخدم رقم 3: يجب أن يكون العنصر الأول في كل عنصر .main-section عنصر header يحتوي على نص يصف موضوع ذلك القسم. قصة المستخدم رقم 4: يجب أن يكون لكل عنصر section مع فئة main-section أيضًا معرّف يتطابق مع نص كل header موجود داخلها. يجب استبدال أي مسافات بشرط تسطير سفلي (على سبيل المثال ، يجب أن يحتوي section الذي يحتوي على الرأس "Javascript و Java" على id="Javascript_and_Java" مناظر id="Javascript_and_Java" ). قصة المستخدم رقم 5: يجب أن تحتوي عناصر .main-section على ما لا يقل عن 10 عناصر لعناصر p (وليس كل). قصة المستخدم رقم 6: يجب أن تحتوي عناصر .main-section على ما لا يقل عن 5 عناصر من code (وليس كل). قصة المستخدم # 7: .main-section ينبغي أن يتضمن عناصر لا يقل عن 5 li البنود الكاملة (وليس كل). قصة المستخدم رقم 8: يمكنني رؤية عنصر nav مع id="navbar" المقابلة id="navbar" . قصة المستخدم رقم 9: يجب أن يحتوي عنصر شريط التنقل على عنصر header يحتوي على نص يصف موضوع الوثائق الفنية. قصة المستخدم رقم 10: بالإضافة إلى ذلك ، يجب أن يحتوي a nav-link على رابط ( a ) عناصر بفئة nav-link . يجب أن يكون هناك واحد لكل عنصر مع main-section للفصل. قصة المستخدم رقم 11: يجب أن يأتي عنصر header في شريط التنقل قبل أي رابط ( a ) عناصر في a التنقل. قصة المستخدم رقم 12: يجب أن يحتوي كل عنصر مع فئة nav-link على نص يتطابق مع نص header داخل كل section (على سبيل المثال ، إذا كان لديك عنوان / عنوان "مرحباً بالعالم" ، يجب أن يحتوي nav-link الخاص بك على عنصر يحتوي على النص "مرحبا بالعالم"). قصة المستخدم رقم 13: عندما أنقر على عنصر شريط التنقل ، يجب أن تنتقل الصفحة إلى القسم المقابل من عنصر main-doc (على سبيل المثال ، إذا قمت بالنقر فوق عنصر nav-link يحتوي على النص "Hello world" ، فإن الصفحة تتنقل إلى section العنصر الذي لديه تلك الهوية ويحتوي على المقابلة header قصة المستخدم رقم 14: على الأجهزة الحجم العادية (أجهزة الكمبيوتر المحمولة والمكتبية)، وعنصر مع id="navbar" يجب أن تظهر على الجانب الأيسر من الشاشة، وينبغي دائما قصة المستخدم رقم 15: يجب أن تستخدم صفحة "المستندات التقنية" استعلام وسائط واحد على الأقل. يمكنك إنشاء مشروعك من خلال تسجيل قلم CodePen هذا ، أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها : https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js بمجرد الانتهاء من ذلك ، أرسل عنوان URL إلى مشروع عملك مع جميع اختباراته ، تذكر استخدام Read-Search-Ask طريقة إذا واجهتك مشكلة.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

6.8 KiB Raw Blame History