WEB

DESIGNING
WITH REACT

CURRICULUM
Introduction to Web Technologies
Careers in Web Technologies and Job Roles
How the Website Works?
Client and Server Scripting Languages
Difference between a Web Designer and Web Developer
Types of Websites (Static and Dynamic Websites)
Responsive design and layout
Photoshop
Introduction to Adobe Photoshop
Color mode & resolution
Types of Graphics
Export image
Animated Image
Tools
Ruler and scaling
Create Logos
Photos masking
Smart Objects
Merge Layers
Group Layers
Layer Styles
Blending Options
View Menu / Window Menu
Filter Effects
Image Adjustments
Realtime Website Layout Design

HTML 4.0
What is Markup Language
Basic Structure of HTML
Document Overview
l The Structure Tags
l Getting Started With HTML
l Writing the Code
l Head Section
l Meta Tags
l External Link Tags
l HTML Tags
l HEAD Tags
l Title Tags
l Body Tags
l Displaying a web page in a web Browser
HTML Elements
l Block level elements
l Inline elements
l Empty elements
Working with Forms
l Creating a Form
l Form Tag
l POST and GET Method
l Text Input, Text Area, Checkbox, Image Input and Radio
l Select Option
l Option Group
l File Upload and Hidden Fields
l Submit Button, Reset Button
l Relation between HTML Form and PHP
Adding Special Characters
Block Oriented Elements
l Defining Paragraphs and new Lines
l Inserting Spaces
l Perforating the Text
l Changing Background Color
List
l Ordered List
l Unordered List
l Definition List
Attributes of List
l Using Type attribute with Unordered list
l Using Stat attribute with Ordered List
l Some other elements
l Visual Markup
Uniform Resource Locators
l Types of URLs
l Absolute URLs
l Relative URLs
l Document-Relative URLs
l Server-relative URLs
Hypertext Links
l Why links fail?
Images
l Adding Images
l Adding Border to an image
Tables
l How to create table
l Adding Border to a Table
l Apply Formatting Features to Table
l Merge row and columns

Introduction to style Sheets

l How style sheets work
l Style Sheet Structure

Changing the Background

l Changing the color of the text
l Changing the front
l Changing the Indent of the text
l Changing the Line Spacing
l Hide a Style Sheet
Creating Style Classes
l Div
l Span
l Frame
l Layer
l Meta
l HTML Frames
l Frame
l iframe

HTML5
l Introduction to HTML5
l Introduction to HTML5
l What's new in HTML5
HTML5 Syntax
l The DOCTYPE
l The <script> tag
l The <link> tag
l HTML5 Document
New input Elements
l Color
l Date
l Datetime
l datetime-local
l email
l month
l number
l range
l search
l tel
l time
l url
l week
New Input attributes
l autofocus
l formaction
l formmethod
l formnovalidate
l height and width
l list
l min and max
l multiple
l pattern (regexp)
l placeholder
l required
l step
Audio and Video
l <audio>
l <video>
l <source>
New Structural Elements
l <details>
l <dialog>
l <summary>
l <meter>
l <main>
l <header>&<footer>
l <section>
l <aside>
l <figure>
SVG
l What is SVG?
l SVG Advantages
l SVG in HTML
l SVG Shapes
l SVG Text
l SVG Stroke properties
l SVG Animation

Canvas
l What is canvas?
l Lines
l Curves
l Paths
l Shapes
l Color, gradients
l Image
l Arc
l Text
l Shadow
HTML5 APIs
l Google Map
l
Drag & Drop
CSS
l CSS Introduction
l CSS Syntax
l CSS Id & Class
l Types of CSS links
Colors and Backgrounds
l color
l background-color
l background-image
l background-repeat
l background-position
l background-attachment
l background
Text and Fonts
l font
l font-family
l font-size
l font-weight
l font-style
l line-height
l letter-spacing
l word-spacing
l text-align
l text-decoration
l text-transform
l white-space
Lists
l list-style
l list-style-type
l list-style-image
l list-style-position

Tables
l table-layout
l border-collapse
l border-spacing
CSS Selectors
l Universal Selector
l Type Selector
l Class Selector
l ID Selector
l Child Selector
l Descendant Selector
l Attribute Selector
l Adjacent Sibling Selector
l General Sibling Selector
l Query Selector

CSS Box Model

l CSS Border
l CSS Outline
l CSS Margin
l CSS Padding
CSS Advanced
l CSS Grouping/Nesting
l CSS Dimension
l CSS Display
l CSS Positioning
l CSS Floating
l CSS Align
l CSS Pseudo-class
l CSS Pseudo-element
l CSS Navigation Bar
l CSS Image Gallery
l CSS Image Opacity
l CSS Attribute Selectors
l Styling Links

