درباره دوره
دوره ویژه آموزش FrontEnd با فریم ورک React و همراه با تخصص UI/UX در i3center
یادگیری طراحی رابط کاربری و برنامه‌نویسی فرانت‌اند با جدیدترین تکنولوژی‌ها
برنامه‌نویسی Front-End چیست؟
برنامه‌نویسی فرانت‌اند (Front-End) به بخشی از توسعه وب گفته می‌شود که مستقیماً با ظاهر و تجربه کاربری (UI/UX) در ارتباط است.
به کسی که رابط کاربری سایت یا اپلیکیشن را طراحی و کدنویسی می‌کند، توسعه‌دهنده فرانت‌اند (Front-End Developer) گفته می‌شود. هرآنچه کاربر روی صفحه وب می‌بیند و با آن تعامل دارد — از دکمه‌ها و منوها تا انیمیشن‌ها و فرم‌ها — حاصل کار برنامه‌نویس فرانت‌اند است.
نقش برنامه‌نویس فرانت‌اند در طراحی وب
توسعه‌دهنده فرانت‌اند داده‌هایی که از سرور دریافت می‌شود را با استفاده از کدنویسی و طراحی تعاملی، به شکلی زیبا، سریع و کاربرپسند نمایش می‌دهد. هدف او ایجاد تجربه‌ای روان و جذاب برای کاربر است تا تعامل با وب‌سایت ساده و لذت‌بخش باشد.
برنامه‌نویس فرانت‌اند در واقع طراح بخش‌های ظاهری وب‌سایت است. هر تصویر، رنگ، منو یا افکتی که روی وب‌سایت مشاهده می‌کنید، نتیجه کار دقیق و هنرمندانه‌ی یک توسعه‌دهنده فرانت‌اند است.
تکنولوژی‌ها و ابزارهایی که در فرانت‌اند استفاده می‌شود:
HTML5
css3
javascript
bootstrap
next.js
tailwind-css
react
typescript
react-ts
برای ساخت رابط‌های کاربری مدرن، توسعه‌دهندگان فرانت‌اند از ابزارها و فریم‌ورک‌های متنوعی استفاده می‌کنند، از جمله:
- HTML5 – ساختار صفحات وب
- CSS3 – استایل‌دهی و طراحی ظاهری
- JavaScript – افزودن تعامل و منطق به صفحات
- Tailwind CSS – طراحی واکنش‌گرا و مدرن
- Sass – مدیریت حرفه‌ای استایل‌ها و پیش‌پردازنده CSS
- Bootstrap – طراحی سریع و واکنش‌گرا
- Next.js – توسعه اپلیکیشن‌های React با رندر سمت سرور (SSR) و سئو قوی‌تر
- Express.js – ارتباط با سرور و پیاده‌سازی بک‌اند ساده برای پروژه‌های فرانت‌اند
- React JS – فریم‌ورک‌های قدرتمند برای ساخت رابط‌های پیچیده
- TypeScript – برنامه‌نویسی ایمن و پیشرفته با تایپ‌ها
- React TS – استفاده از TypeScript در پروژه‌های React برای کدنویسی حرفه‌ای
چرا یادگیری Front-End و UI/UX مهم است؟
در دنیای امروز که همه‌چیز دیجیتال شده، داشتن مهارت در طراحی UI/UX و برنامه‌نویسی Front-End یکی از پرتقاضاترین و پردرآمدترین تخصص‌های حوزه فناوری است. با یادگیری این مهارت‌ها، می‌توانید به‌عنوان توسعه‌دهنده فرانت‌اند حرفه‌ای در شرکت‌های بزرگ فعالیت کنید یا پروژه‌های فریلنسری بگیرید.
در این دوره چه یاد می‌گیرید؟
در دوره ویژه Front-End همراه با UI/UX، از پایه تا پیشرفته با طراحی رابط کاربری، تجربه کاربری و فریم‌ورک‌های روز دنیا مثل React JS و Tailwind CSS آشنا می‌شوید. این دوره کاملاً پروژه‌محور است و پس از پایان آن می‌توانید وب‌سایت‌های مدرن و حرفه‌ای طراحی کنید.
مزایای این دوره:
-
آموزش گام‌به‌گام از صفر تا تسلط کامل
-
ترکیب طراحی UI/UX با برنامه‌نویسی فرانت‌اند
-
اجرای پروژه‌های واقعی برای ساخت رزومه
-
پشتیبانی تخصصی در طول دوره
-
آمادگی کامل برای ورود به بازار کار
📞 برای مشاوره رایگان و اطلاع از شهریه دوره FrontEnd ، همین حالا تماس بگیرید:
www.i3center.com
📍 مشهد – بلوار فردوسی – نبش خیابان ثمانه – پلاک 163 آموزشگاه بین‌الملل (i3center)
📱 شماره تماس: 05137632812
📧 wa.me/989011728512
پیش نیازه های دوره
آیا آماده‌اید تا وارد دنیای خلاق، مدرن و پردرآمد طراحی وب و فرانت‌اند شوید؟
خبر خوب این است که دوره جامع Front-End و UI/UX آموزشگاه انفورماتیک بین‌الملل به‌گونه‌ای طراحی شده که حتی اگر هیچ تجربه‌ای در کدنویسی نداشته باشید، می‌توانید از صفر شروع کنید و به یک توسعه‌دهنده حرفه‌ای رابط کاربری تبدیل شوید.
ما باور داریم مهم‌ترین پیش‌نیاز برای موفقیت در این مسیر، اشتیاق به طراحی، یادگیری و خلق تجربه‌های دیجیتال زیبا است.
با این حال، داشتن چند مهارت پایه می‌تواند یادگیری شما را سریع‌تر و لذت‌بخش‌تر کند:
1= آشنایی مقدماتی با کامپیوتر و اینترنت: مثل کار با مرورگرها، مدیریت فایل‌ها و جستجو در وب.
2= درک ساده از عملکرد وب‌سایت‌ها: اینکه یک سایت چگونه در مرورگر بارگذاری می‌شود و کاربر با آن تعامل دارد.
3= ذوق و سلیقه در طراحی: علاقه‌مندی به رنگ‌ها، چیدمان، تجربه کاربری و رابط‌های بصری جذاب.
4= منطقی و تحلیلی فکر کردن: مهارتی ضروری برای درک کدنویسی، رفع خطا و پیاده‌سازی طراحی‌های پیچیده.
5= دسترسی به لپ‌تاپ یا کامپیوتر شخصی: برای تمرین با HTML، CSS، JavaScript و اجرای پروژه‌های React و Next.js.
نگران نباشید! این دوره از پایه‌ترین مفاهیم طراحی و برنامه‌نویسی وب شروع می‌شود و شما را گام‌به‌گام تا سطح حرفه‌ای و آماده بازار کار هدایت می‌کند.
حتی اگر هیچ تجربه‌ای در برنامه‌نویسی ندارید، با پشتیبانی کامل اساتید و پروژه‌های عملی، در پایان دوره به یک توسعه‌دهنده واقعی فرانت‌اند با مهارت‌های React و UI/UX تبدیل خواهید شد.
اگر به دنبال بهترین دوره فرانت‌اند در ایران با رویکردی کاملاً کاربردی، پروژه‌محور و مطابق نیاز بازار کار هستید، همین امروز در دوره Front-End آموزشگاه انفورماتیک بین‌الملل ثبت‌نام کنید و مسیر ورود خود به دنیای برنامه‌نویسی وب را آغاز نمایید.
دستاورد های شما پس از گذراندن دوره
پس از اتمام دوره فرانت‌اند و UI/UX، شما فقط یک «دانشجو» نخواهید بود؛ بلکه یک توسعه‌دهنده حرفه‌ای رابط کاربری (Front-End Developer) هستید که آماده ورود به بازار کار داخلی و بین‌المللی است.
دستاوردهای شما فراتر از یادگیری چند زبان برنامه‌نویسی است — شما مهارت‌هایی واقعی کسب می‌کنید که مسیر آینده شغلی‌تان را تضمین می‌نماید.
________________________________________
مهارت‌هایی که در پایان دوره به دست می‌آورید:
• تسلط عملی بر HTML5، CSS3 و JavaScript: از اصول پایه تا مفاهیم پیشرفته برای ساخت صفحات مدرن و واکنش‌گرا.
• آشنایی کامل با فریم‌ورک‌های روز دنیا: تسلط بر React JS، Next.js و کار با Express.js برای ایجاد اپلیکیشن‌های قدرتمند و بهینه.
• درک عمیق از طراحی UI و تجربه کاربری (UX): یادگیری اصول طراحی کاربرمحور، رنگ‌شناسی، تایپوگرافی و روانشناسی تعامل کاربر.
• پیاده‌سازی طراحی‌های حرفه‌ای با Tailwind و Bootstrap: ساخت رابط‌های کاربری زیبا، ریسپانسیو و سازگار با تمام دستگاه‌ها.
• کار با API و مدیریت داده‌ها: توانایی ارتباط بین فرانت‌اند و بک‌اند با استفاده از Fetch و Axios.
• بهینه‌سازی سرعت و سئو (SEO) سایت: یادگیری روش‌های افزایش سرعت بارگذاری، بهبود ساختار HTML و ارتقای رتبه در موتورهای جستجو.
• مدیریت پروژه‌ها با Git و GitHub: همکاری تیمی، کنترل نسخه و ساخت رزومه حرفه‌ای در دنیای واقعی توسعه وب.
• ساخت پروژه‌های واقعی و قابل ارائه (Portfolio): طراحی وب‌سایت‌ها و اپلیکیشن‌های مدرن که قابل نمایش در رزومه شغلی شما هستند.
• آمادگی ورود به بازار کار: آشنایی با نیازهای واقعی شرکت‌ها، مصاحبه‌های استخدامی و مسیر رشد شغلی در حوزه طراحی وب.
• تسلط بر مفاهیم UI/UX مدرن: درک تفاوت طراحی زیبا و طراحی مؤثر، و توانایی خلق تجربه‌ای کاربرپسند و هدف‌محور.
• دریافت گواهینامه معتبر انفورماتیک بین‌الملل: مدرکی رسمی و قابل استناد که مهارت شما را در حوزه طراحی و توسعه فرانت‌اند تأیید می‌کند.
________________________________________
نتیجه نهایی:
در پایان این مسیر، شما به یک توسعه‌دهنده حرفه‌ای Front-End با تخصص در React و UI/UX تبدیل خواهید شد — فردی که می‌تواند رابط‌های کاربری مدرن طراحی کند، در پروژه‌های واقعی شرکت کند، و آماده ورود به بازار کار پرتقاضای برنامه‌نویسی وب باشد.
اگر به دنبال بهترین دوره فرانت‌اند در مشهد با رویکردی کاملاً کاربردی، پروژه‌محور و مطابق با نیاز بازار کار هستید، همین امروز در دوره فرانت‌اند آموزشگاه انفورماتیک بین‌الملل ثبت‌نام کنید و مسیر شغلی درخشان خود را آغاز نمایید.
مخاطب هدف دوره
پاسخ ساده است: برای هر کسی که می‌خواهد آینده شغلی خود را در دنیای توسعه وب و فرانت‌اند با React و UI/UX بسازد.
1= مبتدیان مطلق: افرادی که عاشق طراحی وب و برنامه‌نویسی هستند اما هیچ تجربه‌ای در HTML، CSS یا JavaScript ندارند. این دوره از پایه‌ترین مفاهیم شروع می‌شود و آنها را قدم‌به‌قدم به سطح حرفه‌ای می‌رساند.
2= دانشجویان و فارغ‌التحصیلان رشته‌های IT و کامپیوتر: کسانی که می‌خواهند مهارت‌های کاربردی و پرتقاضا مثل React، Next.js و طراحی UI/UX را به رزومه خود اضافه کنند.
3= توسعه‌دهندگان وب و کارمندان IT: افرادی که در حال حاضر با وب و برنامه‌نویسی سر و کار دارند اما می‌خواهند مهارت‌های فرانت‌اند حرفه‌ای و طراحی رابط کاربری را یاد بگیرند تا جایگاه شغلی خود را ارتقا دهند.
4= جویندگان کار و علاقه‌مندان به تغییر شغل: کسانی که به دنبال یک شغل پایدار، پردرآمد و آینده‌دار در حوزه توسعه وب هستند.
5= افراد علاقه‌مند به پروژه‌های بین‌المللی و فریلنسینگ: کسانی که می‌خواهند با تسلط بر React و Next.js و داشتن نمونه‌کار حرفه‌ای، فرصت‌های شغلی داخلی و خارجی یا پروژه‌های آزاد (Freelance) کسب کنند.
6= کارآفرینان و علاقه‌مندان به ایجاد استارتاپ: کسانی که می‌خواهند وب‌اپلیکیشن یا سرویس خود را بسازند و به بازار ارائه دهند، با توانایی طراحی رابط کاربری مدرن و پیاده‌سازی عملکردهای تعاملی.
اگر در هر یک از این دسته‌ها قرار دارید، دوره فرانت‌اند با React و UI/UX آموزشگاه انفورماتیک بین‌الملل دقیقا برای شما طراحی شده است.
این دوره همان مسیر حرفه‌ای است که شما را از یک علاقه‌مند به یک توسعه‌دهنده فرانت‌اند و طراح رابط کاربری حرفه‌ای تبدیل می‌کند و فرصت‌های شغلی نامحدودی را پیش رویتان قرار می‌دهد.
سوالات متداول
آیا بعد از اتمام دوره مدرک یا گواهینامه دریافت می‌کنم؟
این دوره برای چه کسانی مناسب است؟
آیا نیاز به پیش‌زمینه برنامه‌نویسی دارم؟
پس از پایان دوره چه مهارت‌هایی کسب می‌کنم؟
آیا پروژه عملی هم انجام می‌دهیم؟
آیا این دوره برای بازار کار مناسب است؟
مدت زمان و نحوه برگزاری دوره چگونه است؟
سرفصل های دوره
MODULE 1: UI/UX
1.ترسیم نقشه راه طراح شدن Roadmap2.مبانی تجربه طراحی کاربر Fundamentals of UX Design
3.کاربر پژوهشی User Research (UR)
4.روان شناسی شناختی Cognitive psychology
5.اصول گشتالت Gestalt
6.مدل های ذهنی Mental Models
7.بار شناختی Cognitive Load
8.الگوهای شناختی Cognitive patterns
9.سلسله مراتب بصری Visual hierarchy
10.ناوبری Navigation
11.طراحی تعاملInteraction Design (IxD)
12.کاربرد پذیری Usability
13.دسترسی پذیری Accessibility
14.بریف پروژهProject brief
15.طراحی رابط کاربری UI Design(UID)
16.روانشناسی رنگ ها
17. روانشناسی متن ها
18.wireframe وایرفریم
19.مبانی طراحی رابط کاربر Fundamentals of UI Design
20.ابزار طراحی رابط کاربری Design tools
21.فیگما Figma
22.فریمر Framer
23.افزونه های کاربری Plugins
24.الگوهای طراحیDesign patterns & Trends
25.طراحی بصری visual design
26.نسخه اولیه prototype
27.انتقال طرح HandOff
28.معرفی ابزار Tools
29.محدودیت ها و پیاده سازی Limitation & Implementation
30.راهنمای مسیر شغلی Business tipes
31.ارائه پروژه نهایی Final project
MODULE 2: HTML
1. Introduction to HTML2. Html DocType
3. Head & body
4. Heading & Paragraphs
5. Attributes & Comments
6. Formatting Tags & iframe
7. Links in Html
8. Images & image map in Html
9. Picture Tags
10. Favicon
11. Tables
12. List in Html
13. Inline & Block Elements
14. Span & Div Tags
15. Id & Class Property
16. Layout & Semantic Tags
17. Entities & Computer Code Elements
18. Forms in Html
19. Form Attributes
20. Svg & Canvas
21. Audio & Video
MODULE 3: CSS
1. Introduction CSS2. Applying CSS to HTML
3. Selectors
4. Color, gradient Property
5. Background Property
6. Border Property
7. Margin Property
8. Padding Property
9. CSS Units, Width, Height Property
10. Max/Min – Widht/Height
11. BoxModel, BoxSizing Property
12. Outline Property
13. Alignment Text Property
14. Transformation, Decoration Property
15. Text Spacing Property
16. Text Shadow
17. Font, FontFace Rule
18. PseudoClasses, PseudoElements
19. List Style Property
20. Display Property
21. Flow
22. Position Property
23. Z index Property
24. Overflow Property
25. FlexBox
26. Opacity, Visibility Property
27. Attribute Selectors
28. Specificity & Priority
29. Functional Mathematics
30. Box Shadow Property
31. Text Effects
32. Transitions
33. KeyFrames
34. After, Before Property
35. Responsive, Media Queries
36. Float Property
37. Overlay Property
MODULE 4: JAVASCRIPT
1. Introduction to JavaScript2. Concept and variable defining
3. DataType in Javascript
4. Comment
5. Data Transfer User
6. Convert data types
7. Logical operators
8. Concat in strings
9. NaN Method
10. Comparison Operators
11. If, And, Switch Case, Ternary, for, While, map
12. Functional declaration, expressions
13. Property in string
14. Assignment Operators
15. Arrays
16. Objects
17. Includes method
18. Between data types Primitive and Reference
19. Functional Anonymous and IIFE
20. SetInterval, SetTimeout
21. Flag in Programming
22. DOM
23. Append Element in DOM
24. Event in JS
25. Dataset in DOM
26. Error Handling in JS
27. BOM
28. ECM
29. Memory Heep, Call Stack
30. Event delegation, event bubbling, event capturing
31. Composition in Function and High Order
32. Strict Mode
33. Arrow Function
34. Spread Syntax
35. Rest Operator
36. Destructuring in Arrays
37. Template in Literal
38. String Padding
39. Get Trap, Set Trap in Proxy
40. ASI in JS
41. API in JS
42. Mutate and Immutate
43. Ajax
44. HTTP Methods
45. SPA in JS
46. Asyns, Await, Promise
MODULE 5: NEXT JS
Full knowledge of Next.js framework and its folder structureUnderstanding Server-Side Rendering (SSR) and Static Site Generation (SSG)
Creating pages and routing in Next.js
Using API Routes for server-side logic
Fetching data with getStaticProps and getServerSideProps
Working with Dynamic Routes
Image optimization with next/image
Link component and client-side navigation
Deploying Next.js applications on Vercel or other platforms
Integrating React components within Next.js pages
MODULE 5: EXPRESS JS
Full knowledge of Express frameworkCreating server with Express
Routing (GET, POST, PUT, DELETE)
Middleware usage
Handling requests & responses
Serving static files & Templates
Working with JSON & Database (CRUD)
Error handling & Security
RESTful API creation
Authentication & Authorization
MODULE 7: BOOTSTRAP
1. To use Bootstrap's predefined classes and Bootstrap's grid system2. To create responsive navbars
3. To style typography, tables, and forms with Bootstrap
4. To use the most popular Bootstrap components
5. To use an array of Bootstrap Utilities
MODULE 8: Sass
Setting up and working with Sassv compilation toolsFamiliarity with different features of Sass
Familiarity with how variables work in Sass
Introduction to nesting in Sass
Introduction to parcels in Sass
Introduction to mixins in Sass
Getting to know and working with the extend method in Sass
Referencing the parent element using & in Sass Getting to know the types of comments in Sass Working with math operators in Sass Working with colors and their associated functions in Sass Introduction to lists in Sass Working with @content in Sass Getting to know the list of arguments and the if conditional command Introduction to loops in Sass
MODULE 9: Git and GitHUB
What is Git and GitHUBInstalling Git
Branching
Pull Requests
Common Workflows
Advanced Topics
Config – push – commit – add – clone – status - Do and Don’t
MODULE 10:React JS
1. Introduction2. Templating using JSX
3. Components
4. State and Props
5. Lifecycle of Components
6. Rendering List
7. Portals
8. Error Handling
9. Routers
10. Redux
11. Immutable.js
12. Redux Saga
13. Service side rendering
14. Unit testing
15. Web Pack
MODULE 11:TYPESCRIPT
TypeScript setup in ReactTyping props & state
Functional components & hooks with types
Typing events & forms
Generics & Context API
Custom hooks & refs typing
Working with external libraries
MODULE 12:React Ts
React + TypeScript setupJSX & Components typing
Props & State with types
Functional & Class components
React Router & Redux typing
Error handling & Portals
Server-side rendering & Testing
+ اساتید دوره :
کمک مدرس دوره :
امیرعلی اخباری
کمک مدرس دوره :
داریوش رحمانی
Python for Data Science, AI & Development
با دوره پایتون با رویکرد علم داده، مهارت‌های تخصصی در زمینه علم داده، یادگیری ماشین و هوش مصنوعی را بر اساس استانداردهای جهانی IBM فرا بگیرید و مسیر شغلی خود را به سطحی حرفه‌ای ارتقا دهید..
مدت زمان
100 ساعتتاریخ شروع
1404/09/15محل برگزاری
لابراتوار B
Knight of Computer Networks
برای جهش در مسیر شغلی خود در دنیای فناوری آماده‌اید؟ با دوره شوالیه شبکه، تخصص‌های پیشرفته‌ای در زمینه‌های امنیت و رایانش ابری کسب کنید و جایگاه خود را در بازار کار ارتقا دهید.
مدت زمان
360 ساعتتاریخ شروع
1404/09/13محل برگزاری
لابراتوار C
Master Full-Stack Web Developer
با تسلط بر فریم‌ورک‌های قدرتمند ری‌اکت و نود جی‌اس به یک توسعه‌دهنده فول‌استک حرفه‌ای تبدیل شوید. این دوره کاملاً عملی، شما را با ساخت پروژه‌های واقعی برای ورود به بازار کار آماده می‌کند.
مدت زمان
250 ساعتتاریخ شروع
1404/08/25محل برگزاری
لابراتوار Bدرخواست مشاوره ثبت نام
درصورت نیاز به مشاوره برای ثبت نام فرم درخواست زیر را تکمیل فرمایید.