Syllabus for B.

Tech (CSE) III YEAR II SEM

Computer Science and Engineering
WEB TECHNOLOGIES

Code: 9FC06 L T P/D C

2 1 0 3
Prerequisite: Computer Networks, Object-Oriented Programming concepts

Objectives:
1. To impart the basics knowledge of HTML5, CSS3 and Tailwind CSS
2. To develop proficiency in JavaScript programming.
3. To comprehend the fundamentals of MERN stack development
4. Todesign and implement RESTful APIs:
5. To build interactive and user-friendly web applications with ReactJS.

Course Outcomes:
Upon completing the course, a student will be able to
CO 1: Web Technologies Foundations: Students will master HTML5, including semantic elements,
Web Storage API usage, and comprehension of HTTP status codes.
CO 2: CSS and Responsive Design Proficiency: Graduates will demonstrate expertise in CSS3,
covering syntax, types, box model, Grid, Flexbox, Responsive Web Design, and practical knowledge of
the Tailwind CSS framework.
CO 3: JavaScript Mastery and Advanced Concepts: Participants will achieve proficiency in
JavaScript, understanding data types, functions, arrays, objects, along with advanced concepts like let,
const, arrow functions, and Promises.
CO 4: Full Stack Development Essentials: Students will have acquired foundational knowledge in web
servers, REST API principles, Express framework usage, MongoDB integration, and an introduction to
the MERN stack.

Unit I
HTML 5: Semantic Elements, Web storage API, HTTP status codes.
CSS 3: Syntax structure, types, box model, Grid, Flexbox. Responsive Web Design using Media
Queries, use of viewport, Transition, Animation.
CSS Framework: Tailwind css

Unit II
JavaScript: Introduction to JavaScript, data types, functions, Arrays, Objects, Regular expressions
Advanced JavaScript concepts: let, const, arrow functions, destructuring, spread, rest, Prototypal
Inheritance,Closure, understanding callbacks, Promise, Async/await.

UNIT III
Introduction to MERN: What is MERN?, MERN components, Server-Less Hello World, Server setup.
Node JS: Introduction to [Link], REPL, Node Modules: events, OS, HTTP, file i/o, environment
variables, dotenv

Unit IV
Web Servers: client-server architecture, request-response objects,creating a basic HTTP server
Rest API: Introduction to RESTAPIs, HTTP verbs

Unit V
74
Express Framework: Introduction to Express, Installation of Express, Create first Express application,
application, request, and response objects, configuring an Express application, Rendering views,
sessions, forms, file upload. Connecting to an SQL database
MongoDB: Introduction to MongoDB, connecting to a MongoDB instance with Node, Reading from
MongoDB, Writing to MongoDB.

Unit VI
Introduction to ReactJS: History of Front – end libraries, Motivation for using React, Key
differentiators (Virtual DOM, one – way binding), React Components, JSX, props hooks, state, events,
effects, fetching data from API using fetch, form validations, React Router, building and deploying react
application.

TEXTBOOKS:
1. Beginning HTML, XHTML, CSS, and JavaScript, Jon Duckett, Wrox Publications, 2010
2. Pro MERN Stack, Full Stack Web App Development with Mongo, Express, React, and Node,Vasan
Subramanian, 2nd Edition, A Press.

REFERENCES:
1. E – resource: [Link]
2. E – resource : [Link]
3. E – resource :[Link]
4. E – resource :[Link]
5. E – resource :[Link]
6. E – resource :[Link]

75
 Syllabus for [Link] (CSE) III YEAR II SEM
Computer Science and Engineering
Web Technologies Lab
L T P/D C
Code: 9FC66 0 0 3 1.5

Objectives:
1. Apply HTML5 and CSS3 skills to create functional and visually appealing web pages.
2. Develop interactive web applications using JavaScript and DOM manipulation.
3. Build and deploy full-stack web applications using the MERN stack.
4. Design and implement RESTful APIs using [Link] and [Link].
5. Create interactive and user-friendly web interfaces with ReactJS.

