مبانی وب

پایه‌های ساختن صفحه‌ی وب با HTML و CSS: از فرق این دو تا کد معنادار و دسترس‌پذیر.

۸ نوشته به ترتیب از ساده به پیشرفته.

صفحه‌ی نمونه‌برداری از ساختار یک صفحه‌ی وب: قاب سند به چهار ناحیه‌ی مجزا و معنادار — نوار بالا، ستون کناری، پنل اصلی و نوار پایین — تقسیم شده و پنل اصلی برش خورده تا بلوک‌های درونی‌اش دیده شوند

نوشته‌های این دسته

تصویر شاخص نوشته: position در CSS: فرق static و relative و absolute و fixed

position در CSS: فرق static و relative و absolute و fixed

پنج مقدار position یک سؤال‌اند: عنصر نسبت به چه چیزی جابه‌جا شود؟ الگوی والد relative + فرزند absolute، رفتار fixed و sticky — با جدول تصمیم. ۹ شهریور ۱۴۰۵ ادامه
تصویر شاخص نوشته: چرا z-index کار نمی‌کند؟ stacking context به زبان ساده

چرا z-index کار نمی‌کند؟ stacking context به زبان ساده

چرا z-index: 9999 هم عنصر را بالا نمی‌آورد؟ stacking context یعنی گروه‌بندی لایه‌ها — با فهرست حباب‌سازها و دستور کار قدم‌به‌قدم رفع اشکال. ۲ شهریور ۱۴۰۵ ادامه
تصویر شاخص نوشته: سلکتور (Selector) در CSS چیست و چطور کار می‌کند؟

سلکتور (Selector) در CSS چیست و چطور کار می‌کند؟

سلکتور در CSS یعنی چه و چند نوع دارد؟ سلکتور تگ، کلاس و id، ترکیب‌ها و شبه‌کلاس‌ها — با مثال‌های ساده و تمرین زنده داخل مرورگر. ۲۷ مرداد ۱۴۰۵ ادامه
تصویر شاخص نوشته: چرا این CSS اعمال نمی‌شود؟ cascade، specificity و inheritance

چرا این CSS اعمال نمی‌شود؟ cascade، specificity و inheritance

قاعده را نوشته‌ای و رنگ عوض نمی‌شود. مرورگر برنده را با cascade و specificity انتخاب می‌کند، نه با ترتیبِ فایل — و inheritance اصلاً رقابت نمی‌کند. ۱۱ مرداد ۱۴۰۵ ادامه
تصویر شاخص نوشته: Flexbox یا Grid؟ سؤال درست این نیست کدام بهتر است

Flexbox یا Grid؟ سؤال درست این نیست کدام بهتر است

Flexbox در یک بُعد فکر می‌کند و Grid در دو بُعد — و همین یک جمله تکلیفِ بیشترِ انتخاب‌ها را روشن می‌کند. با دو اشتباهِ رایج و ادیتورِ زنده برای امتحان‌کردن. ۶ مرداد ۱۴۰۵ ادامه
تصویر شاخص نوشته: چرا هر تصویر به alt نیاز دارد؟

چرا هر تصویر به alt نیاز دارد؟

alt متنِ کوتاهی است که می‌گوید یک تصویر چیست. برای کاربران screen reader و وقتی تصویر بارگذاری نمی‌شود حیاتی است؛ اینجا می‌بینی alt خوب چطور نوشته می‌شود. ۳۰ تیر ۱۴۰۵ ادامه
تصویر شاخص نوشته: چرا فقط div کافی نیست؟ HTML معنادار

چرا فقط div کافی نیست؟ HTML معنادار

یک تلِ div در مرورگر درست به‌نظر می‌رسد، ولی برای screen reader و موتور جستجو بی‌معنی است. چرا tagهای semantic مثل header و main و footer بهترند؟ ۲۹ تیر ۱۴۰۵ ادامه
تصویر شاخص نوشته: HTML و CSS چه فرقی دارند؟ تار و پود وب

HTML و CSS چه فرقی دارند؟ تار و پود وب

HTML تارِ صفحه است و CSS پودِ آن؛ یکی ساختار و معنا می‌سازد و دیگری رنگ و شکل. با استعاره‌ی تار و پود، فرق این دو را ساده و روشن توضیح می‌دهیم. ۲۸ تیر ۱۴۰۵ ادامه