00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD
ثبت‌نام رایگان
  • دسترسی به کل جلسات ویدیویی از دوره
  • دسترسی به کل جلسات ویدیویی از دوره
  • اضافه شدن دوره به پروفایل
00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD

آموزش رایگان Grid Layout پروژه محور

دوره‌های رایگان
14 جلسه
100٪ (17 رای)

کاربرد دوره آموزش رایگان Grid Layout پروژه محور چیست؟

Grid یک ماژول در CSS است که با استفاده از آن می‌توانید طرح‌های پیچیده واکنش‌گرا را به‌راحتی پیاده کنید. گرید به معنای شبکه است؛ بنابراین با کمک این ابزار می‌توانید صفحات وب خود را به بخش‌های مختلفی تقسیم کنید؛ به‌نحوی‌که هیچ‌کدام از این بخش‌ها تداخلی با دیگری نداشته باشند.

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

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

در این دوره به آموزش کامل ماژول Grid Layout می‌پردازیم و شما را با ابزارها، اصطلاحات و پیاده‌سازی این سیستم آشنا می‌کنیم. ماژول فلکس باکس یکی دیگر از ابزارهای قدرتمند صفحه‌آرایی است که ترکیب آن با گرید می‌تواند سایتی زیبا و کاربردی برایتان به وجود آورد؛ بنابراین در پروژه‌ای که در این دوره انجام می‌دهیم، فلکس باکس را با گرید ترکیب می‌کنیم و به شما یاد می‌دهیم که چگونه با کمک این ماژول‌ها یک سایت زیبا پیاده‌سازی کنید.

دوره آموزش رایگان Grid Layout پروژه محور مناسب چه کسانی است؟

  • کسانی که به طراحی سایت علاقه دارند.
  • کسانی که قصد دارند از راه طراحی سایت کسب درآمد کنند.
  • صاحبان کسب‌وکاری که به یک سایت زیبا و کاربردی نیاز دارند.

بعد از فراگیری دوره آموزش رایگان Grid Layout پروژه محور چه مهارت‌هایی کسب خواهید کرد؟

  • آشنایی کامل با مباحث و اصطلاحات مرتبط با Grid Layout
  • طراحی یک سایت با استفاده از ماژول Grid Layout
  • ترکیب گرید با مدیا کوئری‌ها و فلکس باکس
  • طراحی بخش‌های مختلف یک سایت و ریسپانسیو کردن آن

سرفصل‌های دوره آموزش رایگان Grid Layout پروژه محور

فصل اول: آشنایی با Grid Layout
01:04 ساعت
01:04
Combined Shape Created with Sketch. 8 جلسه
نمایش جلسات فصل  

در این فصل شما تمام نکات و اصطلاحاتی را که برای کار با سیستم گرید لازم است بدانید، می‌آموزید. در CSS شما می‌توانید با استفاده از ستون و ردیف ساختار اصلی سایت خود را بسازید. حتی می‌توانید بین عناصر به میزان دلخواهتان فضای خالی قرار دهید.

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

معرفی و اصطلاحات Grid
"07:06
Grid Template Columns & Grid Gap
"10:06
Grid Template Row
"10:20
Spanning Columns & Rows
"00:10
Auto-fit & MinMax & Auto-fill
"07:06
Grid Template Area
"12:12
Media Query & Grid
"08:21
Alignment
"09:12
فصل دوم: پروژه Grid
01:07 ساعت
01:07
Combined Shape Created with Sketch. 6 جلسه
نمایش جلسات فصل  

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

معرفی پروژه و ایجاد Navigation
"14:43
ایجاد Header
"08:39
ایجاد Article ها
"09:03
ایجاد Footer
"11:12
ایجاد صفحه About و Contact
"10:36
Responsive پروژه
"13:38
استاد دوره
علی شیخ

علی شیخ در سال ۱۳۹۴ در رشته مهندسی کامپیوتر فارغ‌التحصیل شد و به عنوان برنامه‌نویس وب در شرکت معدنی و صنعتی چادرملو شروع به کار کرد. تخصص اصلی ایشان در زبان‌های جاوا اسکریپت و php است. وی به دلیل این که به آموزش علاقه زیادی داشت، تصمیم به راه‌اندازی وب‌سایتی در این زمینه به نام وب پروگ گرفت و اکنون پس از ۲ سال توانسته است سهم کوچکی در آموزش به افراد علاقه‌مند به برنامه‌نویسی را داشته باشد .

