بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
40 تا 60 درصد تخفیف برای دوره های جامع سایت
سئو 90 » دانلود ها » آموزش فرانت » آموزش رایگان Flex و Grid در Css ، پروژه محور

آموزش رایگان Flex و Grid در Css ، پروژه محور

247 دانشجو 5

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

رایگان

دوستان همراه سئو 90 ، به یکی دیگر از دوره های رایگان و کاربردی در وب سایت خوش آمدید . این دوره یکی از مشتقات بخش Css است و دوستانی که زبان Css را آموزش دیدند ، معمولا با بخش Float ها کار می کنند و بخش Grid و Flex در بسیاری از آموزش های Css متاسفانه تدریس نشده ، البته که در دوره نابغه Css ( آموزش Css ) ، بخش Flex و Grid را بخوبی به شما آموزش دادیم چون لزوم نابغه بودن در Css تسلط بر تمامی بخش های Css است .

سئوالات متداول
پیشنیاز دوره چیست ؟

برای شرکت در این دوره لازم است با مباحث Html و همچنین زبان طراحی Css تا حد متوسط آشنایی داشته باشید در اینصورت میتوانید به راحتی در این دوره شرکت کنید .

آیا دوره تمامی بخش ها را پوشش داده است ؟

این آموزش حاصل جمع آوری تمامی سرفصل های موجود در مباحث Flex و Grid می باشد و شما ضمن شرکت در این دوره تسلط کاملی در هر دو مبحث بدست خواهید آورد .

اگر دوره نابغه Css دوره کاملی است چرا دوره Flex و Grid را در سئو 90 منتشر کردیم ؟ اول از هرچیزی لازم است بدانید ، دانشجویانی که دوره نابغه را تهیه می کنند به این پکیج داخل دوره نابغه دسترسی دارند  . البته بخش Flex در دوره نابغه به شکل مجزا در چند قسمت تدریس شده است . اما از آنجا که تکنولوژی های Flex و Grid دو بخش کاربردی برای دیزاین و طراحی قالب هستند ، بد نیست که این دو تکنولوژی را در کنار هم یاد گرفته و با مزایا و معایب هرکدام آشنا شویم . همچنین دوستانی هستند که زبان طراحی Css را یاد فرا گرفتند اما هنوز با تکنولوژی Flex و Grid آشنا نیستند . پس برای اینکه بتوان این دوره را به شکل مجزا و کاربردی بعد از Css یاد گرفت میتوان از همین دوره استفاده کرد .

اما چرا باید Flex و Grid را یاد گرفت ؟

اگر شما زبان طراحی Css را از ابتدا یاد گرفته و از صفر شروع به طراحی قالب ها کنید ، قبل از هرچیزی با تکنولوژی Float ها آشنا خواهید شد که اولیه ترین تکنولوژی برای دیزاین کردن صفحات وب بود ( البته بعد از Table ها ) . تکنولوژی Float در زمان خود بسیار مناسب بود چراکه حداکثر نیاز طراحان قالب در آن زمان فقط دیزاین کردن و قرار دادن المان ها در کنار هم برای داشتن ساختار هایی خطی بود .

آموزش css grid

اما به مرور زمان وب سایت ها بزرگتر شدند و کم کم سایت های رسپانسیو نیاز اصلی دنیای وب شده و همچنین رتبه های بالاتری نیز به وب سایت های رسپانسیو اختصاص داده شد ( از طرف موتور های جستجو مخصوصا گوگل ) ، از این جهت شاهد بودیم که تکنولوژی Float با اشکالات زیادی روبرو گردید و امکان ایجاد انعطاف لازم در قالب ها وجود نداشت . البته تکنولوژی Float در مجموع برای طراحان مشکل ساز بود و راه حل هایی مثل ساخت کلاس های Clear با خاصیت Clear:both شاید تا حد زیادی طراحان را کمک کرد . کم کم پس از تکنولوژی Float ، با خاصیت جدید Flex آشنا شدیم که میتوان گفت یک تحول فوق العاده برای طراحی بود . در داخل تکنولوژی Float فقط قادر بودیم تا المان هایی که در زیر هم هستند و اصطلاحا از نوع بلوک می باشند را در کنار هم قرار داده و ویژگی هایی را تغییر دهیم . اما کنترل زیادی روی این المان ها نداشتیم . برای مثال نمی توانستیم به راحتی محل باکس ها یا المان ها را تغییر دهیم و یا اینکه آنها را Order کنیم .

