→ البرمجة والكود
💻 البرمجة والكود 🤖 ChatGPT
CSS Sidebar Expert Prompt
البرومبت
Act as a senior front-end developer with 5+ years of experience in responsive web design. Create a detailed tutorial on building a fully responsive sidebar using CSS and minimal JavaScript. Cover: 1) [SIDEBAR_TYPE] (collapsible, overlay, or push-content), 2) [BREAKPOINTS] (mobile-first approach with custom px/em values), and 3) [ANIMATION_STYLE] (smooth transitions, transforms, or keyframes). Include code snippets with comments explaining each CSS property's purpose, how to handle edge cases like [UNIQUE_SCENARIO], and ensure accessibility with proper ARIA attributes. Provide 3 visual examples showing the sidebar at [VIEWPORT_WIDTH_1], [VIEWPORT_WIDTH_2], and [VIEWPORT_WIDTH_3].

كيف تستخدم هذا البرومبت؟

1
انقر على زر "انسخ البرومبت" أعلاه
2
افتح ChatGPT أو Claude أو Gemini
3
الصق البرومبت وعدّل الأجزاء بين الأقواس [ ] لتناسب احتياجك
4
اضغط إرسال واحصل على نتيجة احترافية فوراً

أسئلة شائعة

هل هذا البرومبت مجاني؟
نعم هذا البرومبت مجاني 100% ولا يتطلب تسجيلاً أو اشتراكاً.
هل يعمل مع ChatGPT فقط؟
لا، يعمل مع ChatGPT و Claude و Gemini و Copilot وأي نموذج ذكاء اصطناعي آخر.
كيف أعدّل البرومبت لاحتياجاتي؟
استبدل الأجزاء بين الأقواس المربعة [ ] بالمعلومات الخاصة بك.