دوره جامع فرانت اند  | مقدماتی و پروژه محور

دوره آموزشی تخصصی

دوره جامع فرانت اند | مقدماتی و پروژه محور

۱٬۰۲۰ دانشجو
85 ویدیو
تکمیل شده

مدت دوره

1733 دقیقه

تعداد ویدیوها

85 ویدیو

دانشجویان

1020 نفر

سطح

مقدماتی

تاریخ انتشار

19 مرداد 1404

آخرین بروزرسانی

7 فروردین 1405

✨ می‌خوای مسیر شغلی‌تو عوض کنی؟ از اینجا شروع کن! ✨

ببین، رک و پوست‌کنده: اگه از کار فعلیت خسته‌ای و دنبال مهارتی می‌گردی که هم آینده‌دار باشه، هم درآمد خوب داشته باشه و هم خلاقیتتو بترکونه—جای درستی اومدی.

ما یه بوت‌کمپ فرانت‌اند راه انداختیم که نه قراره جیبتو خالی کنه، نه با تئوری‌های خشک خسته‌ت کنه. این یه مسیر صاف و مستقیمه از همین‌جایی که هستی تا تبدیل بشی به یه متخصص فرانت‌اند که همه دنبالش می‌گردن! 🚀

🎯 ته دوره چی می‌شی و چی می‌سازی؟

فکر کن چند وقت دیگه داری سایت‌های خفن رو از صفر می‌سازی. این شعاری نیست—دقیقاً کاریه که با هم انجام می‌دیم:

HTML: مثل یه معمار، اسکلت سایت رو می‌چینی؛ می‌فهمی هر چیزی کجای صفحه‌ست و چرا.

CSS: به سایتت روح و استایل می‌دی. با فلکس‌باکس و گرید، رسپانسیو مثل آب خوردن؛ از موبایل تا مانیتور ۴K بی‌نقص.

JavaScript: قلب تپنده! فرم‌های هوشمند، انیمیشن‌های باحال، دریافت و نمایش داده از سرور، و کلی تعامل که کاربر عاشقش می‌شه.

✅ چرا این دوره بهترین اتفاق حرفه‌ای توئه؟

پول بی‌پول! ۱۰۰٪ رایگان—الان و آینده. ما معتقدیم دانش باید آزاد باشه.

از زیر صفر: اگه تنها چیزی که از کدنویسی می‌دونی اسمشه، اتفاقاً تو بهترین کاندیدایی!

پروژه‌محور: از همون روز اول دست‌به‌کد. چند تا پروژه واقعی می‌سازیم؛ از صفحه شخصی شیک تا یه وب‌اپ کاربردی—برای رزومه و استخدام.

همگام با بازار کار: وقتت با چیزای ازمدافتاده تلف نمی‌شه. دقیقاً همونایی رو یاد می‌گیری که شرکت‌ها براش حقوق خوب می‌دن.

👥 این دوره برای کیه؟

دانش‌آموز، دانشجو، تغییررشته‌ای

کارمندایی که دنبال چالش و راه فرارن

هرکسی که می‌خواد سریع و عملی وارد دنیای فرانت‌اند بشه

🎬 قدم اولت:

همین الان دکمه پلی رو بزن و شروع کن به ساختن آینده‌ای که همیشه می‌خواستی. چند ماه دیگه از خودت تشکر می‌کنی! 👇

آنچه خواهید آموخت

ساختاربندی اصولی صفحات وب با HTML5
طراحی و استایل‌دهی مدرن وب‌سایت‌ها با CSS3
واکنش‌گرا کردن طرح‌ها برای موبایل و تبلت
افزودن هوشمندی و تعامل به سایت با جاوا اسکریپت
کار با مفاهیم پایه‌ای و مهم برنامه‌نویسی
ساخت چندین پروژه واقعی و کاربردی از صفر
آماده‌سازی پورتفولیو برای ورود به بازار کار

محتوای دوره

3 فصل • 85 قسمت • 1733 دقیقه

قسمت یکممقدمه و آنچه در این دوره خواهیم آموخت !هر چیزی که قراره تو این دوره یاد بگیریم و باهم مرور میکنیم!
رایگان
۱۲ دقیقه
قسمت دومپیش نیاز های یک برنامه نویس خوبیک برنامه نویس چه ویژگی هایی باید داشته باشه ؟
رایگان
۱۴ دقیقه
قسمت سومبرنامه نویس و برنامه نویسی به چه معناست؟یاد میگیریم که دقیقا چرا به یه نفر میگن برنامه نویس
رایگان
۱۲ دقیقه
قسمت چهارماینترنت چیه و چه طوری بوجود اومده ؟یاد میگیریم بیسیک ترین مفاهیم اینترنت به چه شکلی ساخته شدن و چیا هستند؟
رایگان
۲۰ دقیقه
قسمت پنجماینترنت به چه شکل کار میکنه و ساختارش چه شکلیه؟تو این قسمت سعی میکنیم روی بحث اینترنت عمیق بشیم و کلی چیز یاد بگیریم
رایگان
۲۶ دقیقه
قسمت ششموب چیه اصلا و چطوری با اینترنت کار میکنه؟یاد میگیریم که وب رو بهتر بشناسیم
رایگان
۱۳ دقیقه
قسمت هفتمیک کامپیوتر از چه اجزایی ساخته شده و هر کدوم وظیفشون چیه؟یاد میگیریم که بهتر کامپیوتر رو بشناسیم و هر جز رو دقیق بررسی کنیم
رایگان
۱۹ دقیقه
قسمت هشتمکد ادیتور یا ide چیه و چه ابزاری برای این دوره نصب میکنیم؟در پایان این بخش vscode رو نصب میکنیم و در بخش بعدی کانفیگش میکنیم
رایگان
۸ دقیقه
قسمت نهمکانفیگ و پیکر بندی vscode به بهترین شکل ممکنیاد میگیریم که یک vscode رو بعد از نصب چطور کانفیگ کنیم !
رایگان
۱۳ دقیقه
قسمت دهمنصب vscode در ویندوز با استاد کیومرث رحیمی !کیومرث جان این بخش بهمون یاد میده که vscode رو چطوری بتونیم روی ویندوز داشته باشیم !
رایگان
۷ دقیقه

