تخفیف ویژه همین الان — دوره‌های تخفیف‌دار را ببینید.
روز
:
ساعت
:
دقیقه
:
ثانیه
تخفیف‌های ویژه
دوره آموزشی تکنیک‌های مدرن CSS بدون نیاز به JavaScript

دوره آموزشی تکنیک‌های مدرن CSS بدون نیاز به JavaScript

1 ساعت 41 دقیقهپیشرفته2025-04-29

مدرسین

Jen Kramer

Jen Kramer

Teaches web design and development

جزئیات دوره

تا چند وقت پیش برای ساختن المنت‌هایی مثل آکاردئون (Accordion)، پنجره پاپ‌آپ (Modal)، منوی همبرگری (Hamburger Menu) یا حتی حالت‌های روشن و تاریک (Light/Dark Mode)، مجبور بودیم حتماً از جاوااسکریپت استفاده کنیم. ولی الان دیگه نه!

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

توی این دوره، با تدریس "جن کرامر" یاد می‌گیری چطور با کمک CSS خالص (بدون جاوااسکریپت)، رابط‌های کاربری حرفه‌ای و مدرن بسازی. از ساخت آکاردئون و مودال گرفته تا منوی موبایل و طراحی تم شب و روز.

🎯 اهداف یادگیری:
چطور تکنیک‌هایی رو که معمولاً با جاوااسکریپت انجام می‌دادیم، فقط با HTML و CSS پیاده‌سازی کنیم.
آکاردئون‌های زیبا و واکنش‌گرا طراحی کنی.
پنجره‌های مودال حرفه‌ای بسازی.
منوی همبرگری (برای موبایل) فقط با CSS پیاده‌سازی کنی.
حالت روشن و تاریک (Light/Dark Mode) رو بدون نیاز به هیچ اسکریپتی بسازی.

مهارت ها

Web StandardsWeb DesignAdvancedFront-End Web DevelopmentWeb DevelopmentProgramming LanguagesSoftware Development

سرفصل ها

۰. مقدمه

  • 01 - دنیای در حال تغییر رابط کاربری و CSS
  • 02 - کار با CodePen

۱. ایجاد آکاردئون بدون جاوا اسکریپت

  • 03 - معرفی جزئیات و خلاصه
  • 04 - ایجاد یک آکاردئون که در ابتدا باز است
  • 05 - ایجاد یک سری آکاردئون یکپارچه با استفاده از ویژگی name
  • 06 - استایل دادن به آکاردئون‌ها
  • 07 - تغییر فلش با نشانگر - -
  • 08 - چالش - تغییر نشانگر - - بین حالت‌های باز و بسته
  • 09 - راه حل - تغییر نشانگر - - بین حالت‌های باز و بسته
  • 10 - متحرک‌سازی نشانگر
  • 11 - متحرک‌سازی پنل جزئیات

۲. ایجاد پنجره‌های Modal بدون جاوا اسکریپت

  • 12 - تنظیم نشانه‌گذاری اولیه پنجره مودال و استایل‌دهی به دکمه
  • 13 - افزودن ویژگی‌های popover و popovertarget و استایل‌دهی به پنجره‌ی modal
  • 14 - پیکربندی دکمه بستن در پنجره بازشو
  • 15 - متحرک‌سازی پنجره‌ی مودال و پس‌زمینه

۳. ایجاد طرح‌های رنگی روشن و تیره بدون جاوا اسکریپت

  • 16 - طرح‌های رنگی روشن و تیره چیستند؟
  • 17 - تنظیم طرح رنگ با color-scheme
  • 18 - کار با تابع ()light-dark در CSS
  • 19 - تغییر از یک طرح رنگی به طرح رنگی دیگر بدون جاوا اسکریپت
  • 20 - تغییر تصاویر برای تطبیق طرح‌های رنگی با تصویر
  • 21 - چالش - طرح‌های رنگی روشن و تیره با SVGها
  • 22 - راه حل - طرح‌های رنگی روشن و تیره با SVGها

۴. سنگ بنا - آموخته‌هایتان را به کار ببرید

  • 23 - ایجاد یک صفحه با آکاردئون، پنجره‌های مدال و طرح رنگی تیره روشن
  • 24- راه حل جن

نتیجه‌گیری

  • 25 - مراحل بعدی

دوره های مرتبط

درباره ما

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

شماره تلفنکانال آپاراتپشتیبانی تلگرامکانال تلگرامپیج اینستاگرام

کلیه‌ی حقوق این سایت متعلق به لینداکده می باشد

قوانین و شرایط|حریم خصوصی

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal