آموزش طراحی وب به شیوه Responsive Layout 2.0

در این دوره آموزشی قدم به قدم با Responsive Layout 2.0 آشنا شده و طراحی وب مدرن و زیبا بوسیله آن را یاد می گیرید.

عنوان اصلی : Responsive Layout 2.0

سرفصل ها :

معرفی
سیر تکاملی طراحی واکنشگرا
آنچه شما باید بدانید
1. CSS calc() را یاد بگیرید
نمای کلی CSS calc().
استفاده از calc() در یک مثال طرح
چالش: ایجاد مقیاس نوع
راه حل: ایجاد مقیاس نوع
2. CSS Custom Properties را بیاموزید
نمای کلی ویژگی های سفارشی CSS
ویژگی های سفارشی CSS را پیکربندی کنید
ویژگی های سفارشی CSS و وراثت
ویژگی های سفارشی CSS و متغیرهای Sass
استفاده از متغیرهای Sass
چالش: ویژگی های سفارشی را به مقیاس تایپ اضافه کنید
راه حل: ویژگی های سفارشی را به مقیاس تایپ اضافه کنید
3. Layouts ایجاد کنید
یک سیستم شبکه چهار ستونی ساده را علامت گذاری کنید
یک CSS شروع برای سیستم گرید ایجاد کنید
درخواست های رسانه ای را به سیستم شبکه خود اضافه کنید
CSS را برای ادغام calc() و ویژگی های سفارشی بازنویسی کنید
برای ادغام شکاف ها بین سلول های شبکه، CSS را بازنویسی کنید
فرمول طرح بندی را حتی انعطاف پذیرتر کنید
چالش: ادغام پرس و جو رسانه
راه حل: ادغام پرس و جو رسانه
4. یک صفحه وب را بازسازی کنید
پروژه: از calc() و خواص سفارشی استفاده کنید
مرحله 1: طرح بندی شبکه را اعمال کنید
مرحله 2: ویژگی های سفارشی را به طرح بندی شبکه اضافه کنید
مرحله 3: یک مقیاس نوع و خصوصیات سفارشی را اعمال کنید
نتیجه
مراحل بعدی