دوره جامع آموزش طراحی قالب فروشگاهی سایت دیجی‌کالا با HTML، CSS و جاوا اسکریپت – پروژه‌محور، کاملاً واکنش‌گرا و مناسب بازار کار + سورس کامل قالب

در این درس، پیش‌نیازهای فنی پروژه را آماده می‌کنیم. ابتدا وی‌اس کد و نود جی‌اس را نصب کرده و صحت نصب آن‌ها را با دستورات ترمینال بررسی می‌کنیم. در ادامه، ساختار استاندارد فایل‌بندی پروژه را پیاده‌سازی کرده، راهکارهایی برای دور زدن محدودیت‌های دانلودی (استفاده از میرور) در شرایط اینترنت ملی ارائه می‌دهیم و فایل حیاتی پکیج جیسون را برای مدیریت کتابخانه‌های پروژه تنظیم می‌کنیم.

در این درس ابزارهای موردنیاز مرحله توسعه مانند Sass و سایر ابزارهای مدیریت فایل و پردازش پروژه را نصب و آماده‌سازی می‌کنیم. سپس در فایل پیکربندی اصلی پروژه، اسکریپت‌هایی برای افزایش سرعت و نظم کار تعریف می‌کنیم؛ از جمله پاک‌سازی خروجی‌های قبلی، تبدیل استایل‌ها به CSS، تولید صفحات HTML، کپی فایل‌های منابع پروژه، اجرای نسخه نهایی و فعال‌سازی حالت مشاهده خودکار تغییرات تا فرآیند توسعه سریع‌تر و ساختاریافته‌تر انجام شود.

در این درس فونت استفاده‌شده در سایت دیجی‌کالا را شناسایی می‌کنیم، روش دریافت آن را بررسی کرده و فایل‌های فونت را به پوشه مربوطه در پروژه اضافه می‌کنیم. سپس با استفاده از (@font-face) وزن‌های مختلف فونت را تعریف کرده و در پایان، لود شدن و اعمال صحیح فونت در قالب را تست و بررسی می‌کنیم.

در این درس روش‌های مختلف استفاده دیجی‌کالا از آیکون‌های اختصاصی را بررسی می‌کنیم. سپس بخشی از فونت‌آیکون‌ها را به پروژه اضافه کرده و مسیر فایل‌ها را تنظیم می‌کنیم. در ادامه با نرم‌افزار FontForge ساختار فونت‌آیکون اختصاصی دیجی‌کالا را مشاهده می‌کنیم و چند آیکون دیگر را به سبک SVG Sprite، مشابه ساختار استفاده‌شده در سایت دیجی‌کالا، به پروژه اضافه می‌کنیم.

در این درس با اصول استایل‌نویسی بهینه برای پروژه‌های بزرگ آشنا می‌شویم و روشی مشابه ساختار مورد استفاده در Bootstrap و Tailwind را در پروژه پیاده‌سازی می‌کنیم. سپس رنگ‌های سازمانی سایت دیجی‌کالا را شناسایی کرده، فایل variables در Sass را برای مدیریت متمرکز متغیرها ایجاد می‌کنیم و در نهایت رنگ‌های اصلی پروژه را به‌صورت متغیرهای استاندارد تعریف و استفاده می‌کنیم.

در این درس افزونه Live Server در VS Code را معرفی و راه‌اندازی می‌کنیم تا صفحه هنگام توسعه به‌صورت خودکار رفرش شود. سپس فایل (_reset.scss) را برای حذف استایل‌های پیش‌فرض مرورگر و ایجاد پایه‌ای یکپارچه برای استایل‌دهی ایجاد می‌کنیم و در ادامه اسکرول‌بار اختصاصی مشابه دیجی‌کالا را پیاده‌سازی کرده و آن را برای مرورگرهای Chrome و Firefox سازگار می‌کنیم.

در این درس برای دسترسی ساده‌تر و حرفه‌ای‌تر به رنگ‌های پروژه، یک تابع اختصاصی در Sass ایجاد می‌کنیم. با استفاده از ماژول (sass:map) و تابع (map.get)، رنگ‌های تعریف‌شده در فایل متغیرها را از طریق تابع color فراخوانی می‌کنیم. سپس این ساختار را در فایل‌های SCSS پروژه استفاده می‌کنیم تا مدیریت رنگ‌ها منظم‌تر، خواناتر و قابل توسعه‌تر شود.

در این درس Breakpointهای اصلی پروژه را در قالب متغیر ($containers) تعریف می‌کنیم تا اندازه‌های مختلف صفحه به‌صورت متمرکز و قابل مدیریت در دسترس باشند. سپس با ایجاد فایل (_mixin.scss) و ساخت mixin اختصاصی mediaQuery، امکان استفاده ساده و استاندارد از مدیا کوئری‌ها را در بخش‌های مختلف پروژه فراهم می‌کنیم و پایه طراحی واکنش‌گرای قالب را شکل می‌دهیم.

در این درس ساختار تولید کلاس‌های کمکی را با Sass پیاده‌سازی می‌کنیم. ابتدا مقادیر مربوط به display را در فایل variables تعریف کرده، سپس فایل _maps.scss را برای مدیریت نقشه کلاس‌ها ایجاد می‌کنیم. در ادامه با ساخت mixin اختصاصی generateClass، کلاس‌هایی مثل d-flex، d-block، d-grid و d-none را به‌صورت خودکار تولید می‌کنیم تا استایل‌نویسی پروژه سریع‌تر، منظم‌تر و قابل توسعه‌تر شود.

