هدف پروژه
در این درس یک صفحهٔ لندینگ ساده میسازیم: یک صفحهٔ تکبخش یا چند بخش که هدفش معرفی یک محصول، خدمات یا خودتان است. از همان مفاهیم درسهای قبلی (HTML، CSS، Flexbox، ریسپانسیو) استفاده میکنیم.
ساختار HTML
یک فایل index.html با ساختار پایه بساز. بخشها را با <section> یا <header> و <main> جدا کن:
- هدر: لوگو یا نام + منوی ساده (لینکها)
- هیرو: عنوان اصلی، یک جملهٔ توضیح، دکمهٔ CTA (مثلاً «شروع کنید»)
- بخش ویژگیها یا مزایا: دو سه بلوک با عنوان و متن کوتاه
- فوتر: لینکها یا کپیرایت
استایل با CSS
یک فایل style.css بساز و به HTML وصل کن. برای چیدمان از Flexbox استفاده کن: منوی هدر با display: flex; justify-content: space-between، بلوکهای ویژگی در یک grid یا flex با gap. رنگ و فونت را یکدست انتخاب کن (مثلاً یک رنگ اصلی برای دکمه و لینکها).
ریسپانسیو
برای عرض کم (موبایل) منو را میتوانی بهصورت آیکون همبرگری درآوری یا زیر هم بچینی. با @media (min-width: 768px) برای تبلت و دسکتاپ چیدمان دو ستونه یا سه ستونه بده. از max-width و padding برای خوانایی بهتر استفاده کن.
چکلیست تحویل
- ساختار معنادار (تگهای مناسب و یک h1)
- متا title و description برای سئو
- لینکها و دکمهها با حالت hover
- نمایش درست روی موبایل و دسکتاپ
با همین مراحل میتوانی اولین صفحهٔ لندینگ خود را با طراحی وب از صفر تحویل بدهی. برای پیشرفت بعدی، جاوااسکریپت (منوی موبایل، اسکرول نرم) و سپس فریمورکها را اضافه کن.