دوره آموزشی CSS Shorts
9 ساعت 54 دقیقهمتوسط2018-12-11
مدرسین

Chris Converse
Applies design and UX principles to technology
جزئیات دوره
CSS Shorts یک مجموعه است که تمامی جنبههای CSS را شامل میشود؛ از ویژگیها و پیشپردازندهها گرفته تا موقعیتیابی (Positioning)، فلوترها (Floats) و جدیدترین تکنیکهای استایلدهی. مدرس این دوره، کریس کانورز، هر سهشنبه باز میگردد و نکات کوتاه و بهموقعی را به شما ارائه میدهد که به توسعهدهندگان وب تازهکار و باتجربه کمک میکند تا سایتهای زیباتر و کدهای کارآمدتری ایجاد کنند. با دنبال کردن این دوره، شما یاد خواهید گرفت چگونه کنترل بیشتری روی استایل، چیدمان و حتی تجربه کاربری طراحی وب خود داشته باشید. این دوره به شما کمک میکند که درک بهتری از CSS پیدا کنید و تکنیکهای جدیدی را برای بهینهسازی وبسایتهای خود یاد بگیرید. کریس کانورز با هر قسمت از دوره، ابزاری مفید به شما ارائه میدهد که میتوانید بلافاصله در پروژههای خود از آنها استفاده کنید.
اهداف یادگیری:
آشنایی با ویژگیهای مختلف CSS: یادگیری نحوه استفاده از ویژگیها و دستورات مختلف CSS برای استایلدهی به وبسایتها.
درک پیشپردازندهها: آشنایی با پیشپردازندههای CSS مانند Sass یا LESS و نحوه استفاده از آنها برای بهبود فرآیند کدنویسی.
یادگیری تکنیکهای موقعیتیابی: نحوه قرار دادن عناصر در صفحه وب با استفاده از ویژگیهای مختلف موقعیتدهی (Positioning) مانند absolute, relative, fixed و sticky.
فهم فلوترها (Floats): نحوه استفاده از فلوترها برای طراحی چیدمانهای مختلف وبسایتها.
کسب مهارت در طراحیهای واکنشگرا: یادگیری نحوه استفاده از ویژگیهای CSS برای طراحی سایتهای واکنشگرا (Responsive) که روی انواع دستگاهها بهخوبی نمایش داده شوند.
افزایش کارایی کدها: یادگیری روشهایی برای نوشتن کدهای بهینه و کارآمدتر که باعث سرعت بیشتر بارگذاری صفحات وب شود.
ایجاد تجربه کاربری بهتری: بهبود تجربه کاربری با استفاده از تکنیکهای CSS و تنظیمات طراحی.
اهداف یادگیری:
آشنایی با ویژگیهای مختلف CSS: یادگیری نحوه استفاده از ویژگیها و دستورات مختلف CSS برای استایلدهی به وبسایتها.
درک پیشپردازندهها: آشنایی با پیشپردازندههای CSS مانند Sass یا LESS و نحوه استفاده از آنها برای بهبود فرآیند کدنویسی.
یادگیری تکنیکهای موقعیتیابی: نحوه قرار دادن عناصر در صفحه وب با استفاده از ویژگیهای مختلف موقعیتدهی (Positioning) مانند absolute, relative, fixed و sticky.
فهم فلوترها (Floats): نحوه استفاده از فلوترها برای طراحی چیدمانهای مختلف وبسایتها.
کسب مهارت در طراحیهای واکنشگرا: یادگیری نحوه استفاده از ویژگیهای CSS برای طراحی سایتهای واکنشگرا (Responsive) که روی انواع دستگاهها بهخوبی نمایش داده شوند.
افزایش کارایی کدها: یادگیری روشهایی برای نوشتن کدهای بهینه و کارآمدتر که باعث سرعت بیشتر بارگذاری صفحات وب شود.
ایجاد تجربه کاربری بهتری: بهبود تجربه کاربری با استفاده از تکنیکهای CSS و تنظیمات طراحی.
مهارت ها
CSSSerial (Weekly)Web StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen Source
سرفصل ها
0. مقدمه
- 01 - خوش آمدید
فوریه 2019
- 02 - تصاویر پس زمینه متعدد
- 03 - OpenType swashes
- 04 - گالری عکس قسمت اول
- 05 - گالری عکس قسمت دوم
ژانویه 2019
- 06 - تابلوهای آکاردئونی
- 07 - تصویر حاشیه
- 08 - نسبت ابعاد
- 09 - سایه برای یک فایل PNG
- 10 - سبک بر اساس نوع دانلود
دسامبر 2018
- 11 - هر عنصر n
- 12 - الگوهای چیدمان
- 13 - متن مکان نگهدار سبک
جولای 2018
- 14 - برش تصویر الماسی شکل
- 15 - پرسپکتیو را به یک عنصر اضافه کنید
- 16 - آی فریمهای پاسخگو
- 17 - یک ستاره بسازید
- 18 - SVG رنگی با CSS
- 19 - یک نوار پیشرفت را سبک کنید
- 20 - نشان دادن فیلدهای فرم الزامی
- 21 - جعبه محصول سه بعدی - کنارههای جعبه را ایجاد کنید
- 22 - جعبه محصول سه بعدی - گرافیک را به طرفین اضافه کنید
- 23 - جعبه محصول سه بعدی - تغییر اندازه و جعبه موقعیت
- 24 - هدر خود را منحنی کنید
- 25 - اضافه کردن محتوا از مقادیر ویژگی
- 26 - الگوی راه راه با CSS
ژوئن 2018
- 27 - تاری و فوکوس جلوههای rollover
- 28 - یک تصویر را برش دهید
- 29 - ستونها به صورت عمودی تراز شده اند
- 30 - متن گرادیان
می 2018
- 31 - ستونهای انعطاف پذیر دهانه
- 32 - گرادیانها و حالتهای ترکیبی را با هم ترکیب کنید
- 33 - یک حباب گفتار ایجاد کنید
- 34 - عناصر SVG را متحرک کنید
- 35 - مشاهده لینکهای بیشتر
آوریل 2018
- 36 - یک وینیت ایجاد کنید
- 37 - ایجاد متغیر
- 38 - CSS انتخابگر نیست
- 39 - افکت پیمایش اختلاف منظر
مارس 2018
- 40 - یک لیست را فیلتر کنید
- 41 - متن سایه سه بعدی
- 42 - نشانی اینترنتیها را هنگام چاپ نشان دهید
- 43 - لینکهای آرد سوخاری سبک
فوریه 2018
- 44 - اندازه جعبه برای نجات
- 45 - متن را در یک زاویه قرار دهید
- 46 - گلوله مثلثی
- 47 - متن را مجبور به بسته بندی کنید
ژانویه 2018
- 48 - اضافه کردن تصاویر با شبه عناصر
- 49 - انتقالی برای منوی تلفن همراه شما
- 50 - یک ورق جن را متحرک کنید
- 51 - پیوندهای تلفنی سبک
- 52 - بسته بندی متن دایره ای با CSS
دسامبر 2017
- 53 - یک شبکه از تصاویر ایجاد کنید
- 54 - پاورقی چسبناک
- 55 - انتخاب رنگ
نوامبر 2017
- 56 - وضوح صفحه نمایش را تشخیص دهید
- 57 - لیست شماره گذاری شده را ادامه دهید
- 58 - یک کد QR برای چاپ اضافه کنید
- 59 - پنلهای تب تعاملی
اکتبر 2017
- 60 - متن خود را مشخص کنید
- 61 - نقطه پولکا ایجاد کنید
- 62 - قاعده افقی گرادیان
- 63 - هنر SVG را در CSS قرار دهید
- 64 - اعداد فهرست بزرگ را سبک کنید
سپتامبر 2017
- 65 - تورفتگی متن
- 66 - یک ستون را با یک شبه عنصر خم کنید
- 67 - تصاویر را به صورت خاکستری نمایش دهید
- 68 - دکمههای رادیویی سفارشی
آگوست 2017
- 69 - نشان دادن لینکهای خارج از سایت
- 70 - ایجاد نمودار دایره ای
- 71 - شماره گذاری اقلام
- 72 - متحرک سازی پس زمینه ها
- 73 - سرهای زاویه دار
جولای 2017
- 74 - چک باکسهای سوئیچ ها
- 75 - تار شدن تصاویر
- 76 - قاعده سرفصل همپوشانی
ژوئن 2017
- 77 - مرکز یک عنصر قرار گرفته
- 78 - بهترین فوتر خود را جلو بیاورید
- 79 - آن را با SASS مخلوط کنید
- 80 - آن را با LESS مخلوط کنید
می 2017
- 81 - کلاه را بیندازید
- 82 - با SASS مستقر شوید
- 83 - با LESS لانه کنید
- 84 - ستونهای خود را خم کنید
- 85 - بیایید روی تمرکز تمرکز کنیم
آوریل 2017
- 86 - منوی موبایل خود را گسترش دهید
- 87 - عمودی و مرکزی
- 88 - خطوط جداکننده ستون
- 89 - ایجاد یک شبکه
مارس 2017
- 90 - لینکهای خود را پشت سر هم دریافت کنید
- 91 - چند نکته به من بدهید
- 92 - چیدن میز شیک
- 93 - توابع رنگ در Sass و LESS
فوریه 2017
- 94 - اول چیزها اول و آخرش آخر
- 95 - تنظیم رنگها با Less و Sass
- 96 - حساب کنید، درستش کنید و فراموشش کنید
- 97 - شناور در یک شناور
ژانویه 2017
- 98 - یک دکمه برای پیوند شما
- 99 - بازدید از لینک بازدید شده
- 100 - میتوانید از من نقل قول کنید
- 101 - خاصیت درخشان
- 102 - آن پیوند را لباس بپوشانید
دسامبر 2016
- 103 - پیشینه ای به من بدهید
- 104 - موقعیت شما چیست؟
- 105 - اجازه دهید این را توسط شما شناور کنم
دوره های مرتبط
- دوره آموزشی جعبه ابزار CSS: نکات و روشهای طراحی و چینش صفحه
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی CSS برای توسعهدهندگان
- دوره آموزشی HTML، CSS و جاوااسکریپت: ساخت وب
- دوره آموزشی طرح بندی قابل دسترسی برای وب
- دوره آموزشی فرم های HTML: قابلیت دسترسی
- دوره آموزشی مقدمه ای بر طراحی و توسعه وب
- دوره آموزشی آن را تمرین کن: طرح بندی CSS