پروژه های عملی دوره

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

ادامه توضیحات در رابطه با این دوره را میتوانید در بخش ” تکمیل ” مطالعه فرمائید
توضیحات تکمیلی

اگر Flex خوب است پس چرا باید Grid را یاد گرفت ؟

شما با گردش در اینترنت و کمی مطالعه ممکن است مطالبی بسیار زیاد در مورد مزیت های Flex و یا معایب آن مطالعه کنید . در همین راستا روی بخش Grid نیز مطالعه خواهید کرد که البته در این بین حرف هایی هم زده شده که grid خیلی بهتر بوده و دوره Flex به اتمام رسیده و ... اولا این حرف ها هیچکدام درست نیست چرا که هیچ المانی را نمیتوان به کل تخریب و یا تایید کرد . تکنولوژی Grid پس از تکنولوژی فلکس ارائه شده ، به همین خاطر این ارائه شدن را به نوعی مزیت بر فلکس می دانند که هرگز نمیتوان گفت تکنولوژی که پس از تکنولوژی های قبل از خودش ارائه می شود حتما مزایای زیادی دارد . اگر شما یک Css کار در سطح مناسب باشید مطمئنا خواهید فهمید که هر کدام از تکنولوژی ها بخوبی در جای خود میتوانند ایفای نقش کنند و البته به خلاقیت و قدرت تحلیل طراح هم بستگی دارد که در چه مواردی می تواند از Flex و در چه محل هایی از Grid استفاده کند .

یکی از شاخص ترین ویژگی های Grid خاصیت کار کردن آن در 2 بعد است . در تکنولوژی فلکس میتوانیم در یک محور ، که یا محور x ( حالت افقی ) است یا محور y ( حالت عمودی ) المان ها را در کنار هم قرار داده و توسط ویژگی هایی مثل Reverse و ... روی المان ها مانور دهیم . اما در بخش Grid میتوانیم علاوه بر تنظیم المان ها در محور x ، روی محور y نیز برای المان ها و مخصوصا باکس ها ویژگی تعریف کنیم که این یکی از ویژگی های بسیار جذاب Grid میتواند باشد . در این دوره بسیار کامل و قدم به قدم ابتدا بخش Flex را بررسی کرده و سپس سراغ بخش Grid رفته و مشتقات این بخش را نیز دقیقا آموزش خواهید دید .

در نهایت و در انتهای دوره به سراغ بخش رسپانسیو نیز خواهیم رفت و انعطاف بخش Flex و همچنین Grid را در بخش رسپانیسو بررسی خواهیم کرد .


این جلسه مربوط به قسمت اول این دوره می باشد که جهت سنجش سطح کیفی دوره در اختیار شما قرار داده شده است . صدا ، تصویر ، مباحث آموزشی و همچنین حجم ویدئو ها ، تماما بهینه برای شما دانشجویان عزیز تهیه شده است تا از آموزش های سایت نهایت استفاده را داشته باشید . در این قسمت که جلسه اول دوره است شما با مبحث Flex برای اولین بار آشنا خواهید شد و با اولیه ترین فاکتور ها و دستورهای مربوط به Flex کار خواهید کرد . در همین قسمت اول خواهید دید که تا چه اندازه می توانیم توسط تکنولوژی Flex در صفحات وب انعطاف داشته باشیم . همچنین در حین آموزش ، تمامی موارد با مثال های عملی ، با آرامش و تدریس مناسب مفاهیم خدمت شما ارائه شده است .

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

فصل 1
جلسات آموزشی این دوره
شامل 10 جلسه
1
آموزش Flex و مباحث پایه
00:23:58
2
آموزش Flex و مباحث اصلی
00:19:51
3
طراحی قالب لندینگ با Flex ، قسمت اول
00:26:25
4
طراحی قالب لندینگ با Flex ، قسمت دوم
00:19:51
5
آموزش Grid ، مباحث اولیه
00:22:31
6
آموزش Grid ، مباحث پیشرفته
00:22:11
7
مقایسه تکنولوژی Flex و Grid
00:23:13
8
آموزش Area ها و Layout بندی صفحات
00:23:58
9
بررسی مباحث نهایی در Flex و Grid
00:29:44
10
بررسی ویژگی های رسپانسیو و واکنشگرا کردن Flex و Grid
00:31:16
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
دیدگاه های شما
سهرابی ۱۲ / ۱۴۰۰

