SYLLABUS: COMPLETE REACTJS

SYLLABUS – COMPLETE REACTJS

PRE-REQUISITE / TARGET AUDIENCE: Any beginner who wants to build career as Web designer can take
this course

SYLLABUS - HTML
MODULE 01: HTML INTRODUCTION

❖ Web Development Introduction

❖ History of HTML
❖ What you need to do to get going and make your first HTML page
❖ What are HTML Tags and Attributes?
❖ HTML Tag vs. Element
❖ HTML Attributes:
❖ How to differentiate HTML Document Versions
❖ Software Installations for course

MODULE 02: HTML-BASIC FORMATTING TAGS

❖ HTML Basic Tags

❖ HTML Formatting Tags
❖ HTML Colour Coding

MODULE 03: HTML GROUPING AND LISTS

❖ Div and Span Tags for Grouping

❖ Unordered Lists
❖ Ordered Lists

MODULE 04: HTML IMAGES AND LINKS

❖ Image and Image Mapping

❖ URL - Uniform Resource Locator
❖ URL Encoding

MODULE 05: HTML TABLE

❖ <table> ❖ <th>
❖ <tbody> ❖ <tr>
❖ <thead> ❖ <td>
❖ <col>
MODULE 06: HTML FORM

❖ input ❖ checkboxes
❖ textarea ❖ fieldset
❖ button ❖ datalist
❖ label ❖ radio button
❖ drop-down

CONTACT US - 966 5044 698 1

SYLLABUS: COMPLETE REACTJS

MODULE 05: HTML

❖ Video and Audio Support

❖ Header and Footer
❖ Navigation Links
❖ Form: HTML5 most used features

SYLLABUS - CSS
MODULE 01: CSS INTRODUCTION

❖ Benefits of CSS
❖ CSS version History
❖ CSS Syntax
❖ External style sheet using <link>
❖ Multiple Style sheet
❖ Value Length and Percentage

MODULE 02: CSS SELECTORS

❖ ID selector ❖ Universal selectors

❖ Class selector ❖ Child selectors
❖ Grouping selector ❖ Attribute selectors

MODULE 03: COLOUR BACKGROUND CURSOR

❖ background-image
❖ background-repeat
❖ background-position
❖ CSS cursor

MODULE 04: TEXT FONTS

❖ color ❖ letter-spacing
❖ background-color ❖ word-spacing
❖ text-align ❖ font-size
❖ text-indent ❖ font-style
❖ white-space
MODULE 05: LISTS AND TABLES

❖ CSS List ❖ CSS Table

o list-style-type o border
o list-style-position o width and height
o list-style-image o text-align
o padding
o color

CONTACT US - 966 5044 698 2

SYLLABUS: COMPLETE REACTJS

MODULE 06: BOX MODEL

❖ Borders and Outline

❖ Margin and Padding
❖ Height and Width

MODULE 07: DISPLAY POSITIONING

❖ CSS Visibility
❖ CSS Display
❖ CSS Scrollbars
❖ CSS Positioning
o Static positioning
o Fixed positioning
o Relative positioning
o Absolute positioning

MODULE 08: FLEXBOX

❖ Flexbox understanding
❖ Flexbox architecture
❖ Flexbox container and flex item properties

SYLLABUS – JAVASCRIPT
MODULE 01: JS INTRODUCTION

❖ Java script Introduction

❖ Why JS
❖ Role of JS in web
❖ Benefits of JS

MODULE 02: VARIABLES AND OPERATORS

❖ Variable Declaration
❖ Variable Initialization
❖ Operators:
o Arithmetic,
o Comparison
o Logical or Relational
o Ternary or Conditional Operator
❖ Unary Operator vs Binary Operator
❖ Instanceof operator

CONTACT US - 966 5044 698 3

MODULE 03: FUNCTIONS

❖ What is Function?
❖ Function with no argument
❖ Function with Argument
❖ Function with return value
❖ Optional Parameters in function
❖ Function Declaration
❖ Function Expression
❖ Anonymous Function
❖ Function as a value
❖ Callback function
❖ Built in Functions
❖ Standard Date and Time Functions

MODULE 04: DATA TYPES

❖ Primitive Types: Number, String, Boolean

❖ Weak type vs Strong type
❖ NaN
❖ Null vs undefined
❖ Union types

MODULE 05: VARIABLE’S

❖ Global variable
❖ Local variable
❖ Scope in JS
❖ Let vs const vs var

MODULE 06: CONTROL STATEMENTS

❖ Conditional Control Statements

o If-else Statement
o Switch case statement
o break and continue
❖ Looping Control Statements
o For loop
o While loop
o Do while loop

MODULE 07: FUNCTION ADVANCE STUFF