قسمت یکمHtml چیه ؟یاد میگیریم HTML دقیقا چیه و تاریخچه اش چی بوده !
رایگان
۱۳ دقیقه
قسمت دومساختار و سینتکس Html به چه شکله ؟روی ساختار و سینتکس ساده و ضروری HTML متمرکز میشیم
رایگان
۱۸ دقیقه
قسمت سومHtml در کد و کمی ساختار لوکال هاست و پورت ها راجب لوکال هاست و پورت ها صحبت میکنیم و یکمی Html مینویسیم !
رایگان
۲۵ دقیقه
قسمت چهارمآموزش تگ های heading و paragraph در HTMLبا هم تگ <h1> ... <h6> و تگ <p> رو در ابتدا یاد میگیریم
رایگان
۲۶ دقیقه
قسمت پنجمبررسی تگ های a , iframe , img با هم راجب به تگ های لینک و آيفریم و ایمیج صحبت میکنیم
رایگان
۲۷ دقیقه
قسمت ششمبررسی تگ های Formating مثل em و strong و i و کلی چیز دیگه !
رایگان
۱۲ دقیقه
قسمت هفتمبررسی تگ های quatation و citation مثل blockquote , q , abbr , cite , bdo , address
رایگان
۱۲ دقیقه
قسمت هشتملیست ها و inline و block بودن یک المنت در HTMLاول انواع لیست ها رو بررسی میکنیم و بعد راجب به موضوع اینلاین یا بلاک بودن یه المنت صحبت میکنیم !
رایگان
۱۶ دقیقه
قسمت نهمجدول یا Table در HTMLآموزش تگ table که به کمکش میشه جدول ساخت !
رایگان
۱۶ دقیقه
قسمت دهمSemantic Element ها و بررسی انواعشون با هم یاد میگیریم تفاوت Semantic و None Semantic المنت ها در چیه ( خیلی تو مصاحبه میپرسنش)
رایگان
۱۷ دقیقه
قسمت یازدهمبررسی فرم ها و اینپوت ها در HTML - قسمت اولتو پارت اول این آموزش میریم فیلد های مختلف فرم رو بررسی میکنیم
رایگان
۲۲ دقیقه
قسمت دوازدهم بررسی فرم ها و اینپوت ها در HTML - قسمت دومتو این قسمت راجب id و for در label صحبت میکنیم یکم بازم بیشتر فرم ها رو یاد میگیریم !
رایگان
۲۱ دقیقه
قسمت سیزدهماتربیوت های معروف در عالم اینپوت های فرم در Htmlبا هم اتربیوت های معروفی که باید توی اینپوت ها بلد باشیم یاد میگیریم
رایگان
۳۰ دقیقه
قسمت چهاردهمتگ های مولتی مدیا در Html مثل تگ <audio> و <video> تگ <audio> و <video> رو با هم خوب یاد میگیریم !
رایگان
۱۱ دقیقه
قسمت پانزدهمکانفیگ برای وب فارسی و آشنایی با مفهوم Layoutبا هم دیگه RTL و LTR رو یاد میگیریم و با مفهوم Layout بیشتر آشنا میشیم !
رایگان
۲۰ دقیقه
قسمت شانزدهمدیولوژی چیه‌ ‌! ( آموزش چینش درست div ها در یک Layout ) - پارت ۱ با هم یه تکنیک جالب برای چینش درست div ها در کنار یکدیگرو یاد میگیریم !
رایگان
۳۰ دقیقه
قسمت هفدهمدیولوژی چیه‌ ‌! ( آموزش چینش درست div ها در یک Layout ) - پارت ۲با هم یه تکنیک جالب برای چینش درست div ها در کنار یکدیگرو یاد میگیریم !
رایگان
۳۳ دقیقه
قسمت هجدهمدسترسی پذیری یا Accessibility در اپلیکیشن ها وببا هم یاد میگیریم اپلیکشن رو برای همه دسترسی پذیر و قابل استفاده کنیم
رایگان
۳۲ دقیقه

