مدرسه زیبایی CSS: تمرین عملی با مفاهیم آموختهشده
این درس یک پروژهی واقعی و کوچک بود تا همهی مفاهیم پایهای CSS که تا الان یاد گرفتیم رو کنار هم بذاریم و نتیجهی کار رو ببینیم.
🟩 نکات کلیدی تمرین
- پسزمینهی کلی صفحه: تغییر رنگ با کد Hex (
#006400) برای ایجاد حس متفاوت. - پسزمینهی container: سفید کردن بخش اصلی برای خوانایی بهتر.
- فاصلهگذاری داخلی (Padding): جلوگیری از چسبیدن متن به لبهها.
- box-sizing: border-box: سادهسازی محاسبات عرض و ارتفاع.
- ستونبندی با float: قرار دادن main و sidebar کنار هم با درصد یا پیکسل.
- فونت صفحه: انتخاب فونت عمومی مثل Tahoma و تنظیم اندازهی پایه.
- هدر: حذف margin اضافی، تنظیم فاصلهها و رنگ سبز تیرهتر برای هماهنگی.
- سایدبار: رنگ پسزمینهی ملایم، padding مناسب و فونت کوچکتر.
- فوتر: ساده، کمرنگ و وسطچین برای اینکه خیلی تو چشم نباشه.
- Shorthand: نوشتن padding بهصورت خلاصه برای تمیزی کد.
🎯 جمعبندی
این پروژه نشون داد که:
- با ترکیب رنگها، فاصلهگذاری و فونتها میشه ظاهر صفحه رو حرفهایتر کرد.
- float و box-sizing ابزارهای پایهای برای ساخت layout هستن.
- استفاده از shorthand باعث تمیزی و خوانایی بیشتر کد میشه.
🌟 نکته مهم: این طراحی هنوز ساده و ابتداییه، اما پایهی محکمی برای ورود به دنیای طراحی مدرن با Flexbox و Grid محسوب میشه.