دوره آموزشی ساخت یک طراحی تک صفحه ای واکنش گرا با PostCSS
2 ساعت 30 دقیقهمتوسط2016-01-22
مدرسین
Ray Villalobos
Senior Staff Instructor at LinkedIn Learning
جزئیات دوره
امروزه وبسایتهای تکصفحهای (Single-Page Websites) خیلی محبوب شدن، چون علاوه بر ظاهر جذاب و مدرن، سرعت بالایی هم دارن و تجربهی کاربری روانتری ارائه میدن. اما طراحی این مدل سایتها میتونه یه کم چالشبرانگیز باشه، مخصوصاً اگه بخوایم ریسپانسیو (Responsive) باشن و روی همهی دستگاهها درست نمایش داده بشن.
PostCSS یه ابزار پیشرفته برای پردازش CSS هست که با کمک جاوااسکریپت، امکانات بیشتری به استایلنویسی ما اضافه میکنه. توی این دوره، ری ویلابوس (Ray Villalobos) به شما یاد میده که چطور با استفاده از PostCSS یه سایت تکصفحهای مدرن و واکنشگرا بسازین.
چطور کار میکنیم؟ این دوره گامبهگام جلو میره. اول ساختار HTML رو برای یه سایت تکصفحهای آماده میکنیم، بعد با کمک PostCSS و پلاگینهای جذابش، استایلهای مختلف، انیمیشنهای روان و یه منوی ناوبری ریسپانسیو بهش اضافه میکنیم. استفاده از Flexbox هم باعث میشه طراحی ما مرتبتر و حرفهایتر بشه.
خبر خوب؟ این ترکیب، کار طراحی سایتهای تکصفحهای رو سریعتر و سادهتر از همیشه میکنه! 😉
🎯 اهداف یادگیری این دوره:
✅ ساختاردهی به HTML برای طراحی سایت تکصفحهای
✅ استفاده از PreCSS برای وارد کردن کدهای مشابه Sass
✅ ساخت متغیرهای مشابه Sass در PostCSS
✅ طراحی و استایلدهی به اجزای مختلف صفحه
✅ استفاده از Flexbox برای چیدمان هدر و منو
✅ ایجاد بخشهای مختلف صفحه با استایلهای جذاب
✅ ایجاد انیمیشنهای جذاب در صفحه با PostCSS
✅ ادغام PostCSS در Gulp برای افزایش بهرهوری
PostCSS یه ابزار پیشرفته برای پردازش CSS هست که با کمک جاوااسکریپت، امکانات بیشتری به استایلنویسی ما اضافه میکنه. توی این دوره، ری ویلابوس (Ray Villalobos) به شما یاد میده که چطور با استفاده از PostCSS یه سایت تکصفحهای مدرن و واکنشگرا بسازین.
چطور کار میکنیم؟ این دوره گامبهگام جلو میره. اول ساختار HTML رو برای یه سایت تکصفحهای آماده میکنیم، بعد با کمک PostCSS و پلاگینهای جذابش، استایلهای مختلف، انیمیشنهای روان و یه منوی ناوبری ریسپانسیو بهش اضافه میکنیم. استفاده از Flexbox هم باعث میشه طراحی ما مرتبتر و حرفهایتر بشه.
خبر خوب؟ این ترکیب، کار طراحی سایتهای تکصفحهای رو سریعتر و سادهتر از همیشه میکنه! 😉
🎯 اهداف یادگیری این دوره:
✅ ساختاردهی به HTML برای طراحی سایت تکصفحهای
✅ استفاده از PreCSS برای وارد کردن کدهای مشابه Sass
✅ ساخت متغیرهای مشابه Sass در PostCSS
✅ طراحی و استایلدهی به اجزای مختلف صفحه
✅ استفاده از Flexbox برای چیدمان هدر و منو
✅ ایجاد بخشهای مختلف صفحه با استایلهای جذاب
✅ ایجاد انیمیشنهای جذاب در صفحه با PostCSS
✅ ادغام PostCSS در Gulp برای افزایش بهرهوری
مهارت ها
HTMLCSSWeb StandardsWeb DesignFront-End Web DevelopmentProjectWeb DevelopmentOpen Source
سرفصل ها
0. مقدمه
- 01 - خوش آمدید
- 02 - آنچه باید قبل از تماشای این دوره بدانید
- 03 - استفاده از تمرینات این دوره
1. شروع به کار
- 04 - نگاهی به طراحی واکنشگرای تکصفحهای ما
- 05 - نشانه گذاری HTML برای طراحی تک صفحه ای
- 06 - کار با گردش کار Gulp.js را یاد بگیرید
2. ایجاد سبکهای پایه
- 07 - از Import PreCSS Sass مانند در PostCSS استفاده کنید
- 08 - متغیرهای Sass مانند با PreCSS ایجاد کنید
- 09 - مهم ترین سبکهای CSS را بسازید
- 10 - تفاوت میکسها با PreCSS با Sass
3. ماژولهای یک ظاهر طراحی شده
- 11 - از Flexbox برای ایجاد یک طرح برای هدر یا ناوبری خود استفاده کنید
- 12 - یک ناوبری را پاسخگو کنید
- 13 - از توابع رنگی برای کمک به ایجاد پاورقی استفاده کنید
- 14 - سبکهای بخش مشترک ایجاد کنید
4. ایجاد بخش
- 15 - ایجاد پس زمینه تمام صفحه و کنترل طرح بندی
- 16 - از تابع calc() برای محاسبات ساده در CSS استفاده کنید
- 17 - زمان ایجاد متغیرهای سفارشی برای رنگهای خود با PostCSS
- 18 - سبک بخشها را ایجاد کنید
5. متحرک سازی با PostCSS
- 19 - از انیمیشنهای معمولی CSS برای ایجاد افکت اسلاید استفاده کنید
- 20 - از تبدیلها برای بزرگنمایی عناصر استفاده کنید
- 21 - با استفاده از کتابخانه Animate.css انیمیشنهای مبتنی بر فریم کلیدی بسازید
خداحافظ
- 22 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی برنامه نویسی فرمهای وب با جاوااسکریپت
- دوره آموزشی HTML، CSS و جاوااسکریپت: ساخت وب
- دوره آموزشی طرح بندی قابل دسترسی برای وب
- دوره آموزشی فرم های HTML: قابلیت دسترسی
- دوره آموزشی مقدمه ای بر طراحی و توسعه وب
- دوره آموزشی CSS عملی برای No-Coders
- دوره آموزشی HTML برای برنامه نویسان
- دوره آموزشی HTML کاربردی برای غیر برنامهنویسان