قسمت یکمآموزش سینتکس Css و انواع مدل های استفادش در Htmlسینتکس css و انواع مدل های استفاده اش در Html رو یاد میگیریم !
رایگان
۱۸ دقیقه
قسمت دومآموزش نحوه Path دادن به یک فایل و انواع آنیاد میگیریم چطور یک فایل رو در Html ایمپورت کنیم
رایگان
۱۵ دقیقه
قسمت سومانواع Selector ها در Css - قسمت اولراجع به Tag سلکتور و Id و Class سلکتور باهم صحبت میکنیم ! (قسمت خیلی مهمیه)
رایگان
۱۷ دقیقه
قسمت چهارمانواع Selector ها در Css - قسمت دومراجب انواع دیگ سلکتور ها مثل combinator selector و descendant selector ها صحبت میکنیم
رایگان
۲۴ دقیقه
قسمت پنجمآموزش pseudo classes ها در css با هم دیگه راجب pseudo کلاس ها در css و اهمیتشون صحبت میکنیم !
رایگان
۲۵ دقیقه
قسمت ششمآموزش Color ها در Cssراجب به rgba , hlsa , hls , rgb و هگز کد رنگ ها صحبت میکنیم و طریقه استفاده از رنگ ها در css رو یاد میگیریم !
رایگان
۱۶ دقیقه
قسمت هفتمآموزش کامل background در CSS | نحوه استفاده از پس‌زمینه در طراحی وبدر این آموزش یاد می‌گیرید چگونه با ویژگی background در CSS پس‌زمینه‌ صفحات وب را تنظیم کنید؛ از رنگ و تصویر پس‌زمینه گرفته تا تکرار، اندازه و موقعیت. مناسب برای طراحان مبتدی تا حرفه‌ای.
رایگان
۲۸ دقیقه
قسمت هشتمآموزش کامل border و outline در CSS | تفاوت‌ها و نحوه استفادهدر این آموزش یاد می‌گیرید چطور با ویژگی‌های border و outline در CSS قاب‌ها و خطوط دور عناصر را طراحی کنید، تفاوت آن‌ها را درک کنید و جلوه‌های زیبایی به المان‌های وب بدهید.
رایگان
۱۸ دقیقه
قسمت نهمآموزش margin و padding در CSS | تفاوت فاصله داخلی و خارجی عناصردر این آموزش یاد می‌گیرید margin و padding در CSS چه تفاوتی دارند و چطور می‌توان با تنظیم فاصله داخلی و خارجی، چیدمان و طراحی صفحات وب را حرفه‌ای‌تر کرد.
رایگان
۲۱ دقیقه
قسمت دهمآموزش تایپوگرافی وب – قسمت اول | اصول فونت و خوانایی متندر این قسمت اول از سری آموزش‌های تایپوگرافی وب، با اصول انتخاب فونت، اندازه، فاصله خطوط و بهبود خوانایی متن در طراحی صفحات وب آشنا شوید. مناسب برای طراحان وب مبتدی و حرفه‌ای.
رایگان
۱۶ دقیقه
قسمت یازدهمآموزش تایپوگرافی وب – قسمت دوم | سبک‌ها و تنظیمات پیشرفته فونتدر این قسمت دوم از سری آموزش‌های تایپوگرافی وب، با سبک‌های فونت، وزن، ارتفاع خطوط و تکنیک‌های پیشرفته برای زیباسازی متن در صفحات وب آشنا شوید و طراحی حرفه‌ای‌تر داشته باشید.
رایگان
۱۴ دقیقه
قسمت دوازدهمآموزش افزودن فونت فارسی به وب | صابر راستی کردار و وزیرمتندر این آموزش یاد می‌گیرید چطور فونت‌های فارسی محبوب مانند فونت وزیر را به وب‌سایت خود اضافه کنید و طراحی متن‌ها را زیبا و خوانا کنید. روش‌های استفاده در CSS و HTML توضیح داده شده‌اند.
رایگان
۲۱ دقیقه
قسمت سیزدهماهمیت افزودن Fallback در FontFamily و تاثیر آن بر عملکرد و تجربه کاربریافزودن فونت‌های جایگزین یا Fallback به FontFamily یکی از بهترین روش‌ها برای جلوگیری از بروز مشکلات نمایشی و بهبود تجربه کاربری در وب است. با استفاده از یک ساختار استاندارد و انتخاب هوشمندانه‌ی فونت‌های جایگزین، سرعت بارگذاری، سازگاری مرورگرها و پایداری تایپوگرافی سایت افزایش می‌یابد. در این مطلب به مزایا، تاثیرات و اصول انتخاب Fallbackهای مناسب می‌پردازیم.
رایگان
۴ دقیقه
قسمت چهاردهمروش‌های افزودن آیکون به CSS با FontAwesome و Material UI Iconsاضافه کردن آیکون‌ها به استایل‌ها با استفاده از FontAwesome و Material UI Icons یکی از رایج‌ترین روش‌ها برای بهبود رابط کاربری در وب است. با استفاده از این کتابخانه‌ها می‌توانید آیکون‌ها را به صورت کلاس، pseudo-element یا inline استفاده کرده و کنترل کامل روی رنگ، اندازه و انیمیشن داشته باشید. در این مطلب بهترین روش‌ها و نکات استفاده از آیکون‌ها در CSS را بررسی می‌کنیم.
رایگان
۱۴ دقیقه
قسمت پانزدهماستفاده از CSS در لیست‌ها و انواع List Style در طراحی وباستفاده صحیح از ویژگی‌های CSS در لیست‌ها، مانند list-style، نقش مهمی در بهبود ظاهر و ساختار محتوا دارد. با تنظیم نوع علامت، موقعیت، تصویر سفارشی و استایل‌دهی پیشرفته می‌توان لیست‌های زیباتر و کاربرپسندتر ایجاد کرد. در این مطلب با انواع list-style و کاربردهای آن در طراحی وب آشنا می‌شوید.
رایگان
۶ دقیقه
قسمت شانزدهماستایل‌دهی به جدول‌های HTML با CSS و بهترین روش‌های طراحیاستفاده از CSS برای استایل‌دهی به جدول‌های HTML باعث افزایش خوانایی، نظم و جذابیت ظاهری داده‌ها می‌شود. با به‌کارگیری ویژگی‌هایی مانند border، padding، zebra-striping، hover effects و تنظیمات متن می‌توان جدول‌هایی حرفه‌ای و کاربرپسند ایجاد کرد. در این مطلب بهترین تکنیک‌ها و نکات طراحی جدول با CSS را بررسی می‌کنیم.
رایگان
۱۸ دقیقه
قسمت هفدهماصول BEM در CSS و نقش آن در ساختاردهی بهتر کدهامتدولوژی BEM یکی از محبوب‌ترین الگوهای نام‌گذاری در CSS است که به توسعه‌دهندگان کمک می‌کند کدی ساختارمند، مقیاس‌پذیر و قابل‌درک ایجاد کنند. با استفاده از Block، Element و Modifier می‌توان بخش‌های مختلف رابط کاربری را به شکلی واضح سازمان‌دهی کرد و از تداخل استایل‌ها جلوگیری نمود. در این مطلب اصول BEM، مزایا و نحوه پیاده‌سازی آن را بررسی می‌کنیم.
رایگان
۱۹ دقیقه
قسمت هجدهمآموزش ویژگی Overflow در CSS به همراه مثال‌های عملیویژگی overflow در CSS برای کنترل نمایش محتوایی استفاده می‌شود که از محدوده عنصر خارج می‌شود. با تنظیم مقادیر مختلف مانند visible، hidden، scroll و auto می‌توان رفتار اسکرول، پنهان‌سازی و مدیریت محتوای اضافی را تعیین کرد. در این آموزش با مثال‌های عملی نحوه استفاده از overflow و کاربردهای آن در طراحی واکنش‌گرا را بررسی می‌کنیم.
رایگان
۲۱ دقیقه
قسمت نوزدهمآموزش ویژگی‌های max-width، max-height، min-width و min-height در CSSویژگی‌های max-width، max-height، min-width و min-height در CSS ابزارهایی قدرتمند برای کنترل ابعاد عناصر هستند. با استفاده صحیح از این مقادیر می‌توان طراحی واکنش‌گرا، جلوگیری از کشیدگی یا کوچک‌شدن بیش از حد عناصر، و کنترل بهتر ظاهر صفحات را تضمین کرد. در این آموزش کاربرد، تفاوت‌ها و مثال‌های عملی از هر کدام ارائه شده است تا بتوانید در پروژه‌های واقعی از آن‌ها بهترین استفاده را ببرید.
رایگان
۶ دقیقه
قسمت بیستمآموزش backward compatible و forward compatible در برنامه نویسی درباره اینکه backward compatible و forward compatible به چه معناست صحبت میکنیم
رایگان
۱۰ دقیقه
قسمت بیست و یکمbackward compatible و forward compatible در واقعیت با هم در کد بررسی میکنیم که backward compatible و forward compatible چیه؟
رایگان
۱۰ دقیقه
قسمت بیست و دومdisplay ها - قسمت 1 ( inline و block )در این قسمت درباره دو دیسپلی مهم و پایه ای css یعنی inline و block و نکاتش صحبت میکنیم !
رایگان
۱۵ دقیقه
قسمت بیست و سومdisplay ها - قسمت 2 ( inline-block )در این قسمت راجب inline-block صحبت میکنیم و تفاوتش با inline تو چیه و چرا ازش استفاده میکنیم
رایگان
۱۸ دقیقه
قسمت بیست و چهارمتراز کردن المان‌ها با inline-block و vertical-align + مثالمی‌خوای المان‌ها رو کنار هم بچینی؟ اینجا یاد می‌گیری چطور با display: inline-block و vertical-align توی CSS ترازبندی رو درست انجام بدی. خیلی ساده و با مثال!
رایگان
۳۰ دقیقه
قسمت بیست و پنجمراهنمای جامع کار با ویژگی Float و رفع مشکلات چیدمان با Clearfix در CSSدر این ویدیو به بررسی کامل ویژگی float در CSS و چالش‌های آن در چیدمان عناصر می‌پردازیم. همچنین نحوه استفاده از تکنیک clearfix برای رفع مشکل فروپاشی ارتفاع والد و ایجاد ساختارهای استاندارد و ریسپانسیو را به زبان ساده آموزش می‌دهیم.
رایگان
۲۱ دقیقه
قسمت بیست و ششمdisplay ها - قسمت3 (Table)در این قسمت درباره یک دیسپلی بسیار قدیمی به اسم table صحبت میکنیم ارزش این قسمت به چند نکته بسیار حیاتی هست که هر فرانت دولوپری باید اونارو یاد بگیره پس این قسمت از دست ندید !
رایگان
۲۸ دقیقه
قسمت بیست و هفتمdisplay ها - قسمت4 (Flex) - مبانیدر قسمت ۴ آموزش Display، صفر تا صد Flexbox را یاد بگیرید. آموزش ساخت چیدمان‌های ریسپانسیو و تراز کردن حرفه‌ای عناصر در CSS با فلکس‌باکس + مثال کاربردی.
رایگان
۱۲ دقیقه
قسمت بیست و هشتمچرا Flexbox؟ درک مفهوم طراحی ریسپانسیو (Responsive) در CSSطراحی ریسپانسیو (Responsive) چیست و چرا در وب مدرن حیاتی است؟ در این قسمت با مزایای Flexbox نسبت به روش‌های قدیمی آشنا شوید و اصول اولیه واکنش‌گرا کردن سایت را یاد بگیرید.
رایگان
۱۸ دقیقه
قسمت بیست و نهمآموزش جامع justify-content و align-items در Flexbox؛ چیدمان حرفه‌ای المان‌ها با مثال کاربردیدر این ویدیو به آموزش دو پراپرتی کلیدی و مهم «justify-content» و «align-items» در سی‌اس‌اس (CSS) می‌پردازیم. با تفاوت محور افقی و عمودی در فلکس‌باکس آشنا شده و با زدن مثال‌های عملی، یاد می‌گیریم چگونه المان‌ها را دقیقاً جایی که می‌خواهیم قرار دهیم. این آموزش برای تمام مبتدیان و طراحان وب بسیار کاربردی است. برای یادگیری حرفه‌ای طراحی وب، همین حالا تماشا کنید!
رایگان
۲۷ دقیقه
قسمت سی اُمآموزش Flex-wrap و Align-content در فلکس باکسیاد می‌گیرید چگونه با Flex-wrap آیتم‌ها را در چند خط مدیریت کنید و با ویژگی Align-content، فاصله‌ی بین خطوط در فلکس‌باکس را مثل یک حرفه‌ای تنظیم کنید. همراه با مثال‌های عملی!
رایگان
۲۰ دقیقه
قسمت سی و یکمآموزش کامل flex-grow و flex-shrink در CSSدر این آموزش با مفاهیم flex-grow و flex-shrink در CSS آشنا می‌شوید، نحوه کنترل اندازه آیتم‌ها در Flexbox را یاد می‌گیرید و با مثال‌های کاربردی، چیدمان حرفه‌ای می‌سازید.
رایگان
۱۳ دقیقه
قسمت سی و دومآموزش پایانی Flexbox در CSS | از پراپرتی‌های پیشرفته تا تمرین با Flex Froggyدر این آموزش پایانی Flexbox، تمام پراپرتی‌های باقی‌مانده CSS Flex را به‌صورت کاربردی یاد می‌گیرید و با سایت Flex Froggy تمرین عملی انجام می‌دهید. مناسب برای مبتدی تا متوسط جهت تسلط کامل بر Flex.
رایگان
۳۰ دقیقه
قسمت سی و سومراهنمای کامل position: static و relative در CSS | تفاوت‌ها و کاربرد عملیبا نحوه عملکرد position: static و relative در CSS آشنا شوید. تفاوت‌ها، مثال‌های کاربردی و زمان استفاده از هرکدام را به‌صورت ساده و حرفه‌ای یاد بگیرید.
رایگان
۲۳ دقیقه
قسمت سی و چهارمآموزش position: absolute در CSS | جای‌گذاری دقیق عناصر در صفحهposition: absolute در CSS چه کاربردی دارد؟ نحوه قرارگیری نسبت به parent، نکات مهم و مثال‌های واقعی برای طراحی دقیق رابط کاربری را در این راهنما بخوانید.
رایگان
۱۷ دقیقه
قسمت سی و پنجمتفاوت position: fixed و sticky در CSS | پایان بحث positionبررسی کامل position: fixed و sticky در CSS همراه با تفاوت‌ها، کاربردها و سناریوهای واقعی در طراحی وب مدرن. بهترین روش استفاده را اینجا یاد بگیرید.
رایگان
۱۷ دقیقه
قسمت سی و ششمآموزش واحدهای CSS (قسمت ۱): تفاوت واحدهای Absolute و Relativeدر اولین قسمت از آموزش Measurement در CSS، تفاوت اساسی واحدهای ثابت (Absolute) مثل px و واحدهای نسبی (Relative) مثل em و rem را با مثال کاربردی یاد بگیرید.
رایگان
۱۰ دقیقه
قسمت سی و هفتمبررسی تخصصی واحدهای اندازه‌گیری CSS (قسمت ۲)؛ کاربرد px، em و remکالبدشکافی دقیق واحدهای اندازه‌گیری در CSS. در این بخش یاد می‌گیرید چطور با ترکیب em و rem یک چیدمان مقیاس‌پذیر و حرفه‌ای برای انواع نمایشگرها طراحی کنید.
رایگان
۱۸ دقیقه
قسمت سی و هشتمبررسی تخصصی واحدهای اندازه‌گیری CSS (قسمت ۳) | مقایسه کامل lvh، svh، dvh، vh و vwدر قسمت سوم آموزش تخصصی CSS به بررسی دقیق و کاربردی واحدهای lvh، svh، dvh، vh و vw می‌پردازیم. تفاوت‌ها، کاربردها و بهترین روش استفاده از این واحدها در طراحی ریسپانسیو و موبایل را به‌صورت عملی یاد بگیرید.
رایگان
۱۹ دقیقه
قسمت سی و نهمآموزش کامل Overwriting در CSS | تفاوت Overwrite، Override و Overloading به زبان سادهدر این آموزش به بررسی مفهومی Overwriting در CSS می‌پردازیم و تفاوت آن با Override و Overloading را به‌صورت تئوری و کاربردی توضیح می‌دهیم. اگر می‌خواهید ساختار اولویت‌دهی و بازنویسی استایل‌ها را عمیق یاد بگیرید، این مطلب مخصوص شماست.
رایگان
۲۲ دقیقه
قسمت چهلمآموزش Overwriting در CSS و بررسی کامل اولویت‌ها (Specificity، Cascade و !important)در این آموزش به‌صورت عملی یاد می‌گیرید Overwriting در CSS چگونه کار می‌کند و چه عواملی مثل Specificity، ترتیب کدها و !important در اولویت‌بندی استایل‌ها تاثیر دارند. همراه با مثال‌های کاربردی و قابل فهم.
رایگان
۱۵ دقیقه
قسمت چهل و یکمآموزش Overwriting در CSS بررسی یک اشتباه علمی در قسمت های گذشتهدر این قسمت یک اشتباه علمی که در قسمت گذشته راجبش اشتباه نظر دادم رو بررسی میکنم و درستش رو به اطلاعاتون میرسونم ! ترتیب کلاس ها داخل یک المنت هیچ ربطی به اور رایت شدنش نداره و این اشتباه علمی این دوره بود که من سوتی دادم و تو این بخش بررسیش میکنیم که چرا این ایراد علمی اتفاق افتاد !
رایگان
۴ دقیقه
قسمت چهل و دومآموزش کامل @Media در CSS | طراحی ریسپانسیو با Media Queryدر این آموزش با @Media در CSS آشنا می‌شوید و یاد می‌گیرید چگونه با Media Query سایت‌های ریسپانسیو طراحی کنید. مناسب برای طراحان وب و یادگیری اصول واکنش‌گرایی در CSS.
رایگان
۴۰ دقیقه
قسمت چهل و سومپروژه دوره مقدماتی سایت اسنپ - قسمت اول در این قسمت با هم دیگه تمامی نکات جا مانده از css رو یاد میگیریم و شروع میکنیم که یک پروژه رو از صفر و از اول شروع کنیم ! به شما توصیه میکنم به همراه من این مینی پروژه رو برای تثبیت یادگیری خودتون انجام بدید !
رایگان
۳۰ دقیقه
قسمت چهل و چهارمپروژه دوره مقدماتی سایت اسنپ - قسمت دوم در این قسمت ادامه پروژه اسنپ رو با هم دیگ انجام میدیم کمی هدر رو رسپانسیو میکنیم و نکات تکمیلی لایوت سایت اسنپ رو بررسی میکنیم
رایگان
۴۱ دقیقه
قسمت چهل و پنجمپروژه دوره مقدماتی سایت اسنپ - قسمت سوم در این قسمت با همدیگه یاد میگیریم که چطوری فونت های سایت اسنپ رو روی پروژمون اضافه کنیم و بتونیم وزن های مختلفش رو روی css هامون اعمال کنیم این قسمت رو حتما دریابید !
رایگان
۲۵ دقیقه
قسمت چهل و ششمپروژه دوره مقدماتی سایت اسنپ - قسمت چهارم در این قسمت با هم Header و Navigation رو تکمیل میکنیم و دراپ داون رو با هم تمرین میکنیم و هدر رو رسپانسیو میکنیم کمی before و after رو کاربردی یاد میگیریم !
رایگان
۴۲ دقیقه
قسمت چهل و هفتمپروژه دوره مقدماتی سایت اسنپ - قسمت پنجم در این قسمت فوتر سایت رو به طور کامل طراحی کردیم و تمامی موارد رسپانسیو رو در فوتر رعایت کردیم تمرین خیلی خوبی برای flex و پراپرتی های مرتبط اش مثل gap , flex-wrap توی این قسمت با هم انجام میدیم !
رایگان
۳۱ دقیقه
قسمت چهل و هشتمپروژه دوره مقدماتی سایت اسنپ - قسمت ششم در این قسمت سراغ main میریم و اولین سکشن یعنی hero رو پیاده سازی میکنیم و نکات ارزنده ای رو باهم مرور میکنیم مثل قابلیت های flex-grow که خیلی بهمون توی رسپانسیو شدن کمک میکنه
رایگان
۴۵ دقیقه
قسمت چهل و نهمپروژه دوره مقدماتی سایت اسنپ - قسمت هفتم در این قسمت سکشن هیرو رو تکمیل میکنیم با هم دیگه یاد میگیریم که چطوری باید به باتن ها و اینپوت ها استایل بدیم که در یک پروژه انترپرایز بتونیم به بهترین شکل استایل ها رو مدیریت کنیم !
رایگان
۴۴ دقیقه
قسمت پنجاهمپروژه دوره مقدماتی سایت اسنپ - قسمت هشتم در این قسمت با هم دیگه انیمیشن ripple که انیمیشن بسیار معروفی در باتن ها هست رو تمرین میکنیم با مفاهیم translate و transation کار میکنیم و عملی یاد میگیریم که چطوری میتونیم ازشون استفاده کنیم تازه ۴ راه سنتر کردن یک المنت رو هم در این قسمت تکمیل میکنیم !
رایگان
۳۰ دقیقه
قسمت پنجاه و یکمپروژه دوره مقدماتی سایت اسنپ - قسمت نهم در این قسمت با هم سکشن لینک اپلیکیشن های اسنپ رو طراحی میکنیم و با flex و justify-content به شکل عملی کار میکنیم !
رایگان
۱۹ دقیقه
قسمت پنجاه و دومپروژه دوره مقدماتی سایت اسنپ - قسمت دهم در این قسمت قراره با هم سکشن سرویس های اسنپ رو بسازیم و با کلی از موارد flex و رسپانسیو درگیر بشیم کمی حتی از اسنپ بهتر اینجا عمل میکنیم و چیزای بیشتری یاد میگیریم
رایگان
۲۷ دقیقه
قسمت پنجاه و سومپروژه دوره مقدماتی سایت اسنپ - قسمت یازدهم در این قسمت سکشن کروسل رو با هم دیگه میسازیم البته که نیازمند جاوااسکریپته و این قسمت رو خیلی ساده ازش رد میشیم !
رایگان
۸ دقیقه
قسمت پنجاه و چهارمپروژه دوره مقدماتی سایت اسنپ - قسمت دوازدهمدر این قسمت با هم سکشن خصوصیات اسنپ در لندینگش رو طراحی میکنیم همه موارد رو با flex پیش میبریم و رسپانسیوش میکنیم
رایگان
۲۴ دقیقه
قسمت پنجاه و پنجمپروژه دوره مقدماتی سایت اسنپ - قسمت سیزدهم در این قسمت با هم انتهای سکشن معرفی اسنپ رو تکمیل میکنیم این بخش در دو قسمت ارائه میشه این قسمت و قسمت بعد رو برای تکمیل این قسمت ببینید حتما ! با هم دیگه فلکس رو تمرین میکنیم و موبایل فرست این قسمت رو جلو میبریم
رایگان
۲۰ دقیقه
قسمت پنجاه و ششمپروژه دوره مقدماتی سایت اسنپ - قسمت چهاردهم در این قسمت ادامه سکشن hint رو باهم جلو میبریم و تکمیلش میکنیم با جادوی مارجین منفی کاری رو انجام میدیم که توی لندینگ اصلی اسنپ هم انجام نشده و مرتب تر و الاین تر از لندینگ اسنپ دیزاین این قسمت رو به پایان میرسونیم !
رایگان
۲۴ دقیقه
قسمت پنجاه و هفتمپروژه دوره مقدماتی سایت اسنپ - قسمت پانزدهم و پایانیدر این قسمت لندینگ اسنپ رو تکمیل میکنیم و سکشن پایانی این لیندینگ رو هم رسپانسیو میکنیم بعد از اتمام این قسمت شما باید تمامی مباحث مربوط به فلکس و رسپانسیو رو کاملا یاد گرفته باشید
رایگان
۴۰ دقیقه

