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

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

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

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

مسیر یادگیری

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

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

HTML

زبان نشانه‌گذاری ابرمتن برای ساختار دادن به محتوای وب. تگ‌ها المان‌های صفحه را تعریف می‌کنند.

همهٔ نکات آموزشی ←
درس 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 از صفر تا تحویل.

لینک کپی شد!