قراره تو این دوره چی یاد بگیرم؟

  • آموزش کامل HTML
  • آموزش جامع CSS
  • یادگیری بوت استرپ 5
  • طراحی پروژه با Tailwind CSS
  • آموزش جاوا اسکریپت
  • پیاده سازی پروژه ها
  • و...
مهسا مروجی

مهسا مروجی

متخصص فرانت اند سایت

برنامه نویس جاوا اسکریپت

مدرس دوره های دانشجویار

عضو تیم فرانت اند دانشجویار

و ....

سرفصل های دوره

۸ فصل
۱۴۶ جلسه
۴۵ ساعت
۱

معرفی دوره

۳ قسمت
۰۰:۱۲:۰۵
1

مراحل طراحی و توسعه یک وبسایت

رایگان
۰۴:۳۷
2

برنامه نویس فرانت اند کیست؟

رایگان
۰۳:۰۹
3

چرا برنامه نویسی فرانت اند؟

رایگان
۰۴:۱۹
۲

مفاهیم مقدماتی Html و Css

۱۰ قسمت
۰۴:۱۲:۲۰
۳

مفاهیم تکمیلی Html

۶ قسمت
۰۲:۴۹:۱۸
۴

مفاهیم تکمیلی Css

۳۴ قسمت
۱۷:۳۲:۳۶
۵

مفاهیم پیشرفته Css

۹ قسمت
۰۲:۳۱:۲۵
۶

آموزش کامل Bootstrap

۴۴ قسمت
۱۱:۵۹:۵۷
۷

آموزش کامل Tailwind

۴۰ قسمت
۰۵:۱۲:۲۲
۸

فایل های مربوط به دوره

-

امروزه، طراحی و توسعه وب به یکی از مهارت‌های ضروری برای هر حرفه‌ای تبدیل شده است. با توجه به رشد روزافزون تکنولوژی و نیاز به وب‌سایت‌های کاربرپسند و زیبا، آموزش فرانت اند به عنوان یکی از ارکان اصلی این صنعت، اهمیت ویژه‌ای پیدا کرده است.

دوره آموزش فرانت اند به‌صورت پروژه‌محور یک فرصت استثنایی برای علاقه‌مندان به طراحی و توسعه وب است تا به طور عملی و کاملاً کاربردی، مهارت‌های فرانت اند را از سطح پایه تا پیشرفته فرا بگیرند. در این دوره شما با مباحث کلیدی HTML، CSS و فریم‌ورک‌های مطرح فرانت اند آشنا خواهید شد و با اجرای پروژه‌های واقعی، دانش خود را در محیطی مشابه بازار کار تقویت می‌کنید. هدف ما در این دوره، تربیت متخصصانی است که توانایی پیاده‌سازی و طراحی رابط کاربری حرفه‌ای و کاربرپسند را با بهره‌گیری از تکنیک‌های به‌روز دارند.

در آموزش برنامه نویسی فرانت اند چه می گذرد؟

در دوره آموزش فرانت اند، تمام مباحث مربوط به طراحی ظاهر یک وب‌سایت به‌طور جامع و پروژه‌محور بررسی می‌شود. ابتدا کار را با HTML و CSS آغاز می‌کنیم؛ این دو زبان اساسی، پایه‌گذار ساختار و استایل وب‌سایت‌ها هستند. در این مرحله، یاد می‌گیریم که چگونه با استفاده از HTML، ساختار صفحات وب را طراحی کرده و با CSS آن‌ها را زیبا و جذاب کنیم.

پس از آشنایی با HTML و CSS، به سراغ Bootstrap و Tailwind CSS خواهیم رفت. این فریم‌ورک‌ها به ما کمک می‌کنند تا طراحی ریسپانسیو وب‌سایت‌ها را به راحتی انجام دهیم. با Bootstrap، می‌آموزیم که چگونه می‌توانیم از کلاس‌های آماده برای طراحی سریع و کارآمد استفاده کنیم، در حالی که Tailwind CSS این امکان را به ما می‌دهد تا با استفاده از کلاس‌های کاربردی، طراحی‌های دلخواه و سفارشی خود را پیاده‌سازی کنیم.

