توضیحات دوره
ورود به دنیای طراحی وب واکنش‌گرا، تنها یاد گرفتن یک سری دستور و تگ نیست؛ در واقع شما وارد دنیایی می‌شوید که ساختار و تجربه کاربر را شکل می‌دهد. در دوره آنلاین Responsive & Bootstrap (Web Design II) در مجتمع فنی تهران زعفرانیه، آموزش فراتر از یک کلاس مجازی ساده است. اینجا فضایی فراهم شده که در آن یادگیری با خلاقیت و تجربه در هم می‌آمیزد و مسیر رشد شما را واقعی می‌کند.
طراحی واکنش‌گرا به معنای ساخت وب‌سایت‌هایی است که می‌توانند با هر نمایشگری خود را هماهنگ کنند. چه یک تلفن همراه کوچک باشد و چه یک مانیتور بزرگ، هدف اصلی این است که کاربر تجربه‌ای یکدست و روان داشته باشد. یادگیری Bootstrap نیز به شما کمک می‌کند تا به جای درگیر شدن با جزئیات زمان‌بر، ساختار طراحی خود را با دقت و سرعت بالا پیش ببرید.
کلاس‌ها به صورت آنلاین و کاملاً تعاملی برگزار می‌شود. به جای یک‌طرفه بودن، شما در طول مسیر یادگیری، فرصت دارید با مدرس و دیگر هنرجویان ارتباط بگیرید، پرسش کنید، روی پروژه‌ها کار کنید و از نزدیک تجربه‌ای نزدیک به کلاس حضوری داشته باشید. این فضا باعث می‌شود فرآیند یادگیری به شکلی زنده، قابل لمس و انگیزه‌بخش پیش برود.
در این دوره تنها یاد نمی‌گیرید چطور صفحات وب واکنش‌گرا طراحی کنید، بلکه یاد می‌گیرید چگونه مثل یک طراح حرفه‌ای فکر کنید. چطور از همان ابتدا ساختار درستی برای طراحی انتخاب کنید، چطور رفتار سایت را در ابعاد مختلف پیش‌بینی کنید و چطور تجربه‌ای جذاب و روان برای کاربر خلق نمایید. این شیوه نگاه، تفاوت یک طراح معمولی با یک طراح حرفه‌ای است.
.مجتمع فنی تهران زعفرانیه با ساختار منظم کلاس‌ها، پشتیبانی آموزشی مناسب و فضایی الهام‌بخش، یادگیری را به تجربه‌ای متفاوت تبدیل کرده است. شرکت در این دوره یعنی قدم گذاشتن به دنیایی که در آن دانش و مهارت به شکلی هدفمند کنار هم قرار می‌گیرند
دوره آنلاین Responsive & Bootstrap (Web Design II) در مجتمع فنی تهران زعفرانیه فرصتی‌ست تا طراحی وب را نه فقط یاد بگیرید، بلکه آن را زندگی کنید. در این دوره شما تنها شنونده نیستید؛ بلکه درگیر خلق، ساخت و اجرا می‌شوید. هر جلسه مانند یک کارگاه عملی طراحی است که شما را یک قدم به تبدیل شدن به طراح حرفه‌ای نزدیک‌تر می‌کند.
مفهوم طراحی واکنش‌گرا در این دوره به شکلی کاربردی و قابل لمس آموزش داده می‌شود. شما یاد می‌گیرید صفحات وبی بسازید که بدون توجه به نوع دستگاه، تجربه‌ای سازگار و کاربرپسند ارائه دهند. یاد می‌گیرید چگونه محتوا را به صورت هوشمند سازمان‌دهی کنید، چطور رفتار عناصر را در ابعاد مختلف پیش‌بینی کنید و چطور با Bootstrap ساختار پروژه‌ها را حرفه‌ای‌تر پیش ببرید.
تمرکز اصلی این دوره روی پروژه‌های واقعی است. شما از مرحله ایده و طراحی شروع می‌کنید و به مرحله اجرا و تست می‌رسید. این روند باعث می‌شود یادگیری شما عمیق‌تر شود و به جای حفظ کردن دستورات، مهارت استفاده از آن‌ها را به دست بیاورید. این تجربه پروژه‌محور، شما را آماده می‌کند تا در پروژه‌های شخصی یا حرفه‌ای، با اطمینان کامل طراحی واکنش‌گرا انجام دهید.
ساختار آنلاین دوره طوری طراحی شده که هیچ فاصله‌ای بین مدرس و هنرجو وجود نداشته باشد. با امکان پرسش و پاسخ لحظه‌ای، جلسات زنده و تمرین‌های عملی، یادگیری شما به شکلی پویا و تعاملی پیش می‌رود. حتی در فضای آنلاین هم حس حضور در یک کارگاه واقعی منتقل می‌شود و این همان نقطه‌ای‌ست که یادگیری را مؤثرتر می‌کند.
Bootstrap در این مسیر ابزار قدرتمندی در دست شماست. یاد می‌گیرید چگونه از ساختار گرید، کامپوننت‌ها و امکانات پیش‌ساخته این فریم‌ورک استفاده کنید تا طراحی صفحات وب را با نظم، سرعت و دقت بالا انجام دهید. این توانایی، پایه‌ای محکم برای ورود به حوزه Front-End و پروژه‌های حرفه‌ای خواهد بود.
در پایان دوره، شما می‌توانید وب‌سایت‌هایی طراحی کنید که در هر نمایشگری ظاهر جذاب و عملکرد دقیقی داشته باشند. این مهارتی‌ست که در بازار کار امروز جایگاه بسیار مهمی دارد.
هر طراح وب حرفه‌ای روزی با یک نقطه شروع ساده آغاز کرده است؛ جایی که اولین بار با مفاهیم طراحی واکنش‌گرا آشنا شده و یاد گرفته چطور صفحات را طوری بسازد که همه جا بدرخشند. دوره آنلاین Responsive & Bootstrap (Web Design II) در مجتمع فنی تهران زعفرانیه می‌تواند همان نقطه شروع تأثیرگذار برای شما باشد.
وقتی یاد می‌گیرید وب‌سایتی بسازید که در موبایل، تبلت و دسکتاپ به شکلی بی‌نقص نمایش داده شود، در واقع وارد دنیایی می‌شوید که کاربر در مرکز آن قرار دارد. 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