آموزش طراحی وب‌سایت (Front-End) — از صفر تا پروژه واقعی 🎯
اگه تا حالا به این فکر کردی که چطور سایت‌هایی مثل Envato یا Miro رو می‌سازن و چرا بعضی سایتا اینقدر روون و قشنگ کار می‌کنن، جوابش تقریباً همیشه برمی‌گرده به یه چیز: فرانت‌اند. همون بخشی از سایت که کاربر مستقیم باهاش سر و کله می‌زنه. ا...
آموزش طراحی وب‌سایت (Front-End) — از صفر تا پروژه واقعی 🎯
اگه تا حالا به این فکر کردی که چطور سایت‌هایی مثل Envato یا Miro رو می‌سازن و چرا بعضی سایتا اینقدر روون و قشنگ کار می‌کنن، جوابش تقریباً همیشه برمی‌گرده به یه چیز: فرانت‌اند. همون بخشی از سایت که کاربر مستقیم باهاش سر و کله می‌زنه. این دوره دقیقاً برای همینه؛ از مفاهیم پایه شروع می‌شه و می‌رسه به جایی که خودت بتونی یه صفحه وب کامل رو از صفر بچینی.
این دوره دقیقاً چیه و چرا مهمه؟
دنیای وب دیگه یه چیز حاشیه‌ای نیست؛ شده بخشی جدانشدنی از زندگی روزمره‌مون. خیلی از کارهامون — از خرید و بانک تا یادگیری و سرگرمی — به وب گره خورده. کسی که با این فضا آشنا نباشه، کم‌کم از رقبا و هم‌دوره‌ای‌هاش عقب می‌افته. این دوره از مجموعه دوره‌های آموزش برنامه‌نویسی مکتب خونه‌ست و مخصوص کسایی طراحی شده که می‌خوان وارد حوزه طراحی سایت و وب بشن.
یه نکته جالب: فرانت‌اند یکی از رایج‌ترین راه‌های کسب درآمد در حوزه وب هست. چون هر کسب‌وکاری که سایت یا اپلیکیشن داره، به یه نفر نیاز داره که اون رابط کاربری رو بسازه و مرتب نگه داره.
توی این دوره چی یاد می‌گیرم؟
سوال اصلی هر دانشجو همینه. جوابش اینه که شما با ابزارهایی مثل HTML و CSS یاد می‌گیری چطور بخش ظاهری یه وب‌سایت رو طراحی کنی؛ همون چیزی که طراح UI توی ذهنش داره و باید روی صفحه پیاده بشه. مباحث دوره شامل این‌هاست:
آشنایی با مفاهیم فرانت‌اند و FrontEnd Development
کار با HTML از سطح پایه تا attributeها و ویژگی‌های پیشرفته‌تر
استایل‌دهی به صفحات با CSS (مقدماتی و پیشرفته)
صفحه‌بندی وب‌سایت و طراحی بخش‌های مختلف
آموزش CSS Flex و پیاده‌سازی پروژه سایت Envato.com
آموزش CSS Grid و ساخت پروژه Myer.com.au
آشنایی با SASS و پیاده‌سازی صفحه لاگین miro.com
کار با Frameworkهای CSS
علاوه بر این‌ها، مباحث گسترده‌تری هم حول برنامه‌نویسی فرانت‌اند مطرح می‌شه که به درک عمیق‌ترت کمک می‌کنه.
این دوره به کارت میاد؟ (کاربرد واقعی)
فرض کن استادت یه پروژه درس داده: «یه صفحه لاگین شبیه به فلان سایت طراحی کن». یا توی یه تیم استارتاپی هستی و باید بخش ظاهری یه داشبورد رو بسازی. بدون فرانت‌اند، عملاً دستت بسته‌ست. با چیزهایی که اینجا یاد می‌گیری، می‌تونی:
رزومه‌ت رو با چند پروژه واقعی (نه فقط تمرین کلاسی) پر کنی
فریلنسری توی حوزه طراحی سایت رو شروع کنی
پایه‌ای بسازی که بعداً بری سمت فریم‌ورک‌هایی مثل React یا Vue
یه مثال ساده: بعد از فصل Flex، اگه بخوای یه منوی ناوبری ریسپانسیو بسازی که روی موبایل هم درست کار کنه، دیگه مثل قبل سردرگم نمی‌شی.
این دوره برای چه کسانی مناسبه؟
مباحث طوری چیده شده که تقریباً همه علاقه‌مندان بتونن شرکت کنن. اگه جزو این دسته‌ها هستی، احتمالاً دوره به کارت میاد:
دانشجوهای رشته‌های کامپیوتر و IT
هر کسی که به برنامه‌نویسی و طراحی سایت علاقه داره
افرادی که می‌خوان از صفر وارد بازار کار وب بشن
کسایی که قبلاً چند تا آموزش پراکنده دیدن ولی هنوز نمی‌تونن یه پروژه کامل تحویل بدن
هدف این دوره چیه؟
هدف اصلی اینه که مطالب لازم برای تبدیل شدن به یه برنامه‌نویس فرانت‌اند رو یاد بگیری. یعنی در نهایت بتونی فرانت‌اند یه وب‌سایت رو از صفر تا صد خودت انجام بدی؛ نه اینکه فقط تکه‌تکه کد بزنی و ندونی چطور به هم وصلشون کنی.
نگاهی به محتوای دوره 📚
فصل
عنوان
جلسات
مدت
۱
آشنایی با مفاهیم FrontEnd Development
۷
۰۰:۵۴
۲
آشنایی با HTML پایه
۱۲
۰۱:۱۷
۳
HTML پیشرفته و آشنایی با attributeها
۱۲
۰۱:۳۶
۴
استایل‌دهی به صفحه و CSS پایه
۱۳
۰۲:۱۲
۵
CSS و مباحث پیشرفته‌تر
۱۲
۰۱:۱۸
۶
CSS Flex و پروژه Envato.com
۱۰
۰۲:۲۵
۷
CSS Grid و پیاده‌سازی Myer.com.au
۱۰
۰۱:۳۱
۸
SASS و صفحه لاگین miro.com
۱۰
۰۱:۳۸
۹
آشنایی و کار با Frameworkهای CSS
۹
۰۱:۱۳
۱۰
نکات بیشتر
۶
۰۰:۲۸
خلاصه مشخصات دوره
عنوان: آموزش طراحی وب‌سایت (Front-End)
سطح: مقدماتی تا متوسط
زمان کل: حدود ۱۴ ساعت و نیم
تعداد فصل‌ها: ۱۰ فصل
پیش‌نیاز: آشنایی مقدماتی با کامپیوتر (نیازی به دانش برنامه‌نویسی قبلی نیست)
حوزه: طراحی وب، فرانت‌اند، برنامه‌نویسی
سوالات متداول دانشجوها 🤔
آیا بدون دانش قبلی برنامه‌نویسی می‌تونم شروع کنم؟
بله. فصل‌های اول دقیقاً برای همین طراحی شدن؛ از مفاهیم پایه شروع می‌شه و پله‌پله جلو می‌ره.
بعد از این دوره می‌تونم پروژه واقعی بگیرم؟
با تمرین پروژه‌های داخل دوره (Envato، Myer و صفحه لاگین Miro) یه نمونه‌کار قابل ارائه داری. باقی‌ش به تمرین خودت بستگی داره.
فرق HTML و CSS چیه؟
HTML ساختار صفحه رو می‌سازه (مثل اسکلت)، CSS ظاهر و استایلش رو (مثل رنگ و لباس). هر دو توی این دوره از پایه آموزش داده می‌شن.
یه نکته درباره ثبت‌نام
اگه قصد شرکت داری، بدون که این دوره در حال حاضر با تخفیف ویژه ارائه می‌شه. با توجه به حجم محتوا و پروژه‌های عملی، فرصت خوبیه برای شروع مسیر فرانت‌اند. بعضی دوره‌های مکتب خونه هم گاهی شرایط تخفیف روی چند دوره همزمان دارن که می‌تونه به صرفه‌تر باشه.