❖ IIFE - Immediately Invoked Function Expression

❖ Arrow Function in depth
❖ Higher Order Function
❖ Function as First class citizen
SYLLABUS: COMPLETE REACTJS

MODULE 08: CLASS AND OBJECT

❖ Object
❖ Different ways to create object
❖ Constructor function
❖ This keyword
❖ Prototype
❖ Class
❖ constructor

MODULE 09: ADVANCE STUFF

❖ Closure ❖ Cloning in Depth

❖ Map
o Shallow Cloning
❖ Set
❖ Arrays o Deep Cloning
❖ Promises

MODULE 10: ES 6 FEATURES

❖ String Template
❖ Rest Operator
❖ Spread Operator
❖ Object De-structuring
❖ Array De-structuring
❖ map(), filter( ), reduce( ), flat( ) and few more

MODULE 11: WEB STORAGE

❖ Local Storage
❖ Session Storage

MODULE 12: JSON

❖ JSON Introduction
❖ Syntax rules of JSON
❖ JSON Stringify

MODULE 13: HTML FORM MANIPULATIONS

❖ HTML DOM - Document Object Model

❖ Working with HTML form and it’s element

5
SYLLABUS: COMPLETE REACTJS

SYLLABUS – REACTJS
MODULE 01: WELCOME TO FRONT-END WEB DEVELOPMENT WITH REACT

❖ Full-Stack Web Development: The Big Picture

❖ Front-end JavaScript Frameworks and Libraries Overview
❖ Single Page Application(SPA)
❖ What is DOM?
❖ Introduction to React
❖ What is virtual DOM?
❖ React as library.
❖ Why babel required?
❖ Introduction to JSX.
❖ React Components: State and Props
❖ Lifecycle Methods intro.

MODULE 02: CONFIGURE YOUR REACT APPLICATION

❖ Require for setup.

❖ First react application using create-react-app
❖ What is npm packages.
❖ Get familiar with folder structure.
❖ Data binding in React.
❖ How to use npm modules.

MODULE 03: RUN YOUR FIRST REACT APPLICATION.

❖ Get familiar with package.json

❖ Understanding npm commands.
❖ Debug your code in browser
❖ Create prod build using npm.

CONTACT US - 966 5044 698 6

SYLLABUS: COMPLETE REACTJS

MODULE 04: REACT ROUTER AND SINGLE PAGE APPLICATIONS

❖ React Component Types

❖ Lifecycle Methods in detail

❖ React Router and parameters

❖ UI Design and Prototyping

❖ Create your first React component

MODULE 05: REACT COMPONENTS

❖ Passing props to child component.

❖ State management in React.

❖ Props management in React.

❖ Update parent from child component.

MODULE 06: REACT HOOKS

❖ Basic hooks
❖ Additional hooks
❖ How to use hooks
❖ Building your own hook.

MODULE 07: REACT FORMS, FLOW ARCHITECTURE AND INTRODUCTION TO REDUX

❖ Form component

❖ Controlled and uncontrolled form

❖ React Redux Form and validations

MODULE 08: IN THE WORLD OF REDUX

❖ Stores for state management

❖ React Redux Form.
❖ Redux and states.
❖ Redux and Reducers.

CONTACT US - 966 5044 698 7

SYLLABUS: COMPLETE REACTJS

MODULE 09: REDUX STATE MANAGEMENT

❖ Redux Actions

❖ Difference between Thunk and Saga

❖ Redux Thunk/Saga
❖ Client-Server Communication

MODULE 10: API INTEGRATION

❖ Redux Actions
❖ API Methods and params
❖ Api integration.
❖ Store data in Redux.
❖ Fetch Redux state.
❖ API to UI/UI to API.

MODULE 11: ASSESSMENT TEST

MODULE 12: PROJECT

❖ Go live Project

SYLLABUS – GIT
MODULE 01: INTRODUCTION

❖ Source Control Management overview

❖ Why SCM tool required
❖ GitHub

MODULE 02: CLONING AND CREATING PROJECT

❖ Cloning - code base

❖ Init – create project
❖ States of GIT
o Working directory
o Staging area
o Repository

CONTACT US - 966 5044 698 8

SYLLABUS: COMPLETE ANGULAR

MODULE 03: BASIC SNAPSHOTTING

❖ Staging file
❖ Status
❖ Commit
❖ Diff
❖ Reset

MODULE 04: GENERAL CONCEPTS

❖ Local repository
❖ Remote repository
❖ What is upstream and downstream?

MODULE 05: BRANCHING AND MERGING

❖ Branch
❖ Checkout
❖ Merge
❖ Log
❖ Stashing changes
❖ Conflict Resolution
❖ Pull request

CONTACT US - 966 5044 698 9