Front End React JS Course Syllabus

Git & Git Hub

Introduction to Version Control
  • What is Version Control?
  • Benefits of Git over other VCS (e.g., SVN)
  • Centralized vs Distributed VCS
  • Git vs GitHub (and GitLab, Bitbucket)
Installing & Git Basics
  • Configuring Git
  • Initializing a repo: git init
  • Checking status: git status
  • Adding files: git add
  • Committing changes: git commit -m
  • Viewing commit history: git log
  • Ignoring files with .gitignore
Working with GitHub
  • Creating a GitHub account
  • Creating a repository on GitHub
  • Connecting local repo to GitHub
  • Cloning a repository: git clone
  • Pulling updates: git pull
Branching and Merging
  • What are branches?
  • Creating branches: git branch feature-x
  • Switching branches: git checkout
  • Creating & switching: git checkout -b feature-x
  • Merging branches: git merge
  • Resolving merge conflicts
Git Workflow Models
  • git checkout vs git restore
  • git reset (soft, mixed, hard)
  • git revert
  • Viewing diffs: git diff
Undoing Changes
  • Forking repositories
  • Pull requests (PRs)
  • Reviewing PRs
  • Merging PRs
Collaborating on GitHub
  • Using Issues and Discussions
  • Assigning reviewers and labels
Working with Remotes
  • Listing remotes: git remote -v
  • Adding/removing remotes
  • Pushing to multiple remotes
  • Tracking branches
Tags and Releases
  • Creating tags: git tag v1.0
  • Annotated vs lightweight tags
  • Pushing tags to GitHub: git push origin v1.0
  • GitHub Releases tab
Git Tools and Advanced Features
GUI Tools & Integrations

CSS (Cascading Style Sheets)

CSS Basics
  • What is CSS?
  • How CSS works (selectors, properties, values)
  • Ways to apply CSS: Inline, Internal, External
  • CSS Syntax
  • CSS Comments
Basic Styling
  • Text Styling
  • Background Styling
  • Border Styling
  • Margin and Padding
  • Width and Height
  • Box Model Overview
  • Display Property
  • Color Systems :- Color Names, HEX ,RGB, RGBA (with opacity) ,HSL
CSS Selectors
  • Element, Class, ID Selectors
  • Grouping Selectors
  • Universal Selector
  • Descendant, Child, Adjacent, and Sibling Selectors
  • Attribute Selectors
  • Pseudo-classes (:hover, :focus, etc.)
  • Pseudo-elements (::before, ::after, etc.)
Colors and Units
  • Color formats (name, HEX, RGB, HSL)
  • CSS Units (px, em, rem, %, vw, vh).
Text and Fonts
  • Font properties (font-family, font-size, font-weight)
  • Text alignment, decoration, transform, spacing
  • Google Fonts
Box Model
  • Content, Padding, Border, Margin
  • box-sizing property
Borders and Backgrounds
  • border, border-radius
  • background-color, background-image, background-repeat, background-size
Display and Positioning
  • display: block, inline, inline-block, none
  • position: static, relative, absolute, fixed, sticky
  • z-index, top, right, bottom, left
Flexbox (Flexible Box Layout)
  • display: flex
  • Main and cross axis : X and Y axis
  • justify-content, align-items, flex-direction
  • flex-wrap, align-self, flex-grow, flex-shrink
CSS Grid
  • display: grid
  • Rows, Columns
  • Grid areas, gaps
  • grid-template-areas, grid-template-rows/columns
Responsive Design
  • Media Queries
  • Mobile-first design
  • Viewport meta tag
Transitions and Animations
  • transition-property, duration, timing-function, delay
  • Keyframes with @keyframes
  • animation-name, duration, iteration-count
CSS Variables
  • Scope local Variable And Global Variable
Advanced Selectors
  • :nth-child(), :nth-of-type(), :not()
Pseudo-elements & Content Manipulation
  • ::before, ::after
  • content property
Overflow and Scroll
  • overflow, overflow-x, overflow-y
  • Scroll snapping
Borders and Corners
  • CSS Rounded Corners (border-radius)
  • CSS Border Images (border-image-source, border-image-slice, etc.)
CSS Gradients
  • Linear Gradient , Radial Gradient, Conic Gradient
CSS Backgrounds
  • background-color, background-image, background-size, background-repeat, etc.
CSS Shadows
  • CSS Shadows: box-shadow, text-shadow