سوالات متداول

نظرات و پرسش‌ها

نظرات (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

Ali Beiki

واقعا دوره عالی هست، آموزش html,css ,js همه جا ریخته اما این دوره واقعا نکاتی که یک برنامه نویس فرانت باید بدونه رو داره و از خیلی دوره های پولی دیگه که دیدم ارزشش به مراتب بالا تره

پوریا باباعلی

پوریا باباعلی(استاد دوره)

نظر لطفته عزیزم خوشحالم که این دوره تونسته نظرتو جلب کنه امیدوارم تا انتهای دوره همراهمون باشی ♥️

حسی

حسین نباتی

سلام در این دوره مباحث flexbox و cssgrid و sass و less هم هست آموزشش میدین ؟

پوریا باباعلی

پوریا باباعلی(استاد دوره)

سلام بله به زودی اضافه میشه

هان

هانیه حیدری

سلام و عرض ادب ممنون از دوره عالی و خوبتون چه زمانی ویدیو ها کامل بارگزاری میشوند و دوره کامل میشه؟

پوریا باباعلی

پوریا باباعلی(استاد دوره)

سلام به زودی با پایدار شدن وضعیت اینترنت آپدیت میگیره دوره

abolfazl

abolfazl

خیلی ممنون از مهندس پوریا باباعلی که واقعا دلسوزانه این دوره هارو پیش میبرن.واقعا هر وقت ویدیو هارو نگاه میکنم جدا از بحث کیفیت و نکته های ریزش که خیلی نابن یه صمیمیت خاصی حس میکنم.خسته نباشی پوریا جان.

پوریا باباعلی

پوریا باباعلی(استاد دوره)

ممنونم از نظر لطفت ابوالفضل جان

MohammadKian Mahmoudi Chenari

MohammadKian Mahmoudi Chenari

دوره های سایت کدهالیک مثل همیشه عالیه. فقط خود سایته که نیاز به یه سری قابلیت ها برای بهتر و جذاب تر شدن داره. دو تا پیشنهادی که دارم: 1. یک Progress Bar برای نمایش میزان پیشرفت هر کاربر در هر دوره. 2.حالت پخش مجدد یک دوره از ادامه جایی که کاربر دفعه قبل تا اونجا دوره رو تماشا کرده. (نمی دونستم این مورد دوم اسم خاصی داره یا اصلا قابل اجرا هست یا نه فقط خواستم نظرمو گفته باشم) در هر صورت به نظر من کدهالیک تا ابد یکی از بهترین مجموعه های آموزش برنامه نویسی ایرانی باقی می مونه برای همتون آرزوی موفقیت می کنم❤️‍🔥

پوریا باباعلی

پوریا باباعلی(استاد دوره)

ممنونم از لطفت حتما مواردی که گفتی رو در مسیر توسعه کدهالیک در نظرش میگیرم مرسی بابت فیدبک بسیار جذابت دوست خوبم ❤️‍🔥

Sahar Mokarrami

Sahar Mokarrami

دوره خیلی عالی و کاربردیه، مشتاقانه منتظر قسمتای جدیدش هستم :))

