کارگاه آموزش صفحه آرایی واکنشگرا

آموزش صفحه آرایی (واکنشگرا)

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

دو نکته در این موضوع وجود داشت:

⚡ اول اینکه هیچ منبع نوشتاری و آنلاینی سراغ نداشتم که بصورت دقیق و مرحله ای مخاطب را راهنمایی کند و در کنار بیان مطلب صحیح به مطلب عمق کافی را بدهد.

⚡ دوم اینکه آنقدر بحث صفحه آرایی در ذهن من مهم بود که ذهنم در اولین قدم به سراغ این موضوع می رفت و صفحه آرایی چیزی نیست که بتوان آن را از طریق خواندن مطلب یاد گرفت.

با کمک خدا در حال حاضر مورد اول تا حدودی حل شده است و یک سری نوشته ها در این سایت برای فردی که بخواهد قدم به قدم تکنولوژی های اولیه وب را فرا بگیرد وجود دارد.

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

در ادامه پیش نیازهای این دوره و همچنین مواردی که در آن بررسی می شود آمده است.

پیشنیازها

  1. آشنایی با مفاهیم اولیه HTML و CSS
  2. مطالب فصل اول تا هفت لیست آموزشی

در این دوره سعی می شود تا موارد زیر آموزش داده شود:

✅ در طول دوره یک صفحه وب را بصورت واکنشگرا مرحله به مرحله پیش می بریم.

✅ در مرحله اول مفاهیم display، position و float و ارتباط آن ها با یکدیگر و اینکه چگونه برای چیدمان آیتم های صفحه می توان از آنها کمک گرفت را فرا می گیریم.

✅ با بهره از آنچه که یاد گرفته ایم پروژه را مرحله به مرحله جلو می بریم.

✅ سپس یاد میگیرم که چطور آنچه که ساخته ایم را بصورت واکنشگرا طراحی کنیم که سایت ما به درستی در دستگاه های مختلف نمایش داده شود.

✅ چندین مدل و الگو خاص را برای ساخت منوی اصلی سایت بررسی می کنیم و تاکیدمان بر واکشگرا بودن این منوها خواهد بود.

✅ و در نهایت گریدبندی را آموزش می دهیم که سرعت چیدمان را نیز بهبود می بخشد.

✅ در این دوره تاکید ما بر روش Mobile First خواهد بود.

❓ چرا کلمه واکنشگرا در عنوان پست در پرانتز قرار دارد؟

✏ ما به این باوریم که امروزه بجز موارد خیلی خاص، جایگاهی برای طراحی غیر واکنشگرا وجود ندارد و یک وب سایت باید همه جا در دسترس باشد پس وقتی در مورد صفحه آرایی صحبت می کنیم بصورت پیش فرض واکنشگرایی صفحه باید در ذهن ما باشد.

سوالات متداول

❓ در این دوره مباحث فلکس‌باکس و گرید هم بررسی می شوند؟

خیر، در این دوره صفحه آرایی به روش Float آموزش داده می شود، اما نکته ای که باید در نظر بگیرید این است که نکاتی که در دوره گفته می شود مفاهیم پایه صفحه آرایی هستند که باید در هر صورت آنها را بدانید حتی اگر بخواهید از ماژول های فلکس باکس یا گرید استفاده کنید.

با توجه به وضعیت خوب پشتیبانی مرورگرها در مورد فلکس‌باکس و گرید توصیه بنده این هستش که بعد از گذراندن این دوره و تسلط به مباحث پایه‌ای صفحه آرایی حتما به سراغ یادگیری فلکس‌باکس و گرید بروید و بجای تمرکز بر روی استفاده از تکنیک Float که در این دوره تدریس می‌شود به یادگیری این دو ماژول بپردازید. البته همانطور که گفته شد بیشتر مباحث این دوره مورد نیاز شما خواهند بود و باید قبل از فلکس‌باکس و گرید آموخته شوند.

❓ اولویت این دوره نسبت به دوره فلکس باکس چگونه است؟