پیش‌نیاز‌های دوره آموزش رایگان Grid Layout پروژه محور

آموزش HTML و CSS
اطلاعات بیشتر

نظرات 

تا کنون نظری برای این دوره ثبت نشده است. برای ثبت نظر باید ابتدا در دوره ثبت نام کرده و دانشجوی دوره باشید.

سوالات پرتکرار

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

اطلاعات بیشتر

پیش‌نیازها و منابع مکمل برای فراگیری دوره آموزش رایگان Grid Layout چیست؟

در این دوره به آموزش کامل ماژول Grid Layout می‌پردازیم، بنابراین شما باید از قبل با طراحی سایت با HTML و CSS و همچنین ریسپانسیو کردن صفحات آشنایی داشته باشید. علاوه بر این موارد، در بخش‌هایی از طراحی سایت از ماژول فلکس باکس کمک می‌گیریم؛ بنابراین اگر می‌خواهید بهره کافی از این دوره ببرید، باید ابتدا پیش‌نیازهای زیر را بگذرانید:

  • دوره آموزش HTML و CSS
  • دوره رایگان Responsive Layout پروژه محور
  • دوره رایگان آموزش FlexBox پروژه محور

بعد از گذراندن دوره آموزش کامل ماژول Grid Layout برای ماهر شدن بیشتر در طراحی سایت پیشنهاد می‌کنیم آموزش‌های زیر را هم ببینید:

  • آموزش طراحی سایت با CCS پیشرفته و Sass
  • آموزش رایگان Bootstrap ۴ پروژه محور
  • آموزش Bootstrap ۴ در دنیای واقعی
  • آموزش Materialize پروژه محور
  • آموزش Javascript

سرفصل‌های دوره آموزش رایگان Grid Layout پروژه محور چیست؟

در این دوره تمام مباحث مرتبط با طرح شبکه‌بندی در طراحی سایت را به طور رایگان آموزش داده خواهد شد. در فصل اول شما را با اصطلاحات و ابزارهای گوناگون ماژول Grid Layout آشنا می‌کنیم. همچنین به شما می‌گوییم که چگونه می‌توانید گرید را همراه با مدیا کوئری‌ها و ماژول فلکس باکس به کار ببرید. در فصل دوم تمام مباحثی را که آموختیم به‌صورت عملی در قالب یک وب‌سایت پیاده می‌کنیم. از همین رو، آشنایی شما با HTML و CSS بسیار مهم است.

×

ثبت نظر

به این دوره از ۱ تا ۵ چه امتیازی می‌دهید؟

فصل اول: آشنایی با Grid Layout
01:04 ساعت
01:04
Combined Shape Created with Sketch. 8 جلسه
نمایش جلسات فصل  

در این فصل شما تمام نکات و اصطلاحاتی را که برای کار با سیستم گرید لازم است بدانید، می‌آموزید. در CSS شما می‌توانید با استفاده از ستون و ردیف ساختار اصلی سایت خود را بسازید. حتی می‌توانید بین عناصر به میزان دلخواهتان فضای خالی قرار دهید.

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

معرفی و اصطلاحات Grid
"07:06
Grid Template Columns & Grid Gap
"10:06
Grid Template Row
"10:20
Spanning Columns & Rows
"00:10
Auto-fit & MinMax & Auto-fill
"07:06
Grid Template Area
"12:12
Media Query & Grid
"08:21
Alignment
"09:12
فصل دوم: پروژه Grid
01:07 ساعت
01:07
Combined Shape Created with Sketch. 6 جلسه
نمایش جلسات فصل  

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

معرفی پروژه و ایجاد Navigation
"14:43
ایجاد Header
"08:39
ایجاد Article ها
"09:03
ایجاد Footer
"11:12
ایجاد صفحه About و Contact
"10:36
Responsive پروژه
"13:38