دوره آموزشی تخصصی
دوره جامع فرانت اند | مقدماتی و پروژه محور
۵۹۷ دانشجو
59 ویدیو
در حال برگزاری
تاریخ انتشار
19 مرداد 1404
آخرین بروزرسانی
18 بهمن 1404
✨ میخوای مسیر شغلیتو عوض کنی؟ از اینجا شروع کن! ✨
ببین، رک و پوستکنده: اگه از کار فعلیت خستهای و دنبال مهارتی میگردی که هم آیندهدار باشه، هم درآمد خوب داشته باشه و هم خلاقیتتو بترکونه—جای درستی اومدی.
ما یه بوتکمپ فرانتاند راه انداختیم که نه قراره جیبتو خالی کنه، نه با تئوریهای خشک خستهت کنه. این یه مسیر صاف و مستقیمه از همینجایی که هستی تا تبدیل بشی به یه متخصص فرانتاند که همه دنبالش میگردن! 🚀
🎯 ته دوره چی میشی و چی میسازی؟
فکر کن چند وقت دیگه داری سایتهای خفن رو از صفر میسازی. این شعاری نیست—دقیقاً کاریه که با هم انجام میدیم:
HTML: مثل یه معمار، اسکلت سایت رو میچینی؛ میفهمی هر چیزی کجای صفحهست و چرا.
CSS: به سایتت روح و استایل میدی. با فلکسباکس و گرید، رسپانسیو مثل آب خوردن؛ از موبایل تا مانیتور ۴K بینقص.
JavaScript: قلب تپنده! فرمهای هوشمند، انیمیشنهای باحال، دریافت و نمایش داده از سرور، و کلی تعامل که کاربر عاشقش میشه.
✅ چرا این دوره بهترین اتفاق حرفهای توئه؟
پول بیپول! ۱۰۰٪ رایگان—الان و آینده. ما معتقدیم دانش باید آزاد باشه.
از زیر صفر: اگه تنها چیزی که از کدنویسی میدونی اسمشه، اتفاقاً تو بهترین کاندیدایی!
پروژهمحور: از همون روز اول دستبهکد. چند تا پروژه واقعی میسازیم؛ از صفحه شخصی شیک تا یه وباپ کاربردی—برای رزومه و استخدام.
همگام با بازار کار: وقتت با چیزای ازمدافتاده تلف نمیشه. دقیقاً همونایی رو یاد میگیری که شرکتها براش حقوق خوب میدن.
👥 این دوره برای کیه؟
دانشآموز، دانشجو، تغییررشتهای
کارمندایی که دنبال چالش و راه فرارن
هرکسی که میخواد سریع و عملی وارد دنیای فرانتاند بشه
🎬 قدم اولت:
همین الان دکمه پلی رو بزن و شروع کن به ساختن آیندهای که همیشه میخواستی. چند ماه دیگه از خودت تشکر میکنی! 👇
آنچه خواهید آموخت
ساختاربندی اصولی صفحات وب با HTML5
طراحی و استایلدهی مدرن وبسایتها با CSS3
واکنشگرا کردن طرحها برای موبایل و تبلت
افزودن هوشمندی و تعامل به سایت با جاوا اسکریپت
کار با مفاهیم پایهای و مهم برنامهنویسی
ساخت چندین پروژه واقعی و کاربردی از صفر
آمادهسازی پورتفولیو برای ورود به بازار کار
محتوای دوره
3 فصل • 59 قسمت • 1068 دقیقه
قسمت یکممقدمه و آنچه در این دوره خواهیم آموخت !هر چیزی که قراره تو این دوره یاد بگیریم و باهم مرور میکنیم!
رایگان
۱۲ دقیقهقسمت یکممقدمه و آنچه در این دوره خواهیم آموخت !هر چیزی که قراره تو این دوره یاد بگیریم و باهم مرور میکنیم!
رایگان
۱۲ دقیقهloading
قسمت دومپیش نیاز های یک برنامه نویس خوبیک برنامه نویس چه ویژگی هایی باید داشته باشه ؟
رایگان
۱۴ دقیقهقسمت دومپیش نیاز های یک برنامه نویس خوبیک برنامه نویس چه ویژگی هایی باید داشته باشه ؟
رایگان
۱۴ دقیقهloading
قسمت سومبرنامه نویس و برنامه نویسی به چه معناست؟یاد میگیریم که دقیقا چرا به یه نفر میگن برنامه نویس
رایگان
۱۲ دقیقهقسمت سومبرنامه نویس و برنامه نویسی به چه معناست؟یاد میگیریم که دقیقا چرا به یه نفر میگن برنامه نویس
رایگان
۱۲ دقیقهloading
قسمت چهارماینترنت چیه و چه طوری بوجود اومده ؟یاد میگیریم بیسیک ترین مفاهیم اینترنت به چه شکلی ساخته شدن و چیا هستند؟
رایگان
۲۰ دقیقهقسمت چهارماینترنت چیه و چه طوری بوجود اومده ؟یاد میگیریم بیسیک ترین مفاهیم اینترنت به چه شکلی ساخته شدن و چیا هستند؟
رایگان
۲۰ دقیقهloading
قسمت پنجماینترنت به چه شکل کار میکنه و ساختارش چه شکلیه؟تو این قسمت سعی میکنیم روی بحث اینترنت عمیق بشیم و کلی چیز یاد بگیریم
رایگان
۲۶ دقیقهقسمت پنجماینترنت به چه شکل کار میکنه و ساختارش چه شکلیه؟تو این قسمت سعی میکنیم روی بحث اینترنت عمیق بشیم و کلی چیز یاد بگیریم
رایگان
۲۶ دقیقهloading
قسمت ششموب چیه اصلا و چطوری با اینترنت کار میکنه؟یاد میگیریم که وب رو بهتر بشناسیم
رایگان
۱۳ دقیقهقسمت ششموب چیه اصلا و چطوری با اینترنت کار میکنه؟یاد میگیریم که وب رو بهتر بشناسیم
رایگان
۱۳ دقیقهloading
قسمت هفتمیک کامپیوتر از چه اجزایی ساخته شده و هر کدوم وظیفشون چیه؟یاد میگیریم که بهتر کامپیوتر رو بشناسیم و هر جز رو دقیق بررسی کنیم
رایگان
۱۹ دقیقهقسمت هفتمیک کامپیوتر از چه اجزایی ساخته شده و هر کدوم وظیفشون چیه؟یاد میگیریم که بهتر کامپیوتر رو بشناسیم و هر جز رو دقیق بررسی کنیم
رایگان
۱۹ دقیقهloading
قسمت هشتمکد ادیتور یا ide چیه و چه ابزاری برای این دوره نصب میکنیم؟در پایان این بخش vscode رو نصب میکنیم و در بخش بعدی کانفیگش میکنیم
رایگان
۸ دقیقهقسمت هشتمکد ادیتور یا ide چیه و چه ابزاری برای این دوره نصب میکنیم؟در پایان این بخش vscode رو نصب میکنیم و در بخش بعدی کانفیگش میکنیم
رایگان
۸ دقیقهloading
قسمت نهمکانفیگ و پیکر بندی vscode به بهترین شکل ممکنیاد میگیریم که یک vscode رو بعد از نصب چطور کانفیگ کنیم !
رایگان
۱۳ دقیقهقسمت نهمکانفیگ و پیکر بندی vscode به بهترین شکل ممکنیاد میگیریم که یک vscode رو بعد از نصب چطور کانفیگ کنیم !
رایگان
۱۳ دقیقهloading
قسمت دهمنصب vscode در ویندوز با استاد کیومرث رحیمی !کیومرث جان این بخش بهمون یاد میده که vscode رو چطوری بتونیم روی ویندوز داشته باشیم !
رایگان
۷ دقیقهقسمت دهمنصب vscode در ویندوز با استاد کیومرث رحیمی !کیومرث جان این بخش بهمون یاد میده که vscode رو چطوری بتونیم روی ویندوز داشته باشیم !
رایگان
۷ دقیقهloading
قسمت یکمHtml چیه ؟یاد میگیریم HTML دقیقا چیه و تاریخچه اش چی بوده !
رایگان
۱۳ دقیقهقسمت یکمHtml چیه ؟یاد میگیریم HTML دقیقا چیه و تاریخچه اش چی بوده !
رایگان
۱۳ دقیقهloading
قسمت دومساختار و سینتکس Html به چه شکله ؟روی ساختار و سینتکس ساده و ضروری HTML متمرکز میشیم
رایگان
۱۸ دقیقهقسمت دومساختار و سینتکس Html به چه شکله ؟روی ساختار و سینتکس ساده و ضروری HTML متمرکز میشیم
رایگان
۱۸ دقیقهloading
قسمت سومHtml در کد و کمی ساختار لوکال هاست و پورت ها راجب لوکال هاست و پورت ها صحبت میکنیم و یکمی Html مینویسیم !
رایگان
۲۵ دقیقهقسمت سومHtml در کد و کمی ساختار لوکال هاست و پورت ها راجب لوکال هاست و پورت ها صحبت میکنیم و یکمی Html مینویسیم !
رایگان
۲۵ دقیقهloading
قسمت چهارمآموزش تگ های heading و paragraph در HTMLبا هم تگ <h1> ... <h6> و تگ <p> رو در ابتدا یاد میگیریم
رایگان
۲۶ دقیقهقسمت چهارمآموزش تگ های heading و paragraph در HTMLبا هم تگ <h1> ... <h6> و تگ <p> رو در ابتدا یاد میگیریم
رایگان
۲۶ دقیقهloading
قسمت پنجمبررسی تگ های a , iframe , img با هم راجب به تگ های لینک و آيفریم و ایمیج صحبت میکنیم
رایگان
۲۷ دقیقهقسمت پنجمبررسی تگ های a , iframe , img با هم راجب به تگ های لینک و آيفریم و ایمیج صحبت میکنیم
رایگان
۲۷ دقیقهloading
قسمت ششمبررسی تگ های Formating مثل em و strong و i و کلی چیز دیگه !
رایگان
۱۲ دقیقهقسمت ششمبررسی تگ های Formating مثل em و strong و i و کلی چیز دیگه !
رایگان
۱۲ دقیقهloading
قسمت هفتمبررسی تگ های quatation و citation مثل blockquote , q , abbr , cite , bdo , address
رایگان
۱۲ دقیقهقسمت هفتمبررسی تگ های quatation و citation مثل blockquote , q , abbr , cite , bdo , address
رایگان
۱۲ دقیقهloading
قسمت هشتملیست ها و inline و block بودن یک المنت در HTMLاول انواع لیست ها رو بررسی میکنیم و بعد راجب به موضوع اینلاین یا بلاک بودن یه المنت صحبت میکنیم !
رایگان
۱۶ دقیقهقسمت هشتملیست ها و inline و block بودن یک المنت در HTMLاول انواع لیست ها رو بررسی میکنیم و بعد راجب به موضوع اینلاین یا بلاک بودن یه المنت صحبت میکنیم !
رایگان
۱۶ دقیقهloading
قسمت نهمجدول یا Table در HTMLآموزش تگ table که به کمکش میشه جدول ساخت !
رایگان
۱۶ دقیقهقسمت نهمجدول یا Table در HTMLآموزش تگ table که به کمکش میشه جدول ساخت !
رایگان
۱۶ دقیقهloading
قسمت دهمSemantic Element ها و بررسی انواعشون با هم یاد میگیریم تفاوت Semantic و None Semantic المنت ها در چیه ( خیلی تو مصاحبه میپرسنش)
رایگان
۱۷ دقیقهقسمت دهمSemantic Element ها و بررسی انواعشون با هم یاد میگیریم تفاوت Semantic و None Semantic المنت ها در چیه ( خیلی تو مصاحبه میپرسنش)
رایگان
۱۷ دقیقهloading
قسمت یازدهمبررسی فرم ها و اینپوت ها در HTML - قسمت اولتو پارت اول این آموزش میریم فیلد های مختلف فرم رو بررسی میکنیم
رایگان
۲۲ دقیقهقسمت یازدهمبررسی فرم ها و اینپوت ها در HTML - قسمت اولتو پارت اول این آموزش میریم فیلد های مختلف فرم رو بررسی میکنیم
رایگان
۲۲ دقیقهloading
قسمت دوازدهم بررسی فرم ها و اینپوت ها در HTML - قسمت دومتو این قسمت راجب id و for در label صحبت میکنیم یکم بازم بیشتر فرم ها رو یاد میگیریم !
رایگان
۲۱ دقیقهقسمت دوازدهم بررسی فرم ها و اینپوت ها در HTML - قسمت دومتو این قسمت راجب id و for در label صحبت میکنیم یکم بازم بیشتر فرم ها رو یاد میگیریم !
رایگان
۲۱ دقیقهloading
قسمت سیزدهماتربیوت های معروف در عالم اینپوت های فرم در Htmlبا هم اتربیوت های معروفی که باید توی اینپوت ها بلد باشیم یاد میگیریم
رایگان
۳۰ دقیقهقسمت سیزدهماتربیوت های معروف در عالم اینپوت های فرم در Htmlبا هم اتربیوت های معروفی که باید توی اینپوت ها بلد باشیم یاد میگیریم
رایگان
۳۰ دقیقهloading
قسمت چهاردهمتگ های مولتی مدیا در Html مثل تگ <audio> و <video> تگ <audio> و <video> رو با هم خوب یاد میگیریم !
رایگان
۱۱ دقیقهقسمت چهاردهمتگ های مولتی مدیا در Html مثل تگ <audio> و <video> تگ <audio> و <video> رو با هم خوب یاد میگیریم !
رایگان
۱۱ دقیقهloading
قسمت پانزدهمکانفیگ برای وب فارسی و آشنایی با مفهوم Layoutبا هم دیگه RTL و LTR رو یاد میگیریم و با مفهوم Layout بیشتر آشنا میشیم !
رایگان
۲۰ دقیقهقسمت پانزدهمکانفیگ برای وب فارسی و آشنایی با مفهوم Layoutبا هم دیگه RTL و LTR رو یاد میگیریم و با مفهوم Layout بیشتر آشنا میشیم !
رایگان
۲۰ دقیقهloading
قسمت شانزدهمدیولوژی چیه ! ( آموزش چینش درست div ها در یک Layout ) - پارت ۱ با هم یه تکنیک جالب برای چینش درست div ها در کنار یکدیگرو یاد میگیریم !
رایگان
۳۰ دقیقهقسمت شانزدهمدیولوژی چیه ! ( آموزش چینش درست div ها در یک Layout ) - پارت ۱ با هم یه تکنیک جالب برای چینش درست div ها در کنار یکدیگرو یاد میگیریم !
رایگان
۳۰ دقیقهloading
قسمت هفدهمدیولوژی چیه ! ( آموزش چینش درست div ها در یک Layout ) - پارت ۲با هم یه تکنیک جالب برای چینش درست div ها در کنار یکدیگرو یاد میگیریم !
رایگان
۳۳ دقیقهقسمت هفدهمدیولوژی چیه ! ( آموزش چینش درست div ها در یک Layout ) - پارت ۲با هم یه تکنیک جالب برای چینش درست div ها در کنار یکدیگرو یاد میگیریم !
رایگان
۳۳ دقیقهloading
قسمت هجدهمدسترسی پذیری یا Accessibility در اپلیکیشن ها وببا هم یاد میگیریم اپلیکشن رو برای همه دسترسی پذیر و قابل استفاده کنیم
رایگان
۳۲ دقیقهقسمت هجدهمدسترسی پذیری یا Accessibility در اپلیکیشن ها وببا هم یاد میگیریم اپلیکشن رو برای همه دسترسی پذیر و قابل استفاده کنیم
رایگان
۳۲ دقیقهloading
قسمت یکمآموزش سینتکس Css و انواع مدل های استفادش در Htmlسینتکس css و انواع مدل های استفاده اش در Html رو یاد میگیریم !
رایگان
۱۸ دقیقهقسمت یکمآموزش سینتکس Css و انواع مدل های استفادش در Htmlسینتکس css و انواع مدل های استفاده اش در Html رو یاد میگیریم !
رایگان
۱۸ دقیقهloading
قسمت دومآموزش نحوه Path دادن به یک فایل و انواع آنیاد میگیریم چطور یک فایل رو در Html ایمپورت کنیم
رایگان
۱۵ دقیقهقسمت دومآموزش نحوه Path دادن به یک فایل و انواع آنیاد میگیریم چطور یک فایل رو در Html ایمپورت کنیم
رایگان
۱۵ دقیقهloading
قسمت سومانواع Selector ها در Css - قسمت اولراجع به Tag سلکتور و Id و Class سلکتور باهم صحبت میکنیم ! (قسمت خیلی مهمیه)
رایگان
۱۷ دقیقهقسمت سومانواع Selector ها در Css - قسمت اولراجع به Tag سلکتور و Id و Class سلکتور باهم صحبت میکنیم ! (قسمت خیلی مهمیه)
رایگان
۱۷ دقیقهloading
قسمت چهارمانواع Selector ها در Css - قسمت دومراجب انواع دیگ سلکتور ها مثل combinator selector و descendant selector ها صحبت میکنیم
رایگان
۲۴ دقیقهقسمت چهارمانواع Selector ها در Css - قسمت دومراجب انواع دیگ سلکتور ها مثل combinator selector و descendant selector ها صحبت میکنیم
رایگان
۲۴ دقیقهloading
قسمت پنجمآموزش pseudo classes ها در css با هم دیگه راجب pseudo کلاس ها در css و اهمیتشون صحبت میکنیم !
رایگان
۲۵ دقیقهقسمت پنجمآموزش pseudo classes ها در css با هم دیگه راجب pseudo کلاس ها در css و اهمیتشون صحبت میکنیم !
رایگان
۲۵ دقیقهloading
قسمت ششمآموزش Color ها در Cssراجب به rgba , hlsa , hls , rgb و هگز کد رنگ ها صحبت میکنیم و طریقه استفاده از رنگ ها در css رو یاد میگیریم !
رایگان
۱۶ دقیقهقسمت ششمآموزش Color ها در Cssراجب به rgba , hlsa , hls , rgb و هگز کد رنگ ها صحبت میکنیم و طریقه استفاده از رنگ ها در css رو یاد میگیریم !
رایگان
۱۶ دقیقهloading
قسمت هفتمآموزش کامل background در CSS | نحوه استفاده از پسزمینه در طراحی وبدر این آموزش یاد میگیرید چگونه با ویژگی background در CSS پسزمینه صفحات وب را تنظیم کنید؛ از رنگ و تصویر پسزمینه گرفته تا تکرار، اندازه و موقعیت. مناسب برای طراحان مبتدی تا حرفهای.
رایگان
۲۸ دقیقهقسمت هفتمآموزش کامل background در CSS | نحوه استفاده از پسزمینه در طراحی وبدر این آموزش یاد میگیرید چگونه با ویژگی background در CSS پسزمینه صفحات وب را تنظیم کنید؛ از رنگ و تصویر پسزمینه گرفته تا تکرار، اندازه و موقعیت. مناسب برای طراحان مبتدی تا حرفهای.
رایگان
۲۸ دقیقهloading
قسمت هشتمآموزش کامل border و outline در CSS | تفاوتها و نحوه استفادهدر این آموزش یاد میگیرید چطور با ویژگیهای border و outline در CSS قابها و خطوط دور عناصر را طراحی کنید، تفاوت آنها را درک کنید و جلوههای زیبایی به المانهای وب بدهید.
رایگان
۱۸ دقیقهقسمت هشتمآموزش کامل border و outline در CSS | تفاوتها و نحوه استفادهدر این آموزش یاد میگیرید چطور با ویژگیهای border و outline در CSS قابها و خطوط دور عناصر را طراحی کنید، تفاوت آنها را درک کنید و جلوههای زیبایی به المانهای وب بدهید.
رایگان
۱۸ دقیقهloading
قسمت نهمآموزش margin و padding در CSS | تفاوت فاصله داخلی و خارجی عناصردر این آموزش یاد میگیرید margin و padding در CSS چه تفاوتی دارند و چطور میتوان با تنظیم فاصله داخلی و خارجی، چیدمان و طراحی صفحات وب را حرفهایتر کرد.
رایگان
۲۱ دقیقهقسمت نهمآموزش margin و padding در CSS | تفاوت فاصله داخلی و خارجی عناصردر این آموزش یاد میگیرید margin و padding در CSS چه تفاوتی دارند و چطور میتوان با تنظیم فاصله داخلی و خارجی، چیدمان و طراحی صفحات وب را حرفهایتر کرد.
رایگان
۲۱ دقیقهloading
قسمت دهمآموزش تایپوگرافی وب – قسمت اول | اصول فونت و خوانایی متندر این قسمت اول از سری آموزشهای تایپوگرافی وب، با اصول انتخاب فونت، اندازه، فاصله خطوط و بهبود خوانایی متن در طراحی صفحات وب آشنا شوید. مناسب برای طراحان وب مبتدی و حرفهای.
رایگان
۱۶ دقیقهقسمت دهمآموزش تایپوگرافی وب – قسمت اول | اصول فونت و خوانایی متندر این قسمت اول از سری آموزشهای تایپوگرافی وب، با اصول انتخاب فونت، اندازه، فاصله خطوط و بهبود خوانایی متن در طراحی صفحات وب آشنا شوید. مناسب برای طراحان وب مبتدی و حرفهای.
رایگان
۱۶ دقیقهloading
قسمت یازدهمآموزش تایپوگرافی وب – قسمت دوم | سبکها و تنظیمات پیشرفته فونتدر این قسمت دوم از سری آموزشهای تایپوگرافی وب، با سبکهای فونت، وزن، ارتفاع خطوط و تکنیکهای پیشرفته برای زیباسازی متن در صفحات وب آشنا شوید و طراحی حرفهایتر داشته باشید.
رایگان
۱۴ دقیقهقسمت یازدهمآموزش تایپوگرافی وب – قسمت دوم | سبکها و تنظیمات پیشرفته فونتدر این قسمت دوم از سری آموزشهای تایپوگرافی وب، با سبکهای فونت، وزن، ارتفاع خطوط و تکنیکهای پیشرفته برای زیباسازی متن در صفحات وب آشنا شوید و طراحی حرفهایتر داشته باشید.
رایگان
۱۴ دقیقهloading
قسمت دوازدهمآموزش افزودن فونت فارسی به وب | صابر راستی کردار و وزیرمتندر این آموزش یاد میگیرید چطور فونتهای فارسی محبوب مانند فونت وزیر را به وبسایت خود اضافه کنید و طراحی متنها را زیبا و خوانا کنید. روشهای استفاده در CSS و HTML توضیح داده شدهاند.
رایگان
۲۱ دقیقهقسمت دوازدهمآموزش افزودن فونت فارسی به وب | صابر راستی کردار و وزیرمتندر این آموزش یاد میگیرید چطور فونتهای فارسی محبوب مانند فونت وزیر را به وبسایت خود اضافه کنید و طراحی متنها را زیبا و خوانا کنید. روشهای استفاده در CSS و HTML توضیح داده شدهاند.
رایگان
۲۱ دقیقهloading
قسمت سیزدهماهمیت افزودن Fallback در FontFamily و تاثیر آن بر عملکرد و تجربه کاربریافزودن فونتهای جایگزین یا Fallback به FontFamily یکی از بهترین روشها برای جلوگیری از بروز مشکلات نمایشی و بهبود تجربه کاربری در وب است. با استفاده از یک ساختار استاندارد و انتخاب هوشمندانهی فونتهای جایگزین، سرعت بارگذاری، سازگاری مرورگرها و پایداری تایپوگرافی سایت افزایش مییابد. در این مطلب به مزایا، تاثیرات و اصول انتخاب Fallbackهای مناسب میپردازیم.
رایگان
۴ دقیقهقسمت سیزدهماهمیت افزودن Fallback در FontFamily و تاثیر آن بر عملکرد و تجربه کاربریافزودن فونتهای جایگزین یا Fallback به FontFamily یکی از بهترین روشها برای جلوگیری از بروز مشکلات نمایشی و بهبود تجربه کاربری در وب است. با استفاده از یک ساختار استاندارد و انتخاب هوشمندانهی فونتهای جایگزین، سرعت بارگذاری، سازگاری مرورگرها و پایداری تایپوگرافی سایت افزایش مییابد. در این مطلب به مزایا، تاثیرات و اصول انتخاب Fallbackهای مناسب میپردازیم.
رایگان
۴ دقیقهloading
قسمت چهاردهمروشهای افزودن آیکون به CSS با FontAwesome و Material UI Iconsاضافه کردن آیکونها به استایلها با استفاده از FontAwesome و Material UI Icons یکی از رایجترین روشها برای بهبود رابط کاربری در وب است. با استفاده از این کتابخانهها میتوانید آیکونها را به صورت کلاس، pseudo-element یا inline استفاده کرده و کنترل کامل روی رنگ، اندازه و انیمیشن داشته باشید. در این مطلب بهترین روشها و نکات استفاده از آیکونها در CSS را بررسی میکنیم.
رایگان
۱۴ دقیقهقسمت چهاردهمروشهای افزودن آیکون به CSS با FontAwesome و Material UI Iconsاضافه کردن آیکونها به استایلها با استفاده از FontAwesome و Material UI Icons یکی از رایجترین روشها برای بهبود رابط کاربری در وب است. با استفاده از این کتابخانهها میتوانید آیکونها را به صورت کلاس، pseudo-element یا inline استفاده کرده و کنترل کامل روی رنگ، اندازه و انیمیشن داشته باشید. در این مطلب بهترین روشها و نکات استفاده از آیکونها در CSS را بررسی میکنیم.
رایگان
۱۴ دقیقهloading
قسمت پانزدهماستفاده از CSS در لیستها و انواع List Style در طراحی وباستفاده صحیح از ویژگیهای CSS در لیستها، مانند list-style، نقش مهمی در بهبود ظاهر و ساختار محتوا دارد. با تنظیم نوع علامت، موقعیت، تصویر سفارشی و استایلدهی پیشرفته میتوان لیستهای زیباتر و کاربرپسندتر ایجاد کرد. در این مطلب با انواع list-style و کاربردهای آن در طراحی وب آشنا میشوید.
رایگان
۶ دقیقهقسمت پانزدهماستفاده از CSS در لیستها و انواع List Style در طراحی وباستفاده صحیح از ویژگیهای CSS در لیستها، مانند list-style، نقش مهمی در بهبود ظاهر و ساختار محتوا دارد. با تنظیم نوع علامت، موقعیت، تصویر سفارشی و استایلدهی پیشرفته میتوان لیستهای زیباتر و کاربرپسندتر ایجاد کرد. در این مطلب با انواع list-style و کاربردهای آن در طراحی وب آشنا میشوید.
رایگان
۶ دقیقهloading
قسمت شانزدهماستایلدهی به جدولهای HTML با CSS و بهترین روشهای طراحیاستفاده از CSS برای استایلدهی به جدولهای HTML باعث افزایش خوانایی، نظم و جذابیت ظاهری دادهها میشود. با بهکارگیری ویژگیهایی مانند border، padding، zebra-striping، hover effects و تنظیمات متن میتوان جدولهایی حرفهای و کاربرپسند ایجاد کرد. در این مطلب بهترین تکنیکها و نکات طراحی جدول با CSS را بررسی میکنیم.
رایگان
۱۸ دقیقهقسمت شانزدهماستایلدهی به جدولهای HTML با CSS و بهترین روشهای طراحیاستفاده از CSS برای استایلدهی به جدولهای HTML باعث افزایش خوانایی، نظم و جذابیت ظاهری دادهها میشود. با بهکارگیری ویژگیهایی مانند border، padding، zebra-striping، hover effects و تنظیمات متن میتوان جدولهایی حرفهای و کاربرپسند ایجاد کرد. در این مطلب بهترین تکنیکها و نکات طراحی جدول با CSS را بررسی میکنیم.
رایگان
۱۸ دقیقهloading
قسمت هفدهماصول BEM در CSS و نقش آن در ساختاردهی بهتر کدهامتدولوژی BEM یکی از محبوبترین الگوهای نامگذاری در CSS است که به توسعهدهندگان کمک میکند کدی ساختارمند، مقیاسپذیر و قابلدرک ایجاد کنند. با استفاده از Block، Element و Modifier میتوان بخشهای مختلف رابط کاربری را به شکلی واضح سازماندهی کرد و از تداخل استایلها جلوگیری نمود. در این مطلب اصول BEM، مزایا و نحوه پیادهسازی آن را بررسی میکنیم.
رایگان
۱۹ دقیقهقسمت هفدهماصول BEM در CSS و نقش آن در ساختاردهی بهتر کدهامتدولوژی BEM یکی از محبوبترین الگوهای نامگذاری در CSS است که به توسعهدهندگان کمک میکند کدی ساختارمند، مقیاسپذیر و قابلدرک ایجاد کنند. با استفاده از Block، Element و Modifier میتوان بخشهای مختلف رابط کاربری را به شکلی واضح سازماندهی کرد و از تداخل استایلها جلوگیری نمود. در این مطلب اصول BEM، مزایا و نحوه پیادهسازی آن را بررسی میکنیم.
رایگان
۱۹ دقیقهloading
قسمت هجدهمآموزش ویژگی Overflow در CSS به همراه مثالهای عملیویژگی overflow در CSS برای کنترل نمایش محتوایی استفاده میشود که از محدوده عنصر خارج میشود. با تنظیم مقادیر مختلف مانند visible، hidden، scroll و auto میتوان رفتار اسکرول، پنهانسازی و مدیریت محتوای اضافی را تعیین کرد. در این آموزش با مثالهای عملی نحوه استفاده از overflow و کاربردهای آن در طراحی واکنشگرا را بررسی میکنیم.
رایگان
۲۱ دقیقهقسمت هجدهمآموزش ویژگی Overflow در CSS به همراه مثالهای عملیویژگی overflow در CSS برای کنترل نمایش محتوایی استفاده میشود که از محدوده عنصر خارج میشود. با تنظیم مقادیر مختلف مانند visible، hidden، scroll و auto میتوان رفتار اسکرول، پنهانسازی و مدیریت محتوای اضافی را تعیین کرد. در این آموزش با مثالهای عملی نحوه استفاده از overflow و کاربردهای آن در طراحی واکنشگرا را بررسی میکنیم.
رایگان
۲۱ دقیقهloading
قسمت نوزدهمآموزش ویژگیهای max-width، max-height، min-width و min-height در CSSویژگیهای max-width، max-height، min-width و min-height در CSS ابزارهایی قدرتمند برای کنترل ابعاد عناصر هستند. با استفاده صحیح از این مقادیر میتوان طراحی واکنشگرا، جلوگیری از کشیدگی یا کوچکشدن بیش از حد عناصر، و کنترل بهتر ظاهر صفحات را تضمین کرد. در این آموزش کاربرد، تفاوتها و مثالهای عملی از هر کدام ارائه شده است تا بتوانید در پروژههای واقعی از آنها بهترین استفاده را ببرید.
رایگان
۶ دقیقهقسمت نوزدهمآموزش ویژگیهای max-width، max-height، min-width و min-height در CSSویژگیهای max-width، max-height، min-width و min-height در CSS ابزارهایی قدرتمند برای کنترل ابعاد عناصر هستند. با استفاده صحیح از این مقادیر میتوان طراحی واکنشگرا، جلوگیری از کشیدگی یا کوچکشدن بیش از حد عناصر، و کنترل بهتر ظاهر صفحات را تضمین کرد. در این آموزش کاربرد، تفاوتها و مثالهای عملی از هر کدام ارائه شده است تا بتوانید در پروژههای واقعی از آنها بهترین استفاده را ببرید.
رایگان
۶ دقیقهloading
قسمت بیستمآموزش backward compatible و forward compatible در برنامه نویسی درباره اینکه backward compatible و forward compatible به چه معناست صحبت میکنیم
رایگان
۱۰ دقیقهقسمت بیستمآموزش backward compatible و forward compatible در برنامه نویسی درباره اینکه backward compatible و forward compatible به چه معناست صحبت میکنیم
رایگان
۱۰ دقیقهloading
قسمت بیست و یکمbackward compatible و forward compatible در واقعیت با هم در کد بررسی میکنیم که backward compatible و forward compatible چیه؟
رایگان
۱۰ دقیقهقسمت بیست و یکمbackward compatible و forward compatible در واقعیت با هم در کد بررسی میکنیم که backward compatible و forward compatible چیه؟
رایگان
۱۰ دقیقهloading
قسمت بیست و دومdisplay ها - قسمت 1 ( inline و block )در این قسمت درباره دو دیسپلی مهم و پایه ای css یعنی inline و block و نکاتش صحبت میکنیم !
رایگان
۱۵ دقیقهقسمت بیست و دومdisplay ها - قسمت 1 ( inline و block )در این قسمت درباره دو دیسپلی مهم و پایه ای css یعنی inline و block و نکاتش صحبت میکنیم !
رایگان
۱۵ دقیقهloading
قسمت بیست و سومdisplay ها - قسمت 2 ( inline-block )در این قسمت راجب inline-block صحبت میکنیم و تفاوتش با inline تو چیه و چرا ازش استفاده میکنیم
رایگان
۱۸ دقیقهقسمت بیست و سومdisplay ها - قسمت 2 ( inline-block )در این قسمت راجب inline-block صحبت میکنیم و تفاوتش با inline تو چیه و چرا ازش استفاده میکنیم
رایگان
۱۸ دقیقهloading
قسمت بیست و چهارمتراز کردن المانها با inline-block و vertical-align + مثالمیخوای المانها رو کنار هم بچینی؟ اینجا یاد میگیری چطور با display: inline-block و vertical-align توی CSS ترازبندی رو درست انجام بدی. خیلی ساده و با مثال!
رایگان
۳۰ دقیقهقسمت بیست و چهارمتراز کردن المانها با inline-block و vertical-align + مثالمیخوای المانها رو کنار هم بچینی؟ اینجا یاد میگیری چطور با display: inline-block و vertical-align توی CSS ترازبندی رو درست انجام بدی. خیلی ساده و با مثال!
رایگان
۳۰ دقیقهloading
قسمت بیست و پنجمراهنمای جامع کار با ویژگی Float و رفع مشکلات چیدمان با Clearfix در CSSدر این ویدیو به بررسی کامل ویژگی float در CSS و چالشهای آن در چیدمان عناصر میپردازیم. همچنین نحوه استفاده از تکنیک clearfix برای رفع مشکل فروپاشی ارتفاع والد و ایجاد ساختارهای استاندارد و ریسپانسیو را به زبان ساده آموزش میدهیم.
رایگان
۲۱ دقیقهقسمت بیست و پنجمراهنمای جامع کار با ویژگی Float و رفع مشکلات چیدمان با Clearfix در CSSدر این ویدیو به بررسی کامل ویژگی float در CSS و چالشهای آن در چیدمان عناصر میپردازیم. همچنین نحوه استفاده از تکنیک clearfix برای رفع مشکل فروپاشی ارتفاع والد و ایجاد ساختارهای استاندارد و ریسپانسیو را به زبان ساده آموزش میدهیم.
رایگان
۲۱ دقیقهloading
قسمت بیست و ششمdisplay ها - قسمت3 (Table)در این قسمت درباره یک دیسپلی بسیار قدیمی به اسم table صحبت میکنیم ارزش این قسمت به چند نکته بسیار حیاتی هست که هر فرانت دولوپری باید اونارو یاد بگیره پس این قسمت از دست ندید !
رایگان
۲۸ دقیقهقسمت بیست و ششمdisplay ها - قسمت3 (Table)در این قسمت درباره یک دیسپلی بسیار قدیمی به اسم table صحبت میکنیم ارزش این قسمت به چند نکته بسیار حیاتی هست که هر فرانت دولوپری باید اونارو یاد بگیره پس این قسمت از دست ندید !
رایگان
۲۸ دقیقهloading
قسمت بیست و هفتمdisplay ها - قسمت4 (Flex) - مبانیدر قسمت ۴ آموزش Display، صفر تا صد Flexbox را یاد بگیرید. آموزش ساخت چیدمانهای ریسپانسیو و تراز کردن حرفهای عناصر در CSS با فلکسباکس + مثال کاربردی.
رایگان
۱۲ دقیقهقسمت بیست و هفتمdisplay ها - قسمت4 (Flex) - مبانیدر قسمت ۴ آموزش Display، صفر تا صد Flexbox را یاد بگیرید. آموزش ساخت چیدمانهای ریسپانسیو و تراز کردن حرفهای عناصر در CSS با فلکسباکس + مثال کاربردی.
رایگان
۱۲ دقیقهloading
قسمت بیست و هشتمچرا Flexbox؟ درک مفهوم طراحی ریسپانسیو (Responsive) در CSSطراحی ریسپانسیو (Responsive) چیست و چرا در وب مدرن حیاتی است؟ در این قسمت با مزایای Flexbox نسبت به روشهای قدیمی آشنا شوید و اصول اولیه واکنشگرا کردن سایت را یاد بگیرید.
رایگان
۱۸ دقیقهقسمت بیست و هشتمچرا Flexbox؟ درک مفهوم طراحی ریسپانسیو (Responsive) در CSSطراحی ریسپانسیو (Responsive) چیست و چرا در وب مدرن حیاتی است؟ در این قسمت با مزایای Flexbox نسبت به روشهای قدیمی آشنا شوید و اصول اولیه واکنشگرا کردن سایت را یاد بگیرید.
رایگان
۱۸ دقیقهloading
قسمت بیست و نهمآموزش جامع justify-content و align-items در Flexbox؛ چیدمان حرفهای المانها با مثال کاربردیدر این ویدیو به آموزش دو پراپرتی کلیدی و مهم «justify-content» و «align-items» در سیاساس (CSS) میپردازیم. با تفاوت محور افقی و عمودی در فلکسباکس آشنا شده و با زدن مثالهای عملی، یاد میگیریم چگونه المانها را دقیقاً جایی که میخواهیم قرار دهیم. این آموزش برای تمام مبتدیان و طراحان وب بسیار کاربردی است. برای یادگیری حرفهای طراحی وب، همین حالا تماشا کنید!
رایگان
۲۷ دقیقهقسمت بیست و نهمآموزش جامع justify-content و align-items در Flexbox؛ چیدمان حرفهای المانها با مثال کاربردیدر این ویدیو به آموزش دو پراپرتی کلیدی و مهم «justify-content» و «align-items» در سیاساس (CSS) میپردازیم. با تفاوت محور افقی و عمودی در فلکسباکس آشنا شده و با زدن مثالهای عملی، یاد میگیریم چگونه المانها را دقیقاً جایی که میخواهیم قرار دهیم. این آموزش برای تمام مبتدیان و طراحان وب بسیار کاربردی است. برای یادگیری حرفهای طراحی وب، همین حالا تماشا کنید!
رایگان
۲۷ دقیقهloading
قسمت سی اُمآموزش Flex-wrap و Align-content در فلکس باکسیاد میگیرید چگونه با Flex-wrap آیتمها را در چند خط مدیریت کنید و با ویژگی Align-content، فاصلهی بین خطوط در فلکسباکس را مثل یک حرفهای تنظیم کنید. همراه با مثالهای عملی!
رایگان
۲۰ دقیقهقسمت سی اُمآموزش Flex-wrap و Align-content در فلکس باکسیاد میگیرید چگونه با Flex-wrap آیتمها را در چند خط مدیریت کنید و با ویژگی Align-content، فاصلهی بین خطوط در فلکسباکس را مثل یک حرفهای تنظیم کنید. همراه با مثالهای عملی!
رایگان
۲۰ دقیقهloading
قسمت سی و یکمآموزش کامل flex-grow و flex-shrink در CSSدر این آموزش با مفاهیم flex-grow و flex-shrink در CSS آشنا میشوید، نحوه کنترل اندازه آیتمها در Flexbox را یاد میگیرید و با مثالهای کاربردی، چیدمان حرفهای میسازید.
رایگان
۱۳ دقیقهقسمت سی و یکمآموزش کامل flex-grow و flex-shrink در CSSدر این آموزش با مفاهیم flex-grow و flex-shrink در CSS آشنا میشوید، نحوه کنترل اندازه آیتمها در Flexbox را یاد میگیرید و با مثالهای کاربردی، چیدمان حرفهای میسازید.
رایگان
۱۳ دقیقهloading
سوالات متداول
نظرات و پرسشها
نظرات (16)
زهر
زهرا ارشاد
باسلام و وقت بخیر این دوره تا این قسمتی که اموزش داده شده پروژه هم داشته؟ و اینکه چه زمان ضبط دوره تموم میشه؟ با تشکر🌹
پوریا باباعلی(استاد دوره)
پروژه که حتما داره همونطور که مینی پروژه های متنوعی تا الان داخلش هستن و انجام شدن راجب اتمام دوره فعلا نظری ندارم حال روحی هیشکی خوب نیست من جمله خودم انشاله تو یه زمان بهتر سعی میکنم اپدیت کنم دوره رو مجدد :)
Ali Beiki
واقعا دوره عالی هست، آموزش html,css ,js همه جا ریخته اما این دوره واقعا نکاتی که یک برنامه نویس فرانت باید بدونه رو داره و از خیلی دوره های پولی دیگه که دیدم ارزشش به مراتب بالا تره
پوریا باباعلی(استاد دوره)
نظر لطفته عزیزم خوشحالم که این دوره تونسته نظرتو جلب کنه امیدوارم تا انتهای دوره همراهمون باشی ♥️
حسی
حسین نباتی
سلام در این دوره مباحث flexbox و cssgrid و sass و less هم هست آموزشش میدین ؟
پوریا باباعلی(استاد دوره)
سلام بله به زودی اضافه میشه
هان
هانیه حیدری
سلام و عرض ادب ممنون از دوره عالی و خوبتون چه زمانی ویدیو ها کامل بارگزاری میشوند و دوره کامل میشه؟
پوریا باباعلی(استاد دوره)
سلام به زودی با پایدار شدن وضعیت اینترنت آپدیت میگیره دوره
abolfazl
خیلی ممنون از مهندس پوریا باباعلی که واقعا دلسوزانه این دوره هارو پیش میبرن.واقعا هر وقت ویدیو هارو نگاه میکنم جدا از بحث کیفیت و نکته های ریزش که خیلی نابن یه صمیمیت خاصی حس میکنم.خسته نباشی پوریا جان.
پوریا باباعلی(استاد دوره)
ممنونم از نظر لطفت ابوالفضل جان
MohammadKian Mahmoudi Chenari
دوره های سایت کدهالیک مثل همیشه عالیه. فقط خود سایته که نیاز به یه سری قابلیت ها برای بهتر و جذاب تر شدن داره. دو تا پیشنهادی که دارم: 1. یک Progress Bar برای نمایش میزان پیشرفت هر کاربر در هر دوره. 2.حالت پخش مجدد یک دوره از ادامه جایی که کاربر دفعه قبل تا اونجا دوره رو تماشا کرده. (نمی دونستم این مورد دوم اسم خاصی داره یا اصلا قابل اجرا هست یا نه فقط خواستم نظرمو گفته باشم) در هر صورت به نظر من کدهالیک تا ابد یکی از بهترین مجموعه های آموزش برنامه نویسی ایرانی باقی می مونه برای همتون آرزوی موفقیت می کنم❤️🔥
پوریا باباعلی(استاد دوره)
ممنونم از لطفت حتما مواردی که گفتی رو در مسیر توسعه کدهالیک در نظرش میگیرم مرسی بابت فیدبک بسیار جذابت دوست خوبم ❤️🔥
Sahar Mokarrami
دوره خیلی عالی و کاربردیه، مشتاقانه منتظر قسمتای جدیدش هستم :))
پوریا باباعلی(استاد دوره)
سپاس ❤️ به زودی قسمتهای جدید منتشر میشن! برای اینکه از آپدیتها باخبر بشید، حتماً در کانال تلگرام ما عضو بشید. از بنر بالای سایت هم میتونید جوین کنید!
Abozar Raghibdoust
عالی و کاربردی خسته نباشید پوریا جان
پوریا باباعلی(استاد دوره)
سپاس گزارم ازت ابوذر جان ❤️
حسی
حسین لطفی
فکر میکنم بهترین دوره آموزش فرانتی باشه که میتونید گیر بیارید 🔥
پوریا باباعلی(استاد دوره)
ممنونم ازت حسین جان ❤️
Fatemeh Baharestani
سلام! ممنون از دوره آموزشی عالیتون در مورد مقدمات فرانتاند. تا بخش CSS رو با لذت دنبال کردم و واقعاً برام مفید بوده. متوجه شدم که ادامه دوره هنوز آپلود نشده، میخواستم بدونم آیا برنامهای برای آپدیت و اضافه کردن بقیه ویدیوها دارید؟ خیلی مشتاقم که زودتر ادامهش رو ببینم و یاد بگیرم. با تشکر!
پوریا باباعلی(استاد دوره)
بله قراره در آینده آپدیت بشه دوره و این دوره در حال برگزاریه
MohammadKian Mahmoudi Chenari
یکی از بهترین دوره های آموزش فرانت اند👌 دمت گرم پوریا❤️🔥🙏
پور
پوریا باباعلی
خوبی از خودته عزیزم ادامه دوره رو هم حتما باهام همراه باش 🙏
parsa shah
خیلی عالی بود ممنون از شما من دو فصل رو دیدم و کاملا متوجه شدم مشتاق فصل 3 هستم
پوریا باباعلی(استاد دوره)
ممنونم از توجهت به دوره ، آپدیت دوره به شکل هفتگی انجام میشه ❤️
علی
علی ندائی
دوره در حال تکمیل است؟
پوریا باباعلی(استاد دوره)
بله هر هفته در حال آپدیت شدن هست به زودی فصل جدید رو هم آپلود میکنم !
حسی
حسین حیدری
عالی پوریا
پوریا باباعلی(استاد دوره)
سپاس گزارم حسین جان ❤️
دان
دانشجو دوره
عالی
پوریا باباعلی(استاد دوره)
سپاس گزارم
زین
زینب ویشکایی
با سلام ، مشتاقم که در این دوره شرکت کنم و بعد از اتمام دوره به دوستان معرفی کنم !
پوریا باباعلی(استاد دوره)
سپاس از شما
در حال ضبط
رایگان
برای همیشه
تعداد دانشجویان
۵۹۷
نفر
رایگان
برای همیشه
رایگان
پیشرفته
دوره جامع آموزش Git | سناریو محور
گیت ابزار ضروری برای هر برنامهنویسی است . در این دوره فشرده، تمام آنچه را که برای شروع کار با گیت و گیتهاب نیاز دارید، یاد خواهید گرفت.
۱۰ ویدیو
۲ ساعت
۳۰۰ نفر
رایگان
مقدماتی
دوره جامع فرانت اند | مقدماتی و پروژه محور
صفر تا صد HTML، CSS و JavaScript رو رایگان و پروژه محور یاد بگیر!
۵۹ ویدیو
۱۷ ساعت
۵۹۷ نفر
رایگان
پیشرفته
دوره جامع فرانت اند | پیشرفته و پروژه محور
react و nextjs رو با TypeScript، React Hook Form، React Query، Zustand/Redux و Tailwind تا لِوِل ارشد ببر همهچی کاملاً پروژهمحور!
۵۱ ویدیو
۱۴ ساعت
۷۵۶ نفر
رایگان
پیشرفته
دوره جامع NestJs | از مقدماتی تا پیشرفته
بکاند را حرفهای، ساختارمند و سریع کدنویسی کنید و اولین پروژه واقعی خود را (یک سیستم تاکسی رانی کامل) از صفر تا صد و به صورت رایگان بسازید!
۷۴ ویدیو
۲۵ ساعت
۵۹۴ نفر