این یک ارسال برای Frontend Challenge است – نسخه فوریه ، Glam Up My Markup: Love Language Discovery
آنچه من ساختم
من یک ابزار کشف عشق تعاملی ایجاد کردم که به کاربران کمک می کند تا زبان اصلی خود را از طریق یک مسابقه جذاب ، نمایش داده های بصری ، بینش فرهنگی و چالش های روزانه شناسایی کنند. ویژگی های برنامه:
- مسابقه تعاملی: زبان عشق خود را از طریق سوالات مبتنی بر سناریو تعیین کنید
- تجسم نتایج پویا: نمودار نوار نشان دادن توزیع زبان
- نقشه عشق فرهنگی: سنت های جهانی بیان عشق را کاوش کنید
- داستانهای کاربر: نمونه های زندگی واقعی از زبانهای عاشقانه در عمل
- چالش های روزانه: فعالیت های شخصی برای تمرین زبان های مختلف عشق
- اشتراک اجتماعی: نتایج را در سیستم عامل های محبوب به اشتراک بگذارید
نسخه آزمایشی
مخزن جیتاب
سفر
فرآیند و یادگیری:
- معنایی HTML: محتوای بازسازی شده با استفاده از نقاط دیدنی مناسب (هدر ، اصلی ، پاورقی) و نقش های آریا
- معماری CSS: متغیرهای CSS و یک ظاهر طراحی شده مدولار برای حفظ
-
قابلیت دسترسی:
- پشتیبانی از ناوبری صفحه کلید و پشتیبانی از خواننده صفحه نمایش
- مناطق زنده آریا را برای محتوای پویا اجرا کرد
- نسبت کنتراست پیشرفته برای خوانایی بهتر
-
عمل:
- انیمیشن های بهینه شده CSS با استفاده از شتاب سخت افزاری
- الگوهای دستکاری دامنه کارآمد اجرا شده
- طراحی پاسخگو: پرس و جوهای رسانه ای تصفیه شده برای تجربه مداوم در مورد دستگاه
- کیفیت کد: ماژول های JS معرفی شده و رسیدگی به خطا
دستاوردهای افتخار:
- بدون چارچوب یک تجربه صاف و شبیه به برنامه ایجاد کرد
- یک نقشه جهانی سفارشی SVG با مناطق تعاملی تهیه کرد
- یک چرخ فلک پاسخگو با پشتیبانی از حرکات لمسی اجرا کرد
- به نمره دسترسی کامل فانوس دریایی دست یافت
مراحل بعدی:
- برای صرفه جویی در پیشرفت ، احراز هویت کاربر را اضافه کنید
- ویژگی تطبیق شریک را پیاده سازی کنید
- تولید گزارش PDF را ایجاد کنید
- پشتیبانی چند زبانه را اضافه کنید
مجوز: مجوز من
پیشرفت های کلیدی:
- معماری مدرن CSS با استفاده از متغیرهای CSS
- ساختار HTML5 معنایی با نقاط دیدنی آریا
- پیشرفت های دسترسی:
- مدیریت تمرکز
- اعلامیه های خواننده صفحه نمایش
- پشتیبانی از حرکت کاهش یافته
- بهینه سازی عملکرد:
- مهار CSS
- انیمیشن های کارآمد
- بارگذاری تنبل
- الگوهای مدرن جاوا اسکریپت:
- معماری مبتنی بر کلاس
- زمینه های کلاس خصوصی
- الگوی ماژول
- پیشرفت های طراحی پاسخگو:
- تایپوگرافی مبتنی بر گیره
- طرح های شبکه ذاتی
- پیشرفت مترقی:
- تشخیص ویژگی
- Polyfills اختیاری
این راه حل نشان دهنده یک رویکرد مدرن ، در دسترس و قابل حفظ برای چالش اصلی در حالی است که تمام عملکردهای اصلی را حفظ می کند و تجربه کاربر را تقویت می کند.