CSS Text Effects
  • text-transform, letter-spacing, text-decoration, etc
CSS Transforms
  • CSS 2D Transforms (rotate, scale, translate, skew)
  • CSS 3D Transforms (rotateX, rotateY, perspective)
CSS Animations
  • @keyframes, animation-name, animation-duration, etc.
CSS Tooltips
  • Using position, :hover, and ::after or ::before
Image Handling and Styling
  • CSS Image Styling: Borders, rounded corners, shadows
  • CSS Image Centering: text-align: center, margin: auto, flexbox, grid
  • CSS Image Filters: blur(), brightness(), grayscale(), etc.
  • CSS Image Shapes: clip-path, border-radius, mask-image, etc
  • CSS object-fit
  • CSS object-position
  • CSS Masking
UI Components
  • CSS Pagination: Flex/Grid layout for page numbers
  • CSS Multiple Columns: column-count, column-gap, etc.
  • CSS User Interface : cursor, resize, outline, etc.
CSS Box Sizing
  • content-box vs border-box

HTML (Hypertext Markup Language)

HTML Basics
  • What is HTML?
  • HTML Structure (< ! DOCTYPE html >, < html >, < head >, < body >)
  • HTML Tags and Elements
  • Headings
  • Paragraphs and Line Breaks
  • Text Formatting Tags (b, i, u, strong, em, mark, small)
  • Comments in HTML
HTML Text and Media
  • Lists: Ordered (ol), Unordered (ul), Description (dl)
  • Links (a href )
  • Images ()
  • Audio () and Video ()
  • Embedding Content (iframe, embed, object)
HTML Layout
  • Divisions and Spans (div, span)
  • Semantic Tags (header, footer, nav, main, article,section, aside)
  • Block vs Inline Elements
  • HTML Entities (e.g.,  , <, >)
  • Line Breaks and Horizontal Rules (br, hr)
Forms and Input
  • Form Element (form)
  • Input Types (text, password, checkbox, radio, submit, reset, email, date, file, etc.)
  • Labels and Fieldsets
  • Buttons
  • textareas and Select Boxes (textarea, select, option)
  • Form Validation (required, min, max, pattern)
  • Form Attributes (action, method, autocomplete, target)
HTML Tables
  • Table Structure (table, tr, td, th)
  • Table Head, Body, and Foot (thead, tbody, tfoot)
  • Merging Cells (colspan, rowspan)
  • Table Attributes (border, width, etc.)
HTML Attributes and Global Concepts
  • Global Attributes (id, class, title, style, hidden)
  • data-* Attributes
  • Inline vs Internal vs External Styling
  • Meta Tags (meta for SEO, charset, viewport, etc.)

JavaScript

Basics of JavaScript
  • What is JavaScript?
  • Embedding JavaScript in HTML
  • Console and Output (alert, console.log, document.write)
  • Variables (var, let, const)
  • Data Types (String, Number, Boolean, Null, Undefined, Symbol)
  • Operators (Arithmetic, Assignment, Comparison, Logical)
  • Comments
  • Control Structures: if...else, else... if ,switch,Ternary operator
Loops
  • for, while, do...while
  • for...in, for...of, for...each
Functions and Scope
  • Function Declaration & Expression
  • Parameters and Return Values
  • Arrow Functions
  • Scope (Global, Function, Block)
  • Hoisting
  • Closures
Arrays and Objects
  • Arrays: Methods (push, pop, shift, unshift, splice, slice, map, filter, reduce, etc.)
  • Objects: Properties & Methods
  • Object Destructuring
  • Spread and Rest Operators
  • JSON: Parse and Stringify
DOM Manipulation
  • Selecting Elements (getElementById, querySelector)
  • Changing Content and Styles
  • Adding and Removing Elements
  • Events and Event Listeners
  • Event Delegation
  • Form Validation

Advance JavaScript

Advanced JavaScript
  • Callbacks
  • Promises
  • Async / Await
  • Error Handling (try...catch)
ES6+ Features
  • Template Literals
  • Default Parameters
  • Destructuring
Classes and OOP in JavaScript
  • Constructor Functions
  • Prototypes
  • ES6 Classes
  • Inheritance
Browser APIs
  • LocalStorage and SessionStorage
  • Fetch API / AJAX
  • Geolocation API
  • Web Storage API
  • Clipboard API
  • Drag and Drop API
Debugging and Tools
  • Developer Console
  • Debugger
  • Linting (ESLint)
  • Using VS Code Extensions

