ویدئو معرفی دوره

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

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

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

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

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

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

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

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

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

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

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

جلسات آموزشی این دوره
 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

جلسه اول دوره

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

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

رایگان – خرید