صفحه فرود Wecoded من – جامعه dev

این یک ارسال برای چالش Wecoded است: در کد جشن بگیرید

برای چالش Wecoded ، من یک صفحه فرود را برای جشن گرفتن صداهای کم نماینده در فناوری طراحی کردم ، و با روح روز جهانی و بین المللی و بین المللی هماهنگ شدم.

من دارایی های طراحی ارائه شده را شامل می شوم (آبی: #4531EA ، سبز: #ccea71 ، بنفش: #9D00E5) و یک شیب – همراه با دو آیکون برای تقویت جذابیت بصری در حالی که تمرکز روی محتوا است.

نسخه آزمایشی

چگونه من آن را ساختم

فرآیند

من با تعریف هدف صفحه شروع کردم: تجلیل از تنوع در فناوری از طریق داستانهای جامعه. من یک ساختار را با بخش های کلیدی ترسیم کردم تا یک جریان منطقی را تضمین کنم – با استفاده از ابتکار عمل ، نمایش یک داستان ایستاده ، لیست کلیه ارسال ها و تأمین منابع. من قصد داشتم از API مقالات DEV برای محتوای پویا استفاده کنم ، با تمرکز بر برچسب “Wecoded” ، و صفحه بندی را برای مقیاس پذیری درج کردم. قابلیت دسترسی و پاسخگویی اولویت هایی برای بازتاب موضوع فراگیر بود.

فن آوری های مورد استفاده

• HTML: عناصر معنایی مانند
  با

  وت

  برای ساختار و دسترسی.
• CSS: سبک های سفارشی با متغیرها (به عنوان مثال ، --blue: #4531EA) برای قوام ، پس زمینه قهرمان شیب و یک طرح شبکه پاسخگو. اثرات شناور و انتقال باعث تعامل می شود.
• جاذب: داده ها را از DEV API دریافت می کند و به صورت پویا صفحه را به روز می کند. من از Async/Await برای استفاده از API تمیز استفاده کردم.
• مقالات Dev API: بازیابی پست هایی با برچسب “wecoded” (https://dev.to/api/articles?tag=wecoded) با پارامترهای صفحه بندی (page وت per_page=10).

جزئیات اجرای

1. ساختار HTML: برای پیمایش صاف یک طرح تمیز و معنایی با شناسه ساخته شده است (به عنوان مثال
   ).
2. یک ظاهر طراحی شده CSS: از رنگهای ارائه شده برای متن ، دکمه و لهجه استفاده شده است. بخش Hero دارای شیب است ، در حالی که کارت های مقاله از یک طرح کارت با تصاویر ، عناوین ، نویسندگان ، تاریخ ها و توضیحات کوتاه استفاده می کنند. نمایش داده های رسانه ای پاسخگویی را تضمین می کند.
3. ادغام جاوا اسکریپت و API:
   • مقالات به دست آمده در صفحه بار ، نمایش اول به عنوان داستان برجسته و بقیه در یک شبکه.
   • برای واکشی صفحات اضافی ، یک دکمه “بار بیشتر” را اجرا کرد ، در صورت عدم وجود مقاله دیگر ، آن را پنهان کرد (از طریق طول پاسخ در مقابل بررسی می شود. per_page).
   • بارگیری (اسپینر) و خطای (پیام) برای یک تجربه صاف.
   • پیمایش صاف برای پیوندهای ناوبری با استفاده از scrollIntoView({ behavior: 'smooth' })بشر
4. محتوا:
   • در مورد: “Wecoded یک جشن سالانه در Dev.to است که گروه های کم نماینده در فناوری را برجسته می کند ، که با روز جهانی زن برای ارتقاء تنوع و گنجاندن راه اندازی شده است.”
   • منابع: پیوندها به زنانی که کد می کنند ، دخترانی که کد می کنند و صفحه برچسب wecoded dev.to.
   • پشته: “طراحی و ساخته شده توسط [My Name]”با یک سال پویا (© ${new Date().getFullYear()} WeCoded).

نکات برجسته من به آن افتخار می کنم

• محتوای پویا: ادغام بدون درز API DEV با صفحه بندی ، صفحه را تازه و مقیاس پذیر نگه می دارد.
• طراحی پاسخگو: شبکه از یک طرح چند ستونی روی دسک تاپ به یک ستون واحد در تلفن همراه تنظیم می شود و قابلیت استفاده را حفظ می کند.
• قابلیت دسترسی: HTML معنایی ، متون ALT و کنتراست رنگ کافی از شمول اطمینان حاصل می کند.
• تجدید نظر بصری: استفاده از رنگ ها و نمادهای ارائه شده ، ظاهری منسجم و پر جنب و جوش ایجاد می کند بدون اینکه محتوا را بیش از حد کند.

*یادداشت نهایی: با مشارکت در این چالش ، من موافقم که اگر ارسال من به عنوان برنده انتخاب شود ، Dev ممکن است از کد من به عنوان صفحه رسمی فرود برای Wecoded استفاده کند ، اصلاح و میزبانی کند.

من مالکیت کامل کار خود را حفظ می کنم ، و این توافق نامه نحوه استفاده یا به اشتراک گذاشتن آن را در جای دیگر محدود نمی کند.

علاوه بر این ، من تأیید می کنم که ارسال من کار اصلی من است و هیچ حقوق شخص ثالث را نقض نمی کند.*

دوست داشتم شرکت کنند