بهتر است اول در این دوره را آموزش ببینید و بعد از یک مدت تمرین بر روی مفاهیمی که در این دوره یاد میگیرد به سراغ یادگیری فلکس باکس بروید.

❓ قبل از این دوره باید چه چیزی یاد داشته باشیم؟

همانطور که در بالا اشاره شده است قبل از این دوره نیاز است که مفاهیم پایه طراحی وب سایت را بدانید که می توانید با این مفاهیم در فصل های آغازین تا فصل هفتم این سایت آشنا شوید.

❓ آیا در این دوره با فریمورک هایی مثل بوتسترپ و غیره نیز کار خواهیم کرد؟

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

❓ صفحه ای که قرار است طراحی کنیم به چه شکل است؟

از طریق لینک زیر می توانید تصویر پروژه ای را که در این دوره بر روی آن کار می کنیم را مشاهده کنید، هر جلسه شامل دو ویدیو می باشد، ویدیو اول مثلا مفهوم position را به طور کامل شرح می دهد و در ویدیو دوم با استفاده از مفاهیم یاد گرفته شده در ویدیو اول این پروژه را پیش می بریم که شما می توانید آن را به زبان فارسی طراحی کنید:

دموی پروژه دوره

❓ مواد درسی به چه صورت هستند؟

جدول زیر سیلابس این دوره را نشان می دهد:

موضوع جلسه مدت زمان ویدیو حجم فایل ویدیو
مقدمه 8 دقیقه 24 مگابایت
Box Model 40 دقیقه 82 مگابایت
پروژه جلسه اول 100 دقیقه 225 مگابایت
Position 36 دقیقه 126 مگابایت
پروژه جلسه دوم 37 دقیقه 120 مگابایت
Float 65 دقیقه 147 مگابایت
پروژه جلسه سوم 23 دقیقه 102 مگابایت
Media Query 17 دقیقه 33 مگابایت
پروژه جلسه چهارم 39 دقیقه 176 مگابایت
Navigation 65 دقیقه 251 مگابایت
پروژه جلسه پنجم 21 دقیقه 71 مگابایت
Grid 46 دقیقه 139 مگابایت
پروژه جلسه ششم 45 دقیقه 191 مگابایت

دانلود ویدیوها

می توانید از لینک زیر اقدام به خرید ویدیوها کنید:

خرید ویدیوها

مطالب مرتبط

