توضیحات

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

ما همیشه صفحه آرایی را بواسطه عناصر و ویژگی هایی که هدف آنها بوجود آوردن صفحه آرایی نبوده است انجام می دادیم. اول از همه عناصر جدول در HTML و بعد از آن ویژگی float بودند که صفحه آرایی را از طریق آنها انجام می دادیم اما این روش ها دارای مشکلاتی بودند چرا که هدف این عناصر و ویژگی ها کار دیگری بود.

تا اینکه بالاخره ماژولی به نام فلکس باکس بوجود آمد. اگر با فلکس باکس آشنایی ندارید می توانید دوره رایگان آموزش FlexBox پروژه محور که داخل سایت هست را مشاهده کنید

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

گرید ابزاری برای چیدمان است که بر روی یک عنصر اعمال شده و سپس جایگیری، اندازه و ترازبندی فرزندان عنصر را مدیریت می کند.

گرید توانایی های جدیدی برای ما دارد که از مهمترین آنها می توان به مدیریت صفحه آرایی در دو بعد افقی و عمودی به صورت همزمان اشاره کرد.

برای بهتر فهمیدن CSS Grid ویدیو معرفی دوره را مشاهده کنید

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

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


HTML CSS طراحی وب طراحی واکنشگرا grid layout طراحی سایت

مدرس دوره علی شیخ
مدت دوره 02:19:59
تعداد ویدیو 14