عالی و کامل و خوب و بی نظیر فقط در یک کلام . فقط شما توصیه می کنید که از سایت flexboxgrid.com استفاده کنیم ؟

امید قدیمی ۱۲ / ۱۴۰۰

سلام ، بله میتوانید از این وب سایت و کتابخانه ریسپانسیو فلکس بدون مشکل در پروژه های خودتان استفاده کنید دوست من

استفانی ۰۸ / ۱۴۰۰

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

امید قدیمی ۰۸ / ۱۴۰۰

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

رضا ایرانی ۰۷ / ۱۴۰۰
5

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

omins ۰۷ / ۱۴۰۰
5

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

امید قدیمی ۰۷ / ۱۴۰۰

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

ziba_hms ۰۷ / ۱۴۰۰
5

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

امید قدیمی ۰۷ / ۱۴۰۰

سلام ممنون از نظر لطف شما

Mdw ۰۶ / ۱۴۰۰

برای آموزش بخش فلکس یک دوره ارزشمند هست و چقدر عالی که رایگان بود تا الان 4 تا دوره رایگان دانلود کردم که در همش واقعا هیچ چیزی اذیت کننده نبوده و عالی بودند خسته نباشید برای آموزش های رایگان بعدی حتما منتظر هستیم

nazaninbayati ۰۵ / ۱۴۰۰

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

امید قدیمی ۰۵ / ۱۴۰۰

سلام ممنون از نظر شما خانم بیاتی

ارسلان ۰۵ / ۱۴۰۰

این اموزش روی هم رفته خوب بود اما من زیاد بخشی که گفتی بوت استرپ پدینگ میده رو نفهمیدم پس چرا صفحه بزرگ نمیشه توی مانیتور؟

امید قدیمی ۰۵ / ۱۴۰۰

سلام دوست من سوال شما را خوب متوجه نشدم

علیرضا ۰۵ / ۱۴۰۰
5

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

Ramila ۰۵ / ۱۴۰۰

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

سمانه دانشی ۰۵ / ۱۴۰۰

سلام ممنون از نظر لطف شما ، هفته آینده یک دوره مقدماتی css به شکل رایگان تدریس خواهد شد

سعید ۰۵ / ۱۴۰۰

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

سمانه دانشی ۰۵ / ۱۴۰۰

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

kazemiii ۰۵ / ۱۴۰۰

برای ساختن قالب فلکس خوبه یا گرید سی اس اس؟؟؟ اینو نگفتین داخل فیلم ها

امید قدیمی ۰۵ / ۱۴۰۰

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

فرهاد اصلانی ۰۵ / ۱۴۰۰
5

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

شیرزاد ۰۴ / ۱۴۰۰
5

از این بهتر نمیشد ممنون

سمیه رها ۰۱ / ۱۴۰۰

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

امید قدیمی ۰۱ / ۱۴۰۰

سلام ممنون وقت شما بخیر ، در فایل قسمت اول یک پوشه با نام 1-2 ساخته شده که داخلش میتونید کدهای جلسه اول و دوم گرید را ببینید . با تشکر

علی زمانی ۰۱ / ۱۴۰۰

سلام خیلی ممنون از آموزش های خوبتون خیلی کاربرد داشت برای من از این بابت تشکر می کنم . فقط اگر ممکنه راجب بخش template-rows و تفاوت این قسمت با auto-rows در قسمتی که گرید ها را می گفتید یک توضیحی بدید ممنون میشم چون من تفاوت این دوتا رو خوب نفهمیدم ممنون

امید قدیمی ۰۱ / ۱۴۰۰

با سلام و ممنون از خرید شما ، چشم . تاکنون 8 قسمت از این دوره به اتمام رسیده حتما در قسمت 9 یا قسمت 10 این بخش را بخوبی یکبار دیگر براتون توضیح میدیم .

خرید آنلاین