آموزش FlexBox پروژه محور
اگر شما به حوزه طراحی و برنامه نویسی وب علاقه داشته باشید قطعا در مورد صفحه آرایی، ریسپانسیو سازی، فلکس باکس و … شنیده اید. در این دوره قصد داریم ماژول فلکس باکس را به صورت پروژه محور و از صفر تا صد به شما آموزش دهیم.
ما بهتون قول میدیم که توی این دوره تمام مباحث مربوط به فلکس باکس رو با ساده ترین مثال ها آموزش بدیم و یک پروژه نهایی زیبا و کار آمد رو در انتهای دوره بهتون ارائه بدیم (:
تفاوتی که دوره فلکس باکس سبزلرن با بقیه دوره های فلکس باکس دارد کامل بودن مباحث گفته شده و همچنین پروژه کاملی است که در انتهای دوره با فلکس باکس نوشته می شود تا شما دوستان عزیز این ماژول را به خوبی یاد گرفته و مسلط شوید تا بتوانید در پروژه هایتان از آن استفاده کنید.
ضمنا اگر شما مفهوم اصطلاحاتی مثل فلکس باکس، ریسپانسیو و … را نمی دانید، ادامه توضیحات را مطالعه کنید
ریسپانسیو چه مفهومی دارد؟
کلمه ریسپانسیو یکی از مفاهیمی است که در حوزه برنامه نویسی سایت مورد استفاده قرار می گیرد. امروزه با توجه به وجود گوشی های موبایل و تبلت های مختلف با سایز و اندازه های متفاوت کلمه ریسپانسیو پررنگ تر و پر استفاده تر شده است.
قصد دارم مفهوم این کلمه را به طور مثال برای شما توضیح دهم. فرض کنید شما یک وب سایتی را در لپتاپ خودتان طراحی می کنید و وب سایت طراحی شده در مانیتور شما هیچ مشکلی ندارد. یک شخص دیگر قصد دارد با گوشی موبایل خود وارد وب سایت شما شود. در این حالت چون که اندازه نمایشگر موبایل کاربر با اندازه نمایشگر لپتاپ شما متفاوت است، وب سایت شما برای کاربرتان به درستی نمایش داده نخواهد شد و عناصر مختلف وب سایت به موقعیت و ظاهر مناسب خود را از دست خواهند داد. علت این امر ریسپانسیو نبودن وب سایت شما است. برای این که وب سایت شما تقریبا در همه دستگاه های موبایل، لپتاپ، تبلت و … به درستی نمایش داده شود، باید وب سایتتان را به صورت ریسپانسیو طراحی کنید
امروزه شما به عنوان یک برنامه نویس وب مجبور هستید که وب سایت هایی را که طراحی می کنید، به صورت ریسپانسیو طراحی کنید؛ چون امروزه بیشتر کاربر های وب سایت ها افراد عادی هستند که لپتاپ ندارند و با موبایل ها یا تبلت های مختلف وب سایت شما می شوند و سایت شما باید در دستگاه موبایل آن ها به درستی نمایش داده شود.
این همه توضیح دادیم تا به کاربرد فلکس باکس برسیم. فلکس باکس یکی از ابزار هایی است که به شما کمک می کند تا بتوانید وب سایتتان را در مدت زمان بسیار پایینی به صورت ریسپانسیو طراحی کنید
فلکس باکس چیست؟
اگر شما در زمینه طراحی سایت مشغول به فعالیت باشید، قطعا اطلاع دارید که یکی از دغدغه ها و مشکلات طراحان وب صفحه آرایی و ریسپانسیو کردن وب سایت است. اگر بحث ریسپانسیو کردن را فاکتور بگیریم، روش های مختلفی برای صفحه آرایی وجود دارد. مثل استفاده از float که به مشکلاتی برمیخوردیم که با ترفند clearfix قابل حل بودند. یا به عنوان مثال استفاده از روش inline-block که در این روش نیز مشکل whitespace وجود داشت.
اما Css3 ماژولی در داخل خود برای صفحه آرایی دارد که علاوه بر این که مشکلات روش های قبلی را از بین برده است، همچنین قابلیت های بیشتر و بهتری در اختیار شما قرار می دهد. اسم ماژولی که در مورد آن صحبت می کنیم Flex Box یا همان Flexible Box است. فلکس باکس به شما در صفحه آرایی صفحات مختلف وب سایتتان کمک می می کند و همچنین به کمک آن می توانید در فرآیند ریسپانسیو سازی وب سایتتان سریع تر عمل کنید.در این دوره به آموزش کامل و پروژه محور فلکس باکس خواهیم پرداخت.
فلکس باکس جایگزین دیگری دارد؟
ممکن است برایتان سوال باشد که برای سهولت در امر ریسپانسیو سازی وب سایت حتما باید فلکس باکس را یاد بگیریم یا انتخاب های دیگری نیز داریم؟
هیچ اجباری بر انتخاب فلکس باکس نیست و شما می توانید به جای فلکس باکس از Css Grid نیز استفاده کنید.
در این قسمت قصد ندارم توضیحات زیادی در مورد Css Grid ارائه دهم اما Css Grid نیز یکی از ابزار های موجود در Css است که به شما کمک می کند تا وب سایتتان را در مدت زمان کوتاهی به صورت ریسپانسیو طراحی کنید.
اما به دلایل راحت تر بودن و جامعه آماری بالای فلکس باکس نسبت به Css Grid، یادگیری فلکس باکس را پیشنهاد می کنم.
بعد از دیدن این دوره به چه سطحی در فلکس باکس خواهم رسید؟
فلکس باکس واقعا به اندازه ای گسترده نیست که شما نگران یادگیری ناقص آن باشید.
علاوه بر این که در این دوره مفاهیم و Property های به طور کامل به شما آموزش داده می شوند، پروژه نهایی دوره نیز به قدری کامل است که شما بعد از این دوره تمام مباحث مربوط به فلکس باکس را به خوبی یاد می گیرید و بعد از آن می توانید با پیاده سازی یک قالب با فلکس باکس بر آن مسلط شوید. پس به قطع یقین می توان گفت شما با گذراندن این دوره مبحث فلکس باکس را به صورت کامل یاد خواهید گرفت
با فلکس باکس نیازی به media نیست؟
همان طور که می دانید media نیز یکی از ابزار ها در Css برای ریسپانسیو سازی وب سایت است. Media اساسی ترین ابزار برای این کار است و شما چه با بوت استرپ، چه با فلکس باکس، چه با Css Grid و … چه با هر ابزار دیگری از media بی نیاز نمی شوید و همیشه به آن نیاز دارید. اما فلکس باکس نیاز شما به media را به حداقل می رساند
پیش نیاز های فلکس باکس
فلکس باکس چیز جدا از Css نیست و داخل خود Css وجود دارد.
در اصل فلکس باکس نوعی display است که تا به الان با display های نوع block، inline و … آشنا هستید. فلکس باکس نیز همان display: flex است که با property هایی که دارد به شما کمک می کند تا در فرآیند صفحه آرایی و ریسپانسیو سازی سایت سریع تر عمل کرده و در مدت خیلی کوتاهی وب سایتتان را ریسپانسیو کنید. پس شروع یادگیری فلکس باکس به جز Css پیش نیاز دیگری ندارد و اگر شما Css را یاد گرفتید، همین الان می توانید دوره فلکس باکس سبزلرن را شروع کنید.
اگر شما هنوز Css را به خوبی یاد نگرفتید، پیشنهاد می کنم قبل از شروع دوره فلکس باکس، ابتدا از دوره Css سبزلرن استفاده کرده و آن را یاد بگیرید و سپس وارد دوره فلکس باکس شوید.
آیا همه مرورگر ها از فلکس باکس پشتیبانی می کنند؟
این سوال دغدغه خیلی از افراد این حوزه برنامه نویسی وب است. خیلی از دوستان نه تنها در مورد فلکس باکس، بلکه در مورد پشتیبانی مرورگر ها از بقیه ابزار های این حوزه نیز سوال دارند.
خبر خوب این است که وب سایتی به اسم CanIUse وجود دارد که شما می توانید از پشتیبانی هر مرورگر مثل گوگل کروم، فایرفاکس، اپرا، بریم و … از هر تکنولوژی و ابزار های موجود در برنامه نویسی وب را به راحتی مطلع شوید. برای این کار کافی است به وب سایت caniuse.com رفته و در اینپوت باکس مربوط به serach کلمه flex را نوشته و سرچ کنید.
سپس یک جدول تشکیل شده از مرورگر های مختلف به شما نمایش داده می شود که می توانید با توجه به جدول نمایش داده شده از پشتیبانی هر مرورگر از فلکس باکس مطلع شوید.
به عنوان مثال تصویر زیر برای پشتیبانی مرورگر ها از فلکس باکس است:
فلکس باکس سخت است؟
فلکس باکس یک ماژول بسیار آسان و راحتی است و همان طور که بالاتر گفته شد اگر شما Css را به خوبی بلد باشید می توانید فقط در مدت زمان یک روز تمام مباحث و Property های فلکس باکس را به خوبی یاد گرفته و با انجام دو پروژه با فلکس مسلط شوید.پس از بابت سختی فلکس باکس هیچ نگرانی نداشته باشید و اگر Css را یاد گرفتید، این دوره را شروع کنید
این دوره پشتیبانی دارد؟
بدون شک یکی از ویژگی هایی که می تواند هر دوره آموزشی را از بقیه دوره ها متمایز کند و در یادگیری دانشجو ها تاثیر چشمگیری داشته باشد، بحث پشتیبانی دوره است. قطعا در تمام دوره های آموزشی مرتبط با حوزه برنامه نویسی، در طی آموزش سوالات و مشکلاتی برای دانشجویان پیش می آید که اگر دوره توسط مدرس پشتیبانی نشود، دانشجوها نمی توانند سوالات خود را برطرف کنند و در نتیجه یادگیری دانشجویان با مشکل روبرو می شود. به همین دلیل دوره ای که پشتیبانی نداشته باشد، نمی توان به آن اعتماد کرد. اما خبر خوب این است که دوره فلکس باکس سایت سبزلرن توسط مدرس دوره پشتیبانی می شود. شما می توانید سوالات خود را در قسمت کامنت های دوره مطرح کنید و مدرس دوره سوال و ابهام شما را برطرف کند. علاوه بر کامنت های دوره، در شبکه مجازی تلگرام نیز گروهی تحت عنوان “گروه پشتیبانی دوره فلکس باکس” ایجاد شده که شما می توانید با عضویت در آن همه سوالات خود در رابطه با دوره را مطرح کرده و برطرف کنید
بنا به توضیحاتی که بالاتر ارائه شد، مفاهیمی مثل ریسپانسیو، فلکس باکس، Css Grid و … را یاد گرفتید. امروزه افراد مشغول در حوزه فرانت اند در خیلی از شرکت ها و تیم های برنامه نویسی از فلکس باکس برای صفحه آرایی و ریسپانسیو کردن وب سایت هایشان استفاده می کنند. پیشنهاد می کنم اگر وارد حوزه فرانت اند شدید یا به آن علاقه داشته و قصد دارید وارد این حوزه شوید، حتما حتما این دوره را از دست ندهید و همین الان در دوره ثبت نام کرده و یادگیری فلکس باکس را استارت بزنید
سرفصل ها
5align-content9:33
6order7:27
7flex-grow, flex-shrink13:50
8flex-basis16:38
9flex, align-self9:58
10شروع پروژه، فایل های مورد نیاز20:58
11کدنویسی Header جلسه اول21:52
12کدنویسی Header جلسه دوم19:35
13کدنویسی Main بخش Works16:46
14کدنویسی Main بخش Comments جلسه اول25:31
15کدنویسی Main بخش Comments جلسه دوم21:17
16کدنویسی Main بخش Portfolio13:29
17کدنویسی Footer21:29
18ریزکاری و بهبود کلی طرح15:12
19ریسپانسیو سازی بخش Menu21:20
20ریسپانسیو سازی بخش Works21:18
21ریسپانسیو سازی بخش Comments13:12
22ریسپانسیو سازی بخش Portfolio, Footer13:31
23جلسه پایانی، صحبتی در رابطه با ادامه مسیر یادگیری8:24
نظرات
قوانین ثبت دیدگاه
- دیدگاه های نامرتبط به دوره تایید نخواهد شد.
- سوالات مرتبط با رفع اشکال در این بخش تایید نخواهد شد.
- از درج دیدگاه های تکراری پرهیز نمایید.
- اگر نیاز به پشتیبانی دوره دارید از قسمت پرسش سوال در قسمت نمایش انلاین استفاده نمایید
برای ارسال نظر باید وارد حساب کاربری خود شده باشید.
رایگان!
reyhaneh( خریدار محصول )
سلام
جا داره ی تشکر ویژه و خسته نباشید بگیم به سایت سبزلرن و آقای حمیدرضا عبادی
واقعا دوره ی کامل و خیلی عالی و مفیدی بود.من برای اولین بار آموزش flexbox را دیدم و تونست انتظار لازم را در این بحث برآورده کنه
با دیدن این اموزش خیلی مشتاق شدم آموزش های دیگر اقای عبادی را دنبال کنم.ممنون میشم اگر آموزش هایی دررابطه با مباحث html,css,bootstrap,js,vue تحت تدریس اقای عبادی هست اطلاع دهید تا بتونم اون ها را هم مشاهده کنم و از تدریس ایشون نهایت استفاده را بکنم
ممنون میشم اگر این لطف را انجام دهید.
خدا قوت
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام
خواهش میکنم، شما هم خسته نباشید.
نظر لطف شماست🌹
میتونید دوره طراحی حرفه ای قالب رو هم مشاهده کنید، از منو فرانت اند، آموزش اصولی طراحی قالب رو انتخاب کنید.
تابستون به امید خدا دوره های جدیدی هم قراره بذارم.
رزا( خریدار محصول )
عالییییییییه عالیییییییییی. ممنون از تمام زحماتتون
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام
خواهش میکنم موفق باشید
هدی فراهانی( خریدار محصول )
عااااااااااالی
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام
ممنون از نظرتون موفق باشید
KamiKaze( خریدار محصول )
یکی از بهترین دوره های سبزلرن.
خسته نباشید به آقای عبادی
واقعا نحوه بیان و آموزش عالی بود.
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام، خواهش میکنم نظر لطف شماست.
موفق باشید.
Arezoo75( خریدار محصول )
خسته نباشید میگم به تیم خوب سبزلرن
خدا قووووت آقای عبادی بسیاااار دوره خوبی بود بخصوص پیاده سازی پروژه آخر که تونستیم به صورت کاربردی فلکس باکس رو یاد بگیریم .. واقعا از دیدن این آموزش لذت بردم
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام
شماهم خسته نباشید، خواهش میکنم خوشحالم مفید بوده براتون.
nastaran76( خریدار محصول )
هرچقدر از عالی بودن این دوره بگم کمه، اقای عبادی ممنونم ازت که تمام چالش های من تو فلکس باکس رو برطرف کردی
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام
نظر لطف شماست، خواهش میکنم🤞
موفق باشید.
steempunker( خریدار محصول )
اول یه تشکر ویژه از اقا حمید که واسه ساخت این پک وقت گذاشتن و دوم ممنونم از سایت سبز لرن. با کلی دیدن اموزش تو یوتوب و جاهای مختلف این سایت ، این بههههههههههترین پکیج آموزشی ای بود که تاحالا دیدم. فکر نکنم کسی پیدا شه بعد اتمام این پکیج مشکلی تو flex box داشته باشه.
موفق باشید
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام
زنده باشید خواهش میکنم، ممنون از نظر مثبتتون🤞
سپیده 62( خریدار محصول )
ممنون از زحمات شما.عالی بود
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام، خواهش میکنم موفق باشید.
ehsan( خریدار محصول )
سلام برای مشاهده این دوره نیاز به جاوا اسکریپت هست؟ موقع دانلود چشمم به فایل های js خورد. ممنون میشم پاسخ بدید.
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام، نیازی نیست، توی این دوره تمرکز روی مباحث خود flexbox هست.
pouria( خریدار محصول )
عالی
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام
ممنون از نظرتون موفق باشید
Dark.rj( خریدار محصول )
سلام و خسته نباشید.
دوره بسیار مفیدی بود به نظرم. و نقطه قوت این دوره پروژه‌ای بود که بهش پرداخته شد. هم مباحث CSS هم flexbox رو بیشتر و بهتر یاد گرفتم.
ممنون از استاد عبادی عزیز 🙂
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام
خواهش میکنم، رضایت شما باعث افتخار من هست.
موفق باشید
ali_ranjbaran( خریدار محصول )
واقعا خدا قوت…
عالی بود…
در مورد فلکس باکس اولین و آخرین دوره ای بود که دیدم و نیازی به دوره دیگه ای نیست…
حمیدرضا عبادی(مدرس)( خریدار محصول )
سلام، ممنون از نظرتون، خوشحالم که تونستم مفید واقع بشم موفق باشید.