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

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

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

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

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

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

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

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

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

پیشنیازها

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

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

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

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

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

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

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

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

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

 

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

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

 

نحوه برگزاری کارگاه

💡 کارگاه در یک گروه تلگرام برگزار می شود.

این کارگاه شش جلسه بطول می انجامد که در این جلسات بصورت زیر عمل می کنیم:

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

💡 اجباری برای حضور آنلاین شما در جلسه نیست و می توانید ویدیو را هر زمان که می توانید تماشا کنید و سولات خود را در هر زمانی تا قبل از شروع جلسه بعد مطرح کنید.

💡 لینک عضویت گروه تلگرام یک روز قبل از شروع کارگاه برای شما ایمیل می شود.

ثبت نام

💡 این کارگاه معمولا در نیمه دوم هر ماه برگزار می شود که می توانید از طریق لینک زیر در آن ثبت نام کنید.

💡 اگر دانشجو و یا دانش آموز هستید می توانید برای تخفیف ویژه با ایمیل سایت (hi@css-tricks.ir) تماس بگیرید.

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

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

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

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

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

قبل از این کارگاه باید چه چیزی یاد داشته باشیم؟

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

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

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

هزینه کارگاه برای من زیاد است چکار می‌توانم بکنم؟

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

همچنین اگر شما یک نفر را برای شرکت در این دوره معرفی کنید به هردوی شما عزیزان یک تخفیف 50 درصدی داده می شود.

و اگر شرایط شما شامل دو مورد بالا نمی شود با ایمیل سایت تماس بگیرید و موضوع را مطرح کنید.

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

از طریق لینک زیر می توانید تصویر پروژه ای را که در این کارگاه بر روی آن کار می کنیم را مشاهده کنید، هر جلسه شامل دو ویدیو می باشد، ویدیو اول مثلا مفهوم 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 مگابایت

سوالت رو توی پنل بحث و گفتگو مطرح کن.

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

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

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

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

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

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

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

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

    “محمد وفایی”

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

    ممنون

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

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

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

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

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

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

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

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

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

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

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

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

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

      موفق باشید.

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

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

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

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

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

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