Web II: Responsive CSS, Bootstrap
Web II: Responsive CSS, Bootstrap
طراحی واکنش‌گرا با Flexbox، Grid و فریم‌ورک Bootstrap.
درباره‌ی این دوره
ادامه‌ی مسیر طراحی وب با تمرکز بر Responsive Design و یادگیری Bootstrap. در دنیای امروز که بیش از نیمی از ترافیک وب از موبایل می‌آید، تسلط بر Responsive یک ضرورت است.
محتوا شامل اصول Mobile-first Design، Media Query، CSS Grid (یکی از قدرتمندترین ابزارهای layout)، فریم‌ورک Bootstrap (Grid System، کامپوننت‌ها، utilities)، و کاستوم‌سازی Bootstrap با Sass است.
تمرین‌ها روی پروژه‌های responsive واقعی انجام می‌شود. خروجی دوره: توانایی ساخت سایت‌های کاملاً responsive از موبایل تا دسکتاپ.
سرفصل دوره
۵ فصل · ۲۳ سرفصل
در این دوره، با اصول طراحی ریسپانسیو و ساخت وب‌سایت‌های سازگار با موبایل، تبلت و دسکتاپ آشنا می‌شوید. یاد می‌گیرید چگونه با استفاده از CSS و فریم‌ورک Bootstrap، رابط‌های کاربری حرفه‌ای و استاندارد طراحی کنید. مباحث دوره به‌صورت عملی و پروژه‌محور آموزش داده می‌شود تا مفاهیم به‌خوبی درک شوند. این دوره مناسب افرادی است که با HTML و CSS آشنایی اولیه دارند و می‌خواهند طراحی مدرن‌تری انجام دهند. در پایان دوره، توانایی پیاده‌سازی صفحات ریسپانسیو و استفاده مؤثر از Bootstrap را خواهید داشت.
۱مبانی طراحی ریسپانسیو۵ سرفصل
- مفهوم Responsive Design و Mobile First
- آشنایی با Breakpoint ها
- استفاده از Media Query در CSS
- واحدهای نسبی (٪، em، rem، vw، vh)
- تصاویر و فونت‌های ریسپانسیو
۲Flexbox و چیدمان ریسپانسیو۴ سرفصل
- معرفی Flexbox
- جهت‌دهی و تراز عناصر
- ساخت لایه‌بندی‌های منعطف
- پیاده‌سازی Layout ریسپانسیو با Flexbox
۳آشنایی با Bootstrap۵ سرفصل
- Bootstrap چیست و چرا استفاده می‌شود؟
- نصب و راه‌اندازی Bootstrap
- ساختار Grid System
- کار با Container، Row و Column
- Breakpoint های بوت‌استرپ
۴کامپوننت‌های Bootstrap۵ سرفصل
- دکمه‌ها و آیکن‌ها
- Navbar و منوهای ریسپانسیو
- Card ها و فرم‌ها
- Modal، Alert و Carousel
- Utility Class ها
۵شخصی‌سازی و ترکیب CSS با Bootstrap۴ سرفصل
- Override کردن استایل‌های Bootstrap
- شخصی‌سازی رنگ‌ها و فونت‌ها
- استفاده هم‌زمان از CSS و Bootstrap
- بهینه‌سازی طراحی
پروژه
پروژه عملی
- طراحی یک وب‌سایت ریسپانسیو کامل
- پیاده‌سازی نسخه موبایل و دسکتاپ
- بررسی و رفع مشکلات ریسپانسیو
- نکات حرفه‌ای طراحی
نحوه‌ی برگزاری
محیط آموزشی پیشرفته و پویا
کلاس‌های زنده‌ی تعاملی به‌همراه ضبط جلسات.
دوره‌ی فشرده‌ی پروژه‌محور برای ورود سریع به بازار کار.
دوره‌های مرتبط در همین رشته آموزشی
SEO
SEO
بهینه‌سازی موتورهای جستجو برای رتبه‌گرفتن در نتایج گوگل.
Web I: HTML, CSS
Web I: HTML, CSS
ساختاردهی و استایل صفحات وب با HTML و CSS از پایه.
Web III: Javascript, Jquery
Web III: Javascript, Jquery
تعامل و دینامیک‌سازی صفحات وب با JavaScript و jQuery.