دليل HTML وCSS لبناء موقع وصفات متعدد الصفحات خطوة بخطوة

مقدمة عملية لبناء موقع وصفات باستخدام HTML وCSS

يُعد تنفيذ المشاريع التطبيقية من أفضل الطرق لتطوير المهارات البرمجية، خصوصاً في مجال تطوير الواجهات الأمامية. وفي هذا الدليل، ستتعرّف على كيفية بناء موقع وصفات متعدد الصفحات باستخدام HTML وCSS فقط، من دون الاعتماد على أي Frameworks أو مكتبات خارجية معقدة.

الفكرة الأساسية في هذا المشروع هي إنشاء موقع متكامل يحتوي على عدة صفحات مترابطة، مثل الصفحة الرئيسية، وصفحة من نحن، وصفحة الوصفات، وصفحة التواصل، وصفحات التصنيفات، بالإضافة إلى صفحة وصفة مفردة. هذا النوع من المشاريع ممتاز لفهم بنية الصفحات الثابتة، وآلية تنظيم الملفات، وبناء واجهات متجاوبة مناسبة للشاشات المختلفة.

ما الذي ستتعلمه من هذا المشروع؟

• إنشاء موقع متعدد الصفحات باستخدام HTML وCSS فقط.
• بناء Navbar متجاوب يعمل على الشاشات الصغيرة والكبيرة.
• تنظيم ملفات المشروع بين الصفحات والأنماط والصور والأصول.
• تصميم أقسام مثل Hero Section وبطاقات الوصفات والتصنيفات.
• تطبيق Media Queries لإنشاء تصميم متوافق مع مختلف الأجهزة.
• إضافة لمسات تفاعلية بسيطة باستخدام JavaScript لتبديل عناصر القائمة.

هيكل مشروع موقع الوصفات

يعتمد المشروع على بنية واضحة تسهّل تطوير الصفحات وإعادة استخدام المكونات بصرياً، حتى في غياب أنظمة القوالب أو المكوّنات. ستجد عادةً مجلدات أساسية مثل:

• مجلد assets للصور والملفات المساعدة.
• مجلد css لملفات التنسيق.
• عدة ملفات HTML تمثل صفحات الموقع.
• ملف JavaScript بسيط للوظائف التفاعلية الأساسية.

ومن المهم فهم أن العمل باستخدام HTML وCSS فقط يعني أنك ستحتاج أحياناً إلى تكرار أجزاء مشتركة مثل شريط التنقل أو التذييل داخل كل صفحة يدوياً، لأن المشروع لا يستخدم نظام components أو templates كما يحدث في React أو Gatsby.

الصفحات الأساسية داخل الموقع

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

• الصفحة الرئيسية Home
• صفحة من نحن About
• صفحة التصنيفات Tags
• صفحة قالب التصنيف Tag Template
• صفحة الوصفات Recipes
• صفحة التواصل Contact
• صفحة وصفة مفردة Single Recipe
• صفحة الخطأ 404

إعداد الصفحة وربط الملفات الأساسية

قبل البدء بتصميم أي جزء، يجب تجهيز الصفحة بربط الملفات اللازمة مثل favicon، وملف normalize.css، ومكتبة Font Awesome للأيقونات، وملف التنسيقات الرئيسي.

<link rel="icon" href="./assets/favicon.ico" />
<link rel="stylesheet" href="./css/normalize.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="./css/main.css" />

استخدام normalize.css يساهم في تقليل الفروقات الافتراضية بين المتصفحات، بينما يسهّل ملف main.css تطبيق الأنماط العامة والمتكررة على جميع الصفحات.

بناء Navbar متجاوب لموقع الوصفات

الهيكل الأساسي لشريط التنقل

يُعد Navbar من أهم العناصر في هذا المشروع، لأنه يتكرر في جميع الصفحات. يتكوّن عادة من الشعار، وزر فتح القائمة للشاشات الصغيرة، وروابط التنقل الرئيسية، وزر خاص بصفحة التواصل.

<nav class="navbar">
  <div class="nav-center">
    <div class="nav-header">
      <a href="index.html" class="nav-logo">
        <img src="./assets/logo.svg" alt="Simply Recipes" />
      </a>
      <button type="button" class="btn nav-btn">
        <i class="fas fa-align-justify"></i>
      </button>
    </div>
    <div class="nav-links">
      <a href="index.html" class="nav-link">home</a>
      <a href="about.html" class="nav-link">about</a>
      <a href="tags.html" class="nav-link">tags</a>
      <a href="recipes.html" class="nav-link">recipes</a>
      <div class="nav-link contact-link">
        <a href="contact.html" class="btn">contact</a>
      </div>
    </div>
  </div>
