مروری بر دوره
در این دوره، هنرجو علاوه بر یادگیری کامل مفاهیم پیشرفته CSS، با اصول طراحی واکنشگرا (Responsive) آشنا میشود و یاد میگیرد چگونه وبسایتهایی بسازد که در موبایل، تبلت و دسکتاپ بهدرستی و زیبا نمایش داده شوند. از مباحث پایه تا تکنیکهای حرفهای مانند Media Query، چیدمانهای رسپانسیو با Flexbox و Grid، ساخت ناوبری موبایلی و طراحی صفحات واکنشگرا، همه بهصورت کاربردی و پروژهمحور آموزش داده میشوند تا دانشجو بتواند یک رابط کاربری کامل و استاندارد را بهتنهایی پیادهسازی کند.
در ادامه، وارد دنیای Bootstrap میشویم؛ فریمورکی قدرتمند که سرعت توسعه صفحات وب را چند برابر میکند. هنرجو با سیستم گرید ۱۲ ستونی، کامپوننتهای آماده، کلاسهای Utility و روشهای سفارشیسازی Bootstrap آشنا خواهد شد و در نهایت یک وبسایت چندصفحهای کاملاً واکنشگرا را با این فریمورک پیادهسازی میکند. این دوره کاملاً عملی طراحی شده و هر هنرجو در پایان، یک پروژه واقعی و قابل ارائه در رزومه یا گیتهاب خواهد داشت؛ نقطه شروعی مناسب برای ورود حرفهای به حوزه فرانتاند.
.
آنچه خواهید آموخت
🌐 CSS پیشرفته و طراحی واکنشگرا
- مفاهیم پایه طراحی واکنشگرا (Responsive Web Design)
- تفاوت Mobile First و Desktop First
- کار با واحدهای اندازهگیری مدرن (px, %, em, rem, vw, vh)
- نوشتن Media Query و انتخاب Breakpoint مناسب
- طراحی تصاویر، ویدیوها و المانهای واکنشگرا
- چیدمان واکنشگرا با Flexbox و CSS Grid
- ساخت منو و ناوبری موبایلی (Hamburger Menu)
- مدیریت فاصلهدهی، اندازه متن و چیدمان در نمایشگرهای مختلف
- تست واکنشگرایی با DevTools مرورگر
- اجرای یک پروژه کامل Landing Page واکنشگرا
🎨 آموزش کامل Bootstrap
- آشنایی با Bootstrap و نحوه نصب (CDN و نسخه محلی)
- مفاهیم Container، Row و Col
- سیستم گرید ۱۲ ستونی و Breakpointهای xs تا xl
- استفاده از Flex Utility برای ساخت چیدمان سریع
- کار با کامپوننتها: Button، Navbar، Card، Carousel، Modal، Alerts، Forms
- استفاده از کلاسهای Utility مانند Margin، Padding، Display، Shadow، Border و…
- سفارشیسازی Bootstrap و تغییر رنگها و متغیرها
- طراحی وبسایت کامل چندصفحهای با Bootstrap
- پیادهسازی منوی واکنشگرا و اسلایدر
- بهینهسازی کامل ریسپانسیو با Breakpointهای بوتاسترپ
سرفصل ها
سرفصل طراحی رسپانسیو (Responsive Web Design)
1. مقدمه و مفاهیم پایه
- طراحی واکنشگرا چیست؟
- تفاوت طراحی واکنشگرا با طراحی تطبیقی
- Mobile First vs Desktop First
- واحدهای اندازهگیری: px، %، em، rem، vw، vh
2. Media Queries
- ساختار نوشتن Media Query
- Breakpoints استاندارد برای موبایل، تبلت و دسکتاپ
- ترکیب چندین Media Query در یک پروژه
- بهترین روشها برای انتخاب Breakpoint مناسب
- 3. تصاویر و المانهای واکنشگرا
تصاویر Responsive (max-width, object-fit) - پسزمینه واکنشگرا
- ویدئو واکنشگرا
4. چیدمان واکنشگرا
- استفاده از Flexbox به صورت واکنشگرا
- استفاده از Grid در واکنشگرایی
- ستونبندی واکنشگرا بدون فریمورک
- مدیریت فضای خالی، اندازه متن و فاصلهدهی برای دستگاهها
- 5. Navigation و منوهای واکنشگرا
- طراحی هدر و ناوبری موبایلی
- منوی همبرگری (Hamburger Menu)
- تکنیکهای نمایش/مخفی کردن منو
6. تمرین و پروژه عملی
- طراحی کامل صفحه Landing Page واکنشگرا
- بهینهسازی برای انواع نمایشگرها
- تست در ابزارهای DevTools مرورگر
سرفصل کامل Bootstrap (بوت استرپ)
1. معرفی Bootstrap
- Bootstrap چیست و چرا استفاده میشود؟
- آشنایی با CDN و نصب محلی
- مفاهیم Container، Row، Col
2. سیستم گرید (Grid System)
- کار با 12 ستون بوتاسترپ
- ایجاد Layout واکنشگرا
- Breakpointهای xs, sm, md, lg, xl
- چینشهای Flex Utility
3. کامپوننتهای آماده (Components)
- Button & Button Group
- Navbar
- Cards
- Carousel
- Modal
- Alerts
- Forms و Form Controls
4. کلاسهای Utility
- Margin & Padding
- Display
- Text & Background
- Shadow و Border
- Positioning
- Sizing
5. سفارشیسازی در Bootstrap
- Override کردن کلاسها
- تغییر رنگها و متغیرها
- استفاده از SASS در Bootstrap
6. پروژه عملی با Bootstrap
- طراحی یک وبسایت کامل چندصفحهای
- پیادهسازی منوی ریسپانسیو
- ساخت اسلایدر، کارتها و بخشهای مختلف
- ریسپانسیو کامل با کمک Breakpoints بوتاسترپ
مخاطبان دوره
- علاقهمندان ورود به دنیای طراحی وب و فرانتاند
- افرادی که دوره HTML را گذراندهاند و میخواهند سطح مهارت خود را ارتقا دهند
- طراحان وب مبتدی که به دنبال یادگیری طراحی واکنشگرا هستند
- دانشجویان IT و کامپیوتر که به دنبال ساخت نمونهکار حرفهایاند
- برنامهنویسانی که میخواهند ظاهر پروژههای خود را استاندارد و حرفهای کنند
- فریلنسرهایی که قصد دارند صفحات مدرن و ریسپانسیو طراحی کنند
- افرادی که میخواهند بدون نیاز به دانش پیشرفته برنامهنویسی، وبسایت بسازند
- کسانی که میخواهند مهارت کار با Bootstrap را برای ورود به بازار کار یاد بگیرند
به عنوان اولین نفر، نظر خود را بنویسید!