مسیر و دلیل یادگیری برنامه نویسی front end

اگر به تازگی وارد دنیای برنامه نویسی شده باشید، حتما واژه‌ی طراحی وب را بارها و بارها شنیده اید و احتمالا با اهمیت و نقش این حرفه در دنیای امروز آشنایی دارید. اما اجازه دهید تا در این مقدمه کمی بیشتر با ضرورت وجود وب سایت ها و به طبع آن وجود طراحان وب صحبت کنیم و نگاهی متفاوت تر به آموختن مهارتی کلیدی در دنیای تکنولوژی داشته باشیم.

توسعه فرانت‌اند اهمیت بالایی در دنیای دیجیتال امروز دارد، زیرا اولین نقطه تماس کاربران با یک وب‌سایت یا اپلیکیشن است. تجربه کاربری (UX) و رابط کاربری (UI) به‌طور مستقیم بر نحوه تعامل کاربران با محتوای آنلاین تأثیر می‌گذارد. اگر طراحی و توسعه فرانت‌اند به‌درستی انجام نشود، کاربران ممکن است از وب‌سایت خارج شوند و به رقبا مراجعه کنند. بنابراین، توسعه فرانت‌اند نه‌تنها بر جذابیت بصری تأثیر می‌گذارد، بلکه می‌تواند تأثیر مستقیمی بر نرخ تبدیل و موفقیت کسب‌وکارها داشته باشد.

علاوه بر این، با توجه به رشد روزافزون استفاده از دستگاه‌های مختلف (مانند تلفن‌های هوشمند، تبلت‌ها و کامپیوترها)، اهمیت بهینه‌سازی وب‌سایت‌ها برای نمایش در دستگاه‌های مختلف (Responsive Design) افزایش یافته است. یک توسعه‌دهنده فرانت‌اند باید اطمینان پیدا کند که وب‌سایت‌ها نه‌تنها زیبا و کاربرپسند باشند، بلکه عملکرد مناسبی نیز داشته باشند. این شامل زمان بارگذاری سریع، تعاملات روان و عملکرد بهینه در تمامی دستگاه‌ها است.

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

پروژه های دوره آموزش فرانت

مخاطبین آموزش برنامه نویسی فرانت اند

این دوره جامع فرانت اند به دانشجویان رشته های مهندسی کامپیوتر و IT، علوم کامپیوتر ، مدیریت و MBA توصیه می شود. همچنین سایر افراد با هر سطحی از تحصیلات در صورت علاقه به توسعه وب، بدون نیاز به هیچ پیش نیازی میتوانند از این آموزش برنامه نویسی front end استفاده کنند و علاوه بر آشنا شدن با مفاهیم مختلف طراحی و توسعه سایت، با ساختار وب سایت ها نیز آشنا شوند و اولین گام ها در مسیر تبدیل شدن به یک توسعه دهنده وب سایت حرفه ای را با قدرت هرچه بیشتر بردارند.

طراحی وب چیست؟

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

  • بنابراین کار یک طراح وب در واقع مربوط به سمت کاربر یک وب سایت میشود که اصطلاحا با نام Front-End شناخته می شود.

Front-End چیست؟ توسعه دهنده ی Front-End کیست؟

اساسا یک وب سایت از نظر فنی قابل تقسیم به دو بخش اصلی Frontend و Backend است که در واقع frontend بخش هایی از یک سایت است که کاربر به طور مستقیم با آن ها در ارتباط است شامل منو ها، عکس ها، متن ها، فرم های ثبت اطلاعات، لینک های ارجاع و … .

به همین ترتیب backend شامل بخش هایی از سایت است که کاربر به طور مستقیم آن ها را نمیبیند یا ارتباط با آن ها را درک نمیکند شامل پایگاه های داده ای، تغییر و انتقال در اطلاعات ذخیره شده، دریافت و ثبت اطلاعات از ورودی ها و … است.

