پروژه: سایت کاملاً responsive — ترم ۴ آیرو

در این فصل چه می‌سازی#

این آخرین فصلِ ترمِ Responsive است و مفهومِ تازه‌ای ندارد. کارِ امروز ترکیب است: هر ابزاری که این ترم یاد گرفتی — @media، تصویرِ responsive، تایپوگرافیِ سیال، منوی بازشو و dark mode — را در یک صفحهٔ واقعی کنارِ هم می‌گذاری. یک صفحهٔ معرفیِ کوچک برای «تاروپود» که از موبایل تا دسکتاپ درست می‌ماند و خودش با تمِ سیستم، روشن و تیره می‌شود.

طرحِ یک صفحه در سه عرض: موبایل با منوی جمع‌شده و کارت‌های تک‌ستونه، تبلت، و دسکتاپ با منوی افقی و کارت‌های سه‌ستونه؛ گوشه‌ای یک نشانِ روشن/تیره

آخر این فصل می‌توانی:

یک صفحهٔ کامل را mobile-first بچینی که در دسکتاپ باز شود
منوی بازشو، تصویرِ سیال، تایپوگرافیِ clamp() و dark mode را در یک صفحه ترکیب کنی
بگویی چرا شروع از موبایل، از شروع از دسکتاپ ساده‌تر است

قبل از شروع#

از فصل ۲: @media و mobile-first. از فصل ۳: تصویرِ max-width/aspect-ratio. از فصل ۴: clamp().
از فصل ۶: منوی <details>/<summary>. از فصل ۷: theme با token و prefers-color-scheme.

فقط یک مرورگر لازم داری، یا همین آزمایشگاه.

۱. اسکلت و theme#

اول اسکلتِ semantic را می‌گذاریم — <header>، <main>، <footer> — و بالای CSS همان theme با token از فصل ۷، با نسخهٔ تیره‌اش. این پایه است؛ همه‌چیز رنگش را از این token ها می‌گیرد تا dark mode مجانی به‌دست بیاید.

۲. سرصفحه و منوی responsive#

سرصفحه با flexbox لوگو را یک سر و منو را سرِ دیگر می‌گذارد، و منو همان <details>/<summary> فصل ۶ است: در موبایل یک دکمهٔ «منو»، و در @media (min-width: 700px) یک ردیفِ افقی.

۳. hero: تصویرِ سیال و تیترِ سیال#

بخشِ اصلی یک تصویر، یک تیتر و یک دکمه دارد. تصویر با max-width و aspect-ratio (فصل ۳) با عرضِ صفحه بالا و پایین می‌شود بی‌آنکه صفحه بپرد، و تیتر با clamp() (فصل ۴) روی موبایل کوچک و روی دسکتاپ بزرگ می‌شود — بدونِ حتی یک @media.

۴. کارت‌ها: از یک ستون تا سه ستون#

سه کارتِ درس داریم. حالا بیا یک اشتباهِ رایج را عمداً مرتکب شویم. چون در ذهنت صفحه را روی دسکتاپ می‌بینی، وسوسه می‌شوی مستقیم سه ستون بنویسی:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

روی دسکتاپ عالی است. حالا پنجره را به عرضِ موبایل ببر: سه ستون سرِ جا می‌مانند و به هم فشرده می‌شوند، متن‌ها باریک و درهم می‌شوند و کارت‌ها له می‌شوند.

🔧 اگر کار نکرد: این همان درسِ mobile-first فصل ۲ است. تو از دسکتاپ شروع کردی؛ سه ستون برای صفحهٔ کوچک زیادی است. از موبایل شروع کن: پیش‌فرض را یک ستون بگذار (که همیشه جا می‌شود)، و سه ستون را فقط داخلِ @media (min-width: 700px) بخواه. این‌طور صفحهٔ کوچک ساده می‌ماند و صفحهٔ بزرگ باز می‌شود، نه برعکس.

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 700px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

✅ چک کن: حالا در موبایل کارت‌ها زیرِ هم و راحت‌اند، و وقتی پنجره از 700px رد می‌شود، سه‌تایی کنارِ هم می‌روند. تمِ سیستمت را هم تیره کن و ببین کلِ صفحه — سرصفحه، کارت‌ها، پاصفحه — با هم تیره می‌شود و خوانا می‌ماند.

۵. کد کاملِ صفحه#

اول index.html:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>تاروپود — خودآموز HTML و CSS</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="site-header">
      <a class="logo" href="#">تاروپود</a>
      <nav>
        <details class="menu">
          <summary>منو</summary>
          <ul>
            <li><a href="#lessons">درس‌ها</a></li>
            <li><a href="#about">درباره</a></li>
            <li><a href="#contact">تماس</a></li>
          </ul>
        </details>
      </nav>
    </header>

    <main class="page">
      <section class="hero">
        <img class="hero-img" src="cover.jpg" alt="طرحی از یک صفحهٔ وب که مثلِ پارچه از تار و پود بافته می‌شود" width="1280" height="720">
        <h1>وب را با دستِ خودت بباف</h1>
        <p class="tagline">از ساختار تا ظاهر، قدم‌به‌قدم و در همین مرورگر.</p>
        <a class="btn" href="#lessons">شروع کن</a>
      </section>

      <section id="lessons" class="cards">
        <article class="card">
          <h2>ساختار</h2>
          <p>با HTML اسکلتِ معنادار صفحه را می‌سازی.</p>
        </article>
        <article class="card">
          <h2>ظاهر</h2>
          <p>با CSS رنگ، فاصله و چیدمان را کنترل می‌کنی.</p>
        </article>
        <article class="card">
          <h2>responsive</h2>
          <p>یک صفحه که از موبایل تا دسکتاپ درست می‌ماند.</p>
        </article>
      </section>
    </main>

    <footer class="site-footer">
      <p>ساختهٔ تو — ۱۴۰۵</p>
    </footer>
  </body>
