دوره آموزشی ریسپانسیو دیزاین (flexBox+CssGrid+Sass+BootStrap)|آشنایی با Breakpoints ها

لیست دروس

به صفحه تمرینات بروید

دوره آموزشی ریسپانسیو دیزاین (flexBox+CssGrid+Sass+BootStrap)

بازگشت به صفحه دوره

مسیر یادگیری

سرفصل‌ها و جلسات

- نکات قبل از شروع دوره
- مقدمات ریسپانسیو دیزاین
- مهمترین اصل های بین المللی در طراحی یک سایت حرفه ای 13:48
- بررسی اصل WebPerformance
- بررسی اصل ResponsiveDesign
- نحوه کار با دستور Float
- آشنایی با دستور justify-content
- آشنایی با دستور Align-Items
- آشنایی با دستور Flex-Direction
- آشنایی با دستور Flex-Wrap 05:03
- آشنایی با دستور Flex-Flow
- آشنایی با دستور Align-Content
- دسته دوم دستورات FlexBox (دستور order)
- آشنایی با دستور Flex-Grow 12:42
- آشنایی با دستور Flex-Shrink 06:03
- آشنایی با دستور Flex-Basis
- آشنایی با دستور Flex
- آشنایی با دستور Align-Self
- جمع بندی مباحث FlexBox
- تمرین مباحث FlexBox
- مقدمات CssGrid
- مهمترین بخش های CssGrid
- دسته بندی دستورات CssGrid
- Grid-Template-Row/Column
- Gutter/Grid-Column/Row-Gap
- استفاده از دستور ()Repeat
- آشنایی با دستور Fractal(Fr) 12:06
- positioningGrid
- کاربرد دستور span 12:00
- تمرین 1 مباحث CssGrid
- حل تمرین 1
- آشنایی با Explicit | Implicit 07:30
- Grid-Auto-Row/Column/Flow
- کاربرد دستور Dense
- min/max/minmax
- auto-fill/auto-fit
- justify-self&align-self
- justify-items&align-items
- justify-content&align-content
- grid-template-area&grid-area
- جمع بندی مباحث cssgid
- تمرین مبحث CssGrid
- اصل دوم - Correct Unit 08:18
- relative units-em 09:24
- relative units-rem 09:17
- percentage unit
- view port
- جمع بندی مباحث Correct Unit 10:25
- آشنایی با مدیا کوئری
- بررسی بهترین واحد برای مدیا کوئری
- DesktopFirst&MobileFirst
- Flexible Image
- شروع ریسپانسیو پروژه گام اول ( سایت فیلیمو)
- ریسپانسیو هدر پروژه
- بررسی یک تکنیک طلایی در ریسپانسیو دیزاین 09:50
- ریسپانسیو اسلایدر
- ریسپانسیو محبوب ترین فیلم ها
- ریسپانسیو بخش فیلم / سریال
- بررسی BreackPoint های هر Device
- ریسپانسیو بخش Educations
- ریسپانسیو بخش FreeMovie
- ریسپانسیو بخش Kids
- ریسپانسیو بخش Cinema
- ریسپانسیو بخش comments
- ریسپانسیو بخش Questions
- ریسپانسیو بخش Details
- ریسپانسیو بخش Footer پروژه
- بررسی نهایی ریسپانسیو پروژه
- ایجاد Hamburger Menu
- کار با دستورات جی کوئری
- مقدمه بوت استرپ
- انواع روش های نصب بوت استرپ 09:36
- آشنایی با Breakpoints ها 07:01
- آشنایی با Containers
- آشنایی با GridSystems - بخش اول
- آشنایی با GridSystems - بخش دوم
- Row-cols در GridSystems
- آشنایی با columns&Gutter
- آشنایی با Typography&Image
- آشنایی با Table
- آشنایی با form-control
- آشنایی با Select&Range
- آشنایی با CheckBox&Radio
- آشنایی با inputGroup&Layout
- آشنایی با Validation
- Background&Border&Color
- آشنایی با کلاس های Flex
- Link&ObjectFit&Opacity
- آشنایی با کلاس های Positions
- Sizing&Spacing
- Text & Vertical Align
- آشنایی با components ها ( بخش اول )
- آشنایی با components ها (بخش دوم)
- آشنایی با components ها ( بخش سوم)
- آشنایی با components ها (بخش چهارم)
- ساختار بندی اولیه پروژه دیجی کالا
- ساختار بندی 1-7 ساس در پروژه دیجی کالا
- الحاق فایل های SASS بوت استراپ به پروژه دیجی کالا
- شخصی سازی رنگ ها در بوت استرپ به وسیله ی SASS
- نحوه استفاده از MAPهای SASS
- استفاده از map ها در شخصی سازی پروژه 13:11
- شخصی سازی root پروژه
- الحاق فونت به پروژه + شخصی سازی فونت
- شخصی سازی spacing های بوت استرپ 12:06
- شخصی سازی mixin ها در SASS
- ساختار بندی و شخصی سازی پروژه سایت دیجی کالا
- ساختار بندی بخش header سایت دیجی کالا
- ساختار بندی بخش Navbar پروژه دیجی کالا
- کار با کتابخانه swiper js
- ساخت اسلایدر (Story) مشابه دیجی کالا
- ساخت اسلایدر (Story) مشابه دیجی کالا (بخش دوم)
- ساخت sliderScroll پروژه دیجی کالا
- ساخت sliderScroll پروژه دیجی کالا ( بخش دوم )
- ساختار بندی بخش Brands
- اسلایدر پیشنهاد شگفت انگیز سایت دیجی کالا (بخش اول)
- اسلایدر پیشنهاد شگفت انگیز سایت دیجی کالا (بخش دوم)
- اسلایدر پیشنهاد شگفت انگیز سایت دیجی کالا (بخش سوم)
- ساختار بندی بخش (بنر سوپرمارکت) دیجی کالا
- نحوه استفاده از Grid در پروژه دیجی کالا
- ساختار بندی بخش Category
- ساختار بندی بخش Banner
- ساختار بندی بخش Suggest
- ساختار بندی بخش DigPlus
- ساختار بندی بخش DigiClub
- ساختار بندی بخش پربازدیدترین ها
- ساختار بندی بخش پرفروش ترین ها
- ساختار بندی بخش مقالات
- ساختار بندی footer پروژه دیجی کالا ( بخش اول )
- ساختار بندی footer پروژه دیجی کالا (بخش دوم)
- ساختار بندی footer پروژه دیجی کالا (بخش سوم)
- ساختار بندی footer پروژه دیجی کالا ( بخش چهارم )
- استفاده از شرط ها در جی کوئری
- ساخت MediaQuery ها در SASS ( قسمت اول ) 19:36
- ساخت MediaQuery ها در SASS ( قسمت دوم )
- ریسپانسیو بخش هدر پروژه دیجی کالا
- ریسپانسیو بخش story دیجی کالا
- ریسپانسیو بخش اسلایدر sliderScroll
- ریسپانسیو بخش Brands دیجی کالا
- ریسپانسیو بخش اسلایدر پیشنهاد شگفت انگیز دیجی کالا
- ریسپانسیو بخش سوپرمارکت دیجی کالا
- ریسپانسیو بخش Banner دیجی کالا
- ریسپانسیو بخش Category
- ریسپانسیو بخش DigiPlus
- ریسپانسیو بخش DigiClub
- ریسپانسیو بخش پربازدیدترین ها
- ریسپانسیو اسلایدر پر فروش ترین ها
- ریسپانسیو Footer سایت دیجی کالا
- Build:CSS
- قسمت پایانی - قراردادن پروژه روی هاست

دانلود ویدیو

دسته بندی آموزش ها

آشنایی با Breakpoints ها

عضو خبرنامه ما شوید

مجوزها و نمادها