Course Outcomes:
Upon successful completion of this course, :
CO 1: Web Development Foundations: Students will master HTML5, applying semantic elements,
utilizing the Web Storage API, and demonstrating proficiency in CSS3, encompassing syntax, types,
box model, Grid, Flexbox, Responsive Web Design, and practical application of the Tailwind CSS
framework.
CO 2: JavaScript Mastery and Advanced Concepts: Participants will achieve proficiency in
JavaScript, understanding data types, functions, arrays, objects, and mastering advanced concepts like
let, const, arrow functions, and Promises through practical coding scenarios.
CO 3: Server-Side Development Essentials: students will acquire foundational knowledge in web
servers, REST API principles, and Express framework usage for rendering views, handling sessions,
forms, file uploads, and connecting to an SQL database.
CO 4: Database Integration and MERN Stack Introduction: In the laboratory setting, students will
gain hands-on experience connecting to MongoDB with Node, reading and writing data, while also
receiving an introduction to the MERN stack, covering MERN components, serverless architecture,
[Link] fundamentals, and basic server setup.

Note: Students can select any 3 Problem Statements from each Cycle

Cycle 1:
Problem Statement 1: Responsive Personal Portfolio Website (2 hours)
Create a responsive personal portfolio website using HTML5 and CSS3. The website should include
sections for your profile, skills, experience, projects, and contact information. Use Tailwind CSS to style
the website and ensure it is responsive across different screen sizes.
Problem Statement 2: E-commerce Product Page (3 hours)
Design and develop an e-commerce product page using HTML5, CSS3, and Tailwind CSS. The page
should display product information, including images, descriptions, prices, and options for adding to
cart. Use Tailwind CSS to create a visually appealing and consistent layout.
Problem Statement 3: Interactive Blog Post with Comments (3 hours)
Create an interactive blog post with comments using HTML5, CSS3, and JavaScript. The blog post
should include a title, author, content, and a comment section. Use JavaScript to enable users to submit
comments and display them on the page.
Problem Statement 4: Adaptive Landing Page for Different Devices (2 hours)
Develop an adaptive landing page that adjusts its layout and content based on the user's device. Use
HTML5, CSS3, and JavaScript to detect the device type and display the appropriate content. Employ
media queries and responsive design techniques to ensure the page looks great on all devices.
78
Cycle 2:
Problem Statement 1: Dynamically Generated Content with JavaScript (2 hours)
Create a web page that dynamically generates content using JavaScript. The page should include a
button that, when clicked, generates a new random number and displays it on the page. Use JavaScript
to manipulate the Document Object Model (DOM) to add and remove elements.
Problem Statement 2: Interactive Shopping Cart with JavaScript (3 hours)
Develop an interactive shopping cart using JavaScript. The cart should allow users to add and remove
items, update quantities, and calculate the total price. Utilize JavaScript arrays and objects to store
product information and manage cart operations.
Problem Statement 3: Regular Expression-Based Text Manipulation (3 hours)
Build a web application that performs text manipulation using regular expressions. The application
should allow users to enter a text string and provide options for search, replace, and formatting.
Implement regular expression patterns to identify and modify specific text elements.
Problem Statement 4: Asynchronous Data Fetching and Display with JavaScript Promises and
Async/await (2 hours)
Create a web page that fetches data from an API asynchronously using JavaScript promises and
Async/await. The page should display a loading indicator while the data is being fetched and then render
the data in a list or table. Demonstrate the use of promises to handle asynchronous operations and
improve code readability.
Cycle 3:

Problem Statement 1: Building a Simple REST API with MERN Stack (2 hours)

Create a simple REST API using the MERN stack (MongoDB, [Link], [Link], and [Link]). The
API should allow users to perform basic CRUD (Create, Read, Update, Delete) operations on a data
collection, such as a list of tasks or products. Design the API endpoints, implement the server-side logic
using [Link] and [Link], and connect the API to a MongoDB database.

Problem Statement 2: Developing a Server-Side Application with [Link] and [Link] (3 hours)

Build a server-side application using [Link] and [Link]. The application should provide an endpoint
to accept user input, perform some processing, and return a response. Implement error handling and
logging mechanisms to ensure the application runs reliably. Explore using [Link] modules for common
tasks, such as file I/O and data validation.

Problem Statement 3: Working with Environment Variables and Dotenv in [Link] Applications
(2 hours)

