درس هشتم: پروژه نهایی و یکپارچهسازی
درس هشتم: پروژه نهایی و یکپارچهسازی
در این درس پایانی، از تمام مهارتهای خود برای ساخت یک صفحه وب کامل استفاده میکنیم. از منوی ناوبری تا فوتر، همه چیز را با اصول بوتاسترپ ۵ پیاده خواهیم کرد.
۱. آناتومی یک صفحه وب استاندارد
برای اینکه کدهای شما تمیز و قابل نگهداری باشد، باید صفحه را به بخشهای منطقی تقسیم کنید. هر بخش معمولاً در یک تگ <section> قرار میگیرد:
- 🔝 Navbar: منوی اصلی (درس ۶)
- 🚀 Hero Section: بخش معرفی اولیه با یک عنوان بزرگ (درس ۲) و دکمه CTA (درس ۳)
- 🛠️ Features: نمایش خدمات در قالب سیستم گرید (درس ۱) و کارتها (درس ۳)
- 📩 Contact: فرم ارتباط با ما (درس ۴)
- 🐾 Footer: بخش پایانی با اطلاعات تماس و کپیرایت
۲. ترفند نهایی: ترتیب نمایش (Order)
یکی از قابلیتهای پیشرفته بوتاسترپ، تغییر ترتیب المانها در موبایل نسبت به دسکتاپ است. مثلاً میخواهید در دسکتاپ عکس سمت راست باشد، اما در موبایل عکس اول دیده شود.
کلاسهای کمکی:
.order-first: المان را به ابتدای صف میبرد..order-last: المان را به انتهای صف میبرد..order-md-2: ترتیب را فقط در سایز تبلت به بعد تغییر میدهد.۳. چکلیست نهایی قبل از آپلود
قبل از اینکه پروژه خود را تمام شده بدانید، این موارد را بررسی کنید:
| مورد بررسی | وضعیت |
|---|---|
| تست دکمه همبرگری در سایز موبایل | ✅ |
تراز بودن عمودی کارتها با h-100 | ✅ |
| عملکرد صحیح Modalها و دکمههای بستن | ✅ |
| بررسی فاصلههای بیرونی (Margin) برای عدم چسبندگی بخشها | ✅ |
🏆 پروژه فارغالتحصیلی: طراحی صفحه “خدمات ما”
یک صفحه وب تکصفحهای (Single Page) بسازید که شامل موارد زیر باشد:
- یک Navbar ثابت در بالا (Fixed-top) با تم تیره.
- بخش Hero شامل یک متن خوشآمدگویی بزرگ (Display 1) و یک دکمه که با کلیک، یک Modal راهنما باز کند.
- بخش خدمات شامل ۳ کارت در یک ردیف. هر کارت باید دارای سایه (Shadow) و لبههای گرد باشد.
- یک فوتر ساده با پسزمینه خاکستری تیره و لینکهای شبکههای اجتماعی که با Flexbox در مرکز چیده شدهاند.
تبریک نهایی: شما حالا ابزارهای لازم برای تبدیل شدن به یک طراح رابط کاربری (UI) با استفاده از قدرتمندترین فریمورک دنیا را دارید.
دوره جامع بوتاسترپ ۵ به پایان رسید!
شما با موفقیت ۸ درس فشرده و تخصصی را پشت سر گذاشتید. حالا نوبت تمرین و تکرار است تا این کلاسها در ذهن شما ماندگار شوند.
دریافت گواهینامه ذهنی!