پوریا باباعلی

پوریا باباعلی(استاد دوره)

سپاس ❤️ به زودی قسمت‌های جدید منتشر میشن! برای اینکه از آپدیت‌ها باخبر بشید، حتماً در کانال تلگرام ما عضو بشید. از بنر بالای سایت هم می‌تونید جوین کنید!

Abozar Raghibdoust

Abozar Raghibdoust

عالی و کاربردی خسته نباشید پوریا جان

پوریا باباعلی

پوریا باباعلی(استاد دوره)

سپاس گزارم ازت ابوذر جان ❤️

حسی

حسین لطفی

فکر میکنم بهترین دوره آموزش فرانتی باشه که میتونید گیر بیارید 🔥

پوریا باباعلی

پوریا باباعلی(استاد دوره)

ممنونم ازت حسین جان ❤️

Fatemeh Baharestani

Fatemeh Baharestani

سلام! ممنون از دوره آموزشی عالی‌تون در مورد مقدمات فرانت‌اند. تا بخش CSS رو با لذت دنبال کردم و واقعاً برام مفید بوده. متوجه شدم که ادامه دوره هنوز آپلود نشده، می‌خواستم بدونم آیا برنامه‌ای برای آپدیت و اضافه کردن بقیه ویدیوها دارید؟ خیلی مشتاقم که زودتر ادامه‌ش رو ببینم و یاد بگیرم. با تشکر!