Create a [Link] application that utilizes environment variables and dotenv to manage sensitive
configuration data. Implement dotenv to load environment variables from a .env file and use them
throughout the application. Demonstrate how to access and update environment variables securely.

Problem Statement 4: Implementing Event-Driven Programming with [Link] (3 hours)

Develop an event-driven [Link] application that utilizes the [Link] EventEmitter API. Create custom
events to represent different occurrences, such as user actions or sensor readings. Register event
listeners to handle these events and perform appropriate actions. Explore using modules like async/await
to manage asynchronous event handling.

79
Cycle 4:
Problem Statement 1: Building a Simple Web Server with HTTP Request Handling (2 hours)
Create a basic HTTP server using [Link] and [Link]. The server should handle GET and POST
requests, respond with appropriate HTTP status codes, and parse request payloads. Implement route
handling to direct requests to specific functions for processing.
Problem Statement 2: Designing and Implementing a REST API for Resource Management (2
hours)
Design a REST API for managing a collection of resources, such as books or products. Define the API
endpoints for each resource operation (Create, Read, Update, Delete) and map them to HTTP verbs
(POST, GET, PUT, DELETE). Implement the API using [Link] and [Link], including error
handling and validation checks.
Cycle 5:
Problem Statement 1: Developing a Full-Stack Web Application with Express and MongoDB (2
hours)
Create a full-stack web application using [Link] and MongoDB. The application should allow users
to create, read, update, and delete (CRUD) data stored in a MongoDB database. Implement the Express
framework to handle routing, request processing, and templating. Utilize MongoDB to store and retrieve
data using the [Link] MongoDB driver.
Problem Statement 2: Building a REST API with Express and MongoDB for User Management (3
hours)
Design and implement a REST API using [Link] and MongoDB for user management. The API
should allow users to register, login, update their profiles, and manage their data. Implement
authentication and authorization mechanisms to secure user access. Utilize MongoDB to store user
information and session data.
Problem Statement 3: Creating a File Upload Application with Express and MongoDB (2 hours)
Develop a file upload application using [Link] and MongoDB. The application should allow users to
upload files, store them in MongoDB, and retrieve them later. Implement file handling techniques to
ensure secure and efficient file uploads and storage. Utilize MongoDB to store file metadata and
references.
Problem Statement 4: Implementing Image Processing and Display with Express and MongoDB
(3 hours)
Build an image processing and display application using [Link] and MongoDB. The application
should allow users to upload images, apply image processing filters, and display the processed images.
Utilize image processing libraries to manipulate images and store processed images in MongoDB.
Implement image rendering techniques to display images on the web page.
Cycle 6:
Problem Statement 1: Building a Dynamic ReactJS Application with State Management (2 hours)
Create a dynamic ReactJS application that manages state using hooks. The application should display a
list of items and allow users to add, remove, and update items. Implement state management techniques
to keep the UI in sync with data changes. Utilize hooks like useState and useEffect to handle state
updates and side effects.
Problem Statement 2: Developing a Data-Driven ReactJS Application with API Fetching (3 hours)
Build a data-driven ReactJS application that fetches data from an API and renders it on the UI. The
application should display a list of data items retrieved from the API and allow users to filter and search
for items. Implement data fetching techniques using the fetch API or libraries like Axios. Utilize state
management to store and update data from the API.
Problem Statement 3: Creating a User Interface with React Router for Navigation (2 hours)
Develop a user interface with React Router for navigation between different components and routes. The
application should have multiple pages, such as a home page, a contact page, and an about page.
Implement React Router components to handle routing and provide smooth transitions between pages.
Utilize nested routes to organize complex navigation structures.
80
Problem Statement 4: Building and Deploying a ReactJS Application to a Hosting Platform (3
hours)
Build a complete ReactJS application and deploy it to a hosting platform like Netlify or Vercel. The
application should have a functional UI, interact with APIs, and handle user input. Implement build
tools like Webpack or Parcel to bundle and optimize the application. Configure the deployment
environment and deploy the application to the chosen hosting platform.

REFERENCES:
1. E – resource: [Link]
2. E – resource : [Link]
3. E – resource :[Link]
4. E – resource :[Link]
5. E – resource :[Link]
6. E – resource :[Link]

81