24CS810-Modern Front-End Frameworks

and SPA Development

Hours per week:

L T P SL C
3 0 2 3 4

PREREQUISITE KNOWLEDGE: HTML5, CSS3, JavaScript (ES6), React Basics,

MongoDB, Web Technologies, Git & GitHub

COURSE DESCRIPTION AND OBJECTIVES: This course introduces frontend web

development using HTML5, CSS3, JavaScript, and React, enabling students to design
responsive, interactive, and accessible web applications. It covers advanced styling techniques,
modern JavaScript concepts, React components, and integration with MongoDB. Students will
learn best practices for SEO, cross-browser compatibility, and performance optimization. The
course also focuses on deploying web applications on platforms like Netlify and Vercel while
applying version control and monitoring techniques. By the end, students will be able to
develop, analyze, and deploy full-fledged web applications effectively.

MODULE-1
UNIT-I 12L+0T+8P+12SL=32 Hours
HTML & HTML5: Introduction to frontend development, structure of an HTML document,
semantic HTML elements, headings, paragraphs, lists, links, images, tables, forms, input types
and attributes, multimedia elements, accessibility basics, and SEO-friendly HTML structure.

CSS & CSS3 Styling Basics: Introduction to CSS, CSS syntax and selectors, inline, internal
and external CSS, colors and background properties, text and font styling, box model concepts,
display and visibility properties, positioning techniques, float and clear, responsive design
principles, and media queries.

UNIT-II 12L+0T+8P+12SL=32 Hours

Advanced CSS: Flexbox layout system, CSS Grid layout, responsive layouts, CSS transitions,
animations, pseudo-classes, pseudo-elements, CSS variables, best practices, and cross-browser
compatibility.

JavaScript: Basics of JavaScript, introduction to JavaScript, variables and data types,

operators and expressions, conditional statements, loops, functions, arrays, objects, DOM
manipulation, events, and basic form validation.

PRACTICES:
  Create a basic HTML5 webpage using semantic elements such as header, nav, section,
and footer.
 Design an HTML form for student registration using different input types and form
controls.
 Create a webpage that demonstrates lists, tables, images, and hyperlinks.
 Apply external CSS to style a webpage using colors, fonts, backgrounds, and borders.
 Design a webpage layout using the CSS box model and explain margin, padding, and
border through styling.
 Create a responsive webpage using media queries for mobile, tablet, and desktop
screens.
 Implement a webpage layout using CSS Flexbox for proper alignment of elements.
 Design a webpage layout using CSS Grid with multiple rows and columns.
 Write a JavaScript program to perform basic form validation using DOM manipulation.
 Develop a mini webpage using HTML, CSS, and JavaScript that includes basic
interactivity and responsive design.

MODULE – II
UNIT – I 12L+0T+8P+12SL=32 Hours

JavaScript Advanced Concepts: JavaScript scope and hoisting, closures, arrow functions,
template literals, destructuring, spread and rest operators, promises, async and await, error
handling, and the event loop.

React: Introduction to React, environment setup, JSX syntax, components, props, functional
components, state management basics, event handling, conditional rendering, lists and keys,
and Styling React components.

UNIT – II 12L+0T+8P+12SL=32 Hours

MongoDB: Introduction to MongoDB, MongoDB data types, Document-oriented data model,

Collections and documents, JSON formats, Basic CRUD operations, querying documents,
Schema design basics, Indexing basics, Role of MongoDB in web applications, Connections
between frontend applications and MongoDB using API commands.

Deployment: Introduction to application deployment, frontend build process, development

and production environments, environment variables, bundling and optimization techniques,
static website deployment, React application deployment, hosting platforms overview (Netlify,
Vercel), version control integration, continuous deployment basics, domain and DNS
configuration, performance optimization after deployment, error handling in production,
monitoring deployed applications, and best practices for frontend deployment.

PRACTICES:
  Write a JavaScript program demonstrating scope, hoisting, and closures with proper
output.
 Create a JavaScript example using arrow functions, destructuring, and spread
operator.
 Implement Promises and async/await to fetch and display data from a public API.
 Develop a simple React application using functional components and JSX to
display static content.
 Create a React component that uses state and props to dynamically update and
display data.
 Design a simple HTML form to collect user details and display the data using
JavaScript.
 Create an online ticket booking system using MongoDB CRUD operations (insert,
update, delete, and retrieve booking details from a collection)
 Create a JavaScript program to send and receive data from MongoDB using API
commands.
 Demonstrate the use of JSON format for storing and transferring data between
frontend and MongoDB.
 Build a mini application showing connection between frontend, API, and
MongoDB, displaying stored data on a webpage.

COURSE OUTCOMES:
Upon successful completion of this course, students will have the ability to:

CO Bloom’s Modul Mapping

Course Outcomes
No. Level e No. with POs
Understand the fundamentals of
Understandi
1 HTML5, CSS3, and webpage structure 1 1,2
ng
for frontend development..
Apply CSS styling, responsive design,
JavaScript, and React concepts to
2 Apply 1,2 3,5
develop interactive and dynamic
webpages.
Analyze and debug frontend and
backend integration, including DOM
3 manipulation, API communication, and Analyze 1,2 2, 5
MongoDB CRUD operations.
Apply deployment, performance
optimization, and accessibility principles
4 Apply 2 3,5,6
for real-world web applications.

TEXT BOOKS
1. HTML and CSS: Design and Build Websites by Jon Duckett – A beginner-to-advanced
guide for HTML5 and CSS3 with visual examples.
 2. JavaScript: The Definitive Guide by David Flanagan – Comprehensive coverage of
JavaScript fundamentals and advanced ES6+ features.
3. Learning React: Modern Patterns for Developing React Apps by Alex Banks & Eve
Porcello – Focuses on building modern, scalable React applications.
4. Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and
Node – Vasan Subramanian

REFERENCE BOOKS
1. Eloquent JavaScript by Marijn Haverbeke – Practical exercises and deep understanding
of JavaScript concepts.
2. MDN Web Docs (Mozilla Developer Network) – Official reference for HTML, CSS,
javaScript, and React documentation.
3. Full Stack Web Development for Beginners: Learn to Build Modern Websites and Apps
Using HTML, CSS, JavaScript, React, [Link], MongoDB.