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

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

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

۰ دانشجو
48 ویدیو
در حال برگزاری

مدت دوره

869 دقیقه

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

48 ویدیو

دانشجویان

0 نفر

سطح

مقدماتی

تاریخ انتشار

19 مرداد 1404

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

28 مرداد 1405

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

🎬 قدم اولت:

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

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

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

محتوای دوره

3 فصل • 48 قسمت • 869 دقیقه

قسمت یکممقدمه و آنچه در این دوره خواهیم آموخت !هر چیزی که قراره تو این دوره یاد بگیریم و باهم مرور میکنیم!
رایگان
۱۲ دقیقه
قسمت دومپیش نیاز های یک برنامه نویس خوبیک برنامه نویس چه ویژگی هایی باید داشته باشه ؟
رایگان
۱۴ دقیقه
قسمت سومبرنامه نویس و برنامه نویسی به چه معناست؟یاد میگیریم که دقیقا چرا به یه نفر میگن برنامه نویس
رایگان
۱۲ دقیقه
قسمت چهارماینترنت چیه و چه طوری بوجود اومده ؟یاد میگیریم بیسیک ترین مفاهیم اینترنت به چه شکلی ساخته شدن و چیا هستند؟
رایگان
۲۰ دقیقه
قسمت پنجماینترنت به چه شکل کار میکنه و ساختارش چه شکلیه؟تو این قسمت سعی میکنیم روی بحث اینترنت عمیق بشیم و کلی چیز یاد بگیریم
رایگان
۲۶ دقیقه
قسمت ششموب چیه اصلا و چطوری با اینترنت کار میکنه؟یاد میگیریم که وب رو بهتر بشناسیم
رایگان
۱۳ دقیقه
قسمت هفتمیک کامپیوتر از چه اجزایی ساخته شده و هر کدوم وظیفشون چیه؟یاد میگیریم که بهتر کامپیوتر رو بشناسیم و هر جز رو دقیق بررسی کنیم
رایگان
۱۹ دقیقه
قسمت هشتمکد ادیتور یا 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 ابزارهایی قدرتمند برای کنترل ابعاد عناصر هستند. با استفاده صحیح از این مقادیر می‌توان طراحی واکنش‌گرا، جلوگیری از کشیدگی یا کوچک‌شدن بیش از حد عناصر، و کنترل بهتر ظاهر صفحات را تضمین کرد. در این آموزش کاربرد، تفاوت‌ها و مثال‌های عملی از هر کدام ارائه شده است تا بتوانید در پروژه‌های واقعی از آن‌ها بهترین استفاده را ببرید.
رایگان
۶ دقیقه

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

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

نظرات (10)

Sahar Mokarrami

Sahar Mokarrami

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

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

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

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

Abozar Raghibdoust

Abozar Raghibdoust

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

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

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

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

حسی

حسین لطفی

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

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

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

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

Fatemeh Baharestani

Fatemeh Baharestani

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

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

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

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

MohammadKian Mahmoudi Chenari

MohammadKian Mahmoudi Chenari

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

Pou

Pouriya Babaali

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

parsa shah

parsa shah

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

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

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

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

علی

علی ندائی

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

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

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

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

حسی

حسین حیدری

عالی پوریا

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

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

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

دان

دانشجو دوره

عالی

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

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

سپاس گزارم

زین

زینب ویشکایی

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

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

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

سپاس از شما

۱٬۰۰۰ تومان

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

کدهالیک

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

ارتباط با ما

mail@codehalic.ir

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

02146021206 - 09100455680

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