137 دیدگاه برای “آموزش صفحه آرایی (واکنشگرا)”

        1. :D
          دوست داشتید فلکس باکس چقدر باشه قیمتش؟

          همینطور این کارگاه که قراره صفحه آرایی واکنشگرا یاد بگیریم چقدر؟ اونم مثلا توی دو هفته هی بتونید سوال بپرسید و تمرین حل کنید.

          پاسخ

    1. این ماه ک رسیده و از شنبه هم شروع میشه

      ولی اگر ماهی باشه ک مثلا یک نفر ثبت نام کنه باز برگزار میکنیم. مهم اینه یکی یاد بگیره :)

      پاسخ

  8. سلام مهندس خداقوت

    سایتت خیلی عالی شد واقعا از روز اولم بهتر
    دمت گرم و روحت شااااااد ?

    انشالله همیشه موفق و سربلند باشی برادر ❤

    “محمد وفایی”

    پاسخ

  11. ببخشید از چه طریقی سایت رو ریسپانسیو میکنیم توی این دوره ؟ دستی،بوت استرپ، فلکس باکس …. ؟؟
    و اینکه آیا شما این رو تایید میکنید که سایت رو فقط با فلکس باکس ریسپانسیو کنیم ؟

    ممنون

    پاسخ

  12. سلام …
    من تو دوره اردیبهشت ماه این کارگاه شرکت کردم…
    اگه قراره حالت کارگاهی حفظ بشه بنظرم هفته یک جلسه مناسبه که وقت تمرین لازم و کندوکاو مطالب باشه (با توجه مشغله های زیاد زندگی امروزه )
    از آقای سیدی خیلی ممنونم سطح آموزش ها خیلی خوبن … واقعا گیرا و خوب تدریس شدن
    به امید برگزاری دوره های متفاوت دیگه برای ارتقا سطح مهارت های حرفه همه دوستان …

    پاسخ

  13. من میخواستم بسته فلکس باکس رو خریداری کنم و کاملا میدونم چه چیزی رو میخوام بخرم ولی این رو اصلا متوجه نشدم، اصلا واضح نگفتید برنامه چی هست! بعدش هم حتما بخش بندیش کنید مثل دوره فلکس باکس واسه خرید.
    چیزی که در مورد دوره فلکس باکس متوجه نشدم طریقه پاسخگویی بودش، اگه سوالی پیش بیاد چجوری باید پرسید، سرعت پاسخگویی چقدر هست؟
    بعدش اینکه برنامه شما برای آموزش جاوا اسکریپت چی هستش؟

    پاسخ

  15. سلام
    من توی دوره مردادماه شرکت کردم. خواستم از آقای مجتبی سیدی صمیمانه تشکر کنم و خدمت دوستانی که این پست را میبینن عرض کنم که کل دوره حدودا ۹ ساعت فیلم آموزشیه؛ ولی باید خیلی خیلی بیشتر از اینها براش وقت گذاشت! اصلا اینقدر نکته توش هست که آدم باورش نمیشه!
    بعضی مباحثی که توی این کارگاه مطرح شد گرچه پایه ای بود ولی برای من یا جدید بود و یا تابحال بهشون توجه نکرده بودم، چون اهمیتش و یا جایگاهش را نمیدونستم.
    در برخی موارد اصلا باورها و دیدگاههای من به کل عوض شد و تصمیم گرفتم یک سری روشهایی که بلد بودم را کلا بزارم کنار و با آنچه از این دوره آموختم، راه را درست برم جلو و وصله پینه ای کار نکنم!
    این دوره از بهترین و دوست داشتنی ترین و شیرین ترین دوره های آموزشی وبی بوده که تابحال دیده ام.
    پیروز و پرنشاط باشید

    پاسخ

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

      پاسخ

  18. بازم سلام;
    یه استاد داشتیم که وقتی ازش سوالی میپرسیدی که جوابش مثل روز روشن بود در جواب میگفت:”نظر خودت!!!”
    الان یه دونه از اون سوال هادارم.
    جاوا اسکریپ… این “بوق…” لعنتی دوره ای براش هست؟

    پاسخ

  19. سلام لطفا هزینه کارگاه رو بفرمایید تا ببینم اصلا با بودجه جور در میاد پیش ثبت نام یا پس ثبت نام کنم یا نه ممنون :)

    پاسخ

  20. دوره بسیار خوب و عالی بود
    به نظرم خیلی فراتر از آموزش ریسپانسیو هست و پروژه محور بودن این آموزش و آموزش فوق العاده خوب و واضح آقای سیدی
    خیلی خیلی خوشحالم که توی این دوره شرکت کردم و تشکر می کنم

    پاسخ

  21. سلام
    میخواستم ثبت نام کنم
    هزینش یه کم بالا هست و
    اگر امکانش هست یک نمونه ویدیو قرار بدید
    تا تصمیم گیری کنیم

    پاسخ

  24. سلام اگه میشه از منوهای سبک سایت دیجی کالا که بشه ریسپانسیو اون هم درست کرد و سبک نمایش محصول به صورت ()calc هم آموزش بزارید

    پاسخ

  25. سلام ببخشید من میخوام html و css و bootstrap پیشرفته یاد بگیرم شما دوره ای دارین?هزینه رو هم در صورت امکان بفرماييد? و اینکه دوره حضوری یا خصوصی هم دارین?

    پاسخ

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

      دروه حضوری نداریم.

      می تونید با ایمیل سایت تماس بگیرید اگر نیاز به راهنمایی بیشتری دارید: hi@css-tricks.ir

      موفق باشید.

      پاسخ

  26. سلام ای کاش یکم بیشتر توضیح میدادین و همچنین یه دمو از قالبی که طراحی میکنید در طول دوره یا دوره های قبلی میذاشتین
    من html-css رو بلدم ولی نه بصورت حرفه ای مشکل من الان همین صفحه ارایی هستش یعنی نمیتونم به درستی یه صفحه رسپانسیو رو طراحی کنم
    با بوت استرپ طراحی کردمه یه بار قبلا ولی میخوام یاد بگیرم بدون هیچگونه فریمورکی یه صفحه وب طراحی کنم
    میخواستم ببینم این دوره به کار من میاد یا نه و بعد از گذروندن دوره و تمرین و یادگیری اموزش ها ایا میتونم یه سایت مثل زومیت رو طراحی کنم (منظورم صفحه ارایی هستش و چیدن عناصر مختلف صفحه با نحوه نمایش کار ندارم)
    دوم اینکه تو این دوره ایا از گرید استفاده میشه یا نه چون من یکمی از گرید سر رشته دارم
    سوم اینکه بعد از این دوره باید دوره فلکس باکس رو هم بگذرونم تا بتونم یه سایت رسپانسیو چند ستونه طراحی کنم یا با همین دوره هم میشه این کار رو انجام داد

    پاسخ

  27. سلام
    من نتونستم قبل از 12 اسفند ثبت نام کنم اگه الان ثبت نام کنم میتونم تو دوره شرکت کنم یا نه
    چون نمیتونم تا فروردین صبر کنم
    ایمیل هم بهتون دادم دیروز ولی هنوز جواب ندادین

    پاسخ

    1. سلام، فعلا یک مشکل در قسمت درگاه هستش که نمیتونید ثبت نام کنید، من به ایمیلتون آدرس گروه تلگرام رو ارسال میکنم شما از جلسات عقب نمونید بعد از اینکه مشکل برطرف شد میگم ثبت نام کنید. ایمیل هم به دلیل همون مشکل به دست من نرسیده.

      پاسخ

      1. سلام
        اتفاقا الان سعی کردم که ثبت نام کنم نشد اومدم اطلاع بدم که دیدم شما پیام دادینه
        اگه میشه به این ایمیل بفرستین
        یه شماره کارت هم بدین من کارت به کارت میکنم براتون

        پاسخ

  28. سلام وقتتون به خیر
    اول ممنونم بابت سایت فوق العاده خوبتون
    میخواستم بپرسم کارگاه طراحی واکنشگرا باز برگزار میشه؟؟ لطفا یه اطلاعی بدین که منتظر بمونیم و زمانش کی میشه؟

    پاسخ

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

    پاسخ

  34. سلام وقت بخیر
    من در دوره ثبت نام کردم.
    می خواستم بپرسم حالا که تلگرام فیلتر هست، آیا روش دیگه ای رو برای برگزاری کارگاه در نظر دارید یا باید ف.ی.ل.ت.ر شکن نصب کنیم؟

    پاسخ

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

      موفق باشید.

      پاسخ

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

    پاسخ

  42. به جرعت میتونم بگم این دوره یکی از بهترین دوره های آمورشی فرانت اند بود که تا حالا دیدم ….
    بعد از دیدن این دوره فهمیدم که چقدر تو مباحث css ضعف دارم.
    جناب سیدی خدا خیرت بده واقعا عالی بود ، در عین حال که این دوره اینقدر عمیق بود ولی قیمت بسیار مناسبی داشت .
    خیلی شما منصف هستی ، چقدر شما خوبی ، چقدر علمیت بالایی دارید
    خواهش میکنم اگر امکانش هست برای مباحث انیمیشن و طراحی لندینگ پیج های حرفه ای دوره برگزار کنید و یا آموزش کامل جی کوئری ….
    من حتما شرکت میکنم
    یاعلی

    پاسخ

  43. سلام
    خسته نباشید و خدا قوت من برای جاوا کار بک اند لازم داشتم سی اس اس و اچ تی ام ال رو یاد بگیرم. سایتتونو خوندم خیلی جالب توضیح دادین من دانشجوی کامپیوتر در دانشگاه مونیخ هستم و نتونستم به زبونای دیگه آموزش دلپذیری مثل سایت شما پیدا کنم. ممنون
    یا حق

    پاسخ

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

    پاسخ

  45. با سلام و تشکر از شما

    ببخشید من نحوه واکنش گرایی رو تا حدودی زیادی بلدم و می تونم به کمک دستورات ِ media query طراحی سایتم رو واکنش گرا کنم.
    منتها این روش mobile first رو درست درک نکردم که فرقش با طراحی واکنش گرای معمولی چیه؟ میشه بفرمایید چه تفاوت هایی باهم دارند؟ و دیگر اینکه روش mobile first چه مزایایی نسبت به روش قبلی داره که سبب شده در اولویت قرار بگیره؟

    ی سئوال دیگه دارم از حضورتون: اگر که درست میگم، توی روش mobile first اول سایت در ابعاد کوچیک تر و گوشی درست میشه و بعد کم کم بزرگش می کنیم و با توجه به ابعاد جدید طراحی مون تغییر می کنه و حتی ممکنه اجزایی به صفحه مون اضافه بشه، درسته؟
    خب مشکلی من که دارم اینه که اینجوری طراحی کردن برام سخت تره، چون توی روش قبلی اولش سایت رو توی اندازه بزرگ با همه ی عناصرش ایجاد می کردیم و بعدش میومدیم کوچیک ترش می کردیم و هرجا لازم بود، تغییراتی رو اعمال می کردیم. در صورت عدم نیاز هم می تونستیم نمایش عنصر رو حذف کنیم.
    آیا تفکر من درسته؟ آیا در روش mobile first کارمون سخت تر میشه؟ راهکار چیست؟

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

    پاسخ

  46. سلام.میشه لطفا یه دمو بذارید تا ببینیم قراره جی را آموزش ببینیم؟
    آیا این پروژه ای که در این کلاس درست میکنید فارسی است یا انگلیسی؟خود سایت منظورم هست

    لطفا در صورت امکان آموزش قراردادن فونت های فارسی را آموزش دهید
    با تشکر

    پاسخ

  48. من فایل فیلمهارو هزینشو پرداخک کردم و دانلود کردم ولی نشون نمیده.من الان نیاز دارم تا شما پاسخ بدید طول میکشه دوروزه دانلود کردم نمیتونم ببینم فیلمهارو

    پاسخ

    1. تاریخ خرید شما، 10 ساعت قبل از این پیامتون هستش، منظورتون از دو روز رو متوجه نشدم؟

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

      در نهایت دوباره دانلود کنید و اگر باز هم خطا خوردید بگید.

      پاسخ

  49. استاد سلام.من انقدر ذوق داشتم شب دانلود کردم تا فردا صبح فکر کردم دو روزشده .اخه نوشته بود بعد ۱۲ ساعت لینک حذف میشه استرس داشتم.ممنون از پیگیریتون

    پاسخ

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

      حالا اگر از نظر قیمت بخوایم بحث کنیم، که من بحثی ندارم :)

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

      پاسخ

  54. سلام استاد خوب هستید من جدیدا یه استارت آپ به ذهنم رسیده آیا با این دوره میتونم ریسپانسیوش کنم؟
    سایت رو میخوام طراحی کنم اما تو ریسپانسیوش موندم وقت کافی برای یادگیری بوت استرپ هم ندارم میشه نظرتون رو بگید

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

    اگه میشه جواب بدین ممنون از شما

    پاسخ

  55. سلام وقت بخیر…
    استاد من این دوره رو خریداری کردم ولی چون حجمم تموم شده بود همون روز نتونستم دانلود کنم و الان دو سه روزی ازش گذشته.الان خواستم دانلودش کنم میگه لینک دانلود منقضی شده…اخه چرا؟
    نمیشه کاریش کرد؟

    پاسخ

  56. سلام قربان

    لطفا اگه امکان داره یه کوپن تخفیف هم در نظر بگیرید. این روزا کسی اوضاع مالی خوبی نداره واقعا! بنده میخاستم هم این دوره رو بخرم و هم دوره “فلکس باکس”.
    منتظر پاسخ شما هستم

    پاسخ

  59. سلام استاد عزیز و گرامی … من یه ماژول ساختم ;) اون حالتی که برای هر محتوا باید یه تگ با کلاس col جداگانه اضافه میکردیم خیلی رفت رو مخم ، یه فکر دیگه بنظرم رسید حالا نمیدونم استاندارد هستش یا نه .. شما ی نگاه بنداز نظرتو بگو بهم {شما واردتری !notimportant} ;) البته توی این روش نمیشه زیاد روی باکس شادو با مقادیر بالا حساب وا کرد ولی بهر حال اینم ی روشیه دیگه … مارکاپ هم تمیزترو خلوت تر میشه ، فکر کنم حداقل برا بعضی موارد کاربرد داشته باشه
    https://jsbin.com/nufudey/1/edit?html,css,output
    خیلی مخلصیم

    پاسخ

    1. سلام ماژول ساز عزیز و گرامی، خیلی هم خوب، ایده خوبیه و اگر توی مورد شما جواب میده، خیلی هم عالی.
      ان شالله کم کم گرید هم یاد میگیرد و دیگه این مشکلات همه با grid-gap حل میشه و مارکاپ خوشگلی هم دارین.

      موفق باشید بیشتر و بیشتر.

      پاسخ

      1. سلام استاد عزیز و گرامی ، اینطور که من برای خودم بررسی کردم ، فکر میکنم که grid حداقل تا ده سال دیگه نشه درست حسابی ازش کار کشید ، مثلا ده سال دیگه تازه بشه مثل فلکس باکس الان ، فلکس باکسم بنظرم الان کاربردی توی صفحه آرایی نداره به اون صورت که بخوایم روش خیلی زوم کنیم ، اینطور که من فهمیدم بنظرم فلکس باکس رو بجای کل صفحه آرایی بشه توی یه قسمت های خاصی از طراحی به نحو احسن ازش استفاده کرد ،،، بنظرم اگه میشد آیتم های پدرسوخته فلکس :) وول بخورن برن تو هم تا فضای خالی رو پر کنن فوق العاده میشد … حالا اینا نظرای من هستن که فکر نکنم چندان اهمیتی داشته باشه ، میخواستم نظر شما رو بدونم را جب این مسائل … ممنون میشم اگه کامل توضیح بدین چون اینا واقعا برام سوالای مهمی هستن __ یه چیز دیگه هم اینکه کارگاه تلگرام که توی کامنتها ازش حرف میزنید کجاست ، آدرسشو بدید ما هم بیایم :) قول میدم آروم بشینم یه گوشه ….. خیلی ممنون از شما

        پاسخ

        1. نظرتون رو در مورد فلکس باکس و گرید عوض کنید، چون همین روزا هم میشه برای خیلی از پروژه ها از هردوشون استفاده کرد. من توضیح بیشتری نمیدم و دعوت میکنم بیشتر مطلب بخونید و همینطور بیشتر باهاشون کار کنید.

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

          پاسخ

          1. سلام استاد عزیز و گرامی ، درسته حق با شماست ، سایتهای زیادی دیدم که با فلکس باکس طراحی شده بودن ، راستی قصد ندارید یه آموزش تصویری هم برای grid تهیه کنید ؟ بنظرم بهش فکر کنید ، خودم اولین مشتریش میشم … ی سوال مهم دیگه هم داشتم اینکه وقتی از اون سیستم col و row استفاده می کنیم یه پدینگ داره که باعث میشه صفحمون یعنی عناصر داخل صفحمون صددرصد عرض مرورگرو نگیره ، مثالشم همین لینک بالایی که گذاشتم ، اگه بخوایم صفحمون به لبه مرور گر بچسبه و پدینگ ها فقط وسطو پوشش بدن ، با همین سیستم راهی داره یا باید از یه راه دیگه وارد بشیم ؟ راهی بجز مثلا رنگ بک گراند دادن … سوال مهم دومم اینه که ما قالب رو بعد از تبدیل به مثلا وردپرس شرو کنیم به ریسپانسیو سازی یا همون موقع طراحی اولیه ؟ آخه وردپرس رو دارم یاد می گیرم و با چیزی به نام ابزارک آشنا شدم که ادمین میتونه برا خودش ایجاد کنه .. اون توی ریسپانسیو خللی ایجاد نمیکنه ؟ یه منبع خوبم برای آموزش وردپرس اگه میشه معرفی کنید بهم … خیلی ممنون موفق باشد … در ضمن یه نظرم راجب این سایت داشتم اونم اینکه سایت شما از لحاظ آموزشی بهترین سایت ایران هستش و آموزشهاتون واقعا عمیق و دلسوزانه هستن ، و بهتر از همه اینکه مطالبتون اصلا کپی نیست و براشون وقت گذاشتید ، بنظرم بهترینی ، دختر بودم عاشقت میشدم یا برعکس ;) خدا خیرت بده :)

      1. سلام مجتبی جان
        راستشو بگم من دوره های داخلی و خارجی زیادی دیدم در مورد طراحی سایت که خیلی جذاب نبودن.
        فکر میکردم این دوره هم مثل بقیه دوره ها صرفا بازگویی همون چیزهایی هست که خودم بلدم و تو سایت هایی مثل w3schools و… یاد گرفتم.
        اما انصافا این دوره خیلی خوب بود و تا اینجا که من به جلسه سوم دوره رسیدم در مورد صفحه آرایی کلی چیز کوچیک و بزرگ یاد گرفتم. من میخوام از اینکه با عجله نظر دادم ازتون معذرت بخوام. ممنون که دوره های خفن برگزار میکنید.
        در مورد float هم یه سوال داشتم. با وجود فلکس باکس و گرید چرا همچنان از float استفاده میکنیم؟

        پاسخ

        1. سلام، خواهش میکنم
          سوال بجایی می پرسید و من پست رو هم ویرایش کردم که جواب این موضوع داده بشه به دوستان

          “با توجه به وضعیت خوب پشتیبانی مرورگرها در مورد فلکس‌باکس و گرید توصیه بنده این هستش که بعد از گذراندن این دوره و تسلط به مباحث پایه‌ای صفحه آرایی حتما به سراغ یادگیری فلکس‌باکس و گرید بروید و بجای تمرکز بر روی استفاده از تکنیک Float که در این دوره تدریس می‌شود به یادگیری این دو ماژول بپردازید. البته همانطور که گفته شد بیشتر مباحث این دوره مورد نیاز شما خواهند بود و باید قبل از فلکس‌باکس و گرید آموخته شوند”

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

          موفق باشید

          پاسخ

          1. ممنون مجتبی جان
            خداروشکر که گرید و فلکس باکس در مرورگرها پشتیبانی میشن چون اصلا کار کردن با فلوت جذاب نیست.
            به نظر شما فلوت در آینده نزدیک منسوخ میشه و جاشو به فلکس و گرید میده یا نه؟
            یه سوال دیگه هم داشتم. من تمرین هایی که با عنوان homework در نظر گرفتید انجام دادم. میخواستم بپرسم چطوری میتونم تمرین های بیشتری رو حل کنم تا تسلط بیشتری رو مباحث به دست بیارم. راستش رفتم سایت codepen و نمونه کدهایی که اونجا بود دیدم انصافا یه سری هاش انقدر خفن طور نوشته شده بودن که یه لحظه فکر کردم من در برابر کسی که اون کد رو نوشته تازه کاری بیش نیستم. اگر بتونید یه سایتی بهم معرفی کنید که تمرین های مقدماتی و متوسط داشته باشه برای حل کردن خیلی خوب میشه.
            انشالله دوره گرید رو هم لانچ کنید تا مثل دیگر دوره ها کلی چیز ازتون یاد بگیریم.
            ممنون و آرزوی موفقیت دارم برای شما.

          2. – خود ویژگی فلوت کاربرد داره و دلیلی برای منسوخ شدنش نیست ولی تکنیکی که برای صفحه آرایی ازش استفاده میشه داره کم کم رخت میبنده.
            – طرح های و قالب ها متفاوت رو پیدا کنید و سعی کنید با دانشی که دارید پیادشون کنید، کمی زحمت میخواد اول راه ولی با فقط با تمرین میتونید به اون تسلطی که میخواین برسید. (سایت خاصی برای اون موضوع توی ذهنم نیست ولی برای طرح به dribbble.com سر بزنید.)
            ممنون و موفق باشید

  61. سلام وقت بخیر مهندس جان خسته نباشی
    همین امروز این دوره رو تموم کردم واقعا عالی و بی نقص بود ایشالله همیشه موفق باشی 🙏🙌

    پاسخ

  63. سلام مهندس جان .
    در دوره صفحه آرایی در مورد که اگر در تگ h1 متنی نبود و لوگو سایت بود گفتید بعدا بهتون میگم که باید چکار کنید که اگر در تگ h1 عکس لوگو سایت بود ولی یادتون رفته بود که باید چکار کنیم ؟ یعنی الان باید چکار کنیم اگر در تگ h1 عکس بود

    پاسخ

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

      حالا وقتی نمیخوای نوشتت نمایش داده بشه و فقط عکس رو میخوای (چرا نوشته حتما باید باشه؟ برای موتورهای جستجو) کافیه متن رو بزاری توی یک مثلا span و اون رو به طوری خاص (طوری که کاربر نبینه ولی موتور جستجو ببینه) مخفی کنی.

      کل ماجرا می تونه این باشه:

      
