درباره دوره
دوره ویژه Front End همراه با تخصص UI/UX
برنامه نویسی Front End چیست و به چه کسی برنامه نویس فرانت اند میگویند ؟
Front end developer به کسی گفته می شود که کدهای سمت فرانت یا UI را می نویسد. آنچه کاربر می بیند و با آن تعامل دارد مربوط به بخش فرانت اند می باشد. برنامه نویس فرانت اند داده هایی که از سمت سرور فراخوانی می شود را برای کاربر به شکل تعاملی و با سرعت بالا به نمایش می گذارد. فرانت اند این کار را با طراحی یک قالب قابل تعامل با کاربر انجام می دهد.
برنامه نویس فرانت اند با تکنولوژی هایی مانند HTML ،CSS ،jQuery و JavaScript و فریم ورک های پیشرفته ای نظیر React JS و Angular JS و Vue.JS کار می کند.
برنامه نویس فرانت اند در واقع طراح قسمت های ظاهری وب سایت است. در واقع، وقتی شما وارد یک وب سایت می‌شوید، تمام چیزی که با چشم می‌بینید شامل طراحی های یک برنامه نویس فرانت اند است.
PWA یا Progressive Web App (برنامه وب پیشرفته) یک نوع برنامه وب است که به کاربران تجربه‌ای مشابه با برنامه‌های بومی (native apps) ارائه می‌دهد. PWAها با استفاده از فناوری‌های وب مانند HTML، CSS و JavaScript ساخته می‌شوند و می‌توانند در مرورگرها اجرا شوند. اما ویژگی‌هایی دارند که آن‌ها را از برنامه‌های وب معمولی متمایز می‌کند.
ویژگی‌های PWA:
1. قابلیت نصب:
– PWAها می‌توانند به راحتی بر روی صفحه اصلی دستگاه‌های موبایل یا دسکتاپ نصب شوند، بدون نیاز به دانلود از فروشگاه‌های اپلیکیشن.
2. آفلاین بودن:
– PWAها می‌توانند به کاربران اجازه دهند تا به محتوای خود حتی در صورت عدم اتصال به اینترنت دسترسی داشته باشند. این ویژگی به وسیله استفاده از Service Workers فراهم می‌شود.
3. سرعت بالا:
– PWAها بهینه‌سازی شده‌اند تا بارگذاری سریع‌تری داشته باشند. این امر به کاربران تجربه کاربری بهتری ارائه می‌دهد.
4. پاسخگویی (Responsive):
– PWAها به گونه‌ای طراحی شده‌اند که بر روی انواع دستگاه‌ها (موبایل، تبلت، دسکتاپ) به خوبی کار کنند و تجربه کاربری یکسانی را ارائه دهند.
5. اعلان‌های فشاری (Push Notifications):
– PWAها می‌توانند اعلان‌های فشاری ارسال کنند، مشابه برنامه‌های بومی، که به کاربران امکان می‌دهد از بروزرسانی‌ها و اطلاعات جدید مطلع شوند.
6. امنیت:
– PWAها باید از HTTPS استفاده کنند که امنیت بیشتری را برای کاربران فراهم می‌کند.
مزایای PWA:
– کاهش هزینه و زمان توسعه: با استفاده از PWA، توسعه‌دهندگان می‌توانند تنها یک کد پایه برای تمام پلتفرم‌ها ایجاد کنند، به جای اینکه برای هر سیستم‌عامل یک برنامه جداگانه بسازند.
– تجربه کاربری بهتر: PWAها می‌توانند تجربه‌ای مشابه با برنامه‌های بومی ارائه دهند، بدون نیاز به نصب از فروشگاه‌های اپلیکیشن.
– دسترس‌پذیری: PWAها می‌توانند به راحتی از طریق مرورگرها دسترسی پیدا کنند و نیازی به نصب ندارند.
پیش نیازه های دوره
آشنایی حرفه ای با کامپیوتر
داشتن مدرک ICDL
دستاورد های شما پس از گذراندن دوره
در این دوره آموزشی جامع، کلیه مهارت های مورد نیاز در بخش فرانت اند بر اساس جدیدترین نیازهای بازار کار در کشورهای اروپایی بلاخص آلمان و بازار کار شرکت های تاپ داخلی طراحی و تدوین شده است.
مخاطب هدف دوره
صاحبان مشاغل جدید یا تاسیس شده که می خواهند سود بیشتری کسب کنند
طراحان وب سایت که می خواهند مهارت خود را ارتقا دهند
علاقه مندان به یادگیری دوره طراحی وب
سوالات متداول
مدت این دوره چند ساعت است ؟
آیا پس از گذراندن دوره مدرکی دریافت میکنم؟
سرفصل های دوره
MODULE 1: 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 2: 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 3: 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 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: Tailwind CSS
Introduction to Tailwind CSSUnderstanding the Utility-first CSS approach
Comparing Tailwind CSS with other frameworks like Bootstrap
Installation and Configuration of Tailwind
Installation via NPM or CDN
Setting up the tailwind.config.js file
Structure of Tailwind Classes
Understanding utility classes
Concepts of Base, Components, and Utilities
Using classes for colors, spacing, sizing, and typography
Responsive Design with Tailwind
Mobile-first design concept
Using responsive classes
States and Variants in Tailwind
Hover, focus, and other states
Working with conditional classes
Customizing Tailwind
Creating custom classes
Using Tailwind functions for theme creation
Advanced Tips and Optimization
Removing unused classes with PurgeCSS
Advanced directives and functions
Working with Tailwind Plugins
Installing and using official and third-party plugins
Examples: Tailwind Forms, Tailwind Typography
Real-World Project Implementation
Building a basic UI with Tailwind
Reviewing and optimizing code in real-world projects
MODULE 6: 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 7:TypeScript
IntroductionBasic Data Types
Destructuring & Spread
Working With Classes
Classes & Interface
Advanced Types
Generics
Decorators
Modules
Namespaces
Ambients
MODULE 8: 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 9:Angular
IntroductionArchitecture
Directives and Templates
Data Binding
Working with CSS Styles
Advance Components
Features
Template Driven Forms
Model Driven Forms
Working with Pipes
Custome Attribute and
Validators
Dependency Injection
Services
Routing
Modules
CRUD Operations using http Service
MODULE 10:React
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
اساتید دوره :
مدت زمان
16 ساعتتاریخ شروع
1403/10/06محل برگزاری
لابراتوار A مدت زمان
10 ساعتتاریخ شروع
1403/09/01محل برگزاری
لابراتوار A
با فریمورک ری اکت
مدت زمان
175 ساعتتاریخ شروع
1403/09/24محل برگزاری
لابراتوار Cدرخواست مشاوره ثبت نام
درصورت نیاز به مشاوره برای ثبت نام فرم درخواست زیر را تکمیل فرمایید.