پس همانطور که گفته شد در ساختار وب سایت ها یک تقسیم بندی اصلی وجود دارد که همین موضوع منجر به تقسیم زبان های توسعه وب به دو دسته زبان های توسعه سمت کاربر و زبان های توسعه سمت سرور و به تبع آن تقسیم برنامه نویسان این حوزه به دو دسته برنامه نویسان سمت کاربر (Frontend Developer) و برنامه نویسان سمت سرور (Backend Developer) می شود.

وظایف توسعه‌دهنده فرانت‌اند

وظایف توسعه‌دهنده فرانت‌اند شامل موارد زیر است:

  • طراحی رابط کاربری
  • پیاده‌سازی طراحی‌ها با HTML، CSS و JavaScript
  • بهینه‌سازی عملکرد وب‌سایت
  • ایجاد صفحات واکنش‌گرا (Responsive)
  • ارتباط با APIها
  • عیب‌یابی و رفع اشکالات
  • همکاری با تیم‌های طراحی و بک‌اند
  • استفاده از فریم‌ورک‌ها و کتابخانه‌های مدرن
  • نگهداری و به‌روزرسانی کد
  • تست و اعتبارسنجی کد

برای توسعه یک وب سایت چه زبان ها و ابزاری مورد استفاده قرار میگیرد؟

پاسخ این پرسش وابسته به حوزه مد نظر شما در توسعه وب است اما به طور معمول برای توسعه و برنامه نویسی در سمت کاربر از زبان های HTML , CSS , JAVASCRIPT استفاده می شود و در برنامه نویسی سمت سرور معمولا یکی از زبان های PHP یا Python مورد استفاده قرار میگیرد که در ویدئو های این دوره مفصل به شرح مقدمه ای بر کاربرد و تفاوت زبان های مختلف مورد استفاده در توسعه وب نیز می پردازیم.

یادگیری طراحی و توسعه وب را با کدام زبان آغاز و با چه ترتیبی ادامه دهیم؟

هر برنامه نویس و توسعه دهنده وبی چه در سمت کاربر و چه در سمت سرور باید در درجه اول به زبان های HTML و CSS مسلط باشد و در ادامه با توجه به علاقه خود یکی از زبان های مربوط به Backend یا Frontend را انتخاب کند پس در این دوره گام های اولیه برای تبدیل شدن به یک برنامه نویس وب حرفه ای را با قدرت هرچه بیشتر برمیداریم و در انتها برای ادامه راه یک مسیر را انتخاب میکنیم.

 وب سایت واکنشگرا (Responsive) چیست؟ چگونه وب سایتی واکنشگرا را توسعه دهیم؟

یکی از اصلی ترین و مهم ترین اصول طراحی وب، توسعه سایت ها به صورت واکنشگراست که در واقع به معنی قابلیت تغییر و حفظ تناسب عناصر صفحه در دستگاه ها با اندازه صفحه های گوناگون است، البته این کار نیازمند آموختن صحیح و اصولی مباحث CSS است که در این دوره آموزش front end به طور مفصل به آن میپردازیم و همچمنین با فریمورک قدرتمند Bootstrap که برای توسعه وب سایت های واکنشگرا ( ویکی پدیا ) ابداع شده نیز آشنا می شویم.

بازار کار فرانت اند

در رابطه با بازار کار دوره فرانت اند اگر فقط به سرعت فراگیر شدن فضای اینترنت و کسب و کارها در بستر وب توجه کنیم در می یابیم که طی سالهای اخیر اینترنت از فضای صرفا مطالعاتی به فضایی حیاتی برای زندگی همگان تبدیل شده است. امروزه، نه تنها شرکت‌ها و مارکت‌های بزرگ بلکه هر کسب و کاری و در مقیاس کمی متفاوت تر حتی هر شخصی نیاز به یک وب سایت دارد. به همین دلیل، تقاضا برای توسعه‌دهندگان فرانت‌اند به عنوان افرادی که می‌توانند رابط‌های کاربری جذاب و کارآمد طراحی کنند، به شدت افزایش یافته است.

