SIVASOFT TECHNOLOGIES PRIVATE LIMITED - India’s Leading Classroom and Online Training Company (2012-)

Apply For Course

🚀 100% Offline / In-Person Classroom and Online Job-Oriented Programs: Master Front-End UI Technologies with React

Group Training Fee: ~~₹14,000/-~~ ➡️ Offer: ₹7,000/-

One-On-One Training Fee: ~~₹80,000/-~~ ➡️ Offer: ₹40,000/-

Duration: 4 Months

🎓 Eligibility: Final Year / Any Graduates / Career Gap

👨‍🏫 Trainer (Completed 120+ Batches): Mr.Siva (15+Yrs of Exp) / Mr.Ravi (12+Yrs of Exp)

🌟 Offer: Valid only for 7 days

⏰ Daily: 2 hrs Live Class with Unlimited Lab

🏢 250+ Companies are Hiring from SivaSoft

🌐 Website: https://www.sivasoft.in

📚 Lifetime: Live Classes + Video Access

❓ Doubts Clarification: 7:00AM - 10:00PM (Live Classes, WhatsApp, LMS Portal, Zoom, Online students are welcome to visit our institute to clarify your doubts if possible.)

📝 Assignments, Quizzes, Interview Questions and System Tasks, 10+ Mock Interviews

🔗 Resume Preparation, LinkedIn Profile Creation, Portfolio Website Creation

🎓 Free Course Completion Certificate

📝 Free Internship Certificate

💼 100% Placement Support Until You Get a Job

💸 Salary Range: 2.5 – 60 LPA

🌐 Real-time Environment Terminology

💡 Tips and Tricks to Survive in Companies

✨ We offer One-on-One Demo Sessions to facilitate better interaction between students and trainers, ensuring all doubts and confusions are thoroughly clarified.

Fee: ₹3000 (for Soft Skills, Aptitude, and Reasoning)

🎤 Soft Skills Training (Optional)

🧠 Aptitude (Optional)

🧮 Reasoning (Optional)

Course Curriculum

1. Fundamentals of Web Technology
2. HTML
3. XHTML
4. CSS
5. CSS 3,4
6. Basic & Advanced Javascript
7. Async / Await
8. Ajax
9. JSON
10. HTML5
11. Bootstrap
12. Social Media Integrations
13. Search Engine Optimization
14. Google Analytics Integration
Project 1: HTML & CSS Project
Project 2: HTML5 & CSS3 Responsive Project with Floats
Project 3: HTML5 & CSS3 Responsive Project with Flexbox
Project 4: HTML5 & CSS3 Responsive Project with Grid
Project 5: JavaScript Project
Project 6: Bootstrap Responsive Project
15. Domain Registration & Web Hosting
16. ECMAScript
TypeScript
SASS / SCSS
Tailwind CSS
React (JavaScript (.js) & JavaScript XML (.jsx))
React (TypeScript (.ts) & TypeScript XML (.tsx))
Material UI
Redux
Jest (Testing Framework)
Figma
Developer Tools and Debugging
CRUD (Create, Read, Update, Delete)
RESTful APIs to fetch, send, and manipulate data from the server
JSON Web Token (JWT)
User Authentication and Authorization
Bitbucket / GitHub (Version Control with Git)
Jira
Confluence
Firebase / AWS Cloud / Docker / Kubernetes / Jenkins
ChatGPT, CoPilot, HackerRank, LeetCode, CodeChef
Postman
Troubleshooting & Debugging
Generative AI
Project 7: React
Deployment

1. Fundamentals of Web Technology

Network
Internet
Web Browsers
Web Servers
Web
Webpage
Website
Http
Https
Web Development

2. HTML

Introduction
- W3C
- Editors
- Tag
  - Empty Tag
  - Container Tag
- Attributes & Parameters
- Doctypes: DTD
- Structure Of HTML
- Basic Tags
  - html
  - head
  - title
  - body
- Tag vs Element
- Headings
- Formatting Tags
- Paragraph tag
- Pre tag
- abbr tag
- List
  - Ordered List
  - Unordered List
  - Nested List
  - Description List
- Iframe
- hr
- table
- JPG / PNG / GIF
- Image tag
  - File Paths
- Links
  - Image Link
  - Text Link
  - Email Link
- Quotation
- Citation
- Comments
- Colors
- Computer Code
- Entities
- Symbols
- Emojis
- Charset
- URL Encode
- Meta Tags
- Form tags
- Style Guide
- Deprecated tags
  - center
  - font
  - basefont
  - s
  - strike
  - u
  - applet
  - isindex
  - acronym
  - frame
  - frameset
  - noframes
  - embed
  - marquee
  - big
  - dir
  - spacer
  - tt
