توضیحات دوره
طراحی وب ریسپانسیو رویکردی است که امکان طراحی را در دستگاه های مختلف (موبایل، دسکتاپ، تبلت و غیره) فراهم می کند و پیشنهاد می‌کند طراحی باید بر اساس اندازه صفحه نمایش، پلت فرم و جهت گیری به رفتار کاربر پاسخ دهد.
دوره Web Design II (Responsive design with bootstrap)
در این دوره از مجتمع فنی تهران نمایندگی زعفرانیه به شما نشان می‌دهیم که چگونه می‌توانید bootstrap را با تغییر گزینه‌های سراسری و همچنین تغییر تنظیمات و سبک‌های رنگ، طرح‌بندی، محتوا، فرم‌ها، مؤلفه‌ها، کمک‌ها و ابزارهای کمکی سفارشی‌سازی کنید و گسترش دهید. در پایان این دوره شما با نحوه ایجاد طرح بندی های روان و واکنش‌گرا آَشنا خواهید شد. نحوه استفاده از سیستم‌های شبکه ای را یاد خواهید گرفت و ساختار بندی انواع محتوا را یاد می‌گیرید.
چه کسانی می‌توانند در این دوره شرکت کنند؟
هر کسی که می‌خواهد یاد بگیرد که چگونه با بوت استرپ، وب سایت های ریسپانسیو و مدرن بسازد.
هر کسی که می‌خواهد یاد بگیرد که چگونه نمونه های اولیه سریع بسازد.
دوره Responsive & Bootstrap پلی است میان طراحی وب ایستا و ساخت تجربه‌ای مدرن و انعطاف‌پذیر برای کاربران. امروزه نمایش درست وب‌سایت در تمام دستگاه‌ها – از موبایل و تبلت تا مانیتورهای بزرگ – یکی از مهم‌ترین معیارهای موفقیت هر پروژه‌ی طراحی وب محسوب می‌شود. این دوره در مجتمع فنی تهران زعفرانیه فرصتی فراهم می‌کند تا شرکت‌کنندگان در فضایی مجهز و الهام‌بخش، اصول طراحی واکنش‌گرا را به شکلی کاربردی و حرفه‌ای بیاموزند و مهارت خود را برای ورود به دنیای طراحی مدرن تقویت کنند.
در این دوره، شما یاد می‌گیرید چگونه یک طراحی را به تجربه‌ای سازگار با همه‌ی نمایشگرها تبدیل کنید. مفاهیم واکنش‌گرایی تنها محدود به تغییر اندازه عناصر نیست؛ بلکه شامل تفکر سیستماتیک در طراحی، ساختاردهی صحیح محتوا و خلق تجربه کاربری روان و منسجم در تمام دستگاه‌هاست. استفاده از Bootstrap به عنوان یک ابزار استاندارد و قدرتمند، این مسیر را ساده‌تر و ساختارمندتر می‌کند و به شما کمک می‌کند پروژه‌های وب را با سرعت و دقت بیشتری اجرا نمایید.
محیط آموزشی مجتمع فنی تهران زعفرانیه به شکلی طراحی شده که فرآیند یادگیری صرفاً به انتقال دانش محدود نباشد؛ بلکه تجربه‌ای زنده و پروژه‌محور شکل بگیرد. شرکت‌کنندگان در طول دوره با مثال‌ها و تمرین‌های عملی متعدد درگیر می‌شوند، مشکلات واقعی طراحی را حل می‌کنند و یاد می‌گیرند چگونه مهارت‌های تئوری را به راهکارهای عملی تبدیل کنند. این تجربه باعث می‌شود یادگیری مفاهیم واکنش‌گرا به شکل عمیق و ماندگار در ذهن ثبت شود و به مهارتی کاربردی در پروژه‌های واقعی تبدیل گردد.
یکی از ویژگی‌های مهم این دوره، ترکیب آموزش فنی با تفکر طراحی است. شما تنها یاد نمی‌گیرید چگونه با Bootstrap کار کنید، بلکه یاد می‌گیرید چگونه ساختار صفحات را به گونه‌ای طراحی کنید که در هر ابعادی قابل استفاده و زیبا باشند. این نگاه تحلیلی و طراحی‌محور باعث می‌شود پروژه‌های شما کیفیت بالاتری داشته باشند و تجربه کاربری جذاب‌تری برای مخاطبان ایجاد کنند.
در این مسیر، تعامل با اساتید مجرب و فضای الهام‌بخش کلاس، یادگیری را از یک فرآیند خشک به تجربه‌ای پویا و خلاقانه تبدیل می‌کند. شرکت‌کنندگان فرصت دارند سوال بپرسند، راه‌حل‌ها را بررسی کنند، ایده‌های خود را به چالش بکشند و در نهایت به تسلط واقعی بر مفاهیم برسند. همکاری با دیگر هنرجویان و انجام پروژه‌های گروهی نیز مهارت‌های ارتباطی و کار تیمی را در کنار مهارت‌های فنی تقویت می‌کند.
دوره Responsive & Bootstrap به گونه‌ای طراحی شده که افراد با سطح مهارت متفاوت بتوانند از آن بهره‌مند شوند. چه در آغاز مسیر طراحی وب باشید و چه تجربه‌ای اولیه داشته باشید، این دوره به شما کمک می‌کند درک عمیق‌تری از اصول طراحی واکنش‌گرا پیدا کنید و آن را به طور کامل در پروژه‌هایتان به کار ببرید. از ساخت صفحات ساده تا طراحی‌های پیچیده و حرفه‌ای، هر مرحله فرصتی است برای رشد و تقویت توانایی‌های شما.
در محیط آموزشی مجتمع فنی تهران زعفرانیه، تمرکز تنها روی یادگیری تکنیک نیست، بلکه ایجاد درک واقعی از کاربرد این مهارت‌ها اهمیت ویژه‌ای دارد. هنرجویان با پروژه‌های متنوع درگیر می‌شوند، با چالش‌های طراحی در دستگاه‌های مختلف مواجه می‌شوند و یاد می‌گیرند چگونه تجربه کاربری را در همه شرایط حفظ کنند. این مهارت در بازار کار امروز یکی از ارزشمندترین توانایی‌ها برای طراحان و توسعه‌دهندگان وب به شمار می‌آید.
در پایان دوره، شرکت‌کنندگان می‌توانند صفحات واکنش‌گرا طراحی کنند که بدون مشکل در دستگاه‌های مختلف نمایش داده شوند، ساختار پروژه‌ها را با Bootstrap بهینه‌سازی کنند و سرعت و کیفیت اجرای طراحی‌ها را به شکل چشمگیری افزایش دهند. این توانایی، پایه‌ای محکم برای ورود به مراحل پیشرفته‌تر طراحی وب و حتی توسعه Front-End محسوب می‌شود.
ویژگی خاص این دوره در ترکیب یادگیری مفاهیم تکنیکی با تجربه عملی و خلاقیت فردی است. شما نه تنها یاد می‌گیرید چگونه با ابزارها کار کنید، بلکه یاد می‌گیرید چگونه مانند یک طراح حرفه‌ای فکر کنید؛ این یعنی دیدن پروژه از زاویه‌ی کاربر و خلق تجربه‌ای یکپارچه و منسجم.
مجتمع فنی تهران زعفرانیه با فراهم کردن فضای آموزشی مدرن، امکانات مناسب و محیطی الهام‌بخش، یادگیری را از یک کلاس معمولی به تجربه‌ای لذت‌بخش و ماندگار تبدیل می‌کند. حضور در چنین محیطی باعث می‌شود روند یادگیری با انگیزه، تمرکز و بازدهی بیشتری همراه باشد و هنرجویان بتوانند مهارت‌های خود را با اعتماد به نفس در پروژه‌های واقعی به کار بگیرند.
دوره Responsive & Bootstrap مناسب افرادی است که می‌خواهند طراحی وب را به صورت جدی دنبال کنند، برای ورود به بازار کار آماده شوند یا پروژه‌های شخصی خود را با استانداردهای مدرن پیاده‌سازی کنند. این دوره، دروازه‌ای مطمئن به دنیای طراحی واکنش‌گرا و ساخت تجربه‌های دیجیتال سازگار با تمام نمایشگرهاست.
سر فصل‌ها
معرفی grid css
•grid column
• grid row
• grid cell
• grid cell
• grid line
معرفی property های grid
• grid-template-columns
• grid-gap
• grid-column-gap
• grid-row-gap
• grid-template-rows
• grid-column
• grid-row
• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-template-areas
• grid-area
• justify-content
• justify-items
• justify-self
• align-content
• align-items
• align-self
معرفی SASS
• معرفی Sass و نحوه نصب و کانفیگ آن
• کانفیگ Sass با npm scripts
• کانفیگ sass با نرم افزار های جانبی مثل koala
• ایجاد متغیر در sass
• آموزش nesting در sass
• آموزش استفاده از pseudo class selector ها و pseudo element selector ها در Sass
• آمورش inheritance و @extend در sass
• آموزش condition ها در sass
• آموزش استفاده از ریاضیات در sass
• آموزش استفاده از function ها در sass
• آموزش استفاده از @mixin در sass
• آموزش iteration ها در sass
• ساخت گرید بندی bootstrap با sass
• آموزش media query در sass
• انجام یک پروژه ساده با sass
معرفی bootstrap 5
• آموزش نحوه دانلود و نصب bootstrap5 و کانفیگ آن
• معرفی break point ها
• معرفی انواع container
• آموزش استفاده از grid بندی bootstrap 5
• نحوه استفاده از grid بندی bootstrap و ساخت صفحات responsive
• تزار کردن افقی و عمدی column ها
• عوض کردن order
• استفاده از offset
• معرفی margin
• معرفی padding
• معرفی gutter
• معرفی background color
• معرفی color
• معرفی دیسپلی ها
• معرفی flex
• معرفی float
• معرفی overflow
• معرفی position
• معرفی shadow
• معرفی width و height
• معرفی vertical align
• معرفی کلاس border
• معرفی کلاس rounded
• معرفی کلاس های heading
• معرفی کلاس های display
• معرفی کلاس lead
• معرفی کلاس mark
• معرفی کلاس small
• معرفی کلاس text-decoration-underline
• معرفی کلاس text-decoration-line-through
• معرفی کلاس initialism
• معرفی کلاس blockquote
• معرفی کلاس text-center
• معرفی کلاس list-unstyled
• معرفی کلاس list-inline و list-inline-item
• معرفی کلاس img-fluid
• معرفی کلاس img-thumbnail
• معرفی کلاس rounded
• استفاده از float در bootstrap
• معرفی کلاس table
• استفاده از رنگ ها در table
• معرفی کلاس table-striped
• معرفی کلاس table-hover
• معرفی کلاس table-active
• معرفی کلاس table-bordered
• استفاده از رنگ ها در table border
• معرفی کلاس table-borderless
• معرفی کلاس table-sm
• معرفی کلاس table-responsive
• معرفی vertical align در bootstrap
• آموزش Table های nesting
• معرفی کلاس table-light و table-dark
• معرفی Caption-side در bootstrap
• معرفی کلاس figure و figure-img و figure-caption
• معرفی کلاس form-label و form-control
• معرفی کلاس form-control-plaintext
• معرفی کلاس visually-hidden
• معرفی کلاس form-control-color
• معرفی کلاس form-select
• معرفی کلاس form-check و form-check-input و form-check-label
• معرفی کلاس form-switch
• معرفی کلاس form-check-inline
• معرفی کلاس btn-check
• معرفی کلاس form-range
• معرفی کلاس input-group و input-group-text
• معرفی کلاس input-group-sm
• معرفی کلاس dropdown-toggle و dropdown-menu و "dropdown-item و dropdown-divider
• معرفی کلاس dropdown-menu-end
• معرفی کلاس dropdown-toggle-split
• معرفی کلاس form-floating
• معرفی کلاس s-invalid و is-valid و invalid-feedback و has-validation
• معرفی کلاس {valid|invalid}-tooltip
• استفاده از کامپوننت های زیر:
o Accordion
o Alert
o Badge
o Breadcrumb
o Buttons
o Button group
o Card
o Close button
o Collapse
o Dropdowns
o List group
o Modal
o Nav & tabs
o Navbar
o Offcanvas
o Pagination
o Popovers
o Progress
o Scrollspy
o Spinners
o Toasts
o Tooltip
معرفی کلاس clearfix
معرفی کلاس link-*
معرفی کلاس ratio
معرفی کلاس fixed-top
معرفی کلاس fixed-bottom
معرفی کلاس ticky-top
معرفی کلاس visually-hidden
معرفی کلاس visually-hidden-focusable
معرفی کلاس visually-hidden-focusable
معرفی کلاس card و card-body و card-title و card-text
معرفی کلاس stretched-link
معرفی کلاس text-truncate
ساخت پروژه با bootstrap