به علاوه، با پیشرفت فناوری‌ها و ابزارهای جدید در زمینه توسعه وب، توسعه‌دهندگان فرانت‌اند اکنون با انتخاب‌های متنوع‌تری روبرو هستند. فریم‌ورک‌ها و کتابخانه‌های مدرنی مانند React، Vue.js و Angular به توسعه‌دهندگان این امکان را می‌دهند تا پروژه‌های پیچیده‌تری را با کارایی و سرعت بیشتری پیاده‌سازی کنند. این موضوع به نوبه خود باعث شده است که کارفرمایان به دنبال توسعه‌دهندگانی باشند که توانایی کار با این تکنولوژی‌ها را دارند و می‌توانند پروژه‌های مبتنی بر وب را به سطح بالاتری برسانند.

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

درآمد برنامه نویس فرانت اند

درآمد برنامه‌نویسان فرانت‌اند یکی از جذاب‌ترین جنبه‌های این حرفه است و تحت تأثیر عوامل مختلفی قرار دارد. به‌طور کلی، برنامه‌نویسان فرانت‌اند به دلیل تقاضای بالای بازار برای توسعه‌دهندگان وب و نیاز به طراحی رابط‌های کاربری جذاب و کاربرپسند، درآمد خوبی دارند. برنامه‌نویسان با توجه به سطح تجربه خود درآمد متفاوتی دارند. تازه‌کاران معمولاً در آغاز کار خود درآمد کمتری دارند، اما با افزایش تجربه و مهارت، می‌توانند درآمد خود را به‌طور چشمگیری افزایش دهند.

موقعیت جغرافیایی نیز نقش مهمی در تعیین درآمد برنامه‌نویسان فرانت‌اند دارد. در کشورها و شهرهای بزرگ و توسعه‌یافته، برنامه‌نویسان معمولاً درآمد بالاتری نسبت به کشورهای در حال توسعه دارند. علاوه بر این، تسلط بر فریم‌ورک‌ها و کتابخانه‌های مدرن مانند React، Angular و Vue.js می‌تواند به افزایش درآمد برنامه‌نویسان کمک کند. برنامه‌نویسانی که توانایی کار با ابزارهای جدید و تکنیک‌های پیشرفته دارند، معمولاً در بازار کار بیشتر مورد توجه قرار می‌گیرند و می‌توانند حقوق بیشتری دریافت کنند.

نوع استخدام نیز بر درآمد تأثیر دارد. برنامه‌نویسان فرانت‌اند می‌توانند به‌عنوان کارمند در شرکت‌ها مشغول به کار شوند یا به‌عنوان فریلنسر فعالیت کنند. درآمد فریلنسرها معمولاً متغیر است و بسته به نوع پروژه و مشتری می‌تواند متفاوت باشد.

سرفصل های آموزش برنامه نویسی فرانت اند:

قدم اول: مقدمه

  • مقدمه
  • آشنایی با نرم افزار
  • نصب نرم افزار

قدم دوم:‌ آشنایی با ساختار وب و مفهوم واکنشگرایی

  • قسمت های مختلف یک وب سایت
  • آشنایی با مفهوم واکنشگرایی
  • آشنایی با وظایف هر زبان
  • آشنایی با عناصر ضروری در اکثر صفحات

قدم سوم: HTML

  • معرفی ساختار زبان و شروع برنامه نویسی
  • Headings & Paragraphs, Bold, Strong, Italic, Mark, Del, Ins, Sub, Sup, Quotation
  • Images, Image Map
  • Table , List
  • Links , Iframes
  • Forms , Inputs, Buttons
  • Pictures, Videos , Audios
  • Canvas OR SVG
  • Meta
  • Events
  • HTTP Messages
  • Div and Blocks
  • Inline, Internal, External Styles
  • ID , Class , Element, inheritance styling
  • Comments
  • جمع بندی