<h1>
  <span class="visually-hidden">my website title</span>
  <img src="logo" alt="">
</h1>

      و مخفی کردنه خاص اینه:

      
.visually-hidden {
  border: 0; 
  clip: rect(0 0 0 0); 
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  height: 1px; 
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
      پاسخ

  66. سلام
    این دوره نکات عالی , ریز و بسیار کاربردی داره و اگر در خریدش شک کنید وای به حالتان :D و من مدرس رو ضمانت میکنم :)

    پاسخ

  68. سلام وقتتون بخیر من css و html رو تا حدی بلدم و الان بیشتر مشکلم ریسپانسیو کردن سایت هست.این دوره برای من مفیده؟

    پاسخ

  69. با سلام.
    من به طراحی سایت علاقه دارم ولی دنبال اینم وقتی به مشکلی برمیخورم کسی راهنماییم کنه درسته گوگل هست ولی خیلی اوقات مشکلمو نمیتونم به تنهایی حل کنم.من ساکن قزوین هستم.برای حل این مشکل من چه کاری میتونم انجام بدم؟

    پاسخ

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

    پاسخ

      1. سلام آقای سیدی عزیز و گرامی
        اول که نهاااایت تشکر رو دارم از این دوره پربارتون، دوم میخواستم بپرسم هنوز دوره ای برای جاوا اسکریپت ندارید؟ خدا خدا میکنم که بگید دارم :)

        پاسخ

        1. سلام، ممنون از پیامتون
          نه متاسفانه نه صلاحیتش رو دارم فعلا نه زمانش :)
          قطعا دوره های خیلی خوبی توی اینترنت پیدا میکنین مخصوصا اگر زبان انگلیسی باشن.

          پاسخ

  73. استاد سلام من دوره فلکس باکس رو میخوام خریداری کنم اما خطا میده
    میزنه اطلاعات پذیرنده درست نیست(پذیرنده یافت نشد) من چه کنم ؟

    پاسخ

  74. سلام وقتتون بخیر
    من دوره صفحه ارایی واکنشگرا رو خریداری کردم اما هیچ کدوم از فایل ها صدا ندارن
    مشکل از کجاست؟

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *