UI Full Stack Web Development with React Training Institute in Adoni
April 7, 2025 2025-05-09 12:11UI Full Stack Web Development with React Training Institute in Adoni
UI Full Stack Web Development with React
Home Courses UI Full Stack Web Development with React
UI Full Stack Web Development with React
Step into the future of web design with our UI Full Stack Web Development course. Learn how to build attractive, interactive, and fully responsive websites using HTML, CSS, JavaScript, ReactJS, and more. This course also introduces you to basic backend integration so you can build complete web apps. It’s the perfect launchpad for creative minds and aspiring UI developers looking to make an impact online.
Course Curriculum
Index
- HTML
- CSS
- JavaScript
- Bootstrap
- ReactJs
HTML
- HTML
- Overview of Web and Internet
- Differnece between Languages and Scripts
- Client side and Server side Programming
- What is HTML?
- What is a Web Browser?
- What are Versions of HTML?
- What can you Do with HTML?
- HTML Development Environments
- Writing Code with a Text Editor
- How html content is transferring data between browser and server
- Types of Webpages
- Introduction To Doctypes
- Review of HTML Elements
- Rules of Syntax
- Making your Code Readable
- Building a Document
- Using Colors
- Adding Color to your Page
- Using Headings
- Using Paragraphs
- Aligning Block-Level Elements
- Inserting Spaces and Line Breaks
- Displaying Preformatted Text
- Formatting with Inline Elements
- Controlling Fonts
- Introducing List Elements
- Creating Unordered Lists
- Creating Ordered Lists
- Nesting Lists
- What is an HTML Table?
- Building a Table
- Cell Padding and Cell Spacing
- Controlling Table and Cell Width
- Aligning a Table on the Page
- Aligning Tables and Text
- Aligning Table Data
- Spanning Columns and Rows
- Creating a Hyperlink
- Understanding and Using URLs
- Linking to a Web Document
- Linking to a Local Document
- Linking to Anchors
- Opening a New Browser Window
- Image Formats
- Inserting Inline Images
- Aligning Images
- Using Images to Anchor Links
- Sizing Images
- Using Transparent Images
- Using GIF Animation
- Forms and Controls
- Forms and Form Elements
- Form Actions, Form Methods, Form Design
HTML 5
- Introduction
- Laying out a page with HTML5
- Page Structure
- New HTML5 Structural Tags
- Page Simplification
- HTML 5 – How we got here?
- New Features of HTML5
- The HTML5 Semantic Element
- Current State of Browser Support
- SECTIONS AND ARTICLES
- The section Tag
- The article Tag
- The header Tag
- The Footer Tag
- HTML5 AUDIO AND VIDEO
- Supported Media Types
- The audio Element
- The video Element
- HTML5 FORMS
- New Input Types
- HTML5 NEW FORM ATTRIBUTES
- autocomplete
- Novalidate
- HTML5 NEW FORM FIELD ATTRIBUTES
- required
- placeholder
- autofocus
- autocomplete
- form
- pattern
CSS 2.0
- Introduction of CSS
- CSS Syntax
- CSS Comments
- CSS Types
- Inline
- Internal
- External
- CSS Selector
- ID
- Class
- Attribute
- Grouping
- Universal
- CSS Color
- RGB Value
- Hex Value
- Color Name
- Background
- background-color
- background-repeat
- background-attachement
- background position
- background-size
- background-image
- CSS Margin
- Margin-top
- Margin-bottom
- Margin-left
- Margin-Right
- CSS Padding
- Padding -top
- Padding -bottom
- Padding -left
- Padding –Right
- Outline
- Outline-style
- Outline-color
- Outline Width
- Outline-Offset
- Outline Shorthand Property
- CSS Height and Width
- CSS Display properties
- CSS Position Properties
- CSS Overflow
- CSS Float and Clear
- Pseudo Class and Element
CSS 3.0
- Introduction to CSS 3
- Border
- border-radius
- CSS Shadows
- Text-shadow
- Box-shadow
- Transitions
- transition
- transition-delay
- transition-duration
- transition-property
- 2D Transforms
- transform
- matrix ()
- translate (x, y)
- scale (x, y)
- rotate(angle)
- skew (x-angle, y-angle)
- Animations
- @keyframes
- animation
- animation-direction
- animation-duration
- animation-name
- Selectors
- CSS combinations
- Pseudo Elements
- Gradients
- Linear Gradients
- Radial Gradients
- User Interface
- resize
- box-sizing
- outline-offset
- CSS Filters
- Blur
- Opacity
- Media Query
- What is Responsive Web Design
- Intro to the Viewport
- The Viewport Tag
- Media Queries
- Tablet Styles
- Mobile Styles
- Making a Mobile Drop-down Menu
- Web Fonts
- @font-face
- font-family
- src
- font-stretch
- font-style
- font-weight
- Flexbox
- flex-grow
- flex-shrink
- flex-basis
- flex
- flex-wrap
- flex-direction
- flex-flow
- justify-content
- align-items
- order
JavaScript
- Intro to JavaScript
- Need of JavaScript in real web sites
- Variables
- Operators
- Control statements
- Dialog boxes
- User-defined functions
- DOM manipulations
- Event handling
- Click, dblclick, focus, blur
- Mouseover, mouseout, mousemove
- Keyup, keypress, change, onload
- Updating CSS using JavaScript
- Updating attributes using JavaScript
- Creating, removing elements
- Setinterval, Settimeout
- Random
- External JavaScript
- Validations using JavaScript
- String methods
Advanced JavaScript
- Date object
- This object
- Event object
- State managament
- Cookie
- Form validation
- Expressions
- Email validation
- Dynamic functionalities of html controls
Bootstrap
- Introduction to Bootstrap
- Need of Bootstrap in real web sites
- Bootstrap First Example
- Bootstrap Lead
- Bootstrap Alignment
- Bootstrap Text colors
- Bootstrap Tables
- Bootstrap Buttons
- Bootstrap Images
- Bootstrap Jumbotron
- Bootstrap Cards
- Bootstrap DropDown
- Bootstrap NavBar
- Bootstrap Carousel Plugin
- Bootstrap Grid system (Responsive Web Design)
- Bootstrap Forms
Bootstrap Responsive Web Design
- Intro to Page Template Development
- Intro to Responsive web design
- Need of RWD in real web sites
- Extra-small, small, medium, large devices
- Media queries
REACT JS
- Introduction of React
- Node Repository
- Components,
- Functional and class Components
- What Is JSX
- JSX Expressions
- State & The Context API
- Working With Forms
- Functional component lifecycle hooks
- Changing State From Another Component
- Using The Context API & Provider State
- Adding A Context Reducer For Actions
- Creating A Form With State
- Controlled Components & onChange
- TextInputGroup Component For DRY Code
- Working With Props
- CSS In React
- Adding Bootstrap
- Events In React
- Uncontrolled Components & Refs
- Form Submit Action To Context
- Error Checking & Display
- Lifecycle, HTTP & Deployment
- Lifecycle Methods
- AJAX
- Axios
- GET Requests
- POST & DELETE Requests
- API service calls
- CRUD operations
- Using AsyncAwait
- React Routing
- React Router Setup
- Links, Params & Redirect
- Role based routing
- Authentication and Authorization
- PUT Request & Update Action
- Learning Redux
- App Starting Point For Redux
- Redux Store Setup & Contact Reducer
- Redux Thunk & HTTP
- Route Protection (Guared)
- Persist Settings To LocalStorage
- Server side interaction
- Higher Order Component
SQL
- SQL Introduction
- Installing a Database
- Creating database
- Creating Tables
- insertions
- deletions
- updations
- Groupings and Aggregations
- Eliminating Duplicates
- Filtering
- ordering
- merging tables
- Horizontal Merging
- Vertical Merging
- Types of Joins
- Various Built-in Functions
- working with queries
- Sub-queries