خوبه که دوباره برگشتی
و به اولین چالش این بخش خوش اومدی
چالش این بخش
و توی این چالش ما ادامه می‌دیم به ساختن
روی کدی که قبلاً نوشتیم
توی بخش مبانی HTML
خب بعد از اولین چالش بزرگمون
به این کد رسیدیم
یعنی همین پروژه اینجا یادت هست؟
و چیزی که الان ازت می‌خوام اینه که
روی این پروژه ادامه بدی تا به این نتیجه برسی
اینجا می‌بینی که بعضی متن‌ها با حروف بزرگ هستن
این یکی و اون یکی
یه پس‌زمینه خاکستری هم بین این هدینگ وجود داره
همچنین می‌بینی که یه سری استایل خاص هم اینجا هست
این متن خیلی بزرگ‌تره
دکمه هم به این شکل استایل داده شده
وقتی روش هاور کنیم
و همچنین لینک هم به شکل متفاوتی استایل گرفته
یه کادر مشکی دور کل این کامپوننت وجود داره
یعنی کل این عنصر article و فکر کنم همین بود
همچنین این آیکون‌های لیست الان مربعی شدن
و برای رسیدن به این می‌تونی با مقادیر مختلف
ویژگی list-style آزمایش کنی
ولی این بخش خیلی مهم نیست
اون چیزی که واقعاً مهمه استایل هاوره
پس لینک به طور پیش‌فرض مشکیه
و وقتی هاور می‌کنیم روش
تنها اتفاقی که میفته اینه که خط زیرش حذف می‌شه
اینجا پایین هم یادت باشه که در واقع
این یه دکمه هست و دکمه‌ها هم می‌تونن حالت هاور داشته باشن
حالا برخلاف لینک‌ها
اونا pseudo-class لینک یا visited ندارن
ولی می‌تونی همچنان برای pseudo-class هاور استایل تعریف کنی
و چیزی که ازت می‌خوام اینه که
وقتی روی این دکمه هاور می‌کنیم
رنگ‌ها برعکس بشن
پس پس‌زمینه که مشکی بود سفید بشه
و متنی که سفید بود الان مشکی بشه
یه افکت جذاب اینطوری
و لازم نیست خیلی نگران رنگ درست
یا اندازه فونت درست باشی
فعلاً می‌تونی از هر مقداری استفاده کنی
چون هدفم از این کار اینه
که واقعاً خود ویژگی‌ها رو تمرین کنی
و مقادیرشون اونقدر مهم نیستن
باشه؟
پس به عنوان نقطه شروع برای این چالش
لطفاً از کدی استفاده کن که بهش رسیدی
بعد از آخرین چالش کدنویسی‌ات
یعنی بعد از پایان بخش مبانی HTML
و اگه به هر دلیلی دیگه اون کد رو نداری
یا اون چالش رو انجام ندادی
من توی این ویدیو لینکی هم قرار می‌دم
که می‌تونی کد شروع رو اونجا پیدا کنی
و از اونجا شروع به کار کنی
این یک چالش بزرگ محسوب می‌شه
پس احتمالاً حداقل نیم ساعت زمان می‌بره
شاید هم کمی بیشتر تا تکمیلش کنی
و هیچ مشکلی هم نیست اگر لازم باشه برگردی
به کدی که توی جلسات با هم نوشتیم
لازم نیست الان همه‌ی نام ویژگی‌ها رو
حفظ کرده باشی
کاملاً طبیعیه
اگه نیاز باشه بعضیاش رو سرچ کنی باشه؟
پس بابت این موضوع ناراحت نشو
چیزی که می‌خوام اینه که یه مقدار CSS خودت بنویسی
و مطمئنم که می‌تونی این کار رو انجام بدی
پس وقتی آماده شدی دوباره برگرد اینجا
خوش برگشتی
امیدوارم موقع حل این چالش لذت برده باشی
و حسابی خوش گذشته باشه
و دیگه وقت رو تلف نکنیم و مستقیم بریم سر کار
من از body شروع می‌کنم
و براش یک فونت‌فمیلی sans-serif می‌ذارم
پس sans-serif
و همونطور که توی جلسه قبل یاد گرفتیم
این فونت‌فمیلی که روی sans-serif تنظیم کردی
حالا به همه عناصر دیگه هم به ارث می‌رسه
خیلی خب
و همین خودش یه تغییر بزرگ محسوب می‌شه
حالا یه چیز دیگه هم هست که می‌خوام اینجا انجام بدم
و این یکی برای تو اجباری نبود
چون حتی درموردش حرف هم نزدم
اما می‌خوام line-height رو اینجا بیشتر کنم
و این یکی از همون ویژگی‌هایی هست
که واقعاً به ارث می‌رسه
و با اضافه کردن line-height اینجا
بین همه عناصر
فضای بیشتری برای تنفس می‌گیریم
به‌خصوص بین این li ها باشه؟
و حالا بیایم از بالا به پایین این کد HTML
شروع به کار کردن کنیم
پس با article شروع می‌کنیم و
اون کادر مشکی رو دورش اضافه می‌کنیم
اینجا براش یک کلاس product می‌ذاریم
و من الان شروع می‌کنم به استفاده از کلاس‌ها روی همه عناصر
اما دوباره می‌گم لازم نیست دقیقاً همین کار رو انجام بدی
پس اگه خروجی کارت مثل من شد
نیازی به تغییر چیزی نیست
خیلی خب
اینجا من از چهار پیکسل استفاده کردم می‌تونی چیز دیگه‌ای بذاری
ولی اون واقعاً مهم نیست
خب عالیه
اینجا یه h2 داریم
پس من اسمش رو می‌ذارم عنوان محصول
پس عنوان محصول
و بذار یه نگاه بندازیم
خب متن وسط‌چینه
یه رنگ پس‌زمینه داره و حروفش بزرگ نوشته شده
پس بیایم این کارو انجام بدیم
Text-align رو center بذاریم یه اندازه فونت هم
مثلاً ۲۲ پیکسل
بعدش هم حروف بزرگ بودن درسته؟
پس می‌شه text-transform: Uppercase
و در نهایت همون رنگ پس‌زمینه ملایمی که داشتیم
من همون کدی رو که تو درس‌ها استفاده کردیم می‌زنم F7F7F7
و واقعاً هم قشنگ به نظر میاد
پس بریم سراغ مورد بعدی
یه چندتا کامنت اضافه کنیم اینجا
که راحت‌تر قابل درک باشه
و اینجا توی CodePen درواقع
دقیقاً همون شورتکاتی کار می‌کنه که تو VS Code هم بود
یعنی کامنت یا کنترل + اسلش
خیلی خب
خب مرحله بعد متن رو یه مقدار بزرگ‌تر کنیم
و همین برچسب ارسال رایگان رو هم تغییر بدیم
می‌بینید که آره قیمت بزرگ‌تره
و این «ارسال رایگان» اینجا
درواقع فقط یه برچسبه درسته؟
و این وقتی بیشتر معنی پیدا می‌کنه
که تبدیلش کنیم به یه چیدمان (layout) قشنگ
ولی مهم اینه که متنش نسبتاً کوچیکه
با حروف بزرگ و یه رنگ خاکستری روشن‌تر
پس بیایم همه اینا رو الان انجام بدیم
این یکی اسمش price هست و اون یکی shipping
توجه کنید که اینجا یه کم سریع‌تر پیش می‌رم
چون همه این ویژگی‌ها رو قبلاً یاد گرفتیم
و الان فقط دارم این چالش رو با هم حل می‌کنم
همراه با شما
که امیدوارم قبلش خودتون هم انجام داده باشید
پس این بیشتر جنبه مرور داره
من دوست دارم بیشتر چیزایی که قبلاً انجام دادیم
اینجوری مرور کنم
پس من این بخش کدمون رو اسم می‌ذارم
اطلاعات محصول و بعدش price
و اینجا مثلاً یه font-size روی ۲۴ پیکسل بذاریم
عالیه
و حالا برای shipping
خب shipping
و توجه کنید که من همیشه دارم فقط از کلاس‌ها استفاده می‌کنم
و هیچ‌وقت از IDها استفاده نمی‌کنم
و دوباره این برای اینه که کدمون در آینده منعطف‌تر باشه
همون‌طور که تو یکی از درس‌های قبلی توضیح دادم
توی همین بخش درسته؟
پس اینجا اندازه فونت یه مقدار کوچیک‌تره
یعنی ۱۲ پیکسل
یادتون باشه که با حروف بزرگ بود
و حالا دیگه چی داریم؟
وزن فونت هم بولد بود
ببینیم دیگه چی داشت
آهان یه رنگ روشن‌تر هم داشت
پس بذار از 777 استفاده کنیم اینجا
و این رنگ رو می‌تونستی مثلاً
با color picker خود VS Code هم دربیاری درسته؟
برای من این مقدار دیگه تقریباً
مثل یه پیش‌فرض تو ذهنمه وقتی یه رنگ خاکستری روشن می‌خوام
و برای شما هم طبیعتاً با تمرین جا می‌افته
خیلی خب
حالا بریم سراغ لینک اینجا
یعنی همین یکی
اسمش رو می‌ذارم more info
خب more info
و یادتون باشه که این یه لینکه
و خاصیت href داره بنابراین
اینجا باید از pseudo-class لینک استفاده کنیم
باشه
پس بهترین روش همیشه اینه
که حالت‌های مختلف لینک رو استایل بدیم
تنها چیزی که واقعاً تغییر می‌کنه رنگشه
که باید سیاه بشه اگه درست یادم باشه
خیلی خب
و حالت hover هم همونه
فقط فرقش اینه که زیرخطش برداشته می‌شه
و همین برای active هم صادقه
یعنی کلیک می‌کنم و همچنان همون‌طور دیده می‌شه
خب بیایم اینو به کد تبدیل کنیم
برای hover و حالا چیزی که گفتم
اینه که text-decoration می‌شه none
و همین حالت برای active هم باید باشه
و به جای اینکه همین قانون رو کپی کنم
می‌تونم فقط selector رو کپی کنم و به صورت لیست بنویسم
پس می‌خوام این اتفاق تو hover و active بیفته و
و امیدوارم متوجه شده باشید
که درواقع یکی از حالت‌ها رو جا انداختیم
پس بیایم به‌سادگی اینجا اضافه‌ش کنیم
یعنی حالت visited
قبلاً هم گفتم که باید همیشه هر چهار حالت رو مشخص کنیم
و همیشه هم به همین ترتیب
یعنی اول link بعد visited بعد hover و بعد active
و در این مورد لینک
و حالت بازدیدشده (visited) تصادفاً یکی شدن
و همین موضوع برای hover و active هم صدق می‌کنه
و بنابراین این دقیقاً همون‌طور که انتظار می‌رفت کار می‌کنه
خب
پس این بخش از کد
در واقع مربوط به اطلاعات محصوله
و حالا این پایین یه جورایی جزئیات محصول رو داریم
پس همه‌ی این قسمت رو می‌تونیم بگیم جزئیات محصول
خب بیایم یه جداکننده دیگه اینجا اضافه کنیم
داخل کدمون
و این به‌طور بصری کمک می‌کنه
کدمون رو به بخش‌های مختلف تقسیم کنیم
اینجا عنوان جزئیات رو داریم
و بعد بیایم لیست رو «لیست جزئیات» صدا کنیم
خب اینو از اینجا کپی کنیم
که دیگه مجبور نباشیم دوباره همه‌شو بنویسیم
و بعد اینم لیسته
و در واقع بذارید با همین شروع کنیم
خب بهتون گفته بودم یه کم با
ویژگی list-style امتحان کنید
که اینجا توی CodePen درست کار نمی‌کنه
منظورم امتحان کردنه
چون مقادیر مثل VS Code
اینجا نمایش داده نمی‌شن
ولی شاید تو VS Code تست کردید
و اونجا می‌دیدید که یکی از گزینه‌ها
اینه که بذاریدش روی square
و بعد این شکلی می‌شه
پس خیلی خوب با بقیه‌ی چیدمان مربعی ما جور درمیاد
خب
و اینجا جزئیات محصول
بیایم مثل بقیه عنوان‌ها بزرگش کنیم
پس text-transform رو بذاریم uppercase
و اندازه فونت رو روی 16 پیکسل بذاریم
خب عالیه
این تقریباً همون شکلی شد فقط اینجا
برای دکمه
که اونم ساده‌ست
پس بیایم یه بخش جدید اینجا درست کنیم
فقط برای دکمه
و توی این تیکه کوچیک از کد
خب البته لازم نیست این کارو بکنیم
که همه این کامنت‌ها رو اضافه کنیم
ولی فقط می‌خوام کم‌کم عادت کنید
کدتون رو یه مقدار مرتب‌تر سازمان‌دهی کنید
باشه
پس این دکمه اینجا من اسمشو گذاشتم add cart
و حالا شروع کنیم با رنگ پس‌زمینه مشکی
ببینیم
ولی حالا یه بوردر خیلی زشت گرفتیم که می‌بینید
نمی‌دونم قبلاً اینو انجام دادیم یا نه
احتمالاً نه
پس مسئله مهمی نیست
اگه این بخش رو انجام نداده باشید
پس بوردر رو بذاریم none
اما به‌هرحال رنگش رو باید سفید بذاریم
که می‌تونیم با اسم رنگ CSS تنظیم کنیم
یا البته با کد hex هم بذاریم
مثلاً نشانه‌گذاری hex یعنی fff
که دقیقاً همون چیزه
بعد بیایم بزرگ‌ترش کنیم
اندازه فونت 20 پیکسل
و دوباره text-transform uppercase
خب البته نه 20 پیکسل منظورم uppercase بود
عالی
فکر کنم الان شکلش یکی شده
و حالا فقط برعکسشو نیاز داریم
آها و باید این cursor رو هم اضافه کنیم
یعنی pointer همون شکل دست
چون معمولاً روی دکمه به‌طور پیش‌فرض ظاهر نمی‌شه
این قطعاً ویژگی‌ایه که قبلاً بهتون نشون ندادم
ولی الان نشونتون می‌دم
می‌تونیم cursor رو بذاریم روی pointer
و حالا شبیه لینک می‌شه
می‌بینید؟ الان شکل دست اینجاست مثل قبلی
خیلی خوب و حالا همون‌طور که گفتم
می‌تونید pseudo-class هاور رو تنظیم کنید
باشه
چون این یه دکمه‌ست و می‌تونیم روش هاور کنیم
پس می‌تونیم pseudo-class هاور رو تعریف کنیم
و در واقع می‌شه روی همه المان‌ها این کارو کرد
ولی معمولاً خیلی منطقی نیست
خب در هر صورت چیزی که می‌خوایم اینجاست
اینکه رنگ‌ها رو برعکس کنیم
پس الان رنگ باید مشکی باشه
و برای حفظ یکدستی
بیایم از نشانه‌گذاری hex استفاده کنیم
و همین‌طور اینجا هم
من دوست دارم همه‌چیز رو اینطوری یکدست نگه دارم
و بعد رنگ پس‌زمینه
باید سفید بشه
خب
و بله درست کار می‌کنه
پس فکر کنم با این پروژه ما اینجا
دقیقاً مثل کد دموی نمونه شد
عالی
امیدوارم خیلی سخت نبوده باشه
و کمی هم لذت برده باشید
و تونسته باشید حداقل بخشی ازشو انجام بدید
پس اگه لازم شد کدتون رو با مال من مقایسه کنید
من لینکش به کد نهایی این چالش
رو یه جایی توی همین درس قرار می‌دم
و با این حرف
می‌بینمتون توی درس بعدی
که یکی از مهم‌ترین درس‌های این بخشه