telegram

توضیحات

دوستان این دوره بازتولید شده (با کیفیت و محتوای بهتر) دوره قبلی (آموزش FlexBox پروژه محور) در سایت هست که میتوانید از این دوره استفاده کنید.

در دنیای HTML و CSS که نمایش محتوا را به عهده دارند همیشه یک موضوع، سختی و پیچیدگی خاص خود را داشته و آن هم صفحه آرایی است.به عنوان مثال اگر شما بخواهید یک صفحه برای نمایش یک ستونی یا دو ستونی از عکس ها را داشته باشید با مشکل چندانی رو به رو نیستید ولی برای صفحه آرایی های چند ستونه ی تودرتو قطعا با دردسرهای مختلفی مواجه خواهید شد و همچنین یکسان سازی صفحه آرایی صورت گرفته در مرورگرهای مختلف کار شما را پیچیده تر می کند.اگر با صفحه آرایی امروزی آشنا باشید قطعا با مشکل  Float که به وسیله تکنیک Clearfix حل می شود دست و پنجه نرم کرده اید.خبر خوب اینکه  CSS 3 ماژولی برای صفحه آرایی دارد که نه تنها مشکلات قبلی را کنار می زند بلکه ویژگی های بسیار چشم گیر و کاربردی را فراهم می کند. این ماژول Flexible Box یا  Flexbox نام دارد.


برخی از امکانات فلکس باکس

  • چیدن عنصرها در یک ردیف کنار هم بدون نیاز به تعیین عرض مشخص و دقیق برای آنها
  • اگر برای عنصرهایی که در یک خط قرار گرفتن جای کافی نباشد به راحتی عنصر آخر به صورت خودکار در ردیف بعد قرار می گیرد.
  • به سرعت می توان چیدمان عنصرهای کنار هم را از افقی به عمودی و بالعکس عوض کرد.( فقط با تغییر یه کلمه )
  • همتراز سازی چپ, راست و مرکز نسبت به عنصر نگهدارنده
  • امکان تغییر ترتیب عنصرها بدون دست کاری در HTML
  • تعیین کردن اندازه ی عنصر نسبت به اندازه ی عنصر نگهدارنده

حتما ویدیو معرفی دوره را در پایین مشاهده کنید تا با دوره و پروژه ای انتهای دوره آشنا شوید.

مباحثی که در این دوره گفته میشود شامل :
آشنایی با FlexBox (فلکس باکس)

  • معرفی و آشنایی با flexbox (فلکس باکس)
  • پراپرتی های flex-direction و flex-wrap
  • پراپرتی های justify-content و align-items و align-content
  • main Axis / cross Axis (محور اصلی و فرعی) در flexbox (فلکس باکس)
  • پراپرتی های gap و order و align-self
  • پراپرتی های flex-grow و flex-shrink و flex-basis
  • پراپرتی flex

پروژه دوره

  • معرفی پروژه و افزودن متغیرها های css، استایل های عمومی، فونت و آیکون
  • ایجاد favicon برای پروژه
  • بخش header (هدر)
  • بخش navbar
  • بخش درباره ما
  • بخش خدمات ما
  • بخش مقالات
  • بخش تماس با ما
  • بخش گالری
  • بخش footer (فوتر)
  • آپلود پروژه روی سرور (deploy)

پیش نیاز های این دوره فوق العاده کاربردی:

دوره های پیشنهادی، بعد از گذراندن این دوره :

HTML CSS طراحی وب طراحی واکنشگرا FlexBox فلکس باکس سی اس اس اچ تی ام ال css 3 html 5

مدرس دوره علی شیخ
مدت دوره 04:32:18
تعداد ویدیو 32
وضعیت دوره : کامل شده
قیمت دوره : رایگان
ابتدا وارد سایت شوید
دسته بندی دوره ها
HTML CSS طراحی وب FlexBox Bootstrap فریمورک طراحی سایت جاوا اسکریپت اکما اسکریپت پی اچ پی php mysql javascript jquery oop mvc composer laravel emmet npm nodejs webpack vuejs livewire vuex API وب سرویس alpinejs tailwindcss react git github typescript next.js nest.js nuxt.js sass ساس

دوره های پیشنهادی

دوره های آموزشی
آموزش Node.js
کامل شده

آموزش Node.js

