کدگذاری تحت مهلت ، پذیرش چالش ها ، و چرا Scrimba این کار را آسان کرد!
کار: یک کارت پروفایل پاسخگو
برای مرحله 0 از کارآموزی HNG ، من وظیفه ساخت یک کارت نمایه پاسخگو با استفاده از HTML ، CSS و JavaScript وانیل. الزامات خاص بود:
عناصر مورد نیاز (با data-testid ویژگی ها):
- تصویر پروفایل (پاسخگو ، نسبت ابعاد حفظ شده)
- نام کامل ، عنوان کار ، بیوگرافی کوتاه (50-100 کلمه)
- مکان فعلی ، ایمیل حرفه ای
- پیوندهای رسانه های اجتماعی (LinkedIn ، GitHub و غیره)
- به روزرسانی به روزرسانی زمان UTC
معیارهای پذیرش:
✅ تمیز ، بصری جذاب UI/UX
✅ طراحی پاسخگو به موبایل
✅ تمام عناصر برچسب گذاری شده برای آزمایش
✅ به روزرسانی های زمان UTC در تجدید صفحه
نسخه ی نمایشی زنده من را اینجا ببینید: نسخه ی نمایشی کارت مشخصات
اعدام و چالش ها
در حالی که این کار ساده به نظر می رسید ، در اینجا موارد جالب است:
-
زمان پویا UTC:
نمایش UTC در زمان واقعی به JavaScript نیاز داشت
Date()شیء. گرفتن؟ اطمینان از به روزرسانی آن فقط در تازه کردن (زنده نیست) برای رعایت معیارهای کار. -
تصویر پاسخگو:
حفظ نسبت ابعاد هنگام تنظیم عرض/ارتفاع آزمایش و خطا را انجام داد. CSS
object-fit: containروز را نجات داد! -
ساختار آماده آزمایش:
اضافه کردن
data-testidویژگی های هر عنصر من را وادار به فکر کردن مانند یک تستر کرد – برای همکاری های آینده قابل ارزش است.
چرا این احساس بی دردسر شد (فریاد به Scrimba!)
من به اعدام صاف خود مدیون هستم عکسبرداریبشر دوره های مبتنی بر پروژه آنها در HTML ، CSS و JS به من کمک کردند:
- اصول طراحی پاسخگو
- جاوا اسکریپت تمیز و مدولار را بنویسید
- اشکال زدایی کارآمد (بدون کنسول بی پایان. حلقه های log!)
این کار مانند یک چالش برنامه نویسی Scrimba-ساختار یافته ، عملی و تقویت اعتماد به نفس.
بحران زمان
تمام کارهای HNG همراه است مهلت های سختبشر مرحله 0 دارای یک پنجره 48 ساعته بود که من را به سمت اولویت بندی کارآیی بدون به خطر انداختن کیفیت سوق می داد. این طعم کار در دنیای واقعی است!
چه چیزی بعدی؟
مرحله 1 در گوشه و کنار است ، و من به روزرسانی ها را در اینجا به اشتراک می گذارم. سفر من را در سراسر سکوها دنبال کنید:
افکار نهایی
مرحله 0 گرمی فوق العاده بود. اگر شما در حال یادگیری کد هستید ، من بسیار بسترهای نرم افزاری مانند Scrimba را برای تمرین دستی توصیه کنید. برای مرحله 1 با ما در ارتباط باشید – این موارد حتی اسپاسی تر می شوند! 🔥
سوال یا بازخورد؟ نظر زیر را رها کنید!
