آموزش پروژه محور HTML HTML5

مدرس: حمیدرضا فیروزی مدت زمان آموزش : 15 ساعت تعداد سمت ها : 34 وضعیت اموزش : تکمیل
شرح دوره

Grid چیست ؟

CSS Grid Layout Module یک سیستم چیدمان مبتنی بر شبکه ، با ردیف ها و ستون ها ارائه می دهد و بدون نیاز به استفاده از شناور و موقعیت یابی ، طراحی صفحات وب را آسان تر می کند.

کاربرد Css Grid

Grid Layout به ما کمک می کند تا طرح هایی ایجاد کنیم که با استفاده از نمایش داده شده از رسانه تعریف شوند و با متن های مختلف سازگار شوند.

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

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

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

84000 تومان – خرید
لینک های دانلود سرفصل دوره
  • دمو و توضیحات کلی در مورد دوره پیش نمایش پروژه پایانی

  • آشنایی با css Grid و پشتیبانی مرورگر ها

  • ایجاد ستون ها grid-template-columns

  • ایجاد ردیف ها grid-template-rows

  • مینی پروژه منو

  • مدریت اندازه المنت ها

  • مدریت مکان المنت ها

  • کار با grid-area

  • طراحی یک صفحه ریسپانسیو و Grid Media Quary

  • واحد fraction

  • خاصیت auto در Grid

  • خاصیت repeat در Grid

  • خاصیت auto-fill در Grid

  • خاصیت auto-fit در Grid

  • مینی پروژه طراحی یک وبسایت ساده

  • شروع پروژه قالب فروشگاهی

  • طراحی top header

  • ساخت nav و منو

  • بخش اسلایدر کاملا با css

  • قسمت بالای سایت

  • بخش پرفروش ترین محصولات

  • بخش محصولات اخیر و امکانات ما

  • طراحی فوتر

  • ریسپانسیو کردن 1

  • ریسپانسیو کردن 2

  • بخش فروشگاه

  • شروع ساخت وبلاگ

  • طراحی ایتم های وبلاگ

  • بخش جزئیات محصول

  • بخش جزئیات محصول 2

  • بخش جزئیات محصول > نقد برسی

  • بخش جزئیات محصول > مشخصات

  • بخش جزئیات محصول > نظرات