ضبط الشبكة

جزء من قسم 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>