وضعیت دوره : کامل شده
قیمت دوره : رایگان

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

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

    • سلام وقت بخیر.
      با هر دو آشنا بشید، هر دو دوره رایگان و مدت زمان کوتاهی داره اما برای بوت استرپ با فلکس شروع کنید کافی هست. از طرفی داخل ویدیو معرفی و توضیحات دوره ها پیش نیاز های دوره گفته شده

  • درود
    تشکر از زحمتتاتون
    من این پرژه گرید که نگاه کردم یه سری چیزای جدید تووش هست که با مراجعه به پیش نیازای html و css هم نتونستم پیدا کنم
    مثلا همین جلسه اول راجب کوری موبایل یا این رنگای ثابت که قرار دادین وازشون استفاده میکنید...

    ممنون

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

  • سلام و خسته نباشید ممنونم بابت تمامی آموزش های عالیتون
    استاد من به یک مسیله برخورد کردم روی پروژه ای ک قبلا با css,html نوشتم الان میخوام گرید پیاده سازی کنم اما مثل شما هرچیزی جایی که باید قرار نمیگیره مثلا تمام آیتم های نوبار توی یک ستون قرار میگیره بجهای اینکه توی هر ستون قرار بگیرند یا توی سکشن میخام آیتم ها توی سطر وسطی قرار بگیره اما توی سطر اول قرار میگیره ممنون میشم راهنمایی کنید

    • سلام وقت بخیر.
      شما باید توی inspect چک کنید که استیل ها به چه صورت هست آیا اعمال میشه و تغییرات بدید و چک کنید.

    • سلام وقت بخیر.
      ببینید بوت استرپ یک فریمورک css هست، یعنی از همین grid یا flex box و بقیه موارد css داره استفاده میکنه و فقط یکسری کلاس های آماده هست.پس اصل همین موارد css هست که بقیه فریمورک ها ازش استفاده میکنند.

  • سلام وقت بخیر
    بسیار ممنون از اینکه دوره های جامعی تهیه میفرمایید و در اختیار علاقمندان به برنامه نویسی قرار میدید
    بیان آقای شیخ واقعا شیوا و رساست و از این بابت واقعا از ایشون سپاسگذارم
    موفق و سربلند باشید??

  • دمت گرم از آموزش هات خیلی خوشم اومد
    مخصوصا اینکه همه اموزش هایی که میزاری تایم پایینی هست این خودش خیلی خوبه
    اموزش بیشتر بزار خوشحال میشم از اینکه خوب داری درس میدی و پیش میری
    اگر شد ممنون میشم

  • دوره هاتون کاملا مختصر و مفید هستن ... خیلی جاهای دیگه اومدن از گرید بت ساختن و با آموزش های 10 ، 15 ساعته ( فقط گرید ) یه ملت رو آموزش زده کردن متاسفانه
    ممنون از سایت خوبتون

  • سلام و عرض ادب و خسته نباشید
    استاد من یک قسمت از پروژه توی بخش Article ها دچار مشکل شدم ویدیو رو هم چند بار دیدم ولی درست نشد.
    توی بخش Article ها وقتی شما Article اولی و آخری رو انتخاب میکنید تا اونارو دوقسمت کنین اولی درست میشه ولی Article آخری نه ویدوی رو کامل دیدم ولی مشکل حل نشد مشکلش چیه استاد ؟؟؟
    با تشکر

    • سلام وقت بخیر.
      کد ها را با کد های فایل تمرینی مقایسه کنید.ببینید کجا مشکل هست.همچنین سوالتون را زیر همون قسمت بپرسید که بهتر بتونیم پاسخگو باشیم

    • سلام استاد
      استاد کد ها درستن اون article به دو بخش مساوی تقسیم شده ولی محتویات داخلش مثل article اولی نمیشه اولی درست میشه ولی آخری نه .
      کد های بخش last-child , first-child هم درستن مشکل از کجاست
      با تشکر

    • سلام وقت بخیر.
      من درست متوجه نشدم.لطف کنید بگید برای کدوم قسمت هست و یا زیر اون قسمت کامنت بزارید.
      با سورس کد های که در اختیارتون هست هم چک کنید.اگه نیاز باشه میتونید از طریق تلگرام هم سوالتون را بپرسید

  • درود و عرض ادب خدمت استاد شیخ عزیز و گرامی
    واقعا دوره خیلی خوب و مفیدی بود واقعا دستتون قوت بخاطر دوره های مفید و کاربردی رایگانتون که در اختیار ما قرار میدید. خسته نباشید و خدا قوت میگم به شما و تیمتون، پایدار و پاینده باشید
    سپاس ?

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

  • استاد برای bootstrap نباید قبلش sass رو یاد بگیرم اینجوری بهتر نیست ؟؟
    یه سوال دیگه استاد Grid Layout رو یاد بگیریم خوبه ؟؟ بعد یا قبل از چه زبانی یادش بگیریم بهتره؟؟؟؟
    من که flexbox , css , html رو بلدم نیازی به Grid Layout هست و این زبان چه فرقی میکنه؟
    با تشکر

    • سلام وقت بخیر.
      مواردی که گفتید اختیاری هست.شما هر چقد بیشتر یادبگیرید و تمرین کنید،حرفه ای تر میشید.
      توی چارت آموزشی که داخل وب سایت هست قدم ها را تعریف کردیم که میتونید مشاهده کنید.

  • سلام علی آقا مخلصیم خسته نباشید
    استاد یه سوال داشتم من html , css ,flexbox رو یاد گرفتم و بلدم میخواستم بدونم بعد اینا چیو یاد بگیرم میشه راهنماییم کنین...
    ممنونم♥

    • سلام وقت بخیر.
      با یکی از فریمورک های html و css مثله bootstrap، materialize و ...
      آشنا بشید.

  • به این صورت استفاده میشه
    header .css?v=<?php echo(mt_rand (10,72));?>"m
    اون m آخری جزو کد نیست مهندس گذاشتم کد مرتب در بیاد خیلی خوب کار میکنه منم رو کامپیوتر ctrl +f5 میزدم ولی اینو که قرار دادم با همون دکمه رفرش مرورگر به راحتی تغییرات رو اعمال میکنه رو هاست هم که تغییر میدم وقتی سایت رو باز کنم تغییرات اعمال شده فقط تو پرانتز باید عدد اول کوچکتر از عدد دوم باشه

  • دقیقا درسته اونجا که فایل css رو به سند php معرفی میکنیم جلوش از تابع mt_rand استفاده میکنیم اینطوری مرورگر هربار که تغییرات میدیم اونو یک ورژن جدید به حساب میاره و کش نمیکنه من خیلی سرچ کردم فقط یه سایت ایرانی اشاره کرده بود به این موضوع که مشکل یکی از کاربرانش بود و با این تابع مشکلش حل شد به زبان انگلیسی هم سرچ کردم چرا تغییرات css اعمال نمیشه همین تابع رو مثال زده بود
    به این صورت استفاده میشه مهندس جان
    ""

    • سلام وقت بخیر.
      تابع mt_rand که رشته ای رندوم از اعداد تولید میکنه و ربطی به کش مرورگر نداره.

  • سلام علی جان تو موبایل منظورم بود که کش مرورگر رو پاک کردم درست شد دمت گرم استاد از تابع mt_rand که استفاده کردم جای عدد بزرگ و کوچک اشتباه بود از سایت استک کپی کردم ولی تو سایتای ایرانی گفته بود عدد کوچکتر اول باشه الان درست کار میکنه حالا که از mt_rand درست استفاده کردم احتمالش هست اگه تغییری دادم بازم مرورگر کش کنه و نشون نده ؟ چون تو سایتها نوشته که mt_rand باعث میشه مرورگر فایل css رو از کش نخونه و تغییرات رو نشون بده

    • سلام وقت بخیر.
      شما کلا اگه تغییری توی فایل css و js دارید، بهتر هست کش مرورگر را پاک کنید

  • سلام علی جان من روی هاست تغییراتی روی فایل css خودم دادم از تابع mt_rand هم جلوی فایل css که معرفی کردم استفاده کردم تا مرورگر تغییرات رو لحاظ کنه مرورگر فایر فاکس تغییرات رو نشون میده البته باید اونجا که از تابع mt_rand استفاده کردم یه تغییری بدم مثلا مساوی اضافه یا کم کنم اما مرورگر کروم تغییرات رو نشون نمیده چیکار کنم که همه مرورگرها به درستی تغییرات رو نشون بدن با تشکر از سایت خوبتون

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