شبکه اجتماعی طراحان وب ایران

آموزش طراحی وب

مبانی HTML، CSS، چیدمان و طراحی ریسپانسیو

اگر می‌خواهید طراح وب شوید یا طراحی وب را از پایه یاد بگیرید، این بخش برای شماست. آموزش طراحی وب از مفاهیم اولیه تا فریمورک‌های CSS، جاوااسکریپت و PHP — رایگان و به زبان فارسی.

مسیر یادگیری

مبتدی درس‌های ۱–۹ (HTML، CSS، ریسپانسیو، سئو، دسترسی‌پذیری) → متوسط درس‌های ۱۰–۱۳ (فریمورک‌ها) → راهنما درس‌های ۱۴–۱۷ (چگونه طراح وب شویم، پروژهٔ لندینگ).

نکتهٔ این هفته

JavaScript, جاوااسکریپت

زبان اسکریپت سمت کلاینت برای تعامل و منطق در مرورگر. با HTML و CSS سه پایه فرانت‌اند وب را تشکیل می‌دهند.

همهٔ نکات آموزشی ←
درس 1

معرفی طراحی وب

طراحی وب چیست، فرانت‌اند و بک‌اند، و ابزارهای اولیه.

درس 2

مبانی HTML

ساختار سند HTML، تگ‌های اصلی و معناسازی.

درس 3

متن، لینک و تصویر در HTML

پاراگراف، عنوان، لینک، تصویر و لیست‌ها.

درس 4

مبانی CSS

اتصال CSS به HTML، انتخابگرها و قواعد پایه.

درس 5

مدل جعبه (Box Model)

محتوای المان، padding، border و margin.

درس 6

چیدمان با Flexbox

چیدمان یک‌بعدی با display: flex و تراز آیتم‌ها.

درس 7

طراحی ریسپانسیو

Media Query، واحدهای نسبی و موبایل‌فرست.

درس 8

سئو مقدماتی برای وب

متا تگ‌ها، ساختار سند، سرعت و محتوا برای موتورهای جستجو.

درس 9

دسترسی‌پذیری وب (A11y)

معناسازی، کنتراست و کیبورد برای همه کاربران.

درس 10

فریمورک‌های CSS

Tailwind، Bootstrap، Bulma و سایر فریمورک‌های محبوب CSS.

درس 11

ابزارها و فریمورک‌های مرتبط با HTML

قالب‌های HTML، پیش‌پردازنده‌ها و کامپوننت‌های مبتنی بر HTML.

درس 12

فریمورک‌های جاوااسکریپت

React، Vue، Angular، Svelte و مقایسهٔ آن‌ها.

درس 13

فریمورک‌های PHP

Laravel، Symfony، CodeIgniter و انتخاب فریمورک مناسب.

درس 14

چگونه طراح وب بشویم

مسیر یادگیری، مهارت‌ها و گام‌های عملی برای تبدیل شدن به طراح وب.

درس 15

چگونه طراحی وب کنیم

مراحل عملی از ایده تا تحویل: تحقیق، وایرفریم، طراحی و پیاده‌سازی.

درس 16

طراحی وب برای مبتدیان

شروع از صفر: مفاهیم پایه، ابزارها و اولین پروژهٔ طراحی وب.

درس 17

پروژه عملی: ساخت صفحهٔ لندینگ

یک صفحهٔ لندینگ ساده با HTML و CSS از صفر تا تحویل.

لینک کپی شد!