CSS 3.0
Introduction to CSS3.0
What's new in CSS 3.0
Border
l border-image
l border-radius
CSS Shadows
l Text-shadow
l Box-shadow
Background
l background-clip
l background-size
l background-origin
l background-image
Outline
Transitions
l transition
l transition-delay
l transition-duration
l transition-property
Transform
2D Transforms
l transform
l matrix()
l translate(x,y)
l scale(x,y)
l rotate(angle)
l skew(x-angle,y-angle)
3D Transforms
l transform
l transform-style
 l perspective
l transform-origin
Animations
l @keyframes
l animation
l animation-direction
l animation-duration
l animation-name
Selectors
l CSS combinations
l Pseudo Elements
Gradients
l Linear Gradients
l Radial Gradients
Multiple Columns
l column-count
l column-fill
l column-gap
l column-width
l columns
l column-rule
l column-rule-color
l column-rule-style
l column-rule-width
User Interface
l resize
l box-sizing
l outline-offset
CSS Filters
l Blur
l Brightness
l Contrast
l Grayscale
l Hue-rotate
l Invert
l Opacity
l Saturate
l Sepia
l Drop-shadow
Media Query
l What is Responsive Web Design
l Intro to the Viewport
l The Viewport Tag
l Media Queries
l Fluid Layouts
l Tablet Styles
l Mobile Styles
l Making a Mobile Drop-down Menu
l Responsive Images & Polyfills

Web Fonts
l @font-face
l font-family
l src
l font-stretch
l font-style
l font-weight
Flexbox
l flex-grow
l flex-shrink
l flex-basis
l flex
l flex-wrap
l flex-direction
l flex-flow
l justify-content
l align-items
l order
Dreamweaver cc
Interface
l choosing a workspace
l document window & toolbars
l the document window
l the launcher
l the insert panel & tool sets
l the document toolbar
l the property inspector
l dockable floating panels
l using contextual menus

Site Control
l defining a site
l file and folder management
l creating site maps
l using the file browser

Basics
l defining the site
l creating and saving documents
l inserting images with assets panel
l adding text
l aligning page elements
l modifying page properties
l creating links with text and images
l preview in browser

Linking
l link with point to file
l linking to new source files
l browse for file and link history
l anchor links
l email links
l file links
l image maps
Typography
l About Typography
l Web Typography

Tables
l insert and modify a table
l fixed width tables
l relative width tables
l hybrid table
l insert tabular data
l sort table data
Rollovers
l simple rollovers - insert rollover
l simple rollover - swap image behavior
l multiple-event rollovers
l flash buttons
Cascading Style Sheets
l redefining HTML tags
l defining a custom class
l CSS selectors
l CSS selectors to group tags
l linking to external CSS
l CSS reference panel
Forms
l form objects
l creating a form
l creating a jump menu
Behaviors
l set text of status bar
l open browser window behavior
Inserting Media Objects
l linking to sounds
l embedding sounds
l inserting flash
l content inserting director content

JAVASCRIPT
Introduction to JavaScript
l Syntax
l Statements
l Comments
Enabling in various browsers
Popup Boxes
l Alert
l Confirm
l Prompt
Variables
Operators
l Arithmetic
l Assignment
l Comparison
l Logical
l Conditional
Conditional Statements
l if
l if...else
l if...else if...else
l Switch
Loops
l while
l do...while
l for
l for...in Statement
l Break
l Continue
Functions
l User-defined Functions
l Function Syntax
l Function with Arguments
l Returning Values from Functions
l Built-in Functions
l paraseInt and parseFloat
Events
l Introduction
l Mouse Events
l Keyboard Events
l Form Events
l Document/Window Events
Cookies
Page redirection
Built-in Objects
l Introduction
l Number
l Strings
l Math
l Arrays
l Associative Array
l Array Properties and Methods
l Date
l Boolean
l Regexp
Advanced javascript
l Form Validations
l Basics of Form Validation
l Validating Radio Buttons
l Validating Checkboxes
l Validating Select Menus
l Validating Textareas
JS Document Object Model (DOM)
l Introduction
l DOM HTML
l DOM CSS
l DOM Events
JS Browser Object Model (BOM)
l JS Cookies
l JS Window
l JS Location
l JS Popups
l JS Time
Introduction to OOP concept
Jquery
What is JQuery?
Overview of JQuery features
Using JQuery links
JQuery Selectors
JQuery Events
JQuery Effects
l Hide() & show()
l Fade()
l Slide()
l Animate()
l Callback function
l Chaining
JQuery HTML
l Get() & Set()
l Add() & Remove()
l CSS()
l Dimensions()
JQuery Traversing
l Parent() & children()
l Next() & Prev()
l Find()
Jquery AJAX
Image slider using JQuery plugins
Form Validation
Bootstrap Framework
Getting started with Bootstrap
Grid system in Bootstrap
Adding Header & Navigation
Adding Logo in Navigation Bar & Adding Banner
Adding Jumbotron
Adding Rows, Columns & Containers
Adding Column Width using offset
Ordering Columns using push or pull
Nesting Columns in Bootstrap
Adding Footer top Website
Typography in Bootstrap
Adding glyphicons
Styling Tables
Adding Responsive or Utilities in Bootstrap
Styling Button using between classes
Styling Images and making images Responsive
Adding description list in bootstrap
Adding Panels

