UI/UX with React Training in Sankarankovil

Introduction to Graphics Tools:

• What is Graphic Design?
• What are the tools used for graphic design
• Why learn Graphic Design
• Scope of Graphic Design
• Understanding of Graphics Design Tools
• Understanding of various elements of the tools
• Understanding master functions of the tools
• Understanding design possibilities of tools

Introduction to UI/UX Design:

• Overview of UI and UX
• Basics of UI and UX.
• Importance of a (user-centered design) UCD approach.
• Fundamental Principles
• Usability principles.
• Accessibility and inclusive design.

Design Tools

• Sketch, Figma, Adobe XD.
• Hands-on experience with design tools.
• Collaborative design workflows.

Introduction to Figma

• Overview of Figma and its features
• Understanding the Figma interface: Layers, tools, and panels
• Setting up Figma projects and organizing files

Design Fundamentals

• Introduction to design principles: Layout, typography, color, and imagery
• Creating and managing design assets in Figma
• Hands-on exercises: Designing basic UI elements.

Working with Frames and Shapes

• Understanding frames and their role in Figma
• Using shapes, vectors, and text tools to create designs
• Techniques for aligning and distributing objects in Figma

Typography and Text Styles

• Typography fundamentals: Font selection,spacing, and hierarchy.
• Creating and applying text styles in Figma
• Best practices for working with text in UI design.

Working with Components and Libraries

• Overview of vulnerability management lifecycle
• Vulnerability scanning, assessment, and prioritization
• Patch management strategies and best practices.

Responsive Design and Constraints

• Understanding responsive design principles
• Using constraints to create responsive layouts in Figma.
• Designing for multiple screen sizes and devices

Prototyping in Figma

• Introduction to prototyping: Transitions, animations, and interactions
• Creating interactive prototypes in Figma
• Testing and sharing prototypes with stakeholders.

Advanced Techniques in Figma

• Mastering advanced features: Auto layout, constraints, and variants
• Using plugins to enhance productivity in Figma
• Tips and tricks for efficient design workflow

HTML Basics

• Introduction
• What is difference between HTML and HTML5?
• HTML Overview
• DOCTYPE
• HTML Tag Vs Element
• HTML Attributes

Basic Formatting Tags

• Basic HTML Tags
• Basic Formatting Tags

HTML Grouping Using Div and Span

• Div Tag
• Span Tag

HTML Lists

• Unordered List
• Ordered List
• Definition List

Images

• Image and Image Mapping

Tables

• <table>
• <tr>, <th>
• <caption>
• <thead>, <tfoot> , <tbody>
• <colgroup>

Frames

• Iframes
• Attributes Using Iframe as the Target

Forms

• HTML Form Elements
• HTML Input Types
• HTML Input Attributes

HTML Media

• HTML Audio and HTML Video

• What is CSS?
• CSS Inclusion
• Selectors
• Colors
• Background
• Border
• Margin
• Padding
• Height
• Width
• Sizes
• Box-Model
• CSS Fonts
• CSS Text
• CSS links
• CSS Tables
• Display, Position
• Margin property
• Padding property
• CSS Lists Styles
• CSS Cursors
• CSS Overflow
• CSS Position
• Pseudo Classes
• Pseudo Elements
• Animation
• Transform
• Transition
• Media Query
• Box Sizing Flex and Grid

• Introduction
• Variable Declaration
• Arithmetic Operations
• Array
• Array Methods
• String
• String Method
• Math Module
• Condition Statements
• Loops
• Set, Map
• Events
• Module
• Oops
• Asynchronous
• Promise
• Async, Await
• FetchApi
• JavaScript Function
• Function Closure
• Regular Expression
• Error Handling DOM
• Event Listener
• Date Methods
• Object

Introduction to React

• What is React?
• Why React?
• React version history
• React 16 vs React 15
• Just React – Hello World
• Using create-react-app
• Anatomy of react project
• Running the app
• Debugging first react app

Templating using JSX

• Working with Create Element
• Expressions
• Using logical operators
• Specifying attributes
• Specifying children

It’s all about components

• Significance of component architecture
• Types of components
• Functional
• Class based
• Pure
• Component Composition

Working with state and props

• What is state and it significance
• Read state and set state
• Passing data to component using props
• Validating props using prop Types
• Supplying default values to props using default Props

Rendering lists

• Using React key prop
• Using map function to iterate on arrays to generate elements

Event handling in React

• Understanding React event system
• Understanding Synthetic event
• Passing arguments to event handlers

Understand component lifecycle

• Understand component lifecycle

Working with forms

• Controlled components
• Uncontrolled components
• Understand the significance to default Value prop
• Using react ref prop to get access to DOM element

Routing with react router

• Setting up react router
• Understand routing in single page applications
• Working with Browser Router and Hash Router components
• Configuring route with Route component
• Using Switch component to define routing rules
• Using Switch component to define routing rules
• Making routes dynamic using route params
• Working with nested routes
• Working with nested routes
• Redirect routes using Redirect Component
• Using Prompt component to get consent of user for navigation
• Path less Route to handle failed matches

Just Redux

• What is redux
• Why redux
• Redux principles
• Install and setup redux
• Creating actions, reducer and store

Immutable.js for immutable data structures

• What is js?
• Immutable collections
• Lists
• Maps
• Sets

React Redux

• What is React Redux
• Why React Redux
• Install and setup
• Presentational vs Container components
• Understand high order component
• Understanding mapStateToProps and mapDispatchtToProps usage

New Features in React JS

• Understand error boundaries (new in React 16)
• Understand react portals (new in React 16)

Server-side rendering with React

• What is server-side rendering (SSR)?
• Why SSR
• Working with render To String and render To Static Markup method