بعد از یادگیری تگ های HTML و چند ویژگی CSS، قدم بعدی ساختن صفحه ای است که هم روی موبایل و هم روی نمایشگر بزرگ خوانا باشد. در این تمرین، یک صفحه معرفی خدمات با سه کارت می سازیم؛ بدون کتابخانه و بدون JavaScript. نتیجه تمرین باید در عرض کوچک تک ستونی باشد و وقتی فضای کافی دارد، کارت ها کنار هم قرار بگیرند. این پروژه ادامه عملی نقشه راه طراحی سایت و ساخت اولین صفحه با HTML و CSS است.
پیش نیاز و خروجی تمرین
اگر می توانید یک فایل HTML بسازید، به آن CSS اضافه کنید و صفحه را در مرورگر باز کنید، آماده اید. یک پوشه به نام responsive-cards بسازید و دو فایل index.html و style.css در آن قرار دهید. متن و کارت ها نمونه آموزشی اند؛ اطلاعات یک کسب وکار واقعی یا فرمی که داده ارسال کند در این تمرین نداریم.
چهار معیار پایان کار را یادداشت کنید: متن بدون بزرگ نمایی خوانده شود؛ صفحه اسکرول افقی نداشته باشد؛ ترتیب تیترها روشن باشد؛ لینک ها با صفحه کلید قابل انتخاب باشند. فقط شبیه شدن ظاهر به یک تصویر، معیار کافی نیست.
مرحله اول: ساختار HTML
کد زیر را در index.html قرار دهید. ویژگی viewport باعث می شود مرورگر موبایل صفحه را با عرض دستگاه نمایش دهد. زبان و جهت صفحه هم برای محتوای فارسی مشخص شده اند. فایل CSS از همان پوشه خوانده می شود.
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>تمرین کارت های واکنش گرا</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<h1>سه قدم برای شروع طراحی سایت</h1>
<p>یک موضوع انتخاب کنید، صفحه بسازید و نتیجه را بررسی کنید.</p>
<div class="cards">
<article class="card">
<h2>ساختار صفحه</h2>
<p>عنوان، متن و لینک ها را با HTML مشخص کنید.</p>
</article>
<article class="card">
<h2>چیدمان منعطف</h2>
<p>فاصله ها و ستون ها را با CSS تنظیم کنید.</p>
</article>
<article class="card">
<h2>آزمون نتیجه</h2>
<p>صفحه را در اندازه های مختلف بررسی کنید.</p>
<a href="#checks">معیارهای بررسی</a>
</article>
</div>
<section id="checks">
<h2>بررسی نهایی</h2>
<p>خوانایی، اسکرول افقی و انتخاب لینک با Tab را بررسی کنید.</p>
</section>
</main>
</body>
</html>مرحله دوم: CSS از موبایل به نمایشگر بزرگ
این کد را در style.css بنویسید. چیدمان اولیه یک ستون دارد. در عرض کافی، media query سه ستون هم اندازه می سازد. عدد 48rem در این نمونه یک نقطه شروع آموزشی است؛ نقطه تغییر چیدمان را بر اساس جا شدن محتوای خودتان انتخاب کنید.
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Tahoma, sans-serif;
line-height: 1.8;
color: #193b34;
background: #f4f7f3;
}
.container { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.card { min-width: 0; padding: 1.5rem; background: white; border-radius: 1rem; }
.card p { overflow-wrap: anywhere; }
a { color: #126f60; }
a:focus-visible { outline: 3px solid #126f60; outline-offset: 4px; }
@media (min-width: 48rem) {
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}این چند خط دقیقاً چه می کنند؟
box-sizing باعث می شود padding در محاسبه عرض عنصر لحاظ شود. container فضای اطراف را حفظ می کند و در صفحه عریض، بیش از حد کشیده نمی شود. Grid مسئول ستون هاست و gap فاصله کارت ها را می سازد. استفاده از minmax با حداقل صفر کمک می کند محتوای طولانی یک ستون، عرض کل چیدمان را به هم نزند. در این تمرین هیچ اندازه ثابتی برای ارتفاع کارت تعیین نشده، چون ارتفاع باید با متن تغییر کند.
مرحله سوم: آزمون، نه فقط تماشا
- فایل را باز کنید و عرض صفحه را روی حدود 320، 390 و 1280 پیکسل بررسی کنید.
- به یکی از کارت ها یک جمله طولانی اضافه کنید؛ کارت نباید متن را ببرد یا صفحه را عریض کند.
- با کلید Tab به لینک برسید؛ علامت فوکوس باید دیده شود.
- بزرگ نمایی را افزایش دهید؛ محتوا باید همچنان قابل خواندن و دسترسی باشد.
- کد را بدون نگاه کردن به نمونه، با دو کارت تازه بازسازی کنید و دلیل انتخاب هر ویژگی CSS را توضیح دهید.
اشتباه های رایج
تعیین عرض ثابت برای همه کارت ها، مخفی کردن اسکرول افقی بدون پیدا کردن علت و انتخاب نقطه شکست فقط بر اساس نام دستگاه، مسئله اصلی را پنهان می کند. اگر صفحه بیرون می زند، ابتدا عرض عنصرها، متن های طولانی و فاصله ها را بررسی کنید. برای مشاهده رفتار واقعی، آزمایش روی یک موبایل هم مفید است؛ شبیه ساز مرورگر همه تفاوت های دستگاه را پوشش نمی دهد.
تمرین تکمیلی و قدم بعدی
یک تصویر به کارت اول اضافه کنید و آن را طوری تنظیم کنید که از عرض کارت بزرگ تر نشود. سپس یک چیدمان دو ستونی برای عرض میانی بسازید. نتیجه را همراه توضیح مسئله و بررسی ها ذخیره کنید تا بعدها در نمونه کار خود استفاده کنید. برای برنامه تمرین پیوسته، راهنمای تمرین کنار کلاس برنامه نویسی را بخوانید؛ دوره های موجود را در فهرست دوره های آکادمی بررسی کنید.