- Deprecated Attributes
  - align - caption, iframe, img, input, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, td, th, and tr.
  - hspace - img
  - vspace - img
  - width - hr, table, td, th, pre, img.
  - height - table, td, th, pre, img.
  - background - body
  - bgcolor - table, tr, td, th and body.
  - rules - table
  - border - table, img
  - cellpadding - table
  - cellspacing - table
  - size - hr
  - type - li, ol and ul
  - noshade - hr
  - char
  - charoff
  - color, face - font
  - marginwidth, marginheight - iframe, body
  - nowrap - td,th
  - size - font,hr
  - start - ol
  - valign - td, th, tr

3. XHTML

XHTML
Differences between HTML and XHTML

4. CSS

Introduction
Syntax
Types of StyleSheets
- Internal StyleSheets
- External StyleSheets
- Inline StyleSheets
- Compound StyleSheet
!important
Types of Selectors
- Simple
  - Universal
  - Element
  - Class
  - Element.class
  - Id
  - Element.id
  - Grouping
- Combinators
  - Descendant
  - Child
  - Adjacent
  - General
- Pseudo-class(Links)
- Pseudo-elements
- Attribute
Block & Inline
inline-block
Div's & Span tags
display
Visibility
Units
Box Model
- Border
  - border
  - border-color
  - border-style
  - border-width
  - border-bottom
    - border-bottom-color
    - border-bottom-style
    - border-bottom-width
  - border-left
    - border-left-color
    - border-left-style
    - border-left-width
  - border-right
    - border-right-color
    - border-right-style
    - border-right-width
  - border-top
    - border-top-color
    - border-top-style
    - border-top-width
- outline
  - outline-style
  - outline-width
  - outline-color
- margin
  - margin-bottom
  - margin-left
  - margin-right
  - margin-top
- padding
  - padding-bottom
  - padding-left
  - padding-right
  - padding-top
Font
- font-family
- color
- font-size
- Set Font Size With Pixels
- Set Font Size With em
- font-style
- font-variant
- font-weight
- font
Text
- Color
- letter-spacing
- Word-spacing
- line-height
- text-align
- text-align-last
- text-decoration
  - text-decoration-line
  - text-decoration-color
  - text-decoration-style
  - text-decoration-thickness
- text-indent
- text-transform
- vertical-align
- White-space
- Direction
- unicode-bidi
Background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
Image Sprites
Comments
Icons
Images
opacity
FORMS
Links
- a:link
- a:visited
- a:hover
- a:active
cursor
Lists
- list-style
- list-style-type
- list-style-position
- list-style-image
Tables
- border
- border-collapse
- width
- height
- text-align
- vertical-align
- padding
Dimension
- height
- width
- max-height
- min-height
- max-width
- min-width
Positioning
- bottom
- clip
- left
- overflow
- absolute
- fixed
- relative
- static
- right
- top
- z-index
- sticky
float & clear
Counters
Specificity
Math functions
Navigation (Menu) Bar
Dropdown Navigation Bar
Project 1: HTML & CSS Project

5. CSS 3,4

Introduction to CSS3
What's New in CSS3 and CSS4
border-image
box-shadow
text-shadow
border-radius
Image Reflection
background
- background-clip
- background-origin
- background-size
- Multiple Background Images
Color Keywords
Gradients
- Linear Gradients
- Radial Gradients
- Conic Gradients
text effects
- word-wrap
- text-overflow
- word-break
- writing-mode
Web fonts
Google fonts
2D Transforms
3D Transforms
RGBA
Box Sizing
Transitions
Animations
Style Images
object-fit
object-position
Masking
Multiple Columns
User Interface
Variables
Box-sizing
Flex
Media Queries
Orientation
favicon
Grid
Project 2: HTML5 & CSS3 Responsive Project with Floats
Project 3: HTML5 & CSS3 Responsive Project with Flexbox
Project 4: HTML5 & CSS3 Responsive Project with Grid
Content will be updated as per latest updates

6. Basic & Advanced Javascript

Introduction to JavaScript
Syntax
Statements
Types of Scripts
- Internal
- External
- Inline
Write / Writeln
innerHTML
innerText
textContent
console
Print
Popup Boxes
- alert
- confirm
- prompt
Naming Conventions
- Lower Camel Case
- Upper Camel Case
- Snake Case
- Kebab Case
- Screaming Snake Case
- Train Case
- Flat Case
- Upper Flat Case
- Title Case
- Sentence Case
- Toggle Case
Comments
Variables
Hoisting
Operators
- Arithmetic
- Assignment
- String
- Type
- Comparison
- Logical
Conditional Statements
- if
- if...else
- if...else if...else
- Switch
Loops
- while
- do...while
- for
- for...in
- for...of (ES6)
- Break
- Continue
Functions
- User-defined
- Syntax
- Parameters and Arguments
- Returning Values
- Self-Invoked
Functions
- Declaration
- Expression
- Self-Invoked
- this
  - call
  - apply
  - bind
