یوناس: بیایید ادامه بدیم و کار کنیم
روی پروژه‌ی خیلی کوچک مقاله‌ی کفش‌مون
در این چالش کدنویسی شماره دو.
پس درست مثل قبل، از نتیجه‌ی
چالش قبلی به عنوان نقطه‌ی شروع این یکی استفاده کن.
برای این چالش.
و اگر به هر دلیلی اون کد رو نداری،
مثل همیشه من لینک کد اولیه و نهایی رو
اینجا توی این جلسه گذاشتم.
ولی البته بهتر اینه که
از کدی که خودت نوشتی استفاده کنی،
مثلاً اگر توی CodePen داریش
یا اگر داری این چالش رو
روی کامپیوتر خودت با استفاده از VS Code انجام میدی.
خوبه؟
پس ما در آخر به این نتیجه رسیدیم
در آخرین چالش کدنویسی.
یادت باشه، همین بود.
و چیزی که الان می‌خوام انجام بدی اینه که از دانش جدیدت
درباره‌ی مدل جعبه‌ای (Box Model) استفاده کنی تا به این نتیجه برسی.
ببین که این مقاله اینجاست
پس این المنت حالا خیلی باریک‌تر شده
و همینطور قشنگ وسط صفحه قرار گرفته.
پس عرض این کانتینر اینجا،
یعنی همون المنت article، شده 825 پیکسل.
بعدش می‌بینی که خیلی از marginها و paddingها
حذف شدن.
و احتمالاً یعنی یه ریست کلی (global reset) انجام شده.
اینجا.
پس همون کاری رو انجام بده که توی یکی از جلسات دیدیم،
اما بعدش دوباره بعضی از paddingها
و marginها رو برگردون.
پس هر جا توی این مثال فضایی دیدی،
مثلاً همینجا داخل این heading،
اون وقت باید دوباره یه مقدار فاصله بدی
و همونطور که می‌دونی می‌تونی با margin یا padding اینکارو بکنی.
پس فقط انتخاب کن که کدوم برای موقعیت مناسب‌تره
یا بر اساس چیزی که یاد گرفتی.
در آخر، یه نکته دیگه اینه که این دکمه اینجا
الان خیلی پهن شده.
یعنی از سمت چپ تا سمت راست کامل کشیده شده
و همینطور یه خط (border) این بالا اضافه شده.
برای اینکه توهم دکمه بودن رو ایجاد کنه
حتی وقتی روش hover می‌کنیم.
پس ببین می‌تونی به این نتیجه برسی یا نه،
ولی اگر نتونستی،
مثل همیشه اصلاً مشکل بزرگی نیست.
پس الان کمی وقت بذار و واقعاً سعی کن کدنویسی کنی
این چالش رو و من وقتی تموم کردی دوباره اینجا می‌بینمت.
خب.
پس وقت رو تلف نکنیم و مستقیم شروع کنیم.
و من واقعاً شروع می‌کنم
بیایم یه مقدار فضای بیشتر اینجا داشته باشیم.
پس من شروع می‌کنم با همون ریست کلی که گفتم.
پس به همه‌ی المنت‌های صفحه margin صفر و padding صفر می‌دم.
برای تک‌تک المنت‌های صفحه.
خوبه.
و حالا من واقعاً می‌خوام این محصول رو بسازم.
پس به این المنت عرض 825 پیکسل می‌دم
همونطور که قبلاً گفته بودم.
خوبه.
و حالا وقتشه این رو توی مرورگر وسط‌چین کنیم.
و توی جلسه‌ی قبلی،
دقیقاً بهت نشون دادم که چطور این کارو انجام بدی.
اونجا یه المنت ساختیم به اسم container
و بعد اون رو داخل body وسط‌چین کردیم.
حالا توی این مورد،
container در واقع همین محصوله، درسته؟
و همونجاست که عرض رو می‌دیم.
و همونجاست که حالا margin چپ و راست
رو روی auto تنظیم می‌کنیم.
پس من اینجا از shorthand استفاده می‌کنم
و برای بالا و پایین صفر می‌ذارم،
و برای چپ و راست auto.
و خب اینم از این.
الان این توی body وسط‌چین شده.
عالیه.
ولی می‌تونیم این رو یه ذره بهتر کنیم
چون الان یه جورایی به بالای صفحه چسبیده
و همینطور پایین صفحه.
پس به جای اینکه بالا و پایین رو صفر بذاریم،
بیایم بذاریم روی 50 پیکسل.
و اینطوری یه مقدار فاصله ایجاد می‌کنیم
در واقع دور این المنت.
پس اینجا 50 دادیم، پایین هم 50، بالا هم 50 پیکسل.
خیلی خوب.
بعدی، یه مقدار فضا توی heading برگردونیم.
یعنی همون عنوان محصول.
و حالا می‌خوایم یه مقدار فضا داخل المنت ایجاد کنیم
تا بتونیم یه فضای خالی اینجا درست کنیم
که همچنان رنگ پس‌زمینه داشته باشه، درسته؟
پس برای همین از padding استفاده می‌کنیم
چون می‌خوایم این فضا داخل المنت باشه
نه بیرونش.
پس اگر margin بود، اینطوری به نظر می‌رسید
و اون وقت رنگ پس‌زمینه طبیعتاً
اینجا دیده نمی‌شد.
چون بیرونه، اما ما می‌خوایم داخل باشه،
و به همین خاطر padding استفاده می‌کنیم.
درسته؟
خب، حالا دیگه خیلی بهتر به نظر میاد.
حالا بیایم اینجا یه فضایی ایجاد کنیم
بین این قسمتِ ارسال (shipping) و این متن.
و برای این کار
برای ایجاد فضای عمودی،
دوباره از margin-bottom استفاده می‌کنم.
پس اینجا توی shipping،
یه مقدار margin-bottom اضافه کنیم.
مثلاً بذاریم ۲۰ پیکسل.
آره، این خیلی بهتر شد.
حالا بیایم یه نگاه به نتیجه نهایی بندازیم
که می‌خوایم بهش برسیم.
می‌بینید که اینجا هم یه مقدار فاصله داریم.
زیر این heading هم یه فضایی داریم.
و بعد این لیست نامرتب (unordered list) هم برگشته
داخل container.
چون دقت کنید که الان این بولت‌ها بیرون قرار گرفتن،
درسته؟
پس بیایم همه این‌ها رو درست کنیم.
از این یکی شروع کنیم و ۱۵ پیکسل بدیمش.
و مثل همیشه، اگه اعداد شما فرق کنه،
اصلاً مهم نیست.
خب؟
حالا یه مقدار فاصله هم اینجا بین این لینک و عنوان،
یعنی همین heading.
و منطقی‌ترین کار احتمالاً اینه که
یه margin-bottom به لینک بدیم. چون همونطور که گفتم،
بهترین کار اینه که فقط یکی از جهت‌ها رو انتخاب کنیم،
یعنی یکی از طرف‌ها،
و همیشه margin رو اونجا اضافه کنیم.
پس بیایم امتحان کنیم.
یعنی این .more-info: Link
ولی خواهید دید که این درواقع کار نمی‌کنه.
می‌بینید که اضافه کردیم ولی عمل نکرد.
و دلیل اینکه عمل نکرد،
یه چیزیه که توی ویدیوی بعدی توضیح می‌دم.
باشه؟
پس چیزی که الان مهمه اینه که این کار نمی‌کنه
چون عملاً نمی‌تونید margin رو
روی المنت‌های کوچیکی مثل anchor ها استفاده کنید.
یعنی همین لینک‌ها.
پس به جاش کاری که الان می‌کنیم اینه که
یه margin-top به این المنت بدیم.
و اینطوری از نظر بصری دقیقاً همون شکلی دیده میشه،
درسته؟
یعنی ۳۰ پیکسل به پایینِ این اضافه کنیم
یا ۳۰ پیکسل به بالای اون یکی بدیم،
عملاً یکیه.
بعدش بیایم این بولت‌پوینت‌هایی که
بیرون container ما هستن رو درست کنیم.
پس margin-left بدیم، مثلاً ۲۰ پیکسل.
آره، این خیلی خوب شد.
حالا می‌خوام اینجا هم یه مقدار فاصله اضافه کنم
بین این المنت‌ها.
یعنی همین details-list اینجاست.
پس بیایم همه المنت‌هایی رو انتخاب کنیم
که توش هستن.
یعنی .details-list،
و بعد همه liهای فرزندش.
این درواقع یه descendant selector ـه،
دقیقاً همونطور که قبلاً یاد گرفتیم
و بارها ازش استفاده کردیم.
فکر کنم هیچوقت استفاده نکردیم که یکی‌شون
کلاس باشه مثل این و اون یکی المنت باشه،
ولی خب این هیچ مشکلی نداره.
می‌تونیم هر ترکیبی که خواستیم استفاده کنیم.
پس حالا بیایم اون فاصله رو اضافه کنیم.
بذارید ۱۰ پیکسل بدیم.
و حالا در نهایت برای تکمیل،
یه مقدار روی این دکمه کار کنیم.
یعنی همین یکی.
و با یه مقدار padding شروع می‌کنم.
یعنی یه فضای داخلی داخل دکمه اضافه کنیم.
خب، همین الان خیلی بهتر شد، درسته؟
ولی حالا بذارید کاری کنیم از یه طرف بره
تا اون طرف.
این دقیقاً شبیه کاریه که با تصویر انجام دادیم
توی یکی از ویدیوهای قبلی.
پس خیلی راحت می‌تونیم width رو بذاریم ۱۰۰٪.
و حالا عملاً کل فضای المنت والد رو گرفته،
که همون article کامل هست.
و حالا تنها چیزی که کمه اینه که یه border بالا داشته باشه،
درسته؟
یادتونه توی دموی ما، وقتی روش hover می‌کنیم،
هنوز مثل یه دکمه به نظر میاد، درسته؟
و برای ایجاد اون افکت،
یعنی اون نوع توهم،
نیاز داریم این border بالای دکمه باشه.
پس بیایم اضافه‌ش کنیم.
و این درواقع همون border ـیه
که دور این article هست.
پس بیایم ببینیم چی اونجا داریم
و می‌تونیم همون رو کپی کنیم.
تنها چیزی که لازمه تغییر بدیم اینه که
اینجا فقط می‌خوایم border بالا باشه.
خب، حالا درست شد.
عالیه.
این دقیقاً همونطور که باید شد.
و فکر کنم با این، این چالش رو کامل کردیم.
الان دقیقاً مثل دموی ما شد.
پس فکر کنم کارمون با این چالش تمومه.
خیلی عالی، کار خیلی خوبی کردی و تبریک می‌گم
که دوباره کلی کد رو خودت نوشتی.
این تمرین‌ها واقعاً خیلی مهمن
برای اینکه دانش‌تون رو تثبیت کنید.
من خیلی خوشحالم که هنوز با من همراهید
چون این واقعاً نشونه‌ی پیشرفت خیلی خوبیه.