CSS · الدرس ٤ من ٤

نسّق صفحتك بطريقتك

اجمع الألوان والمسافات وترتيب القائمة في صفحة واحدة. يحدّ max-width من عرض المحتوى، وتعدّل قاعدة @media التنسيق عندما تصغر الشاشة.

جرّب الآن

غيّر اللون والمسافات بما يناسبك. احفظ الصفحة وافتحها، ثم صغّر نافذة المتصفح. تأكّد من ظهور القائمة عمودياً على الشاشة الصغيرة.

يبني كل درس جديد على صفحتك الشخصية. عندما تعود إلى درس، تظهر مسودتك المحفوظة.

اختر صورة من جهازك

تبقى الصورة في متصفحك ولا تُرفع إلى الموقع. اخترها، ثم استخدم اسم ملفها عند إضافة الصورة إلى كودك.

        CSS · style.cssmain {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
h1 {
  color: seagreen;
}
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
@media (max-width: 600px) {
  ul {
    flex-direction: column;
  }
}
        عدّل HTML لمشروعك
            HTML · index.html<main>
  <h1>مرحباً، أنا سارة</h1>
  <p>هذه صفحتي الأولى.</p>
  <ul>
    <li>القراءة</li>
    <li>الرسم</li>
    <li>التعلّم</li>
  </ul>
</main>
            
        
    

صفحتك

تستخدم الفحوصات كودك الحالي. جرّب الصفحة بنفسك أيضاً.

هل النص واضح، والقائمة مرتّبة على الهاتف والحاسوب؟ ستنتقل صفحتك وتنسيقها إلى JavaScript لإضافة التفاعل.

التالي: JavaScript والتفاعل

أحتاج مساعدة

ابدأ بلون واحد ومسافات بسيطة. اترك flex-wrap حتى لا تمتد القائمة خارج الصفحة. تجد مثالاً كاملاً وتمارين أخرى في «شرح إضافي».

شرح إضافي

احفظ الصفحة على جهازك

نزّل ملف HTML

إذا لم يبدأ التنزيل، انسخ الكود الكامل أدناه إلى ملف نصّي باسم index.html واحفظه بترميز UTF-8.

الكود الكامل للحفظ

جرّب الآن

صفحتك

ملاحظات على عملك