در این درس سیستم تولید کلاس‌های کمکی را یک مرحله حرفه‌ای‌تر می‌کنیم و قابلیت واکنش‌گرایی را به آن اضافه می‌کنیم. با افزودن گزینه isResponsive در فایل _maps.scss مشخص می‌کنیم کدام کلاس‌ها نسخه ریسپانسیو داشته باشند. سپس در mixin تولید کلاس‌ها، با استفاده از breakpointهای تعریف‌شده در $containers و ترکیب آن با mediaQuery، کلاس‌هایی مثل d-sm-flex، d-md-block و d-lg-none را به‌صورت خودکار تولید می‌کنیم تا مدیریت نمایش عناصر در اندازه‌های مختلف صفحه ساده‌تر و استانداردتر انجام شود.

در این درس سیستم تولید کلاس‌های کمکی را توسعه می‌دهیم و Utilityهای پرکاربرد پروژه را به‌صورت متمرکز و خودکار می‌سازیم. با تعریف mapهای جدید در فایل variables و اتصال آن‌ها به _maps.scss، کلاس‌های مربوط به container، position، flex، justify-content، align-items، align-content، align-self، order، width، height و overflow را تولید می‌کنیم. در ادامه نیز برای بخش‌های موردنیاز، نسخه‌های ریسپانسیو این کلاس‌ها را بر اساس breakpointهای پروژه ایجاد می‌کنیم تا زیرساختی سریع، استاندارد و قابل توسعه برای استایل‌نویسی قالب در اختیار داشته باشیم.

در این درس سیستم کلاس‌های کمکی پروژه را کامل‌تر می‌کنیم و مجموعه‌ای از Utilityهای پرکاربرد برای کنترل ظاهر و رفتار عناصر می‌سازیم. کلاس‌های مربوط به border-radius، object-fit، text-decoration، visibility، text-align، vertical-align، float، opacity و z-index را با استفاده از mapهای Sass تعریف کرده و به ساختار تولید خودکار کلاس‌ها اضافه می‌کنیم. همچنین نسخه‌های ریسپانسیو این کلاس‌ها را فعال می‌کنیم تا در اندازه‌های مختلف صفحه، کنترل دقیق‌تری روی طراحی قالب داشته باشیم.

در این درس سیستم Utility پروژه را با افزودن کلاس‌های مربوط به فاصله‌گذاری و رنگ‌ها گسترش می‌دهیم. ابتدا ساختار مقادیر فاصله‌گذاری را با متغیر $spacer و map مربوط به $spacers تعریف می‌کنیم تا مقیاس استانداردی برای فاصله‌ها در کل پروژه داشته باشیم. سپس با استفاده از سیستم تولید کلاس‌ها، Utilityهایی برای background-color، color، fill (برای SVG) و letter-spacing ایجاد می‌کنیم تا مدیریت رنگ‌ها و فاصله‌های متنی در قالب به‌صورت سریع، منظم و قابل توسعه انجام شود.

در این درس سیستم Utility پروژه را یک گام کامل‌تر می‌کنیم و کلاس‌های پرکاربرد مربوط به Margin، Padding، Position، Gap و Flex Wrap را به‌صورت خودکار تولید می‌کنیم. ابتدا مقادیر فاصله‌گذاری را برای ساخت کلاس‌هایی مانند m-*، p-*، mx-*، py-* و سایر حالت‌های ترکیبی به سیستم اضافه می‌کنیم. سپس Utilityهای مربوط به top، right، bottom و left را برای موقعیت‌دهی عناصر ایجاد کرده و کلاس‌های gap، row-gap، column-gap و flex-wrap را نیز به مجموعه ابزارهای پروژه اضافه می‌کنیم. در ادامه با بهبود Mixin تولید کلاس‌ها، امکان تعریف همزمان چند Property برای کلاس‌هایی مانند mx-* و px-* را فراهم می‌کنیم

در این درس فایل _Base.scss را ایجاد کرده و استایل‌های پایه پروژه را پیاده‌سازی می‌کنیم. ابتدا تنظیمات عمومی مانند Containerها، مدیریت جهت متن (RTL و LTR) و برخی کلاس‌های پرکاربرد را تعریف می‌کنیم. سپس یک سیستم تایپوگرافی استاندارد شامل Headingها، متن‌ها، دکمه‌ها و زیرعنوان‌ها را به‌صورت واکنش‌گرا طراحی می‌کنیم. در ادامه نیز مجموعه‌ای از Utilityهای کاربردی مانند محدودسازی خطوط متن، Dividerها، مخفی‌سازی اسکرول‌بار، غیرفعال‌سازی انتخاب متن و مدیریت Cursor را به زیرساخت پروژه اضافه می‌کنیم تا پایه‌ای منظم و قابل استفاده مجدد برای بخش‌های مختلف قالب ایجاد شود.

در این درس، به‌عنوان آخرین بخش فصل اول، سیستم Grid اختصاصی پروژه را از صفر طراحی و پیاده‌سازی می‌کنیم. ابتدا ساختار سطرها و ستون‌ها، مقادیر Gutter و تنظیمات مربوط به Grid را تعریف کرده و سپس کلاس‌های پرکاربردی مانند row، col، col-*، row-cols-* و grid را ایجاد می‌کنیم. در ادامه با توسعه Mixinهای Sass، نسخه‌های ریسپانسیو این کلاس‌ها را برای Breakpointهای مختلف به‌صورت خودکار تولید کرده و امکان استفاده از CSS Grid و Flexbox را در قالبی یکپارچه فراهم می‌کنیم. در پایان این درس، زیرساخت طراحی و Utility Framework اختصاصی پروژه تکمیل شده و همه ابزارهای موردنیاز برای شروع پیاده‌سازی بخش‌های مختلف قالب سایت دیجی‌کالا در اختیار شما خواهد بود.