آموزش طراحی یک صفحه Responsive با PostCSS

مقدمه Introduction

• خوش آمدی Welcome

• آنچه باید قبل از تماشای این دوره بدانید What you should know before watching this course

• استفاده از تمرینات این دوره Using the exercises for this course

1. شروع کار 1. Getting Started

• به طراحی پاسخگو تک صفحه ای ما می پردازیم Looking at our single-page responsive design

• نشانه گذاری HTML برای طراحی تک صفحه ای HTML markup for the single-page design

• بیاموزید که با یک گردش کار Gulp.js کار کنید Learn to work with a Gulp.js workflow

2. ایجاد سبک های پایه 2. Creating Base Styles

• از واردات مشابه PreCSS Sass در PostCSS استفاده کنید Use PreCSS Sass-like imports in PostCSS

• متغیرهایی مانند Sass با PreCSS ایجاد کنید Create Sass-like variables with PreCSS

• مهمترین سبک های CSS را بسازید Build the most important CSS styles

• تفاوت میکسین ها با PreCSS نسبت به Sass متفاوت است How mixins are different with PreCSS than with Sass

3. ماژول های یک ظاهر طراحی شده 3. Styling Modules

• از Flexbox برای ایجاد یک طرح برای هدر یا ناوبری ما استفاده کنید Use Flexbox to create a layout for our header or navigation

• یک ناوبری پاسخگو باشید Make a navigation responsive

• برای کمک به ایجاد پاورقی از توابع رنگی استفاده کنید Use color functions to help create a footer

• سبک های بخش مشترک ایجاد کنید Create shared section styles

4- ایجاد بخش ها 4. Creating Sections

• زمینه های تمام صفحه و طرح بندی های کنترل را ایجاد کنید Create fullscreen backgrounds and controlling layouts

• از تابع calc () استفاده کنید Use calc() function for simple calculations in CSS

• چه موقع باید متولی ایجاد کنیم When to create custom variables for your colors with PostCSS

• سبک های بخش را ایجاد کنید Create the sections styles

5- متحرک سازی با PostCSS 5. Animating with PostCSS

• برای ایجاد جلوی اسلاید از انیمیشن های معمولی CSS استفاده کنید Use regular CSS animations to create an slide-in effect

• برای بزرگنمایی عناصر از تحولات استفاده کنید Use transformations to zoom in elements

• انیمیشن های مبتنی بر کلید واژه را با استفاده از کتابخانه Animate.css بسازید Make keyframe-based animations using the Animate.css library

خداحافظ Goodbye

• مراحل بعدی Next steps