ضبط الشبكة

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 35 من 43.

التحدي

سهل

في هذه السلسلة، سنقوم ببناء تخطيط موقع ويب متجاوب باستخدام CSS Grid.

أولاً، دعونا نلقي نظرة على ما سنقوم بإنشائه:

موقع ويب يحتوي على:

رأس الصفحة (Header)
شريط جانبي (Sidebar)
منطقة المحتوى الرئيسية
تذييل الصفحة (Footer)

إليك كيف سيبدو الأمر عندما ننتهي:

لنبدأ بإنشاء هيكل الشبكة العام للموقع! مهامك:

حول .container إلى تخطيط شبكي (grid layout).
أنشئ هيكلاً مكوناً من 3 أعمدة.
حدد ثلاثة صفوف: واحد للرأس، وواحد للمحتوى الرئيسي، وواحد للتذييل.
استخدم أسماء مناطق الشبكة (grid area names) لترتيب التخطيط بهذا الشكل: "header header header" "hero featured featured" “footer footer footer”

5. أضف بعض المسافات بين العناصر وحول الحاوية لجعلها تبدو منظمة.

6. قم بتعيين اسم grid-area الصحيح لكل قسم باستخدام محددات الفئات (class selectors): .header، .hero، .featured، و .footer

جرّب بنفسك

<html>
<head>
  <title>FlavorFiesta</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header class="header">FlavorFiesta</header>
    
    <section class="hero">
      <h1>Delicious Recipes & Culinary Adventures</h1>
      <p>Your daily dose of flavor, fun, and food!</p>
    </section>
    
    <section class="featured">
      <h2>Featured Recipes</h2>
      <div class="recipe-grid">
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Food-pasta-spinach_%2824218510092%29.jpg" alt="Pasta">
          <p> Creamy Spinach Pasta</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/NCI_Visuals_Food_Hamburger.jpg" alt="Burger">
          <p> Classic Beef Burger</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/1/1e/Quinoa%2C_Black_Bean%2C_and_Mango_Salad.png" alt="Salad">
          <p> Quinoa & Avocado Salad</p>
        </div>
      </div>
    </section>   
    <footer class="footer">
      <p>© 2025 FlavorFiesta | Follow us @flavorfiesta</p>
    </footer>
  </div>
</body>
</html>