</nav>

فكرة التصميم على الشاشات الصغيرة والكبيرة

على الشاشات الصغيرة، تظهر الروابط بشكل عمودي ويمكن إخفاؤها أو إظهارها عبر زر القائمة. أما على الشاشات الكبيرة، فتظهر الروابط أفقياً بجانب الشعار، مع محاذاة زر التواصل إلى الجهة اليمنى.

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

إظهار وإخفاء روابط القائمة باستخدام JavaScript

رغم أن المشروع يعتمد أساساً على HTML وCSS، إلا أن جزءاً بسيطاً من JavaScript يُستخدم للتحكم في فتح وإغلاق القائمة داخل الشاشات الصغيرة.

const getElement = (selector) => {
  const element = document.querySelector(selector)
  if (element) return element
  throw new Error(`Please double check your class names, there is no ${selector} class`)
}

const links = getElement('.nav-links')
const navBtn = getElement('.nav-btn')

navBtn.addEventListener('click', () => {
  links.classList.toggle('show-links')
})

هذا الكود يضيف أو يزيل الكلاس show-links عند النقر على الزر، وهو ما يسمح بإظهار الروابط أو إخفائها بسلاسة.

إنشاء البنية العامة لجميع الصفحات

من الجيد توحيد الهيكل العام للصفحات حتى تبقى تجربة التصفح متناسقة. لذلك يتم اعتماد العناصر التالية في كل صفحة:

• Navbar في الأعلى
• عنصر main لاحتواء المحتوى
• Footer في الأسفل

<main class="page">
  <h1>page title</h1>
</main>

<footer class="page-footer">
  <p>&copy; <span id="date"></span> <span class="footer-logo">Simply Recipes</span> Built by Coding Addict</p>
</footer>

ولجعل سنة حقوق النشر ديناميكية، يمكن استخدام الكود التالي:

const date = getElement('#date')
const currentYear = new Date().getFullYear()
date.textContent = currentYear

تصميم Hero Section في الصفحة الرئيسية

يُستخدم Hero Section لعرض رسالة الموقع الرئيسية بشكل بصري جذاب. في هذا المشروع، يتكوّن من صورة خلفية مع طبقة داكنة خفيفة ونص في المنتصف.

<header class="hero">
  <div class="hero-container">
    <div class="hero-text">
      <h1>Simply Recipes</h1>
      <h4>No fluff, just recipes</h4>
    </div>
  </div>
</header>

هذا القسم مهم من منظور UX لأنه يمنح الزائر انطباعاً سريعاً وواضحاً عن نوع المحتوى الذي يقدمه الموقع.

عرض الوصفات والتصنيفات داخل الصفحة الرئيسية

قسم التصنيفات Tags

يعرض هذا الجزء مجموعة من التصنيفات التي يمكن للمستخدم استكشافها، مثل Beef وBreakfast وCarrots وFood. كل تصنيف يقود إلى صفحة مخصصة لعرض وصفاته.

بطاقات الوصفات Recipe Cards

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

<a href="single-recipe.html" class="recipe">
  <img src="./assets/recipes/recipe-1.jpeg" class="img recipe-img" alt="food" />
  <h5>Buttermilk Pancakes</h5>
  <p>Prep : 15min | Cook : 5min</p>
</a>

هذه الطريقة ممتازة لتنظيم المحتوى الغذائي أو التعليمي أو حتى المنتجات، لأنها تمنح المستخدم نظرة سريعة قبل الانتقال إلى التفاصيل.

الصفحات الثانوية في موقع الوصفات

صفحة Recipes

تعرض هذه الصفحة جميع الوصفات ضمن نفس أسلوب البطاقات الموجود في الصفحة الرئيسية، ولكن من دون قسم Hero. وهي مناسبة لتجميع المحتوى في مكان مخصص يسهل تصفحه.

صفحة Tag Template

تُستخدم لعرض الوصفات المرتبطة بتصنيف معين. في النسخة الثابتة من المشروع، تكون القيم مكتوبة يدوياً، لكن في المشاريع الديناميكية يمكن جلب البيانات من قاعدة بيانات أو CMS.

صفحة About

تحتوي على نبذة تعريفية عن الموقع أو الكاتب، وتعرض قسماً تعريفياً مع صورة، بالإضافة إلى مجموعة وصفات مميزة أسفل الصفحة.

