هیچ دوره ای در سبد خرید شما وجود ندارد
امروزه، طراحی و توسعه وب به یکی از مهارتهای ضروری برای هر حرفهای تبدیل شده است. با توجه به رشد روزافزون تکنولوژی و نیاز به وبسایتهای کاربرپسند و زیبا، آموزش فرانت اند به عنوان یکی از ارکان اصلی این صنعت، اهمیت ویژهای پیدا کرده است.
دوره آموزش فرانت اند بهصورت پروژهمحور یک فرصت استثنایی برای علاقهمندان به طراحی و توسعه وب است تا به طور عملی و کاملاً کاربردی، مهارتهای فرانت اند را از سطح پایه تا پیشرفته فرا بگیرند. در این دوره شما با مباحث کلیدی 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
دوره آموزش برنامه نویسی فرانت اند، شروعیست برای ورود به دنیای مهیج و پر رونق طراحی وب. این دوره بر اساس آخرین استاندارد های این حوزه پیاده سازی شده است و حتی اگر در گذشته این موارد را کار کرده اید، خالی از لطف نیست که اطلاعات خود را به روز کنید.
nekooeinikan68 دانشجوی دوره
سلام وقت بخیر
ببخشید دوره جاوا به دوره کی اظافه میشه؟
mohammad.t9600 دانشجوی دوره
متاسفانه استاد این دوره نتوانسته مفاهیم را به صورت کامل توضیح بده و فقط با اشاره و تیتر وار گفتن از کنار مباحث گذشته
مخصوصا قسمت Flexbox در فصل دوم که پیشنهاد میشه تیم دانشجویار حداقل این یک ویدیو را برای بررسی کیفیت دوره مشاهده کرده و در مورد دوره تصمیم گیری کنند.
من این دوره را نذر آموزشی دانشجویار به صورت رایگان تهیه کردم و از این تیم متشکرم اما در کل اگر بخواهیم برای آموزش این دوره باتوجه به تیتر های گفته شده از چت بات ها مثل chatgpt کمک بگیریم میشه گفت کارمون راه می افته
farhadkhosh دانشجوی دوره
این پایان هفته شما نرسید برای جاوا اسکریپت دو ماه دارید همین رو میگید
zahragorjian
سلام
جاوااسکریپت کی بارگذاری میکنید استاد؟
مهسا مروجی مدرس دوره
سلام وقتتون بخیر
دوره جاوااسکریپت در حال ضبط است و بزودی منتشر میشود .
mohammadgholamitoseh
سلام خسته نباشید اموزش بوت استرپ و جاوا اسکریپت و Tailwind جامع ؟و ابدیت ها ادامه دارند؟منظورم این که مباحث دیگ هم اضاف میشن؟
Moravejimahsa82 مدرس دوره
سلام وقتتون بخیر.
بله مبحث جاوااسکریپت به زودی اضافه میشه
saramahdavi13800
سلام مگه تو دوره نگفتید جاوااسکریپت و تیلویند هم هست ؟
پس چرا هنوز نیست
کی قراره اضافه بشه؟
علیرضا احمدی
سلام و درود. تیلویند تا پایان همین هفته و جاوا اسکریپت تا پایان ماه. ممنون از همراهی شما ❤️
کاربر دانشجوی دوره
ببخشید پایان مرداد منظورتونه
Ahmadho1998 دانشجوی دوره
سلام خسته نباشید. اطلاعات دوره هفت قدم هستش که آموزشTailwind CSS و Java script هم توشه ولی تو ویدیو ها نیست.
قراره آپلود بشه یا همینه؟
علیرضا احمدی
سلام و درود. در حال ضبط هستند و آپلود میشن.
Ahmadho1998 دانشجوی دوره
مرسی
Moravejimahsa82 مدرس دوره
سلام وقتتون بخیر.
تیلویند منتشر شده و جاوااسکریپت هم به زودی منتشر میشه.
ممنون از شکیبایی شما .
Elhammehrzad17041382 دانشجوی دوره
سلام
آیا جاوا اسکریپت هم در دوره هست؟ برای این میپرسم چون که اسمش رو توی سرفصل ها ندیدم
Moravejimahsa82 مدرس دوره
سلام.
بابت تاخیر در پاسخگویی عذر میخوام.
بله به زودی آپلود میشه.
سپهر
سلام وقتتون بخیر .
عذرخواهی می کنم با تهیه این دوره چه نوع سایت را می توانیم راه اندازی کنیم ؛ باتشکر.
Moravejimahsa82 مدرس دوره
سلام وقتتون بخیر
هدف کلی این دوره ساخت سایت های ریسپانسیو هست .
که شما میتونید هم با کمک دو فریم ورک گفته شده و هم بدون این دو صفحات سایتتون رو بسازید .
در واقع وبسایت های شما بصورت استاتیک خواهد بود
replywp دانشجوی دوره
سلام خدمت شما آموزش Tailwind CSS را کی شروع می کنید آیا با Tailwind CSS پروژه هم در نظر دارید ؟
Moravejimahsa82 مدرس دوره
سلام.
بابت تاخیر در پاسخگویی عذر میخوام.
به زوی قسمت Tailwind آپلود میشه.
Mohsen
سلام من میخام پلاگین emmet رو روی html نصب کنم اون قسمت سرچش بالا نمیاد چیکار کنم ؟
Moravejimahsa82 مدرس دوره
سلام
اگر از vs code استفاده میکنید به صورت دیفالت داخل برنامه emmet نصب هست و اگر براتون نمایش داده نمیشه موقع نوشتن کلید های ترکیبی ctrl+space رو بزنید تا قسمت پیشنهاد کد براتون نمایش داده بشه.
کاردان
من اشکالاتم رو کجا میتونم بپرسم
تو قسمت ۵ مفاهیم تکمیلی html لینک یا عکس رو تو src قرار میدم ولی باز نمیشه
Moravejimahsa82 مدرس دوره
سلام وقت بخیر.
شما میتونید در قسمت پرسش و پاسخ سوالاتتونو بپرسید.
و برای مشکلی که پیش اومده ، باید حتما در پوشه پروژه ، یک پوشه دیگه برای عکس هاتون قرار بدین و اون رو لینک کنید به پروژه ( طبق روندی که در فیلم توضیح داده شده )