React Course Syllabus in Chennai at Payilagam

HTML & CSS in React Course Syllabus

Project 1: Facebook / Instagram Login Page

• 🔹 Introduction to HTML syntax, Introduction to CSS
• 🔹 Block-level vs Inline elements
• 🔹 Common elements: <div>, <span>, <a>, <br>, <hr>, & so on
• 🔹 Flex Properties, Input Types, Nesting elements correctly
• 🔹 Basic selectors: element, class, ID
• 🔹 Grouping and combining selectors, Attribute selectors
• 🔹 Combinators:descendant, child (>), adjacent sibling (+), sibling (~)

Project 2: Google Landing Page

• 🔹 Global attributes: id, class, title, style, lang
• 🔹 Ordered Lists: <ol>, <li>, Unordered Lists: <ul>, <li>
• 🔹 Description Lists: <dl>, <dt>, <dd>
• 🔹 Data Specific attributes: href, src, alt, type, value, placeholder
• 🔹 Boolean attributes: checked, disabled, readonly, required

Project 3: Forms Using HTML & CSS

• 🔹 <form> element and its attributes (action, method, etc.)
• 🔹 Input fields: <input>, <textarea>, <select>, <option>, <button>
• 🔹 Fieldsets, legends, and labels
• 🔹 Form validation (required, pattern, minlength, maxlength)
• 🔹 Understanding content, padding, border, and margin
• 🔹 Using box-sizing: border-box
• 🔹 Visualizing box dimensions with dev tools, Margin collapsing

Project 4: Resume

• 🔹 Creating tables with <table>, <tr>, <th>, <td>
• 🔹 Table structure: <thead>, <tbody>, <tfoot>
• 🔹 Merging cells with colspan and rowspan
• 🔹 Table accessibility and semantics
• 🔹 Nesting and styling lists
• 🔹 block, inline, inline-block, none, flex, grid
• 🔹 Visibility: hidden vs display: none

Project 5: YouTube

• 🔹 Introduction to grid layout
• 🔹 Creating columns and rows using grid-template-columns and
• 🔹 grid-template-rows
• 🔹 Placing items with grid-column, grid-row
• 🔹 Grid gap, alignment, and nested grids

Project 6: Product Card

• 🔹 Static, Relative, Absolute, Fixed, Sticky
• 🔹 Using top, right, bottom, left with positioning
• 🔹 Z-index and stacking context
• 🔹 Media Queries for responsive designs

Project 7: ILUGC Website

• 🔹 Images: <img>, srcset, alt, picture
• 🔹 Video: <video>, controls, autoplay, loop, muted
• 🔹 Audio: <audio>, controls, autoplay, loop, preload
• 🔹 Embedding YouTube and other media
• 🔹 Grid, Navigation Bar, Display properties
• 🔹 Mouse hover functionalities

Project 8: Portfolio Website

• 🔹 Importance of semantic elements for SEO & accessibility
• 🔹 Elements: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
• 🔹 When and where to use semantic tags
• 🔹 Creating a Nav Bar, Internal Linking Multiple HTML Pages, Border Radius

JavaScript in React Course Syllabus

Module 1: Variables and Date Types

• 🔹 Understand var, let, and const when and why to use each
• 🔹 Explore JavaScript’s powerful dynamic typing system
• 🔹 Work with strings, numbers, booleans, null, undefined, and more

Module 2: Operators & Logic

• 🔹 Arithmetic, assignment, comparison, and logical operators
• 🔹 Master the building blocks of computation and condition

Module 3: Conditionals & Control Flow

• 🔹 Decision-making with if, else, else if
• 🔹 switch Statement
• 🔹 ternary operator
• 🔹 Write clean, readable branching logic

Module 4: Loops & Iteration

• 🔹 for, while, and dowhile loops
• 🔹 Introduction to forEach() for working with arrays

Module 5: Functions

• 🔹 Function declarations
• 🔹 Function expressions
• 🔹 Arrow functions: cleaner syntax, smarter scopes
• 🔹 Parameters, return values, and function composition
• 🔹 Call Back Function, Closure, Constructor function

Module 6: Objects & Arrays

• 🔹 Introduction to Object
• 🔹 nested objects, object methods
• 🔹 Create and manipulate object literals
• 🔹 Understand this in different contexts
• 🔹 Work with arrays: push, pop, shift, unshift, splice
• 🔹 Use powerful array methods: map(), filter(), reduce() for real-world data tasks

Module 7: Document Object Model (DOM)

• 🔹 Selecting Elements: Use document.getElementById, ClassName,
• 🔹 TagName, GetElementsByClassName, GetElementsByTagName,
• 🔹 querySelector & So On
• 🔹 Change text, classes, styles, attributes, creating new elements,
• 🔹 removing existing elements dynamically
• 🔹 Event Handling: OnClick(), OnMouseHover(), OnDoubleClick(), Add Event listeners, & So on