پوریا باباعلی

پوریا باباعلی(استاد دوره)

بله قراره در آینده آپدیت بشه دوره و این دوره در حال برگزاریه

MohammadKian Mahmoudi Chenari

MohammadKian Mahmoudi Chenari

یکی از بهترین دوره های آموزش فرانت اند👌 دمت گرم پوریا❤️‍🔥🙏

پور

پوریا باباعلی

خوبی از خودته عزیزم ادامه دوره رو هم حتما باهام همراه باش 🙏

parsa shah

parsa shah

خیلی عالی بود ممنون از شما من دو فصل رو دیدم و کاملا متوجه شدم مشتاق فصل 3 هستم

پوریا باباعلی

پوریا باباعلی(استاد دوره)

ممنونم از توجهت به دوره ، آپدیت دوره به شکل هفتگی انجام میشه ❤️

علی

علی ندائی

دوره در حال تکمیل است؟

پوریا باباعلی

پوریا باباعلی(استاد دوره)

بله هر هفته در حال آپدیت شدن هست به زودی فصل جدید رو هم آپلود میکنم !

حسی

حسین حیدری

عالی پوریا

پوریا باباعلی

پوریا باباعلی(استاد دوره)

سپاس گزارم حسین جان ❤️

ars

arshia admin

عالی

پوریا باباعلی

پوریا باباعلی(استاد دوره)

سپاس گزارم

زین

زینب ویشکایی

با سلام ، مشتاقم که در این دوره شرکت کنم و بعد از اتمام دوره به دوستان معرفی کنم !

پوریا باباعلی

پوریا باباعلی(استاد دوره)

سپاس از شما

رایگان

دوره‌های مرتبط

کدهالیک

کدهالیک پلتفرمی برای یادگیری زبان‌های برنامه‌نویسی است. ما با ارائه دوره‌های کاربردی و پروژه‌محور، شما را در مسیر تبدیل شدن به یک برنامه‌نویس حرفه‌ای همراهی می‌کنیم. از مبتدی تا پیشرفته، با کدهالیک آینده‌ی شغلی خود را بسازید.

لینک‌های سریع

ارتباط با ما

mail@codehalic.ir

چیتگر جوزانی غربی خیابان مظفر خیابان زنبق پلاک صفر برج همت یاس

02146021206 - 09100455680

© 1405 کدهالیک™ - تمامی حقوق محفوظ است