Integral University, Lucknow

Effective from Session: 2023-2024

Full Stack Development Lab Using MERN Lab (Paper-
Course Code CA228 Title of the Course L T P C
I)
Year II Semester IV 0 0 3 2
Pre-Requisite None Co-requisite
• To learn and apply the basic tags of HTML5 for creating web pages.
• To learn and create responsive web page(s) using Bootstrap.

Course Objectives • To learn and implement Client-Side scripting using JavaScript.

• To learn and implement Client-Side scripting using AngularJS framework
• To learn and create web-based projects using ReactJS

Course Outcomes
CO1 Able to create web page(s) using HTML5 tags.
CO2 Able to create responsive web page(s) using Bootstrap
CO3 Able to implement Client-Side scripting using JavaScript.
CO4 Able to implement Client-Side scripting using AngularJS framework
CO5 Able to create web-based projects using ReactJS

Exper
Title of the Contact Mapped
iment Content of Unit
Experiment Hrs. CO
No.
Create a web with the following information and structure using HTML5 tags like:
1 HTML5 <header>, <footer>, <nav>, <aside>, <section> and article> 2 CO1

Make a button with a text “start download”, when click in start download a progress bar
must be initialized with value 0 then increase by 10 in each second then at the end of
2 HTML5 2 CO1
downloading process alert the message (“Download completed”) try to change the color of
progress bar after every three seconds.
• Design a nice simple responsive web form for a workshop event registration.
• It needs to be mobile first, but it also needs to look nice for tablet / desktop.
3 Bootstrap 2 CO2
• Some key fields for attendees to submit: Name, phone number, email address, address,
profession. You can add more if you wish.
• Add 2 content segments to the above form that need to be responsive.
4 Bootstrap • Add in a synopsis, and also a speaker profile. Mock up content using ipsum lorem text. 2 CO2
• Add in an image or icon represent the speaker.
5 JavaScript Write a JavaScript program to convert a 2D array to a comma-separated value (CSV) string. 2 CO3
6 JavaScript Write a JavaScript program to remove HTML/XML tags from strings. 2 CO3
7 Angular JS Using Angular JS develop code to Shape Size using Range bar 2 CO4
8 Angular JS Using Angular JS develop code for Rupee to Dollar & Dollar to Rupee Convertor 2 CO4
ReactJS React code to build a simple search filter functionality to display a filtered list based on the
9 2 CO5
search query entered by the user.
ReactJS React exercise to create an image slide, where users can view multiple images with
10 next/previous buttons. Additionally, there is also an option to select an image from any index 2 CO5
of the list through a click-on option circle.
Reference Books:
1. Eddie Pickford, “Full Stack Development with MERN", Eddie Pickford
2. Eddy Wilson Iriarte Koroliova, “MERN Quick Start Guide", Packt Publishing
3. Nabendu Biswas, “Ultimate Full-Stack Web Development with MERN", AVA Technical Books

e-Learning Source:
1. Institutional Learning Management System i.e Integral Learning Initiative (ILI)
2. NPTEL Video Lectures

Course Articulation Matrix: (Mapping of COs with POs and PSOs)

PO-
PSO PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2 PSO4 PSO5 PSO6 PSO7
CO
CO1 1 1 3 1
CO2 2 3 1 1 2 1
CO3 2 1 3 1 1 2
CO4 1 1 3 1 2
CO5 1 2 3 1 2
1- Low Correlation; 2- Moderate Correlation; 3- Substantial Correlation