Module 8: Asynchronous

• 🔹 synchronous
• 🔹 Asynchronous
• 🔹 Callback and callback hell
• 🔹 promise
• 🔹 async/await
• 🔹 Application programming interface (Fetch and Axios API)

JavaScript Projects

Project 1: Counter App

• 🔹 Variables, data types, operators
• 🔹 interaction with HTML elements using the DOM

Project 2: Password Hide/Show

• 🔹 input types, interaction with HTML attributes using the DOM
• 🔹 event handling (onClick())

Project 3: RunAwayButton

• 🔹 Learn button and positions, interaction with CSS using the DOM
• 🔹 event handling (mouseHover())

Project 4: Typing Speed Checking

• 🔹 Interaction with an HTML input box using the DOM
• 🔹 event handling (onInput(), onChange()), Using arithmetic operators

Project 5: To-Do list with local storage

• 🔹 Introduction to local storage
• 🔹 Storing and retrieving data
• 🔹 Creating, Updating, and Deleting HTML Elements Dynamically
• 🔹 Interaction with CSS (text-decoration)

Project 6: image slider

• 🔹 Functions
• 🔹 Conditional Statements, Looping
• 🔹 CSS positioning
• 🔹 event handling, basic animations

Project 7: Calculator

• 🔹 use inbuilt functions
• 🔹 Creating an attractive calculator UI
• 🔹 Operators, conditional statements, and mouse hover animations

Project 8: Form validation

• 🔹 Conditional statements, form attributes, event handling
• 🔹 Interaction with CSS using the DOM
• 🔹 Validating inputs using conditional statements

Project 9: Weather application

• 🔹 Fetching weather data using API
• 🔹 Learn asynchronous functions
• 🔹 Getting Data from JSON as key and value
• 🔹 Using array methods: Map, forEach
• 🔹 Sending HTTP requests

Project 10: Product card

• 🔹 Fetching Product data using API, learn asynchronous functions
• 🔹 Adding features like Add to Cart Button
• 🔹 Looping through array methods
• 🔹 Event handling (onClick(), onMouseHover())

React Course Syllabus

Module 1: React Fundamentals

• 🔹 What is React? Why React?
• 🔹 SPA vs MPA
• 🔹 Setup using Vite or Create React App
• 🔹 JSX syntax and rules
• 🔹 Functional Components
• 🔹 Props and Component Reusability
• 🔹 Conditional rendering
• 🔹 Lists and keys

Module 2: State Management with Hooks

• 🔹 useState, useEffect, useRef, useContext
• 🔹 State lifting
• 🔹 Form handling with controlled components
• 🔹 Projects: Counter Application, password hide/show, typing speed check

Module 3: React Router (v6+)

• 🔹 BrowserRouter, Routes, Route
• 🔹 Link and NavLink
• 🔹 Nested routing
• 🔹 Dynamic routing with URL params
• 🔹 useNavigate and programmatic routing
• 🔹 Projects: multi-page web app, toggle theme

Module 4: Working with APIs

• 🔹 HTTP methods and REST principles
• 🔹 Using fetch and Axios, API calls with useEffect
• 🔹 Handling loading, error, and empty states
• 🔹 Search and filtering from API data
• 🔹 Projects: weather app, e-commerce web app

Module 5: Advanced Hooks

• 🔹 useReducer for complex state management
• 🔹 useMemo and useCallback for optimisation
• 🔹 Custom hooks
• 🔹 Debouncing and throttling with hooks
• 🔹 Projects: form validation

Module 6: Global State Management

• 🔹 Understanding prop drilling
• 🔹 Context API with custom hooks
• 🔹 Redux Toolkit: Slices, store, useDispatch/useSelector, Async thunks
• 🔹 React Query / TanStack Query (Bonus)
• 🔹 Projects: quiz application

Module 7: Styling in React

• 🔹 CSS Modules
• 🔹 Tailwind CSS
• 🔹 Styled-components
• 🔹 Responsive design strategies

Module 8: Code Optimisation & Best Practices

• 🔹 Component reusability, React.memo and pure components
• 🔹 Lazy loading and code splitting using React
• 🔹 lazy and Suspense
• 🔹 Error boundaries, Folder structure and naming conventions

Module 10: Deployment & DevOps Basics

• 🔹 Building React apps for production
• 🔹 Hosting on Netlify, Vercel, or GitHub Pages
• 🔹 Using environment variables (.env)
• 🔹 Introduction to CI/CD using GitHub Actions
• 🔹 The above project will be hosted using Vercel