الأساسيات

من الفكرة إلى كود يعمل فعلياً

توضح هذه المقاطع كيف تظهر مفاهيم كل مستوى داخل المشاريع الحقيقية. إنها نقاط بداية للقراءة والتحليل والتعديل والاختبار، وليست كوداً للنسخ دون فهم.

<main class="program-page">
  <section class="intro" aria-labelledby="page-title">
    <p class="eyebrow">Community learning</p>
    <h1 id="page-title">Build your first web project</h1>
    <p>Learn by making a page people can actually use.</p>
    <a class="button" href="#apply">Explore the program</a>
  </section>

  <section aria-labelledby="outcomes-title">
    <h2 id="outcomes-title">What you will practise</h2>
    <ul class="outcomes">
      <li>Structure content with HTML</li>
      <li>Shape a responsive layout with CSS</li>
      <li>Add useful behavior with JavaScript</li>
    </ul>
  </section>
</main>

<style>
  .outcomes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
  }
</style>

const questions = document.querySelectorAll("[data-faq]");

questions.forEach((question) => {
  const button = question.querySelector("button");
  const answer = question.querySelector("[data-answer]");

  button.addEventListener("click", () => {
    const isOpen = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", String(!isOpen));
    answer.hidden = isOpen;
  });
});

اقرأ ثم عدّل بنفسك

غيّر أحد المتطلبات، وتوقّع النتيجة، ثم شغّل الكود للتحقق. أثناء المراجعة، اشرح سبب اختيارك واقتراحاً للتحسين التالي.