Course Content
Module 1: HTML, CSS, Bootstrap
- HTML Basics:
- Introduction to HTML structure (tags, elements, attributes)
- Semantic HTML (header, footer, article, section)
- Forms and input elements (text, radio, checkbox, select, etc.)
- Media elements (images, videos, and audio)
- Tables and lists (unordered, ordered, and description lists)
- CSS Basics:
- CSS selectors, properties, and values
- Box model (margin, border, padding, content)
- Flexbox and Grid layout systems
- CSS animations and transitions
- Responsive design using media queries
- Bootstrap Framework:
- Setting up Bootstrap in projects
- Grid system and responsive design
- Common components (navbar, cards, modals, alerts)
- Forms with validation
- Customizing Bootstrap themes
- Mini Project: Build a responsive portfolio website.
Module 2: JavaScript and Advanced JavaScript
- JavaScript Basics:
- Execution context, complier
- Library vs framework
- ECMAS
- Variables (var, let, const)
- Garbage collection & Memory allocation concepts during variable creation and code execution.
- Deep copy
- Data types and type conversions
- Loops (for, while, forEach)
- Functions (function expressions, arrow functions)
- Anonymous function, Closures
- DOM manipulation (selectors, events, creating/updating elements)
- Advanced JavaScript:
- Asynchronous JavaScript: Callback, Promises, async/await
- Fetch API and Axios for HTTP requests
- ES6+ Features: Destructuring, template literals, Modules (import/export), Spread/rest operators, Default and optional parameters
- Object-Oriented JavaScript: Classes and prototypes, Inheritance and encapsulation
- Error handling with try-catch
- Mini Project: Build a dynamic to-do list app with local storage.
Module 3: TypeScript
- Introduction to TypeScript
- Core TypeScript Features:
- Basic types: string, number, boolean, any, unknown
- Arrays, tuples, and enums
- Interfaces and type aliases
- Functions with types (parameters, return types, optional parameters)
- Classes and inheritance
- Advanced TypeScript:
- Generics and utility types
- Decorators
- Type assertions and guards
- Working with third-party TypeScript libraries
- Mini Project: Refactor the to-do list app using TypeScript.
Module 4: React Js Basics
- Getting Started with React:
- Setting up a React project with create-react-app or Vite
- Understanding JSX and its syntax
- Components - Functional and class components, props & state
- Event handling in React
- React Core Concepts:
- Conditional rendering
- Lists and keys
- Forms with controlled and uncontrolled components
- Advanced React:
- Context API for global state management
- React hooks (useState, useEffect, useContext)
- Routing with react-router-dom (v6+)
- Mini Project: Convert to-do app to React js
Module 5: Node.js with MongoDB Backend
- Introduction to Node.js:
- Setting up a Node.js project
- Understanding package.json and npm/yarn
- Core modules: fs, path, http
- Setting up an Express server
- Handling routes (GET, POST, PUT, DELETE)
- Middleware and request-response cycle
- MongoDB Basics:
- Introduction to MongoDB (NoSQL vs SQL)
- Setting up MongoDB locally or using Atlas
- CRUD operations - Insert, find, update, delete (Using mongoose for schema validation)
- Connecting Node.js with MongoDB:
- Establishing a connection with Mongoose
- Defining models and schemas
- Querying and updating the database
- Authentication:
- Implementing JWT-based authentication
- Password hashing with bcrypt
- Mini Project: Create a RESTful API for employee add, update, delete, view with login and authentication.
Module 6: Basic Project Setup, Execution, and Build
- Project Setup
- Frontend-Backend Integration
- Build and Deployment