آموزش پروژه محور CSS Grid + پروژه لندینگ رستوران
Css grid یک ماژول مربوط به css است . کارکردن با این ماژول بسیار جذاب است و با امکانات و پراپرتی هایی که در اختیار ما قرار میدهد نه تنها مشکلات گذشته در طراحی و ریسپانسیو را نخواهیم داشت بلکه میتوانیم خیلی راحت تر از قبل کد بزنیم و لذت ببریم. پس یادتان باشد با کمک css grid میتوانیم صفحات وب سایت خود را به آسانی پیاده سازی کنیم.
ریسپانسیو یعنی چی؟!
با پیشرفت تکنولوژی در ساخت دیوایس های الکترونیکی ، موبایل ها ، تبلت ها ، لپ تاپ ها و مانیتورهایی با اندازه های متفاوت پا به عرصه گذاشتند . هرکدام از این دیوایس ها از نظر سایز صفحه نمایش بایکدیگر متفاوت هستند . بدیهی است که صفحه ی نمایش لپ تاپ بزرگ تر از تبلت و صفحه نمایش تبلت بزرگتر از موبایل های معمولیست. شاید از خودتان بپرسید که چرا اندازه ی صفحه ی نمایش برای ما مهم است؟؟
با یک مثال توضیح خواهم داد…
فرض کنید قصد دارید با لپ تاپ خود به یک سایت سر بزنید ، اندازه ی صفحه نمایش لپ تاپ شما بزرگ است و سایت به زیبایی به نمایش در میاید . تمامی آیتم ها به زیبایی و با نظم خاصی کنار همدیگر قرارگرفته اند. حالا میخواهید با تلفن همراهتان دوباره همان سایت را نگاه کنید ، ناگهان جا میخورید! دیگر تصویر به زیبایی قبل نیست ، تمامی آیتم ها به هم ریخته است و اصلا شکل زیبایی ندارد و حتی ممکن است کاربر را آزرده کند و موجب شود کاربر همان لحظه سایت را ببندد و هرگز به آن سر نزند!
چرا همچین اتفاقی میوفتد؟؟ پاسخ واضح است ؛ اندازه! در اینجا اهمیت اندازه صفحه ی نمایش مهم میشود . صفحه ی نمایش لپ تاپ بزرگ است و فضای زیادی برای هر آیتم دارد ، اما صفحه ی موبایل و تبلت کوچک تر است ، پس باید در نحوه ی قرارگیری هر آیتم ، اندازه ی آن ها ، تعداد و … تغییراتی ایجاد کرد ، با ایجاد چنین تغییراتی میتوان دوباره ظاهر زیبا و شکیل را برای سایت بوجود آورد ، در ساده ترین حالت ممکن اگر سایت شما بر روی دیوایس هایی با سایزهای متفاوت همچنان زیبا به نمایش در بیاید ، اصطلاحا میگوییم صفحه “ریسپانسیو” است.
درمثال بالا به اهمیت بسیار زیاد ریسپانسیو پی بردید ، سایتی که ریسپانسیو نیست بدون شک کاربر از دست میدهد چون همه چیز آنقدر بهم ریخته میشود که کاربر هیچ کاری نمیتواند بکند و گیج میشود!
پس مطمئن باشید یکی از مهم ترین وظایف شما به عنوان طراح و برنامه نویس وب ، ایجاد صفحات ریسپانسیوی است که در دیوایس های متفاوت به درستی و زیبایی به نمایش درخواهند آمد.
ممکن است از خود بپرسید چگونه میتوانیم صفحاتمان را ریسپانسیو بکنیم ، به راحتی!
ابزارهای متنوعی برای این کار وجود دارند که یکی از آنها CSS GRID است.
درگذشته ابزارهای طراحی مانند الان زیاد و متنوع نبودند و بعضا کار با آنها دشوار بود و برنامه نویس و طراح را با چالش ها و مشکلات زیادی مواجه میکرد ، اما امروزه با ابزارهای جدید ، میتوان به راحتی ریپسانسیو را انجام داد . ما اینجاییم که در این دوره یکی از این ابزارهای جذاب را به شما معرفی و آموزش دهیم.
ابزار CSS Grid چیست؟!
CSS Grid یک ماژول مربوط به CSS است. کارکردن با این ماژول بسیار جذاب است و با امکانات و پراپرتی هایی که در اختیار ما قرار میدهد نه تنها مشکلات گذشته در طراحی و ریسپانسیو را نخواهیم داشت بلکه میتوانیم خیلی راحت تر از قبل کد بزنیم و لذت ببریم. پس یادتان باشد با کمک CSS Grid میتوانیم صفحات وب سایت خود را به آسانی پیاده سازی کنیم.
چرا از Css Grid استفاده کنیم؟؟
همانطوری که گفتم css grid ماژولیست که در درون خود css وجود دارد. پس شما برای استفاده از آن نیازی به نصب هیچگونه برنامه، پلاگین و یا کتابخانه ای را ندارید! از طرف دیگر کار کردن با css grid سرعت شما را در پیاده سازی و لایه بندی صفحات بالاتر میبرد. کارکردن با css grid راحت است، چیز پیچیده ای برای گمراهی وجود ندارد، در کنار تمامی این موارد، با css grid نیاز کمتری به مدیاکوئری هم پیدا خواهید کرد. Css Grid عالیست، اینطور نیست؟؟
کاربرد اصلی Css Grid کجاست؟؟
با Css Grid میتوان تمامی قسمت های یک صفحه را پیاده سازی کرد، اما کاربرد اصلی و مهم CSS GRID لایه بندی بخش های دوبُعدی میباشد. البته این بدان معنا نیست که نمیتوان در لایه بندی های تک بعدی استفاده کرد، CSS GRID در پیاده سازی هردوی آنها کاربرد دارد.
برای Css Grid جایگزینی وجود دارد؟؟
همانطوری که گفته شد ابزارهای گوناگونی برای طراحی ریسپانسیو در حال حاضر وجود دارد که هرکدام مزایا و معایب خاص خود را دارند ، شما میتوانید از هرکدام استفاده کنید ، اما به جز CSS Grid یک ماژول دیگر به نام FlexBox نیز در CSS وجود دارد . FlexBox نیز مزایای خاص خود را دارد و بسیار کاربردیست ، اگر تمایل دارید که در مورد FlexBox اطلاعات بیشتری کسب کنید میتوانید به دوره ی فلکس باکس موجود در سایت سبزلرن سر بزنید . شخصا از نظر بنده ، استفاده ی ترکیبی از Css Grid و FlexBox میتواند جذابیت کدزنی را برایتان دوچندان کند.
این دوره مرا به چه سطحی از Css Grid خواهد رساند؟؟
همانطوری که میدانید یادگیری برنامه نویسی هیچگاه به پایان نخواهد رسید و شما پس از گذراندن هر دوره ای باید تمرین کنید تا به مطالب آن مسلط بشوید. اما در این دوره سعی شده است با پوشش دادن مباحث CSS GRID و پراپرتی های کاربردی آن، حل چالش ها و مینی پروژه های گوناگون ، بازی کردن با CSS GRID و پیاده سازی یک پروژه ی نهایی، تسلط شما به این ماژول را به حداکثر برسانیم.
پیش نیازهای Css Grid
Css Grid پیش نیازی جز خود CSS ندارد. پس پیشنهاد میکنم قبل از دیدن این دوره مباحث مربوط به html و css را فرابگیرید ، برای این کار میتوانید به دوره های جامع آموزش html و css سبزلرن سر بزنید.
یادگیری Css Grid سخت است؟؟
یادگیری هیچ چیز سخت نیست به شرط آن که تلاش و کوشش را فراموش نکنیم . اما در کل یادگیری CSS GRID نه تنها سخت نیست ، بلکه شیرین و جذاب هم هست ، پراپرتی ها و مباحث CSS GRID راحت هستند و موردی برای گمراهی وجود ندارد ، از طرفی در این دوره تلاش شده است با توضیحات و ارائه ی مثال ، درک دانشجو از مباحث به حداکثر برسد.
سرفصل ها
4آشنایی با مفاهیم پایه ای css grid14:10
5نصب vscode و اکستنشن های موردنیاز6:55
6شیرجه در استخر grid18:28
7مفهوم repeat و fractional unit در css grid17:53
8position ها در css grid و پراپرتی های مهم آن21:56
9بازی با css grid!17:25
10بررسی مفهوم span25:01
11چالش اول (مینی پروژه اول)3:30
12حل چالش اول22:50
13implicit و explicit در css grid17:40
14چالش دوم ( مینی پروژه ی دوم )3:05
15حل چالش دوم18:05
16مبحث aligning19:18
17ادامه ی مبحث aligning16:58
18minmax در css grid23:02
19بحث شیرین ریسپانسیو در grid19:43
20شروع پروژه!8:08
21بخش اول پروژه19:02
22بخش دوم پروژه15:18
23بخش سوم پروژه18:22
24بخش چهارم پروژه16:49
25بخش پنجم پروژه32:49
26بخش ششم پروژه34:59
27بخش پایانی23:54
نظرات
قوانین ثبت دیدگاه
- دیدگاه های نامرتبط به دوره تایید نخواهد شد.
- سوالات مرتبط با رفع اشکال در این بخش تایید نخواهد شد.
- از درج دیدگاه های تکراری پرهیز نمایید.
- اگر نیاز به پشتیبانی دوره دارید از قسمت پرسش سوال در قسمت نمایش انلاین استفاده نمایید
برای ارسال نظر باید وارد حساب کاربری خود شده باشید.
35000 – رایگان!
هدی فراهانی( خریدار محصول )
خیلی مممنوووون
عالی بود
mhayar_front( خریدار محصول )
سلام استاد خسته نباشید
دوره جنگو رو شروع نمیکنید ؟؟
maral.nouh( خریدار محصول )
سلام خسته نباشید میخواستم بگم اون فایل زیپ که مربوط به اخر پروژه هست پوشه عکس ها توش نیست ممنون میشم بارگذاری کنید تا دقیقا از همون عکس ها برای تمرین استفاده کنیم
ممنون
امیر الهی(مدرس)( خریدار محصول )
سلام دوست من . تعداد و حجم عکس ها بالا بودن و به همین خاطر حجم فایل پیوست بسیار بالا میرفت . شما میتونید از عکس های دلخواه خودتون در پروژتون استفاده کنید . برای دانلود عکس میتونید از سایت هایی مثل pinterest , unsplash , pexeles استفاده کنید .
موفق باشید