Node.js یک محیط سمت سرور برای اجرای کدهای JavaScript است، در واقع به کمک Node.js، زبان برنامه نویسی جاوااسکریپ به جای اج...

رایگان
03:23:18
آموزش الگوی طراحی MVC (Model View Controller) در php (پی اچ پی) پروژه محور
کامل شده
% 15 تخفیف

آموزش الگوی طراحی MVC (Model View Controller) در php (پی اچ پی) پروژه محور

ساختار یا الگوی طراحی (Model View Controller) MVC یک الگو یا ساختار معماری برنامه نویسی است که نرم افزار را به سه بخش مج...

449,000 381,000 تومان
07:09:57
آموزش رایگان css grid (سی اس اس گرید) پروژه محور
کامل شده

آموزش رایگان css grid (سی اس اس گرید) پروژه محور

بعد از فلکس باکس ماژول دیگری نیز برای صفحه آرایی معرفی شد به نام CSS Grid که باعث شد تا قدرت ما در صفحه آرایی بیشتر شود...

رایگان
05:06:22
آموزش رایگان flexbox (فلکس باکس) پروژه محور
کامل شده

آموزش رایگان flexbox (فلکس باکس) پروژه محور

در دنیای HTML و CSS که نمایش محتوا را به عهده دارند همیشه یک موضوع، سختی و پیچیدگی خاص خود را داشته و آن هم صفحه آرایی ا...

رایگان
04:32:18

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • pink panther

    سلام وقت بخیر
    آیا این دوره ارتباطی به بوتسترپ داره؟
    یعنی من بوتسترپ رو بلد باشم لازمه این دوره رو هم بگذرونم و بهش نیاز پیدا می کنم یا خیر؟

    با تشکر

  • taha

    سلام اقای شیخ خسته نباشید. واقعا مرسی از تمام مباحث خوبی که ارائه میدین. بنده تو این دوره ویدیو معرفی دوره رو پیدا نمی کنم اولین ویدیو آشنایی با flexbox هستش از کجا باید پیدا کنم؟

    • علی شیخ

      11 ماه پیش

      سلام وقت بخیر.
      ممنون از شما و حمایتتون🙏
      توی صفحه ای دوره (همین صفحه که کامنت گذاشتید) قبل از نمایش سرفصل ها ویدیو معرفی قرار گرفته

  • nimaranjbar

    سلام
    خداقوت میگم بهتون و خیلی ممنون بابت این دوره با کیفیت و به شدت کاربردی و پروژه عالی و پر از نکته انتهای دوره
    امیدوارم همینطور با کیفیت و پر قدرت ادامه بدید
    من هم به شخصه سعی میکنم با خرید دوره های مورد نیاز ( هرقدر کوچک ) گوشه ای از زحماتتون رو جبران کنم
    امیدوارم پاینده باشید

    • علی شیخ

      12 ماه پیش

      سلام وقت بخیر.
      ممنون از شما و حمایتتون
      خداروشکر دوره براتون مفید بوده

  • ali norooz

    سلام
    چقدر خوبه که برای هردوره یک پروژه جدید انجام میدین
    واقعا هم یادگیری برام جذاب تر شده و هم انگیزه ام بیشتر شده
    البته که قبلا هم گفتم حساسیت شما برای ایجاد یک دوره کامل و بدون نقص با وجود اینکه رایگان هم هست قابل تقدیره

    • علی شیخ

      1 سال پیش

      سلام وقت بخیر.
      ممنون از شما و حمایتتون?
      خداروشکر دوره براتون مفید بوده

  • Amir

    داداش علی ممنون بابت دوره های خوب و روانت اللخصوص رایگان داداش برای اینکه بخوایم یک پروژه رو از صفر طراحی کنیم لازم هست reset.css بزاریم تو پوشه styles ندیدم شما از پروژه ها ازش استفاده کنید

    • علی شیخ

      1 سال پیش

      سلام وقت بخیر.
      ممنون از شما و حمایتتون?
      بله میتوان استفاده کرد ولی خب توی پروژه از فریمورک های css استفاده میشه که قدم های بعدی این دوره و دنیایی css هست که توی فریمورک ها این داستان هست.

    • علی شیخ

      1 سال پیش

      سلام وقت بخیر.
      ممنون از شما و حمایتتون?
      بله، در حال آماده سازی دوره هستم بزودی قرار میگیره