قدم چهارم: CSS

  • معرفی ساختار CSS
  • Background color , Background Image, Border Image
  • Border , Margin , Padding
  • Height , Width , Units
  • Text Styling and fonts
  • Link styling and Icons
  • Lists , Tables
  • Display , Position , Overflow
  • Align , Float
  • Forms , Inputs , Buttons
  • Styling Images
  • Gradients, Shadows
  • Multiple columns, Media Queries
  • Flex Box
  • Transform , Animation
  • Transition

قدم پنجم: Bootstrap

  • معرفی framework و آشنایی با کاربرد آن
  • Bootstrap Grid System
  • Bootstrap Useful Classes
  • طراحی پروژه واقعی

قدم ششم: آموزش Tailwind CSS

  • آموزش کامل و جامع Tailwind CSS

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

ادامه متن دوره ...

مدرک معتبر دو زبانه

پس از گذراندن دوره و انجام پروژه های مشخص شده، مدرک معتبر و دو زبانه دانشجویار را دریافت خواهید کرد.

مدرک فارسی مدرک انگلیسی

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

تا چه زمانی به محتوای دوره دسترسی خواهیم داشت؟

شما می توانید به صورت دائمی به محتوای این دوره آموزشی دسترسی داشته باشید. همچنین اگر آپدیت جدیدی روی این دوره لحاظ شود به محتوای آپدیت شده نیز دسترسی خواهید داشت.

آیا در صورت تهیه دوره، مدرک شرکت در دوره آموزش فرانت اند دانشجویار به من تعلق می گیرد؟

بله مدرک معتبر برای شما صادر خواهد شد. اما توجه داشته باشید در این دوره طلایی از دانشجویار پس از گذراندن دوره، پروژه ای توسط مدرس دوره برای شما تعریف میشود که با انجام آن و تایید مدرس دوره، مدرک معتبر شرکت در دوره برای شما صادر میشود.

این دوره آموزشی پروژه محور است؟

این دوره به صورت پروژه محور ارائه می‌شود. در این دوره، علاوه بر یادگیری مفاهیم و تکنولوژی‌های مربوط به فرانت اند، به طراحی و توسعه پروژه‌های واقعی می‌پردازید.

این دوره برای چه کسانی مناسب است؟

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

پیش‌نیاز شرکت در دوره چیست؟

افراد علاقه مند بدون نیاز به هیچ پیش نیازی میتوانند از این آموزش برنامه نویسی فرانت اند استفاده کنند.

پس از اتمام دوره چه مهارت‌هایی کسب می‌کنم؟

در این دوره به آموزش کامل HTML، آموزش جامع CSS، یادگیری بوت استرپ ۵، آموزش جاوا اسکریپت، آموزش ری اکت و... پرداخته می شود.

پس از اتمام دوره آمادگی برای ورود به بازار کار وجود دارد؟

در این دوره شما با انجام پروژه های واقعی برای ورود به بازار کار و کسب درآمد در این حوزه آماده می شوید.

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

دوره در جهت حفظ حقوق مدرس و برای جلوگیری از منتشر شدن در بستر های متنوع، در نرم افزار اسپات پلیر برگزار میشود. البته نرم افزار اسپات، قابلیت استفاده در سیستم عامل های مختلف از جمله اندروید، ویندوز، وب و مک را دارد. در این نرم افزار شما قابلیت دانلود و تماشای آفلاین ویدیو ها را نیز خواهید داشت. پس هدف دانشجویار، اذیت کردن کاربران نیست. هدف فقط جلوگیری از پابلیک شدن دوره ها میباشد. دوره ای که به صورت عمومی و رایگان منتشر شود، دیگر فروش نخواهد داشت. متوقف شدن فروش دوره، سبب خواهد شد که دیگر پشتیبانی و بروزرسانی در دوره توسط مدرس انجام نشود. پس برای بهبود و ارتقای دوره، ملزم به استفاده از اسپات پلیر هستیم و مطمئن باشید دسترسی شما به دوره ها قطع نخواهد شد؛ چراکه دانشجویار حامی منافع کاربران و مدرسین خود میباشد.