- Closures
- Local and Global Variables
- Recursive Functions
- Built-in Functions
  - Global
  - Number
  - String
  - Array
  - Math
  - Date
  - JSON
  - Utility
Events
- Introduction
- Mouse Events
- Keyboard Events
- Form Events
- Document Events
- Window Events
- Event Bubbling
Page Redirection
Timing Events
- setTimeout
- setInterval
Built-in Objects
- Introduction
- Arrays
- Array Properties and Methods
- Number
- Strings
- Math
- Date
- Boolean
- Regexp
- Exception Handling (Errors)
  - try
  - catch
  - throw
  - finally
  - Fetch
  - Error Object Properties
  - JSON (JavaScript Object Notation)
- Object
  - Creating a JavaScript Object
  - JavaScript Keyword new
  - Properties
  - Adding Methods to an Object
  - Nesting
  - Display
  - Using an Object Constructor
  - Prototypes
  - Getter / Setter
  - Protection
Debugging
- console
- developer tools
- debugger
- try…catch
- breakpoints
- Network
DOM (Document Object Model)
- Introduction
- Methods
- Document
- Elements
- HTML
- Forms
- CSS
- Animations
- Events
- EventListener
- Navigation
- Nodes
- Collections
- Node Lists
Browser BOM
- Window
- Screen
- Location
- History
- Navigator
- Popup
- Timing
- Cookies
Execution Context and Call Stack
Form Validations
- Basics of Form Validation
- Validating Radio Buttons
- Validating Checkboxes
- Validating Select Menus
- Validating Text & Textareas
- Validating Through Regular Expressions: Alphabetical, Alphanumeric, Email, Date, Image, Password, Phone, Zip Code, and so on
Project 5: JavaScript Project

7. Async / Await

Callbacks
Asynchronous
Promises
Async / Await

8. Ajax

Introduction
XMLHttpRequest
Request
Response
JSON
REST API
GET
POST
PUT
DELETE

9. JSON

Introduction
Syntax
JSON vs XML
Datatypes
parse
stringify
Object
Arrays
Server
Html
JSON vs JSONP

10. HTML 5

What is HTML5
Overview of HTML5
Browser Support
W3C and Web Hypertext Application Technology Working Group (WHATWG) Specifications
Overview of Updated New Features
HTML5 Syntax
- The DOCTYPE
- Character Encoding
- The <script> tag
- The <link> tag
- HTML5 Document
Forms
- email
- url
- tel
- number
- range
- date
- time
- datetime
- datetime-local
- month
- week
- color
Form Elements
- datalist
- output
- progress
- meter
- keygen
- fieldset
New Attributes for <form>
- autocomplete
- novalidate
- target
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- accept-charset
New Attributes for <input>
- autocomplete
- autofocus
- form
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- readonly
- required
- step
- size
- maxLength
- inputmode
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
Multimedia Elements
- Media
- audio
- video
- source
- track
- embed
- canvas
- svg
- plugins
- youtube
Types of Elements
- Semantic Elements
- Structural Elements
HTML5 New Elements
- article
- section
- header
- footer
- nav
- aside
- main
- figcaption
- figure
- time
- mark
- details
- summary
- progress
- output
- address
- dialog
- template
- slot
- wbr
- hgroup
Migration from HTML4 to HTML5
- HTML5 Browser Support
- HTML5 Elements as Block Elements
- Adding New Elements to HTML
- Problem with Internet Explorer
- Complete Shiv Solution
- HTML5 Skeleton
HTML5 Deprecated Tags
- center
- font
- basefont
- s
- strike
- u
- applet
- isindex
- acronym
- frame
- frameset
- noframes
- embed
- marquee
- big
- dir
- spacer
- tt
HTML5 Deprecated Attributes
- align - caption, iframe, img, input, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, td, th, and tr.
- hspace - img
- vspace - img
- width - hr, table, td, th, pre, img.
- height - table, td, th, pre, img.
- background - body
- bgcolor - table, tr, td, th and body.
- rules - table
- border - table, img
- cellpadding - table
- cellspacing - table
- size - hr
- type - li, ol and ul
- noshade - hr
- char
- charoff
- color, face - font
- marginwidth, marginheight - iframe, body
- nowrap - td, th
- size - font, hr
- start - ol
- valign - td, th, tr
Web Storage
- Local Storage
- Session Storage
Web SQL
Web Workers
MathML
Drag and Drop API
Canvas Overview
- Lines
- Curves
- font
- Image
- Paths
- Shapes
- Color, Gradients
SVG
- What is SVG?
- SVG Advantages
- Differences Between SVG and Canvas
- Rectangle
- Circle
- Ellipse
- Line
- Polygon

