آموزش پروژه محور FlexBox

مدرس: حمیدرضا فیروزی مدت زمان آموزش : 11:30 ساعت تعداد سمت ها : 40 وضعیت اموزش : تکمیل
شرح دوره

فلکس باکس یک سیستم صفحه بندی یا ماژول وابسته به css هست که به ما کمک میکنه تا صفحات و باکس ها خودمون رو راحت تر کنترل کنیم.   پیشنهاد میکنم برای آشنایی با این سیستم ویدیو دمو رو حتما مشاهده کنی.

داخل CssGrid ما میتونستیم باکس های خودمون رو شبیه به جداول کنترل بکنیم داخل FlexBox ما همین قابلیت ها رو داریم ولی هر کدوم از این سیستم ها جای خودشون رو دارن‏ FlexBox

تفاوت flexBox و css grid :

خب در واقع این دو ماژول یه تفاوت های دارن, به صورت کلی میتونم بگم که این flexBox برای کارهای تک بعدی و یک سطری بهتره اما برای کار های دوبعدی و چند سطری cssGrid مناسب تر هستش . اما در جلسه آخر دوره این موضوع رو به صورت کامل برسی کردیم و همین طور میتونید این جلسه رو به صورت رایگان از تب “قسمت های رایگان” دریافت کنید.

 

این دوره پروژه محور هستش و در انتها یک پروژه لندینگ پیچ با هم داریم که و به صورت کامل یک قالب رو با هم پیدا سازی میکنیم . میتونید دموی قالب رو از قسمت “محیط پروژه” ببینید .

125000 تومان – خرید
لینک های دانلود سرفصل دوره
  • دمو معرفی FlexBox و برسی پروژه

  • بررسی پشتیبانی مرورگر ها و توضیحات تکمیلی

  • بررسی خاصیت Flex-direction

  • بررسی خاصیت Flex-Wrap

  • بررسی flex-Flow

  • بررسی خاصیت Justify-Content

  • بررسی خاصیت Align-items

  • مینی پروژه درک Flex-Box

  • بررسی خاصیت Align-content

  • بررسی خاصیت order

  • بررسی خاصیت Flex-grow

  • بررسی خاصیت Flex-basis

  • بررسی خاصیت Flex-basis

  • بررسی خاصیت align-self

  • بررسی توابع لازم در Flex-box و متغیر ها در css

  • بررسی قالب دوره و توضیخاتی درباره اصول طراحی قالی

  • طراحی بخش هدر

  • طراحی بخش توضیحات سریع

  • طراحی بخش خدمات سریع

  • طراحی اسلادر نمونه کار ها

  • طراحی بخش تعرفه ها

  • طراحی باکس های معرفی

  • طراحی بخش سوابق

  • طراحی بخش اپشن ها اصلی

  • طراحی بخش پیشنمایش اپلیکیشن

  • طراحی بخش افزونه ها

  • طراحی بخش خدمات شگفت انگیز

  • طراحی فرم مشاوره

  • طراحی بخش نمایندگی

  • طراحی بخش درباره ما

  • طراحی بخش سوالات پر تکرار

  • طراحی بخش فوتر

  • طراحی عنوان ها قالب

  • طراحی بخش ورود و ثبت نام

  • رسپانسیو سازی قالب ۱

  • رسپانسیو سازی قالب 2

  • رسپانسیو سازی قالب 3

  • رسپانسیو سازی قالب 4

  • بررسی جزئیات قالب

  • تفاوت CSS-Grid و Flex-Box