M24-CAP-101 Client Side Web Technology
| Part A – Introduction | ||||
| Name of the Programme | MCA | |||
| Semester | 1st | |||
| Name of the Course | Client-side Web Technology | |||
| Course Code | M24-CAP-101 | |||
| Course Type | CC-1 | |||
| Level of the course (As per Annexure-I | 400-499 | |||
| Pre-requisite for the course (if any) | – | |||
| Course Objectives | This course aims to provide a comprehensive understanding of front- end development using the MERN stack, covering HTML, CSS, and JavaScript basics. Students will learn about React for building dynamic user interfaces, including components, state management, and event handling. The course also explores advanced topics such as React Router, Redux for state management, and advanced hooks for managing side effects and context. | |||
| Course Learning Outcomes (CLO) After completing this course, the learner will be able to: | CLO-1. Gain an understanding of the web development process and the components of the MERN stack, with a focus on HTML structure, CSS styling, and responsive design.
CLO-2 Develop foundational JavaScript skills, including control structures, functions, objects, arrays, and DOM manipulation for dynamic web interactions. CLO-3 Learn the basics of React, including JSX, components, state management, lifecycle methods, and handling events and forms within React applications. CLO-4 Master advanced React topics like React Router for navigation, state management with Redux, and using advanced hooks for managing complex state and side effects. |
|||
| Credits | Theory | Practical | Total | |
| 4 | 0 | 4 | ||
| Teaching Hours per week | 4 | 0 | 4 | |
| Internal Assessment Marks | 30 | 0 | 30 | |
| End Term Exam Marks | 70 | 0 | 70 | |
| Max. Marks | 100 | 0 | 100 | |
| Examination Time | 3 hours | |||
| Part B- Contents of the Course | ||||
| Instructions for Paper- Setter: The examiner will set 9 questions asking two questions from each unit and one compulsory question by taking course learning outcomes (CLOs) into consideration. The compulsory question (Question No. 1) will consist at least 4 parts covering entire syllabus. The examinee will be required to attempt 5 questions, selecting one question from each unit and the compulsory question. All questions will carry equal marks. | ||||
| Unit | Topics | Contact Hours | ||
| I | Basics of Front End Development: Overview of web development (Front End vs. Back End), Understanding the MERN stack and its components, Tools and environments (text editors, browsers, version control with Git); HTML (HyperText Markup Language): Structure of an HTML document, HTML elements and attributes, Forms and input types, Semantic HTML (header, footer, article, section, nav); CSS (Cascading Style Sheets): Basics of CSS (syntax, selectors, properties), CSS Box Model, Positioning and layout (float,
flexbox, grid), Responsive design (media queries, mobile-first design). |
15 | ||
| II | Basics of JavaScript: Introduction to JavaScript, Variables, data types, and operators, Control structures (if, else, switch, loops); Functions and Scope: Defining and invoking functions, Function expressions and arrow functions, Scope and closures; Objects and Arrays: Creating and manipulating objects, Array methods and iteration; Regular Expressions: Introduction to RegExp, Regular expression usage, Modifiers, RegExp | 15 | ||
| patterns, RegExp methods, String methods for RegExp; DOM Manipulation and Events: Selecting and manipulating DOM elements, Event handling and delegation, Creating and appending elements dynamically | |||||
| III | Introduction to React: Overview and advantages of React, Setting up a React development environment (using Create React App); JSX (JavaScript XML): Understanding JSX syntax, Embedding expressions in JS, JSX best practices; Components and Props: Functional and class components, Props and component communication, Prop types and default props.; State and Lifecycle: Understanding state in React, State management in class components, Lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount); Event Handling and Forms: Handling events in React, Controlled vs. uncontrolled components, Form handling and validation | 15 | |||
| IV | React Router: Introduction to React Router, Setting up and configuring routes, Navigating between routes and passing parameters; State Management with Redux: Introduction to Redux, Setting up Redux with React, Actions, reducers, and store, Connecting Redux to React components; Advanced Hooks: Using built-in hooks (useEffect, useContext, useReducer), Creating custom hooks, Managing side effects with useEffect | 15 | |||
| Total Contact Hours | 60 | ||||
| Suggested Evaluation Methods | |||||
| Internal Assessment: 30 | End Term Examination: 70 | ||||
| ➢ Theory | 30 | ➢ Theory | 70 | ||
| • Class Participation: | 5 | Written Examination | |||
| • Seminar/presentation/assignment/quiz/class test etc.: | 10 | ||||
| • Mid-Term Exam: | 15 | ||||
| Part C-Learning Resources | |||||
| Reference Books:
1) Flanagan, D. (2020). JavaScript: The Definitive Guide. O’Reilly Media. 2) Kogent Learning. (2009). Web Technologies: HTML, JavaScript, PHP, Java, JSP, XML, AJAX – Black Book. Wiley India Pvt. Ltd. 3) Duckett, J. (2014). JavaScript and jQuery: Interactive Front-End Web Development. Wiley. 4) Robson, E., & Freeman, E. (2014). Head First JavaScript Programming: A Brain-Friendly Guide. O’Reilly Media. 5) Banks, A., & Chinnathambi, K. (2017). Learning React: Functional Web Development with React and Redux. O’Reilly Media. |
|||||
