آموزش طراحی وب
مبانی HTML، CSS، چیدمان و طراحی ریسپانسیو
اگر میخواهید طراح وب شوید یا طراحی وب را از پایه یاد بگیرید، این بخش برای شماست. آموزش طراحی وب از مفاهیم اولیه تا فریمورکهای CSS، جاوااسکریپت و PHP — رایگان و به زبان فارسی.
مسیر یادگیری
مبتدی درسهای ۱–۹ (HTML، CSS، ریسپانسیو، سئو، دسترسیپذیری) → متوسط درسهای ۱۰–۱۳ (فریمورکها) → راهنما درسهای ۱۴–۱۷ (چگونه طراح وب شویم، پروژهٔ لندینگ).
نکتهٔ این هفته
HTML
زبان نشانهگذاری ابرمتن برای ساختار دادن به محتوای وب. تگها المانهای صفحه را تعریف میکنند.
همهٔ نکات آموزشی ←معرفی طراحی وب
طراحی وب چیست، فرانتاند و بکاند، و ابزارهای اولیه.
مبانی HTML
ساختار سند HTML، تگهای اصلی و معناسازی.
متن، لینک و تصویر در HTML
پاراگراف، عنوان، لینک، تصویر و لیستها.
مبانی CSS
اتصال CSS به HTML، انتخابگرها و قواعد پایه.
مدل جعبه (Box Model)
محتوای المان، padding، border و margin.
چیدمان با Flexbox
چیدمان یکبعدی با display: flex و تراز آیتمها.
طراحی ریسپانسیو
Media Query، واحدهای نسبی و موبایلفرست.
سئو مقدماتی برای وب
متا تگها، ساختار سند، سرعت و محتوا برای موتورهای جستجو.
دسترسیپذیری وب (A11y)
معناسازی، کنتراست و کیبورد برای همه کاربران.
فریمورکهای CSS
Tailwind، Bootstrap، Bulma و سایر فریمورکهای محبوب CSS.
ابزارها و فریمورکهای مرتبط با HTML
قالبهای HTML، پیشپردازندهها و کامپوننتهای مبتنی بر HTML.
فریمورکهای جاوااسکریپت
React، Vue، Angular، Svelte و مقایسهٔ آنها.
فریمورکهای PHP
Laravel، Symfony، CodeIgniter و انتخاب فریمورک مناسب.
چگونه طراح وب بشویم
مسیر یادگیری، مهارتها و گامهای عملی برای تبدیل شدن به طراح وب.
چگونه طراحی وب کنیم
مراحل عملی از ایده تا تحویل: تحقیق، وایرفریم، طراحی و پیادهسازی.
طراحی وب برای مبتدیان
شروع از صفر: مفاهیم پایه، ابزارها و اولین پروژهٔ طراحی وب.
پروژه عملی: ساخت صفحهٔ لندینگ
یک صفحهٔ لندینگ ساده با HTML و CSS از صفر تا تحویل.