دوره آموزشی تکنیکهای مدرن CSS بدون نیاز به JavaScript
1 ساعت 41 دقیقهپیشرفته2025-04-29
مدرسین
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) رو بدون نیاز به هیچ اسکریپتی بسازی.
با پیشرفت مرورگرها، امکانات جدید 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 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی جعبه ابزار CSS: نکات و روشهای طراحی و چینش صفحه
- دوره آموزشی CSS Shorts
- دوره آموزشی یادگیری اصولی CSS
- دوره آموزشی ساخت فرم های عالی با HTML و CSS
- دوره آموزشی CSS: فریمورکها و شبکه ها
- دوره آموزشی یادگیری مفهوم مدل CSS Box
- دوره آموزشی جاوا اسکریپت وانیلا: انیمیشن ها
- دوره آموزشی کدنویسی ویبی: پیادهسازی الگوهای رایج وب با Tailwind CSS
مسیرهای مرتبط
- مسیر آموزشی یادگیری جامع CSS
- مسیر آموزشی شروع کار با وردپرس
- مسیر آموزشی تبدیل شدن به یک توسعه دهنده جاوا اسکریپت
- مسیر آموزشی تبدیل شدن به یک توسعه دهنده Full-Stack وب
- مسیر آموزشی تقویت مهارت های زبان برنامه نویسی React
- مسیر آموزشی شروع به کار به عنوان یک توسعه دهنده هسته ASP.NET
- مسیر آموزشی شروع کار با PHP
- مسیر آموزشی ارتقا دادن مهارت های خود در HTML