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