سلام، انجمن توسعه دهندگان!
من هیجان زده هستم که راه حل خود را برای این پروژه به عنوان بخشی از سفرم برای به دست آوردن دوباره اعتماد به نفس در توسعه جلویی به اشتراک بگذارم. زمانی بود که ارتباطم را با اصول اولیه از دست دادم و متوجه شدم که باید تمرین های ساده را دوباره مرور کنم. آن زمان بود که پلتفرم Frontend Mentor را کشف کردم. من فایل‌های شروع را برای پروژه صفحه فرود Huddle با بخش‌های منحنی دانلود کردم، که یک چالش در سطح پایین‌تر است و برای تقویت مهارت‌های HTML و CSS من عالی است.
فرآیند ساخت پروژه
طبق دستورالعمل‌ها، فایل‌های شروع را دانلود کردم، و در اینجا نحوه برخورد من با این پروژه است:
راه اندازی پروژه:
هنگام شروع پروژه، می خواستم مطمئن شوم که کد سازماندهی شده و نگهداری آن آسان است، به خصوص برای به روز رسانی های بعدی. برای رسیدن به آن، CSS را به سه فایل مختلف تقسیم کردم. یکی برای general reusable components، یکی اختصاص داده شده به main styling، و دیگری فقط برای media queries. این تنظیم نه تنها کد را خواناتر کرد، بلکه همه چیز را مدولار نگه داشت، که اگر بعداً نیاز به ایجاد تغییرات داشته باشم بسیار مفید است.
ساخت صفحه وب و استایل:
در هنگام ساختن صفحه وب، تمرکز من روی ایجاد یک بود طرح مولفه محور. برای اینکه همه چیز مدولار و تمیز باشد، صفحه را به صورت جداگانه تقسیم کردم
ریسپانسیو کردن صفحه:
برای مرتب نگه داشتن کارها، من جداگانه ایجاد کردم queries.css فقط برای کد پاسخگو فایل کنید، مطمئن شوید که هیچ چیز بیش از حد به هم ریخته نشده است. در حین کار بر روی پاسخگویی، در مورد برچسب های HTML جدید مانند
یکی از عادت هایی که من ایجاد کرده ام، تنظیم پیش فرض است اندازه قلم به 62.5٪ (10 پیکسل) در شروع هر پروژه این کار کار با آن را آسان تر می کند rem واحد می کند و به اطمینان از یک چیدمان سیال در همه دستگاه ها کمک می کند.
تست و بهینه سازی:
پس از تکمیل طراحی front-end، با استفاده از ابزارهایی مانند CanIuse و Google Lighthouse شروع به آزمایش سایت کردم. من روی چهار زمینه اصلی تمرکز کردم: Performance، Accessibility، Best Practices، و SEO.
برای دسترسی، من مطمئن شدم که نسبت کنتراست را بررسی کرده و مطمئن شدم که همه تصاویر مناسب هستند alt صفات برای عملکرد، هدف من بهینه‌سازی زمان بارگذاری بود، در حالی که بهترین روش‌ها با استفاده از روش BEM برای HTML تمیز و قابل نگهداری پیاده‌سازی شدند. برای بهبود سئو، متا تگ های ضروری را اضافه کردم و بهترین روش ها را برای کمک به رتبه بندی صفحه دنبال کردم.
در optimization side، کاهش دادم اندازه ذاتی از تصاویر به طوری که اندازه سند وب از 2 مگابایت به 8 کیلوبایت کاهش یافت – تا اطمینان حاصل شود که آنها سریع و کارآمد بارگیری می شوند.
راه اندازی و نگهداری پروژه:
این پروژه اکنون منبع باز است و در GitHub در دسترس است. می توانید آن را در اینجا بررسی کنید و نسخه زنده آن را در Netlify اینجا مشاهده کنید. اگر چیزی را می‌بینید که می‌تواند بهبود یابد، با خیال راحت تغییراتی را ایجاد کنید و درخواستی برای جلب نظر بفرستید — مایلم با هم همکاری کنم و این به‌روزرسانی‌ها را انجام دهم!
نتیجه گیری
پس از تکمیل این پروژه، من در ساخت صفحات فرود و پاسخگو کردن آنها در دستگاه های مختلف اعتماد به نفس پیدا کردم. من همچنین با ابزارهای توسعه دهنده و برنامه ریزی فرآیند استقرار در Netlify راحت شدم.
اگر چیز روشنگری پیدا کردید، در یک نظر کامنت بگذارید و بیایید با هم چیز جالبی را کشف کنیم!
همچنین می توانید در لینکدین، توییتر (X) و Threads با من ارتباط برقرار کنید.
این اولین وبلاگ من است، بنابراین از مدل‌های هوش مصنوعی کمک گرفتم تا از اشتباهات گرامری جلوگیری کنم و داستانم را با کلمات به اشتراک بگذارم تا برای خوانندگان قابل خواندن باشد، اما در آینده، داستان و ارزش‌هایم را با کلمات خودم به اشتراک خواهم گذاشت.