</html>

و styles.css:

/* styles.css */
* {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;
  --bg: #f6edda;
  --card: #ffffff;
  --ink: #2c2114;
  --muted: #6b6150;
  --brand: #2a6b93;
  --line: #d8ccae;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181f;
    --card: #1e2530;
    --ink: #f2f4f8;
    --muted: #aab3c5;
    --line: #2c3644;
  }
}

body {
  margin: 0;
  font-family: Tahoma, sans-serif;
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.9;
}

/* --- sarsafhe va navbari (fasl 6) --- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background-color: var(--card);
  border-block-end: 1px solid var(--line);
}

.logo {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--brand);
}

.menu summary {
  width: max-content;
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 700;
}

.menu ul {
  list-style: none;
  margin-block: 10px 0;
  margin-inline: 0;
  padding: 8px;
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.menu a {
  display: block;
  padding: 10px;
  border-radius: 6px;
  color: var(--ink);
}

/* --- mohtava --- */
.page {
  max-width: 960px;
  margin-inline: auto;
  padding: 20px;
}

.hero {
  text-align: center;
  padding-block: 24px;
}

/* tasvir-e responsive (fasl 3): ba soton ba-la va pa-in mishavad, bedun-e paresh */
.hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  background-color: var(--brand);
}

/* typographi-ye sayyal (fasl 4) */
.hero h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  margin-block: 18px 8px;
}

.tagline {
  color: var(--muted);
  margin-block: 0 18px;
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  background-color: var(--brand);
  color: #ffffff;
  font-weight: 700;
}

/* --- gallery-ye kart-ha: mobile-first yek soton --- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-block: 24px 0;
}

.card {
  padding: 20px;
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.card h2 {
  margin-block: 0 8px;
  color: var(--brand);
}

.card p {
  margin: 0;
  color: var(--muted);
}

.site-footer {
  padding: 24px 20px;
  text-align: center;
  color: var(--muted);
  border-block-start: 1px solid var(--line);
}

/* --- dar safheye pahn (fasl 2): navbar radifi + kart-ha se soton --- */
@media (min-width: 700px) {
  .menu ul {
    display: flex;
    gap: 6px;
    padding: 6px;
  }

  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

طرحِ سیمیِ صفحهٔ نهایی: سرصفحه با لوگو و منو، یک hero با تصویر و تیتر و دکمه، یک ردیفِ سه‌کارتی، و پاصفحه

✅ چک کن: صفحهٔ کامل را در دو عرض ببین. در موبایل: منوی جمع‌شده، تصویر و کارت‌ها زیرِ هم. در دسکتاپ: منوی افقی، تصویرِ بزرگ‌تر و سه کارتِ کنارِ هم. تمِ سیستم را هم عوض کن و ببین همه‌چیز با هم روشن و تیره می‌شود. (تصویر یک جای‌گیرِ رنگی است؛ هر عکسی در cover.jpg بگذاری، با همین قاعده‌ها اندازه می‌گیرد و صفحه نمی‌پرد.)

🤖 با AI: صفحهٔ کاملت را به دستیار AI ات بده و بپرس «این صفحه از نظرِ responsive و دسترس‌پذیری چه ضعفی دارد؟». جوابش را یک فهرستِ کارها ببین، نه حکمِ نهایی — هر موردش را همان‌جا در آزمایشگاه و در عرض‌های مختلف با چشمِ خودت چک کن.

واژه‌های تازهٔ این فصل#

این فصل یک فصلِ پروژه‌ای است و واژهٔ فنیِ تازه‌ای ندارد؛ فقط ابزارهای این ترم — @media، تصویرِ responsive، clamp()، <details>/<summary> و dark mode — را کنارِ هم به‌کار می‌گیرد.

تمرین‌ها

اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.

در فصل بعد#

اینجا آخرِ ترمِ Responsive است. حالا سایتت از موبایل تا دسکتاپ درست می‌ماند، تصویر و متنش سیال‌اند، منوی بازشو دارد و dark mode را می‌فهمد. ولی صفحه هنوز کمی ساکت است: دکمه‌ها موقعِ نگاه‌کردن واکنشی ندارند، فرم‌ها خام‌اند، و هیچ حرکتی در کار نیست. ترمِ بعد — تعامل و جزئیات — همین را زنده می‌کند: با pseudo-class ها به حالتِ hover و focus جان می‌دهی، فرم‌ها را استایل و اعتبارسنجی می‌کنی، و با احترام به کاربر کمی حرکت اضافه می‌کنی — همه هنوز بدونِ JavaScript.

به آخر این فصل رسیدی!

اگر ساختی و جواب داد، این دکمه مال توست.