Java Script
Js Basics
l keywords
l identifiers
l datatypes
l variables and constants
l tokens
l operators
Decision Making Statements
Conditions Statements Or Selection Statements
l if
l if else
l nested if else
l if else if ladder
l switch case

Iteration Statements Or Loops

l for
l while
l do while
l for in
l for of
Jump Statements
l continue
l break
Functions
l function declarations, definitions and calling
l types of functions

l
l anynomous functions
l flat arrow functions or arrow functions
l self invoked function (IIFE)
l storage classification or varibale scope (var let const and without keywords)
l recursion
Strings Methods
array Methods
Global Execution Context and Function execution context
l scope chain rule and lexical scoping
l closure

Objects
l literal and keys
l object functions
l nested objects
l Object Prototypes
l setter and getter methods
Set and Map
WeakMap and WeakSet
Dates and Time
OOPS
l literal and keys
l object functions
l nested objects
l Object Prototypes
l setter and getter methods
DOM Manuplation
l DOM
l BOM
l event handling
l time based events

Advanced Js
How Javascript Works
l hoisting
l strict mode
l closure
l synchronous and asynchronous programming
Event propagation
l bubbling
l capturing

Event loop
function curring
ajax and json
calling api using ajax
callback hell
promise
async await
fetch
modules
version
Typescript
l Why Typescript
l Basic Types
l Class and Interfaces
l Modules

React Js
INTRODUCTION TO REACT JS
l What is React JS?
l What is SPA?
l DOM vs Virtual DOM
l Advantages and Disadvantages
l Key Features

ENVIRONMENTAL SETUP
l Node | NPM
l Installation of CLI
l Setup Project
l Directory Structure
l Code Editors
l How React JS Application Boot

BASIC FEATURES OF REACT JS

l React Concepts
l JSX and TSX
l Render Elements
l Function and Class Components
l Props and State
l Handling Events
l Dynamic Data Rendering
l Property Binding
KEY FEATURES OF REACT JS
l Conditional Rendering
l List and Keys
l Forms Handling
l Forms Validations
COMPONENT LIFECYCLE HOOK
l Understanding component lifecycle
l All Lifecycle Hooks

EVENT HANDLING REACT

l Understanding React Event System
l Passing arguments to event Handlers
NETWORK CALL
l Fetch
l Axios
CUSTOM SERVICES
l Introduction to Services
l Building a Service
LOCAL DATA STORAGE
l Local Storage
l Session Storage
l Cookies
ROUTING WITH REACT ROUTER
l Setting up React Router
l Configuring route with Route Component
l Making routes dynamic with Route Params
l Working with nested routes
l Link and NavLink
l Redirect Routes
UI COMPONENTS
l Material Design
l PrimeNG
INTRODUCTION TO REDUX
l Why Redux
l Install and setup
l Store ,Reducer , actions
l Dispatcher
l High order Components
l mapStateToProps and mapDispatchToProps usage

ADVANCE REDUX
l Async Actions
l Middleware
l Redux Thunk and Redux Saga
React Hooks
l Why We Need Hooks.
l Different Types Of Hooks
l Using State And Effect Hooks
l Usereducer , Useref Etc.
l Custom Hooks
l Rules Of Hooks
Third Party Modules
l Social Login
l Pagination
l Search
l Filter
l JWT Token
l File Upload
l Many More

Rest Js Testing
l Jest with Enzyme

Develop a CRUD Application in React Js

Next js
l Introduction
l Routing
l Page Pre-Rendering (Server Side Rending) & Data Fetching
l Server-side rendering vs Client-side rendering
l Optimizing NextJS Apps
l Adding Backend Code with API Routes
l Working with App-wide State
l Adding Authentication
Ecommerce Project
 2.0 NOIDA SEC-63
H-43 Sector-63
Noida-201301

+91 7042175774
+91 9810851363