11. Bootstrap

What is Bootstrap?
Bootstrap History
Why Use Bootstrap?
What Does Bootstrap Include?
HTML File
Adding Bootstrap to Your Web Pages
Downloading Bootstrap
Bootstrap CDN
Put Your HTML Elements Inside Containers
Bootstrap Browser/Device Support
Layout
- Breakpoints
- Containers
- Grid
- Columns
- Gutters
- Utilities
- Z-index
- CSS Grid
Content
- Reboot
- Typography
- Images
- Tables
- Figures
Forms
- Overview
- Form control
- Select
- Checks & radios
- Range
- Input group
- Floating labels
- Layout
- Validation
Components
- Accordion
- Alerts
- Badge
- Breadcrumb
- Buttons
- Button group
- Card
- Carousel
- Close button
- Collapse
- Dropdowns
- List group
- Modal
- Navbar
- Navs & tabs
- Offcanvas
- Pagination
- Placeholders
- Popovers
- Progress
- Scrollspy
- Spinners
- Toasts
- Tooltips
Helpers
- Clearfix
- Color & background
- Colored links
- Focus ring
- Icon link
- Position
- Ratio
- Stacks
- Stretched link
- Text truncation
- Vertical rule
- Visually hidden
Utilities
- API
- Background
- Borders
- Colors
- Display
- Flex
- Float
- Interactions
- Link
- Object fit
- Opacity
- Overflow
- Position
- Shadows
- Sizing
- Spacing
- Text
- Vertical align
- Visibility
- Z-index
Extend
- Approach
- Icons
Project 6: Bootstrap Responsive Project

12. Social Media Integrations

13. Search Engine Optimization

14. Google Analytics Integration

15. Domain Registration & Web Hosting

6. SASS, SCSS:

Variables
Nesting
Partials
Modules
Mixins
Extend/Inheritance
Operators

16. ECMAScript

Introduction
Environment
Syntax
Console
Scripting language vs Programming language
- Execution process
- No Intermediate Output
- Feedback and Debugging
- Usage
Variables
- Automatically
- Using var (js)
- using let (es6)
- using const (es6)
- Differences between var, let and const
- Hoisting
Operators
- Arithmetic
- Assignment
- String
- Type
- Comparison
- Logical
Decision Making (Conditions)
- If statement
- ? ternary operator
- If..else statement
- If..else if..else statement
- switch statement
Loops
- for
- While
- do..While
- for/in
- for/of
- break
- continue
Functions
- Anonymous
- Shadowing vs Closures
- Arrow functions
  - Parameters
  - Implicit return
  - this
  - No arguments
  - No new
  - No prototype property
  - Returning Object Literal
  - Array methods
Primitive Data Types
- Number
- String
- Boolean
- Null
- Undefined
- Symbol
- BigInt
Literals
- Numeric
- Integers
- Floating-Points
- String
- Boolean
- Objects
- Array
- Template
- Regexp or Pattern
- Null
- Undefined
Rest vs Spread Operator
Destructuring
Modules
Iterator
- String
- Array
- Map
- Set
Collections
- Map
- Set
- WeakMap
- WeakSet
Generators
Reflect API
Proxy API
Classes (OOPS: Object-Oriented Programming System)
- Class Declaration
- Class Expression
- Constructor
- Class Methods
- Static Methods
- Setters and Getters
- instanceof operator
- Class Inheritance
- Super Keyword
- Method Overriding
- Private Fields and Methods
- Class Fields
- Abstract Class
- Mixins
- Sub-Classing Built-in Objects
- Encapsulation
- Polymorphism
- Mutable Objects
Versions and New Features
- EcmaScript 1997 : ECMAScript 1(ES1) was standardized by Ecma International, based on JavaScript 1.1, to create a formal, consistent specification for the language.
- ES2 : 1998
- ES3 : 1999
- ES4 : Development abandoned
- ES5 : 2009
- ES5.1 : 2011
- ES6 : 2015
- ES7 : 2016
- ES8 : 2017
- ES9 : 2018
- ES10 : 2019
- ES11 : 2020
- ES12 : 2021
- ES13 : 2022
- ES14 : 2023
- ES15 : 2024
Content will be updated as per latest updates.

