لوحة المتصدرين

ليش لا يوجد شرح تفاصيل ليش كود مكتوب قبل شرح وليش مافي توضيح عن استخدامات

انا اعرف اصمم اي تصميم يواجهني في ال فرونت اند لكن عندي مشكله في ابتكار تصاميم او معرفة التصميم المناسب للعناصر، حابب أسألكم هل في مواقع معينه اقدر اغذي بصري فيها واعرف أكثر عن طريقة عرض العناصر مثل ال carousel أو ال card وما الا ذلك انا front-end شكرا جزيلا لكم

عند استخدام ال DOM في ال JS واضافة عنصر عن طريق ال JS هل يمكننا التعديل عليه من خلال الCSS ؟ ولماذا وضعنا كل هذه الاكواد داخل JS ولم نضعها داخل الHTML اسهل ويمكن التعديل عليها وكتابة اكواد اقل؟

يمكن توسيط عنصر div باستخدام العديد من الطرق المختلفة في CSS. ومن بين هذه الطرق: 1- استخدام margin: auto يمكن توسيط العنصر div بوضع margin: auto له. يجب على العنصر div أن يكون له عرض محدد ويجب أن يكون محيطه الخارجي مفعلًا. مثال: HTML: <div class="container"> <p>Hello, World!</p> </div> CSS: .container { width: 50%; margin: auto; } 2- استخدام flexbox يمكن استخدام Flexbox لتوسيط عنصر div. يجب على العنصر الرئيسي (parent element) أن يكون له display: flex ويجب أن يستخدم justify-content: center و align-items: center. مثال: HTML: <div class="container"> <p>Hello, World!</p> </div> CSS: .container { display: flex; justify-content: center; align-items: center; height: 100vh; } 3- استخدام grid يمكن استخدام CSS grid لتوسيط عنصر div. يجب على العنصر الرئيسي (parent element) أن يكون له display: grid ويجب على العنصر الفرعي (child element) أن يكون له grid-column و grid-row محدد. مثال: HTML: <div class="container"> <p>Hello, World!</p> </div> CSS: .container { display: grid; place-items: center; height: 100vh; } .container p { grid-column: 1 / -1; grid-row: 1 / -1; text-align: center; } يجب تحديد height للعنصر الرئيسي في حال استخدام Flexbox أو Grid، حتى يتم توسيط العنصر الفرعي بشكل صحيح. يمكن استخدام قيمة نسبية مثل vh لضمان أن الارتفاع يمتد عبر جميع شاشات العرض بشكل صحيح.

الصورة التي تم رفعها هي سبب المشكلة لديك، فكما يبدوا أنك تستخدم تلك الصورة في الـ Footer ولو لاحظت فهى مائلة بالأساس، من الأفضل استخدام صور منفصلة وترتيبها داخل كود html ثم تنسيها بالـ CSS، او يمكنك استعدال الصورة من خلال برامج تعديل الصور، أو ضبط إمالة الصورة بالـ CSS من خلال الخاصية transform: rotate(20deg);