چیزی که سایتت برای حرفه‌ای شدن کم داره! 🤯🔥

😳 چیزی که سایتت برای حرفه‌ای شدن کم داره شاید همین پروژه باشه! توی این ویدیو با چند کد ساده، یک کارت محصول واقعی برای کفش می‌سازیم و می‌بینیم چطور یک ساختار ساده به یک طراحی جذاب تبدیل می‌شه. 🔥 🎬 *قبل از دیدن این قسمت، این آموزش‌ها رو ببین:* اگر هنوز نمی‌دونی **div چیه و چطور ازش استفاده کنیم**، اول این جلسه رو ببین:    • 08 - دیگه از div نترس!  ساده‌ترین آموزش di...   اگر آموزش *div در div و ساختارهای تو‌در‌تو* رو می‌خوای، این جلسه دقیقاً پیش‌نیاز همین پروژه‌ست:    • 09 - راز ساخت سایت‌های حرفه‌ای با div در d...   🚀 و اگر می‌خوای *آموزش کامل html و css رو از پایه و به صورت پروژه‌محور* دنبال کنی، کل دوره رو از اینجا ببین:    • رازهای ساخت سایت | آموزش HTML و CSS پروژه‌...   حالا در این قسمت، چیزهایی که درباره div و divهای تو‌در‌تو یاد گرفتیم رو کنار هم قرار می‌دیم و با استفاده از اون‌ها یک *product card برای کفش* طراحی می‌کنیم. از ساخت ساختار اولیه html شروع می‌کنیم، تصویر محصول رو اضافه می‌کنیم و با ویژگی `alt` یاد می‌گیریم وقتی تصویر لود نشه چه متنی نمایش داده می‌شه. بعد اطلاعات محصول، قیمت و دکمه خرید رو به ساختار کارت اضافه می‌کنیم. در بخش css، قدم‌به‌قدم ظاهر کارت رو طراحی می‌کنیم؛ از رنگ پس‌زمینه و فونت گرفته تا اندازه کارت، `padding`، `border`، `border-radius`، فاصله‌ها و استایل تصویر محصول. در ادامه هم یاد می‌گیریم چطور عناصر داخل یک div مادر رو انتخاب و استایل‌دهی کنیم. ⏱️ *chapters:* 00:00 معرفی پروژه و نتیجه نهایی 00:27 ساخت فایل‌های html و css 01:26 ساخت کارت محصول و اضافه کردن تصویر 03:20 ساخت اطلاعات محصول 04:14 ساخت قیمت و دکمه خرید 05:02 شروع طراحی با css 06:19 طراحی کارت اصلی و تصویر 09:05 استایل بخش اطلاعات محصول 10:58 طراحی قیمت و دکمه خرید 14:02 نتیجه نهایی و جمع‌بندی اگر دنبال *آموزش ساخت کارت محصول با html و css، طراحی product card از صفر، آموزش div در div و ساخت پروژه واقعی html و css* هستی، این ویدیو رو تا آخر ببین و همزمان با من کدنویسی کن. 🔥 اگر از آموزش‌های پروژه‌محور codemoony خوشت میاد، ویدیو رو لایک کن، کانال رو سابسکرایب کن و توی کامنت‌ها بگو پروژه بعدی رو چی بسازیم!