2. TypeScript:

Home
Overview
Environment Setup
Basic Syntax
Types
Variables
Operators
Decision Making
Loops
Functions
Numbers
Strings
Arrays
Tuples
Union
Interfaces
Classes
Objects
Namespaces
Modules

1. React Redux:

Introduction to React with Functional Components
- What is React?
- Advantages of functional components
- Setting up a React development environment (Node.js, npm, or Yarn)
- Creating your first functional React component
JSX and Rendering
- Understanding JSX (JavaScript XML) syntax
- Rendering functional components
- Props and prop destructuring in functional components
- Event handling in functional components
Component State Management
- Using the useState hook for local state management
- Managing multiple state variables
- State updates and functional updates
- Controlled components for form state management
Component Side Effects and Lifecycle
- Managing side effects with the useEffect hook
- Cleaning up with useEffect and useEffect dependencies
- Custom hooks for reusable side effect logic
- Using useLayoutEffect for synchronous effects
Routing with React Router
- Setting up React Router
- Creating routes with functional components
- Route parameters and navigation in functional components
Context and Global State
- Managing global state with the React Context API
- Creating and consuming context with hooks
- Context with multiple values
Refs and DOM Manipulation
- Working with refs in functional components
- Refs for accessing DOM elements
- Forwarding refs
HTTP Requests and Data Fetching
- Making HTTP requests with fetch or Axios in functional components
- Fetching data from an API
- Asynchronous operations with async/await
Styling in React
- CSS-in-JS libraries for styling functional components (e.g., styled-components)
- CSS modules for scoped styling
- Inline styles in functional components
Testing Functional Components
- Unit testing functional components with Jest
- Testing React components with React Testing Library
- Mocking dependencies for isolated testing
Performance Optimization
- Using the React.memo hook for functional components
- Memoization techniques with hooks
- Code splitting and lazy loading functional components
CRUD Operations with React
- Creating a CRUD application
- Implementing Create, Read, Update, Delete operations
- Managing component state for data
- Displaying data in tables and lists
User Authentication
- Implementing user registration
- Storing user credentials securely
- User login and session management
Authorization and Protected Routes
- Defining user roles and permissions
- Authorizing access to certain routes and components
- Creating protected routes with route guards
User Profile and Authentication State
- Displaying user information in the UI
- Managing authentication state in Redux
- Updating user profiles and passwords
Logout Functionality
- Implementing a secure logout process
- Clearing authentication tokens and user sessions
- Redirecting users after logout
Role-Based Authorization
- Assigning roles to users
- Configuring role-based access control (RBAC)
- Restricting access to specific features and data
JWT (JSON Web Tokens) for Authentication
- Understanding JWT and its role in authentication
- Generating and verifying JWT tokens
- Using JWT for secure API authentication
Redux State Management for Authentication and Authorization
- Managing user authentication state in Redux
- Updating user roles and permissions in the store
- Dispatching actions for login, logout, and role changes
Secure API Calls
- Securing API endpoints with authentication checks
- Passing authentication tokens with API requests
- Handling unauthorized access errors
Advanced Topics (Optional)
- Implementing password reset functionality
- Social media authentication (e.g., OAuth)
- Multi-factor authentication (MFA)
Introduction to Next.js
- What is Next.js and its benefits
- Setting up a Next.js project
- Server-side rendering (SSR) and static site generation (SSG) with Next.js
- Creating pages and routing in Next.js
- Data fetching in Next.js apps
Advanced Next.js Features
- Dynamic routes and route parameters
- Custom error handling in Next.js
- Internationalization (i18n) in Next.js
- API routes and serverless functions in Next.js
Introduction to Redux
- What is Redux and its core concepts
- Setting up Redux in a React application
- Actions, reducers, and the store in functional components
- Using Redux DevTools for debugging
Redux Middleware
- Thunk middleware for asynchronous actions
- Redux Toolkit for efficient state management
- Creating custom middleware for advanced use cases
Connecting Redux to React
- Using the useSelector hook for accessing state
- Dispatching actions with the useDispatch hook
- Organizing Redux code with feature slices
Advanced Redux
- Normalizing state for complex data structures
- Using selectors for efficient data retrieval
- Handling async data with Redux
- Optimizing Redux performance with reselect
Deployment and Production Considerations
- Preparing a Redux-powered React app for production
- Hosting options (e.g., Vercel, AWS, Netlify)
- Deployment strategies for Redux-powered React apps

Offline / Online Job-Oriented Programs

Learn the code from expert trainers

No 1 Training with Trainers Top MNCs

Our trainers are working in top MNC Companies