صفحة Contact

تتضمن معلومات تواصل ونموذج Form بسيط لإرسال الرسائل. ورغم أنه ثابت في هذا المشروع، إلا أنه يهيئك لاحقاً لربطه بخدمات معالجة النماذج.

صفحة Tags

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

صفحة 404

وجود صفحة خطأ مخصصة يعزز جودة تجربة المستخدم ويمنع وصوله إلى صفحة فارغة أو غير مفهومة عند إدخال رابط غير موجود.

تصميم صفحة وصفة مفردة Single Recipe

تُعد هذه الصفحة من أهم أجزاء المشروع، لأنها تمثل العرض التفصيلي للوصفة. تتضمن عادة:

• صورة رئيسية للوصفة
• اسم الطبق
• وصفاً قصيراً
• معلومات التحضير والطهي وعدد الحصص
• التصنيفات المرتبطة
• خطوات التنفيذ
• المكونات
• الأدوات اللازمة

<section class="recipe-hero">
  <img src="./assets/recipes/recipe-4.jpeg" class="img recipe-hero-img" alt="pancakes" />
  <article class="recipe-info">
    <h2>Banana Pancakes</h2>
    <p>وصفة بسيطة وسريعة مناسبة لوجبة الفطور وتُحضّر بمكونات متوفرة بسهولة.</p>
  </article>
</section>

معلومات التحضير والأيقونات

يساعد استخدام أيقونات Font Awesome في توضيح المعلومات بسرعة، مثل مدة الإعداد، ووقت الطهي، وعدد الحصص.

المكونات والخطوات والأدوات

يمكن تقسيم الجزء السفلي من الصفحة إلى عمودين: الأول للتعليمات، والثاني للمكونات والأدوات. هذا الترتيب يجعل الوصفة أكثر وضوحاً وسهولة في القراءة، خاصة على الأجهزة اللوحية والمكتبية.

أهمية Media Queries في هذا المشروع

من أبرز نقاط القوة في المشروع أنه يدرّبك على التفكير في التصميم المتجاوب منذ البداية. يتم الانتقال بين تخطيطات مختلفة بحسب عرض الشاشة، مثل:

1. عمود واحد على الهواتف الصغيرة.
2. عمودان في بعض أقسام العرض على الشاشات المتوسطة.
3. ثلاثة أعمدة في بطاقات الوصفات أو التصنيفات على الشاشات الكبيرة.

هذا الأسلوب يجعل الموقع أكثر احترافية ويضمن تجربة تصفح متوازنة من منظور SEO وتجربة المستخدم معاً، لأن سهولة الاستخدام وتحسن السلوك داخل الصفحة قد ينعكسان إيجابياً على الأداء العام.

نصائح SEO عند نشر موقع وصفات مبني بـ HTML وCSS

• استخدم عنوان صفحة واضحاً وفريداً لكل ملف HTML.
• احرص على كتابة Meta Description جذاب ومختصر.
• استخدم نصوص alt دقيقة لكل صورة.
• اجعل العناوين h2 وh3 منطقية ومتسلسلة.
• تجنب تكرار المحتوى النصي نفسه في جميع الصفحات.
• حافظ على سرعة تحميل الصور والأصول.
• استخدم روابط داخلية واضحة بين الوصفات والتصنيفات.

لماذا هذا النوع من المشاريع مفيد للمبتدئين؟

لأنك تتعامل فيه مباشرة مع أساسيات تطوير الويب من دون طبقات تجريد إضافية. ستفهم كيف تُبنى الصفحة من الصفر، وكيف تتفاعل العناصر مع بعضها، وكيف تُدار المسافات والمحاذاة والشبكات والاستجابة للشاشات المختلفة. هذا الفهم مهم جداً قبل الانتقال إلى أطر عمل مثل React أو Next.js.

الخلاصة التقنية

يُعد بناء Recipe Website باستخدام HTML وCSS مشروعاً عملياً ممتازاً لترسيخ مفاهيم التخطيط، والتصميم المتجاوب، وتنظيم الملفات، وإعادة استخدام البنية البصرية عبر عدة صفحات. ورغم أن المشروع ثابت وبسيط من ناحية المنطق البرمجي، فإنه يضع أساساً قوياً لأي مطور يريد الانتقال لاحقاً إلى مشاريع ديناميكية أكثر تقدماً باستخدام JavaScript frameworks أو static site generators.