Bootstrap

Bootstrap Basics
  • What is Bootstrap?
  • File Structure and Bootstrap Workflow
  • Bootstrap Containers (.container, .container-fluid)
Setting Up Bootstrap
  • CDN Method
  • Local Installation
  • Using with Package Managers (NPM/Yarn)
Grid System
  • Rows and Columns
  • Breakpoints (xs, sm, md, lg, xl, xxl)
  • Responsive Columns and Nesting
  • Offset and Order Classes
Typography and Utilities
  • Headings, Paragraphs, and Display Text
  • Text Alignment and Transformation
  • Lists and Inline Text Elements
  • Borders and Shadows
Utility Classes
  • Spacing (margin, padding)
  • Colors (text, background
  • Sizing and Visibility
  • Display Utilities (d-flex, d-none, etc.)
Bootstrap Components
  • Buttons , Cards, Alerts, Badges
  • Breadcrumbs, Pagination, Progress Bars, List Groups
  • Jumbotron (Deprecated in v5) ,Toasts, Accordions ,Collapse
  • Carousel (Image Slider) ,Modals , Popovers and Tooltips , Spinners
Forms and Inputs
  • Form Controls (text, checkbox, radio, select, file)
  • Floating Labels
  • Input Groups (add-ons, prepend/append)
  • Validation States
  • Form Layouts (inline, horizontal, grid-based)
Navigation and Layout
  • Navbar (responsive menus, dropdowns, toggler)
  • Navs and Tabs
  • Sidebar (custom)
  • Scrollspy
  • Vertical and Horizontal Alignments
  • Media Object
Responsive Design & Advanced Grid
  • Responsive Utilities
  • Responsive Images (.img-fluid)
  • Flexbox Utilities (d-flex, justify-content, align-items)
  • Grid Customization
  • Gutters and No-Gutters
  • Position Utilities (relative, absolute, fixed, etc.)
Advanced Bootstrap
  • Theming with Sass Variables (Bootstrap 5+)
  • Customizing Bootstrap (override default styles)
  • Bootstrap Icons
  • Using JavaScript Plugins (without jQuery in Bootstrap 5)
  • Bootstrap with jQuery (for legacy versions)
  • Accessibility (ARIA roles, focus management)
  • Integrating Bootstrap with other frameworks (React, Laravel, etc.)

React JS

React Basics
  • What is React?
  • Setting Up a React Project: Using Create React App (CRA), Using Vite
  • JSX (JavaScript XML)
  • Functional vs Class Components
  • Rendering Elements
  • Props (Properties)
  • State (useState Hook)
  • Event Handling
  • Conditional Rendering
  • Lists and Keys
  • Inline Styling and CSS in React
React Component Patterns
  • Component Composition
  • Container vs Presentational Components
  • Reusable Components
  • Prop Drilling
  • Controlled vs Uncontrolled Components
  • Forms and Input Handling
  • Fragments (<>)
Routing and Navigation
  • React Router (v6+): Route Parameters, Nested Routes, Redirects and Navigation, useNavigate, useParams, useLocation
Hooks (Functional Components)
  • UseState , UseEffect
  • UseRef , UseContext
  • useReducer, useCallback
  • useMemo , Custom Hooks
Advanced Concepts
  • Context API (Global State Management)
  • Higher-Order Components (HOC)
  • Error Boundaries
  • Refs and DOM Manipulation
  • Portals
  • Lazy Loading and Suspense
  • Code Splitting
State Management
  • Lifting State Up
  • State Management with Context
  • Redux (Toolkit): 1 Store, Actions, Reducers , 2 Middleware (Thunk) ,3 useSelector & useDispatch
  • Zustand or Recoil (optional alternatives)
  • API Error Handling
API Integration
  • Fetching Data with fetch or axios
  • useEffect for API Calls
  • Loading and Error States
  • Pagination and Infinite Scroll
Performance & Optimization
  • useMemo vs useCallback
  • Memoization
  • Debouncing and Throttling
  • Profiler API
  • Lazy and Suspense for Performance
Testing in React
  • Introduction to Testing
  • Testing with React Testing Library
  • Unit Testing Components
  • Snapshot Testing
  • Mocking API Calls
React Ecosystem & Tooling
  • React Developer Tools
  • ESLint & Prettier in React
  • Component Libraries (MUI, Ant Design, Tailwind UI)
  • Animation Libraries (Framer Motion, React Spring)
  • Internationalization (i18n)
Deployment & Build
  • Building for Production
  • Hosting on Netlify, Vercel, GitHub Pages
  • Environment Variables
  • Continuous Deployment with GitHub Actions

Redux

Redux Fundamentals
  • What is Redux and Why Use It?
  • Core Principles of Redux : Single Source of Truth, State is Read-Only , Pure Functions
  • Redux vs Context API
  • Redux Architecture (Store, Actions, Reducers)
Basic Redux Setup
  • Installing Redux and React-Redux
  • Creating a Redux Store
  • Actions and Action Creators
  • Reducers (Pure Functions)
  • Using Redux DevTools
Modern Redux with Redux Toolkit
  • Introduction to Redux Toolkit (RTK)
  • configureStore()
  • createSlice() - Reducers + Actions
  • Using useSelector() and useDispatch()
  • Redux Toolkit Best Practices
Async Actions and Middleware
  • What is Middleware?
  • Using Redux Thunk for Async Logic
  • Writing Async Thunks with createAsyncThunk
  • Loading and Error States
Advanced Redux Patterns
  • Normalizing State Shape
  • Memoization and Reselect
  • Combining Multiple Reducers
  • Middleware Customization
  • Redux Logger Middleware
  • Debugging Redux with Tools and Logs
Testing Redux
  • Testing Reducers
  • Testing Action Creators
  • Testing Async Thunks
  • Testing React Components with Redux State
Redux Toolkit Query (RTK Query)
  • What is RTK Query?
  • API Slice with createApi()
  • Fetching and Mutating Data
  • Automatic Caching and Re-fetching
  • RTK Query with Authentication Headers
  • Error Handling and Loading States in RTK Query

jQuery

Introduction to jQuery
  • What is jQuery?
  • Why use jQuery?
  • jQuery CDN vs Local file
  • jQuery Syntax Overview ($(selector).action())
Selectors
  • Basic selectors (*, #id, .class, element)
  • Hierarchy selectors (div p, ul > li)
  • Attribute selectors (input[type="text"])
  • Filter selectors (:first, :last, :eq(), :odd, :even)
Events
  • click(), dblclick()
  • hover(), mouseenter(), mouseleave()
  • focus(), blur()
  • keydown(), keyup(), keypress()
  • submit(), change(), resize(), scroll()
  • on() method (recommended for dynamic elements)
Effects and Animations
  • show(), hide(), toggle()
  • fadeIn(), fadeOut(), fadeToggle()
  • slideDown(), slideUp(), slideToggle()
  • animate() method (custom animations)
  • stop() method
DOM Manipulation
  • html(), text(), val()
  • attr(), prop()
  • addClass(), removeClass(), toggleClass(), hasClass()
  • css() – Get/Set CSS styles
  • append(), prepend(), after(), before()
  • remove(), empty()
Traversing
  • parent(), parents(), children()
  • next(), prev(), siblings()
  • find(), filter(), eq(), first(), last(), not()
Form Handling
  • Getting/setting input values
  • Validating form fields using jQuery
  • Showing validation error messages dynamically
  • Disabling/enabling buttons and inputs
jQuery Plugins
  • What are jQuery plugins?
  • How to include and use a plugin
  • Examples: Datepicker, Lightbox, Slick slider
jQuery AJAX
  • $.ajax()
  • $.get(), $.post()
  • Loading external data without page refresh
  • Handling JSON data
  • Success and error callbacks
jQuery JSON Handling
  • Parse and stringify JSON
  • Display JSON data in HTML
  • Using jQuery with APIs
Event Delegation
  • Difference between on() and direct binding
  • Handling dynamically created elements
jQuery and HTML5 Data Attributes
  • Using data-* attributes with .data()
jQuery Deferred and Promises
  • What is a deferred object?
  • Chaining asynchronous actions
Performance Optimization
  • Minimize DOM access
  • Cache selectors
  • Use .on() instead of repeated bindings
  • Unbind unused events
Error Handling
  • try...catch with jQuery
  • Handling AJAX errors gracefully
Optional Tools & Integration
  • Using jQuery with Bootstrap (Modals, Dropdowns)
  • Integrating jQuery with backend (PHP, CodeIgniter, Laravel, etc.)
  • jQuery vs JavaScript: When to use what
Get verified and unlimited jobs in your email everyday. Visit JobsEager to apply.