دوره آموزشی تخصصی
دوره جامع فرانت اند | مقدماتی و پروژه محور
۱٬۰۲۰ دانشجو
85 ویدیو
تکمیل شده
تاریخ انتشار
19 مرداد 1404
آخرین بروزرسانی
7 فروردین 1405
✨ میخوای مسیر شغلیتو عوض کنی؟ از اینجا شروع کن! ✨
ببین، رک و پوستکنده: اگه از کار فعلیت خستهای و دنبال مهارتی میگردی که هم آیندهدار باشه، هم درآمد خوب داشته باشه و هم خلاقیتتو بترکونه—جای درستی اومدی.
ما یه بوتکمپ فرانتاند راه انداختیم که نه قراره جیبتو خالی کنه، نه با تئوریهای خشک خستهت کنه. این یه مسیر صاف و مستقیمه از همینجایی که هستی تا تبدیل بشی به یه متخصص فرانتاند که همه دنبالش میگردن! 🚀
🎯 ته دوره چی میشی و چی میسازی؟
فکر کن چند وقت دیگه داری سایتهای خفن رو از صفر میسازی. این شعاری نیست—دقیقاً کاریه که با هم انجام میدیم:
HTML: مثل یه معمار، اسکلت سایت رو میچینی؛ میفهمی هر چیزی کجای صفحهست و چرا.
CSS: به سایتت روح و استایل میدی. با فلکسباکس و گرید، رسپانسیو مثل آب خوردن؛ از موبایل تا مانیتور ۴K بینقص.
JavaScript: قلب تپنده! فرمهای هوشمند، انیمیشنهای باحال، دریافت و نمایش داده از سرور، و کلی تعامل که کاربر عاشقش میشه.
✅ چرا این دوره بهترین اتفاق حرفهای توئه؟
پول بیپول! ۱۰۰٪ رایگان—الان و آینده. ما معتقدیم دانش باید آزاد باشه.
از زیر صفر: اگه تنها چیزی که از کدنویسی میدونی اسمشه، اتفاقاً تو بهترین کاندیدایی!
پروژهمحور: از همون روز اول دستبهکد. چند تا پروژه واقعی میسازیم؛ از صفحه شخصی شیک تا یه وباپ کاربردی—برای رزومه و استخدام.
همگام با بازار کار: وقتت با چیزای ازمدافتاده تلف نمیشه. دقیقاً همونایی رو یاد میگیری که شرکتها براش حقوق خوب میدن.
👥 این دوره برای کیه؟
دانشآموز، دانشجو، تغییررشتهای
کارمندایی که دنبال چالش و راه فرارن
هرکسی که میخواد سریع و عملی وارد دنیای فرانتاند بشه
🎬 قدم اولت:
همین الان دکمه پلی رو بزن و شروع کن به ساختن آیندهای که همیشه میخواستی. چند ماه دیگه از خودت تشکر میکنی! 👇
آنچه خواهید آموخت
ساختاربندی اصولی صفحات وب با HTML5
طراحی و استایلدهی مدرن وبسایتها با CSS3
واکنشگرا کردن طرحها برای موبایل و تبلت
افزودن هوشمندی و تعامل به سایت با جاوا اسکریپت
کار با مفاهیم پایهای و مهم برنامهنویسی
ساخت چندین پروژه واقعی و کاربردی از صفر
آمادهسازی پورتفولیو برای ورود به بازار کار
محتوای دوره
3 فصل • 85 قسمت • 1733 دقیقه
قسمت یکممقدمه و آنچه در این دوره خواهیم آموخت !هر چیزی که قراره تو این دوره یاد بگیریم و باهم مرور میکنیم!
رایگان
۱۲ دقیقهقسمت یکممقدمه و آنچه در این دوره خواهیم آموخت !هر چیزی که قراره تو این دوره یاد بگیریم و باهم مرور میکنیم!
رایگان
۱۲ دقیقه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
قسمت سی و دومآموزش پایانی Flexbox در CSS | از پراپرتیهای پیشرفته تا تمرین با Flex Froggyدر این آموزش پایانی Flexbox، تمام پراپرتیهای باقیمانده CSS Flex را بهصورت کاربردی یاد میگیرید و با سایت Flex Froggy تمرین عملی انجام میدهید. مناسب برای مبتدی تا متوسط جهت تسلط کامل بر Flex.
رایگان
۳۰ دقیقهقسمت سی و دومآموزش پایانی Flexbox در CSS | از پراپرتیهای پیشرفته تا تمرین با Flex Froggyدر این آموزش پایانی Flexbox، تمام پراپرتیهای باقیمانده CSS Flex را بهصورت کاربردی یاد میگیرید و با سایت Flex Froggy تمرین عملی انجام میدهید. مناسب برای مبتدی تا متوسط جهت تسلط کامل بر Flex.
رایگان
۳۰ دقیقهloading
قسمت سی و سومراهنمای کامل position: static و relative در CSS | تفاوتها و کاربرد عملیبا نحوه عملکرد position: static و relative در CSS آشنا شوید. تفاوتها، مثالهای کاربردی و زمان استفاده از هرکدام را بهصورت ساده و حرفهای یاد بگیرید.
رایگان
۲۳ دقیقهقسمت سی و سومراهنمای کامل position: static و relative در CSS | تفاوتها و کاربرد عملیبا نحوه عملکرد position: static و relative در CSS آشنا شوید. تفاوتها، مثالهای کاربردی و زمان استفاده از هرکدام را بهصورت ساده و حرفهای یاد بگیرید.
رایگان
۲۳ دقیقهloading
قسمت سی و چهارمآموزش position: absolute در CSS | جایگذاری دقیق عناصر در صفحهposition: absolute در CSS چه کاربردی دارد؟ نحوه قرارگیری نسبت به parent، نکات مهم و مثالهای واقعی برای طراحی دقیق رابط کاربری را در این راهنما بخوانید.
رایگان
۱۷ دقیقهقسمت سی و چهارمآموزش position: absolute در CSS | جایگذاری دقیق عناصر در صفحهposition: absolute در CSS چه کاربردی دارد؟ نحوه قرارگیری نسبت به parent، نکات مهم و مثالهای واقعی برای طراحی دقیق رابط کاربری را در این راهنما بخوانید.
رایگان
۱۷ دقیقهloading
قسمت سی و پنجمتفاوت position: fixed و sticky در CSS | پایان بحث positionبررسی کامل position: fixed و sticky در CSS همراه با تفاوتها، کاربردها و سناریوهای واقعی در طراحی وب مدرن. بهترین روش استفاده را اینجا یاد بگیرید.
رایگان
۱۷ دقیقهقسمت سی و پنجمتفاوت position: fixed و sticky در CSS | پایان بحث positionبررسی کامل position: fixed و sticky در CSS همراه با تفاوتها، کاربردها و سناریوهای واقعی در طراحی وب مدرن. بهترین روش استفاده را اینجا یاد بگیرید.
رایگان
۱۷ دقیقهloading
قسمت سی و ششمآموزش واحدهای CSS (قسمت ۱): تفاوت واحدهای Absolute و Relativeدر اولین قسمت از آموزش Measurement در CSS، تفاوت اساسی واحدهای ثابت (Absolute) مثل px و واحدهای نسبی (Relative) مثل em و rem را با مثال کاربردی یاد بگیرید.
رایگان
۱۰ دقیقهقسمت سی و ششمآموزش واحدهای CSS (قسمت ۱): تفاوت واحدهای Absolute و Relativeدر اولین قسمت از آموزش Measurement در CSS، تفاوت اساسی واحدهای ثابت (Absolute) مثل px و واحدهای نسبی (Relative) مثل em و rem را با مثال کاربردی یاد بگیرید.
رایگان
۱۰ دقیقهloading
قسمت سی و هفتمبررسی تخصصی واحدهای اندازهگیری CSS (قسمت ۲)؛ کاربرد px، em و remکالبدشکافی دقیق واحدهای اندازهگیری در CSS. در این بخش یاد میگیرید چطور با ترکیب em و rem یک چیدمان مقیاسپذیر و حرفهای برای انواع نمایشگرها طراحی کنید.
رایگان
۱۸ دقیقهقسمت سی و هفتمبررسی تخصصی واحدهای اندازهگیری CSS (قسمت ۲)؛ کاربرد px، em و remکالبدشکافی دقیق واحدهای اندازهگیری در CSS. در این بخش یاد میگیرید چطور با ترکیب em و rem یک چیدمان مقیاسپذیر و حرفهای برای انواع نمایشگرها طراحی کنید.
رایگان
۱۸ دقیقهloading
قسمت سی و هشتمبررسی تخصصی واحدهای اندازهگیری CSS (قسمت ۳) | مقایسه کامل lvh، svh، dvh، vh و vwدر قسمت سوم آموزش تخصصی CSS به بررسی دقیق و کاربردی واحدهای lvh، svh، dvh، vh و vw میپردازیم. تفاوتها، کاربردها و بهترین روش استفاده از این واحدها در طراحی ریسپانسیو و موبایل را بهصورت عملی یاد بگیرید.
رایگان
۱۹ دقیقهقسمت سی و هشتمبررسی تخصصی واحدهای اندازهگیری CSS (قسمت ۳) | مقایسه کامل lvh، svh، dvh، vh و vwدر قسمت سوم آموزش تخصصی CSS به بررسی دقیق و کاربردی واحدهای lvh، svh، dvh، vh و vw میپردازیم. تفاوتها، کاربردها و بهترین روش استفاده از این واحدها در طراحی ریسپانسیو و موبایل را بهصورت عملی یاد بگیرید.
رایگان
۱۹ دقیقهloading
قسمت سی و نهمآموزش کامل Overwriting در CSS | تفاوت Overwrite، Override و Overloading به زبان سادهدر این آموزش به بررسی مفهومی Overwriting در CSS میپردازیم و تفاوت آن با Override و Overloading را بهصورت تئوری و کاربردی توضیح میدهیم. اگر میخواهید ساختار اولویتدهی و بازنویسی استایلها را عمیق یاد بگیرید، این مطلب مخصوص شماست.
رایگان
۲۲ دقیقهقسمت سی و نهمآموزش کامل Overwriting در CSS | تفاوت Overwrite، Override و Overloading به زبان سادهدر این آموزش به بررسی مفهومی Overwriting در CSS میپردازیم و تفاوت آن با Override و Overloading را بهصورت تئوری و کاربردی توضیح میدهیم. اگر میخواهید ساختار اولویتدهی و بازنویسی استایلها را عمیق یاد بگیرید، این مطلب مخصوص شماست.
رایگان
۲۲ دقیقهloading
قسمت چهلمآموزش Overwriting در CSS و بررسی کامل اولویتها (Specificity، Cascade و !important)در این آموزش بهصورت عملی یاد میگیرید Overwriting در CSS چگونه کار میکند و چه عواملی مثل Specificity، ترتیب کدها و !important در اولویتبندی استایلها تاثیر دارند. همراه با مثالهای کاربردی و قابل فهم.
رایگان
۱۵ دقیقهقسمت چهلمآموزش Overwriting در CSS و بررسی کامل اولویتها (Specificity، Cascade و !important)در این آموزش بهصورت عملی یاد میگیرید Overwriting در CSS چگونه کار میکند و چه عواملی مثل Specificity، ترتیب کدها و !important در اولویتبندی استایلها تاثیر دارند. همراه با مثالهای کاربردی و قابل فهم.
رایگان
۱۵ دقیقهloading
قسمت چهل و یکمآموزش Overwriting در CSS بررسی یک اشتباه علمی در قسمت های گذشتهدر این قسمت یک اشتباه علمی که در قسمت گذشته راجبش اشتباه نظر دادم رو بررسی میکنم و درستش رو به اطلاعاتون میرسونم ! ترتیب کلاس ها داخل یک المنت هیچ ربطی به اور رایت شدنش نداره و این اشتباه علمی این دوره بود که من سوتی دادم و تو این بخش بررسیش میکنیم که چرا این ایراد علمی اتفاق افتاد !
رایگان
۴ دقیقهقسمت چهل و یکمآموزش Overwriting در CSS بررسی یک اشتباه علمی در قسمت های گذشتهدر این قسمت یک اشتباه علمی که در قسمت گذشته راجبش اشتباه نظر دادم رو بررسی میکنم و درستش رو به اطلاعاتون میرسونم ! ترتیب کلاس ها داخل یک المنت هیچ ربطی به اور رایت شدنش نداره و این اشتباه علمی این دوره بود که من سوتی دادم و تو این بخش بررسیش میکنیم که چرا این ایراد علمی اتفاق افتاد !
رایگان
۴ دقیقهloading
قسمت چهل و دومآموزش کامل @Media در CSS | طراحی ریسپانسیو با Media Queryدر این آموزش با @Media در CSS آشنا میشوید و یاد میگیرید چگونه با Media Query سایتهای ریسپانسیو طراحی کنید. مناسب برای طراحان وب و یادگیری اصول واکنشگرایی در CSS.
رایگان
۴۰ دقیقهقسمت چهل و دومآموزش کامل @Media در CSS | طراحی ریسپانسیو با Media Queryدر این آموزش با @Media در CSS آشنا میشوید و یاد میگیرید چگونه با Media Query سایتهای ریسپانسیو طراحی کنید. مناسب برای طراحان وب و یادگیری اصول واکنشگرایی در CSS.
رایگان
۴۰ دقیقهloading
قسمت چهل و سومپروژه دوره مقدماتی سایت اسنپ - قسمت اول در این قسمت با هم دیگه تمامی نکات جا مانده از css رو یاد میگیریم و شروع میکنیم که یک پروژه رو از صفر و از اول شروع کنیم ! به شما توصیه میکنم به همراه من این مینی پروژه رو برای تثبیت یادگیری خودتون انجام بدید !
رایگان
۳۰ دقیقهقسمت چهل و سومپروژه دوره مقدماتی سایت اسنپ - قسمت اول در این قسمت با هم دیگه تمامی نکات جا مانده از css رو یاد میگیریم و شروع میکنیم که یک پروژه رو از صفر و از اول شروع کنیم ! به شما توصیه میکنم به همراه من این مینی پروژه رو برای تثبیت یادگیری خودتون انجام بدید !
رایگان
۳۰ دقیقهloading
قسمت چهل و چهارمپروژه دوره مقدماتی سایت اسنپ - قسمت دوم در این قسمت ادامه پروژه اسنپ رو با هم دیگ انجام میدیم کمی هدر رو رسپانسیو میکنیم و نکات تکمیلی لایوت سایت اسنپ رو بررسی میکنیم
رایگان
۴۱ دقیقهقسمت چهل و چهارمپروژه دوره مقدماتی سایت اسنپ - قسمت دوم در این قسمت ادامه پروژه اسنپ رو با هم دیگ انجام میدیم کمی هدر رو رسپانسیو میکنیم و نکات تکمیلی لایوت سایت اسنپ رو بررسی میکنیم
رایگان
۴۱ دقیقهloading
قسمت چهل و پنجمپروژه دوره مقدماتی سایت اسنپ - قسمت سوم در این قسمت با همدیگه یاد میگیریم که چطوری فونت های سایت اسنپ رو روی پروژمون اضافه کنیم و بتونیم وزن های مختلفش رو روی css هامون اعمال کنیم
این قسمت رو حتما دریابید !
رایگان
۲۵ دقیقهقسمت چهل و پنجمپروژه دوره مقدماتی سایت اسنپ - قسمت سوم در این قسمت با همدیگه یاد میگیریم که چطوری فونت های سایت اسنپ رو روی پروژمون اضافه کنیم و بتونیم وزن های مختلفش رو روی css هامون اعمال کنیم
این قسمت رو حتما دریابید !
رایگان
۲۵ دقیقهloading
قسمت چهل و ششمپروژه دوره مقدماتی سایت اسنپ - قسمت چهارم در این قسمت با هم Header و Navigation رو تکمیل میکنیم و دراپ داون رو با هم تمرین میکنیم و هدر رو رسپانسیو میکنیم کمی before و after رو کاربردی یاد میگیریم !
رایگان
۴۲ دقیقهقسمت چهل و ششمپروژه دوره مقدماتی سایت اسنپ - قسمت چهارم در این قسمت با هم Header و Navigation رو تکمیل میکنیم و دراپ داون رو با هم تمرین میکنیم و هدر رو رسپانسیو میکنیم کمی before و after رو کاربردی یاد میگیریم !
رایگان
۴۲ دقیقهloading
قسمت چهل و هفتمپروژه دوره مقدماتی سایت اسنپ - قسمت پنجم در این قسمت فوتر سایت رو به طور کامل طراحی کردیم و تمامی موارد رسپانسیو رو در فوتر رعایت کردیم تمرین خیلی خوبی برای flex و پراپرتی های مرتبط اش مثل gap , flex-wrap توی این قسمت با هم انجام میدیم !
رایگان
۳۱ دقیقهقسمت چهل و هفتمپروژه دوره مقدماتی سایت اسنپ - قسمت پنجم در این قسمت فوتر سایت رو به طور کامل طراحی کردیم و تمامی موارد رسپانسیو رو در فوتر رعایت کردیم تمرین خیلی خوبی برای flex و پراپرتی های مرتبط اش مثل gap , flex-wrap توی این قسمت با هم انجام میدیم !
رایگان
۳۱ دقیقهloading
قسمت چهل و هشتمپروژه دوره مقدماتی سایت اسنپ - قسمت ششم در این قسمت سراغ main میریم و اولین سکشن یعنی hero رو پیاده سازی میکنیم و نکات ارزنده ای رو باهم مرور میکنیم مثل قابلیت های flex-grow که خیلی بهمون توی رسپانسیو شدن کمک میکنه
رایگان
۴۵ دقیقهقسمت چهل و هشتمپروژه دوره مقدماتی سایت اسنپ - قسمت ششم در این قسمت سراغ main میریم و اولین سکشن یعنی hero رو پیاده سازی میکنیم و نکات ارزنده ای رو باهم مرور میکنیم مثل قابلیت های flex-grow که خیلی بهمون توی رسپانسیو شدن کمک میکنه
رایگان
۴۵ دقیقهloading
قسمت چهل و نهمپروژه دوره مقدماتی سایت اسنپ - قسمت هفتم در این قسمت سکشن هیرو رو تکمیل میکنیم با هم دیگه یاد میگیریم که چطوری باید به باتن ها و اینپوت ها استایل بدیم که در یک پروژه انترپرایز بتونیم به بهترین شکل استایل ها رو مدیریت کنیم !
رایگان
۴۴ دقیقهقسمت چهل و نهمپروژه دوره مقدماتی سایت اسنپ - قسمت هفتم در این قسمت سکشن هیرو رو تکمیل میکنیم با هم دیگه یاد میگیریم که چطوری باید به باتن ها و اینپوت ها استایل بدیم که در یک پروژه انترپرایز بتونیم به بهترین شکل استایل ها رو مدیریت کنیم !
رایگان
۴۴ دقیقهloading
قسمت پنجاهمپروژه دوره مقدماتی سایت اسنپ - قسمت هشتم در این قسمت با هم دیگه انیمیشن ripple که انیمیشن بسیار معروفی در باتن ها هست رو تمرین میکنیم با مفاهیم translate و transation کار میکنیم و عملی یاد میگیریم که چطوری میتونیم ازشون استفاده کنیم تازه ۴ راه سنتر کردن یک المنت رو هم در این قسمت تکمیل میکنیم !
رایگان
۳۰ دقیقهقسمت پنجاهمپروژه دوره مقدماتی سایت اسنپ - قسمت هشتم در این قسمت با هم دیگه انیمیشن ripple که انیمیشن بسیار معروفی در باتن ها هست رو تمرین میکنیم با مفاهیم translate و transation کار میکنیم و عملی یاد میگیریم که چطوری میتونیم ازشون استفاده کنیم تازه ۴ راه سنتر کردن یک المنت رو هم در این قسمت تکمیل میکنیم !
رایگان
۳۰ دقیقهloading
قسمت پنجاه و یکمپروژه دوره مقدماتی سایت اسنپ - قسمت نهم در این قسمت با هم سکشن لینک اپلیکیشن های اسنپ رو طراحی میکنیم و با flex و justify-content به شکل عملی کار میکنیم !
رایگان
۱۹ دقیقهقسمت پنجاه و یکمپروژه دوره مقدماتی سایت اسنپ - قسمت نهم در این قسمت با هم سکشن لینک اپلیکیشن های اسنپ رو طراحی میکنیم و با flex و justify-content به شکل عملی کار میکنیم !
رایگان
۱۹ دقیقهloading
قسمت پنجاه و دومپروژه دوره مقدماتی سایت اسنپ - قسمت دهم در این قسمت قراره با هم سکشن سرویس های اسنپ رو بسازیم و با کلی از موارد flex و رسپانسیو درگیر بشیم کمی حتی از اسنپ بهتر اینجا عمل میکنیم و چیزای بیشتری یاد میگیریم
رایگان
۲۷ دقیقهقسمت پنجاه و دومپروژه دوره مقدماتی سایت اسنپ - قسمت دهم در این قسمت قراره با هم سکشن سرویس های اسنپ رو بسازیم و با کلی از موارد flex و رسپانسیو درگیر بشیم کمی حتی از اسنپ بهتر اینجا عمل میکنیم و چیزای بیشتری یاد میگیریم
رایگان
۲۷ دقیقهloading
قسمت پنجاه و سومپروژه دوره مقدماتی سایت اسنپ - قسمت یازدهم در این قسمت سکشن کروسل رو با هم دیگه میسازیم البته که نیازمند جاوااسکریپته و این قسمت رو خیلی ساده ازش رد میشیم !
رایگان
۸ دقیقهقسمت پنجاه و سومپروژه دوره مقدماتی سایت اسنپ - قسمت یازدهم در این قسمت سکشن کروسل رو با هم دیگه میسازیم البته که نیازمند جاوااسکریپته و این قسمت رو خیلی ساده ازش رد میشیم !
رایگان
۸ دقیقهloading
قسمت پنجاه و چهارمپروژه دوره مقدماتی سایت اسنپ - قسمت دوازدهمدر این قسمت با هم سکشن خصوصیات اسنپ در لندینگش رو طراحی میکنیم همه موارد رو با flex پیش میبریم و رسپانسیوش میکنیم
رایگان
۲۴ دقیقهقسمت پنجاه و چهارمپروژه دوره مقدماتی سایت اسنپ - قسمت دوازدهمدر این قسمت با هم سکشن خصوصیات اسنپ در لندینگش رو طراحی میکنیم همه موارد رو با flex پیش میبریم و رسپانسیوش میکنیم
رایگان
۲۴ دقیقهloading
قسمت پنجاه و پنجمپروژه دوره مقدماتی سایت اسنپ - قسمت سیزدهم در این قسمت با هم انتهای سکشن معرفی اسنپ رو تکمیل میکنیم این بخش در دو قسمت ارائه میشه این قسمت و قسمت بعد رو برای تکمیل این قسمت ببینید حتما ! با هم دیگه فلکس رو تمرین میکنیم و موبایل فرست این قسمت رو جلو میبریم
رایگان
۲۰ دقیقهقسمت پنجاه و پنجمپروژه دوره مقدماتی سایت اسنپ - قسمت سیزدهم در این قسمت با هم انتهای سکشن معرفی اسنپ رو تکمیل میکنیم این بخش در دو قسمت ارائه میشه این قسمت و قسمت بعد رو برای تکمیل این قسمت ببینید حتما ! با هم دیگه فلکس رو تمرین میکنیم و موبایل فرست این قسمت رو جلو میبریم
رایگان
۲۰ دقیقهloading
قسمت پنجاه و ششمپروژه دوره مقدماتی سایت اسنپ - قسمت چهاردهم در این قسمت ادامه سکشن hint رو باهم جلو میبریم و تکمیلش میکنیم با جادوی مارجین منفی کاری رو انجام میدیم که توی لندینگ اصلی اسنپ هم انجام نشده و مرتب تر و الاین تر از لندینگ اسنپ دیزاین این قسمت رو به پایان میرسونیم !
رایگان
۲۴ دقیقهقسمت پنجاه و ششمپروژه دوره مقدماتی سایت اسنپ - قسمت چهاردهم در این قسمت ادامه سکشن hint رو باهم جلو میبریم و تکمیلش میکنیم با جادوی مارجین منفی کاری رو انجام میدیم که توی لندینگ اصلی اسنپ هم انجام نشده و مرتب تر و الاین تر از لندینگ اسنپ دیزاین این قسمت رو به پایان میرسونیم !
رایگان
۲۴ دقیقهloading
قسمت پنجاه و هفتمپروژه دوره مقدماتی سایت اسنپ - قسمت پانزدهم و پایانیدر این قسمت لندینگ اسنپ رو تکمیل میکنیم و سکشن پایانی این لیندینگ رو هم رسپانسیو میکنیم
بعد از اتمام این قسمت شما باید تمامی مباحث مربوط به فلکس و رسپانسیو رو کاملا یاد گرفته باشید
رایگان
۴۰ دقیقهقسمت پنجاه و هفتمپروژه دوره مقدماتی سایت اسنپ - قسمت پانزدهم و پایانیدر این قسمت لندینگ اسنپ رو تکمیل میکنیم و سکشن پایانی این لیندینگ رو هم رسپانسیو میکنیم
بعد از اتمام این قسمت شما باید تمامی مباحث مربوط به فلکس و رسپانسیو رو کاملا یاد گرفته باشید
رایگان
۴۰ دقیقهloading
سوالات متداول
نظرات و پرسشها
نظرات (23)
ارش
ارشیا نریمانی
سلام خسته نباشیید ببخشید داخل فصل دوم قسمت 12.. فرق باتن و اینپوت تایپ باتن چه فرقی هست؟
پوریا باباعلی(استاد دوره)
<button>: تگ جداست، میتونی داخلش متن، آیکن، حتی HTML بذاری → انعطافپذیرتر <input type="button">: فقط یه دکمه ساده با یه مقدار (value) برای متن → محدودتر
مری
مریم حسینی
سلام خسته نباشید.عالی هستید آموزش js ندارید؟؟
پوریا باباعلی(استاد دوره)
به زودی انشاله شروع میشه دورمون
مسع
مسعود برزگری بافقی
سلام و خسته نباشید قسمت 48 وقتی قسمت hero رو دارین میسازین به محض اضافه کردن متن تگ h1 و p تقسیمات به هم میریزن من سرچ کردم دیدم نوشتن flex-base باید صفر باشه تا درست باشه ولی شما از این استفاده نکردین و تقسیم بندیتون بهم نخورده میشه بگین چرا من چند بار این قسمت رو مشاهده کردم و چیزی در مورد جواب این سوال ندیدم
پوریا باباعلی(استاد دوره)
حتما یه جایی از استایل هارو اشتباه کردید توی گروه بله که زدیم پروژتون رو ارسال کنید تا بررسی کنم لینک از بالای صفحه برای جوین شدن هستش
عطا
عطا صفوی
عرض سلام، دمتون گرم عالیه
پوریا باباعلی(استاد دوره)
سلام ممنون از توجهتون ♥️
مسع
مسعود فتاحی
خداقوت. آموزش JS چه زمانی شروع میشه؟
پوریا باباعلی(استاد دوره)
به زودی پس از پایان این دوره
m s
m s
سلام مرسی پوریا جان،تو این روزها فقط سایت و اموزشای شماست که مارو امیدوار نگه میداره پر قدرت ادامه بده منتظر دوره نکست جی استم مرد مرسی که هستی گاد بلسس یو
پوریا باباعلی(استاد دوره)
قربونت انگیزه منم تو این روزا شماهایید که قراره آینده ایران رو بسازید ♥️
Ali
Alireza Mahboub
سلام و خسته نباشید من گشتم نتونستم اموزش js رو پیدا کنم بین لیست ایا دوره هنوز تکمیل نشده؟
پوریا باباعلی(استاد دوره)
سلام به زودی برگزار خواهد شد
زهر
زهرا ارشاد
باسلام و وقت بخیر این دوره تا این قسمتی که اموزش داده شده پروژه هم داشته؟ و اینکه چه زمان ضبط دوره تموم میشه؟ با تشکر🌹
پوریا باباعلی(استاد دوره)
پروژه که حتما داره همونطور که مینی پروژه های متنوعی تا الان داخلش هستن و انجام شدن راجب اتمام دوره فعلا نظری ندارم حال روحی هیشکی خوب نیست من جمله خودم انشاله تو یه زمان بهتر سعی میکنم اپدیت کنم دوره رو مجدد :)
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 هستم
پوریا باباعلی(استاد دوره)
ممنونم از توجهت به دوره ، آپدیت دوره به شکل هفتگی انجام میشه ❤️
علی
علی ندائی
دوره در حال تکمیل است؟
پوریا باباعلی(استاد دوره)
بله هر هفته در حال آپدیت شدن هست به زودی فصل جدید رو هم آپلود میکنم !
حسی
حسین حیدری
عالی پوریا
پوریا باباعلی(استاد دوره)
سپاس گزارم حسین جان ❤️
ars
arshia admin
عالی
پوریا باباعلی(استاد دوره)
سپاس گزارم
زین
زینب ویشکایی
با سلام ، مشتاقم که در این دوره شرکت کنم و بعد از اتمام دوره به دوستان معرفی کنم !
پوریا باباعلی(استاد دوره)
سپاس از شما
رایگان
تعداد دانشجویان
۱٬۰۲۰
نفر
رایگان
رایگان
پیشرفته
دوره جامع آموزش Git | سناریو محور
گیت ابزار ضروری برای هر برنامهنویسی است . در این دوره فشرده، تمام آنچه را که برای شروع کار با گیت و گیتهاب نیاز دارید، یاد خواهید گرفت.
۱۰ ویدیو
۲ ساعت
۶۴۱ نفر
رایگان
پیشرفته
دوره جامع فرانت اند | پیشرفته و پروژه محور
react رو با TypeScript، React Hook Form، React Query، Zustand و Tailwind تا لِوِل ارشد ببر همهچی کاملاً پروژهمحور!
۵۴ ویدیو
۱۵ ساعت
۱۲۰۳ نفر
رایگان
پیشرفته
دوره جامع NestJs | از مقدماتی تا پیشرفته
بکاند را حرفهای، ساختارمند و سریع کدنویسی کنید و اولین پروژه واقعی خود را (یک سیستم تاکسی رانی کامل) از صفر تا صد و به صورت رایگان بسازید!
۷۴ ویدیو
۲۵ ساعت
۱۰۳۵ نفر
رایگان
مقدماتی
دوره جامع فرانت اند | مقدماتی و پروژه محور
صفر تا صد HTML، CSS رو رایگان و پروژه محور یاد بگیر!
۸۵ ویدیو
۲۸ ساعت
۱۰۲۰ نفر