COURSEPACK

FRAMEWORK

The Course Pack is a comprehensive and complete pedagogical guideline document that describes the
components of instruction delivery by a faculty member. It consists of the scheme of the course, Course
Overview, Course Objectives, Prerequisite course, Program-specific Outcomes (PSOs), Course outcomes
(COs), Bloom’s taxonomy (Knowledge Levels), Types of Courses, Course articulation matrix, Course
assessment patterns, Course content, Lesson Plan, Bibliography, Problem-based learning/case-
studies/clinical, and Student-Centered learning (self-learning towards life-long-learning). It not only
provides a uniform design of Course delivery across the University but also ensures freedom and
flexibility to introduce innovations in learning and teaching and create vivid kinds of assessment tools
(alternate assessment tools) by a faculty member.
The course pack is developed by the faculty member teaching a course. If more than one faculty teaches
the same course, all the faculty members teaching the course shall be formed as a cluster, and a senior
faculty member (Course-lead) lead the Course delivery design in a team effort. The Course Pack provides
ample scope and opportunity to bring innovations in teaching pedagogies in a school/department.
Hence, the Course pack is a comprehensive learning-teaching strategy framework to be followed by all
the faculty members in schools/departments in the university. It is not only a tool for measuring the
learning of a class but also analyses the achievement levels (learning outcomes of the course) of all the
students in a class in a continuous manner.

: for internal circulation only : 2

 1. THE SCHEME
The scheme is an overview of work-integrated learning opportunities and gets students out into the real
world. This will give what a course entails.

Course Title Frontend Development Course Type Comprehensive

B. Tech Core & Specialization
Course Code R1UC508C Class Vth Semester
Activity Credits weekly Hours Total Number of Classes Assessment in
Lecture 3 3 per Semester Weightage

Practical
Tutorial 0 0

Tutorial
Theory
Instruction

study
Self-

SEE
CIE
delivery Practical 1 2
Self-study 1 4

Total 5 9
45 0 30 60 50% 50%
Ms. Neha Bagwari Course Mr. R radhaKrishnan
Course Lead
Coordinator
Theory Practical

1. Dr. Vipin Rai 1. Dr. Vipin Rai

2. Ms. Neha Bagwari 2. Ms. Neha Bagwari
Names Course
Instructor 3. Mr. R radhaKrishnan 3. Mr. R radhaKrishnan
4. Mr. Gaurav Kumar 4. Mr. Gaurav Kumar
5. Mr. ravindra Singh Koranga 5. Mr. ravindra Singh Koranga
6. Ms. Neha Kumari 6. Ms. Neha Kumari
Program Chair Dr. Sumit Kumar Mishra(Full stack Development)

2. COURSE OVERVIEW
Frontend development involves building the user interface (UI) and user experience (UX) of websites and
applications. This course covers the essential technologies and tools required to create visually appealing,
responsive, and interactive web pages.

3. COURSE OBJECTIVE
Understand the core principles of HTML, CSS, and JavaScript, enabling students to build well-structured,
responsive, and visually appealing websites.

: for internal circulation only : 3

 COURSEPACK
FRAMEWORK

4. PREREQUISITE COURSE
PREREQUISITE COURSE REQUIRED No

Course code Course Title

If, yes please fill in the Details

5. PROGRAM OUTCOMES (POs):

In general, the Program Outcomes are defined by the respective apex body or council. In the event the POs are not
prescribed by a Council, then the concerned school offering the program to design and develop the POs based on the PEOs.
This has to be approved by the concerned BOS and submitted to the Academic Council for approval. After the completion of
the course, the student will be able to:
PO No. Description of the Program Outcome

PO1 Computing Science knowledge: Apply the knowledge of mathematics, statistics, computing science and information
science fundamentals to the solution of complex computer application problems.

PO2 Problem analysis: Identify, formulate, review research literature, and analyze complex computing science problems
reaching substantiated conclusions using first principles of mathematics, natural sciences, and computer sciences.

PO3 Design/development of solutions: Design solutions for complex computing problems and design system components
or processes that meet the specified needs with appropriate consideration for the public health and safety, and the
cultural, societal, and environmental considerations.

PO4 Conduct investigations of complex problems: Use research-based knowledge and research methods including
design of experiments, analysis and interpretation of data, and synthesis of the information to provide valid
conclusions.

PO5 Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern computing science and
IT tools including prediction and modeling to complex computing activities with an understanding of the limitations.

PO6 IT specialist and society: Apply reasoning informed by the contextual knowledge to assess societal, health, safety,
legal and cultural issues and the consequent responsibilities relevant to the professional computing science and
information science practice.

PO7 Environment and sustainability: Understand the impact of the professional computing science solutions in societal
and environmental contexts, and demonstrate the knowledge of, and need for sustainable development.

PO8 Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of the computing
science practice.

PO9 Individual and team work: Function effectively as an individual, and as a member or leader in diverse teams, and in
multidisciplinary settings.

PO10 Communication: Communicate effectively on complex engineering activities with the IT analyst community and
with society at large, such as, being able to comprehend and write effective reports and design documentation, make
effective presentations, and give and receive clear instructions.

PO11 Project management and finance: Demonstrate knowledge and understanding of the computing science and
management principles and apply these to one’s own work, as a member and leader in a team, to manage projects and

: for internal circulation only : 4

 in multidisciplinary environments.

PO12 Life-long learning: Recognize the need for, and have the preparation and ability to engage in independent and life-
long learning in the broadest context of technological change.

6. PROGRAM SPECIFIC OUTCOMES (PSOs):

Program Specific Outcomes (PSO) are statements that describe what the graduates of a discipline-specific program should be
able to do. Two to Three PSOs per program should be designed.

PO No. Description of the Program-Specific Outcome

PSO1 Have the ability to work with emerging technologies in computing requisite to Industry 4.0.

PSO2 Demonstrate Engineering Practice learned through industry internship and research project to
solve live problems in various domains.

7. COURSE CONTENT (THEORY + PRACTICAL)

CONTENT (Syllabus)

Web Development & Frontend Development Using HTML

Introduction Web Development , Types of Websites (Static and Dynamic Websites), Web Standards and W3C
recommendations, Introduction to HTML: What is HTML , HTML Documents, Basic structure of an HTML document ,
Creating an HTML document , Mark up Tags , Heading-Paragraphs , Line Breaks Elements of HTML: HTML Tags., Working
with Text , Working with Lists, Tables and Frames, Working with Hyperlinks, Images and Multimedia, Working with Forms and
controls, Components of Dynamic HTML, Uses of DHTML, Features of DHTML, Difference between HTML and DHTML,
DHTML DHTML Events, DHTML DOM
Frontend Design Using CSS
Concept of CSS: Creating Style Sheet, CSS Properties , CSS Styling(Background, Text Format, Controlling Fonts) , Working
with block elements and objects , Working with Lists and Tables , CSS Id and Class, Box Model(Introduction, Border properties,
Padding Properties, Margin properties) CSS Advanced(Grouping, Dimension, Display, Positioning, Floating, Align, Pseudo
class, Navigation Bar, Image Sprites, Attribute sector) , CSS Color , Creating page Layout and Site Designs.
Frontend Development Using (VanillaJS)
Introduction to Client Side Scripting , Introduction to Java Script , Javascript Types , Variables in JS, Operators in JS ,
Conditions Statements , Java Script Loops, JS Popup Boxes , JS Events , JS Arrays, Working with Arrays, JS Objects ,JS
Functions , Using Java Script in Real time , Validation of Forms, Related Examples, (VanillaJS)Working with examples
Frontend Development Using React
Introduction, Installation of React plugins in IDE , Installation of Node, and NPM,React, ES6 Features, Advanced JavaScript,
React Native, React vs React Native, Styling & Layout Original DOM vs Virtual DOM, Elements, JSX, Components, React
Components with and without JSX, Working with state and props , Rendering lists, event Handling.

: for internal circulation only : 5

 COURSEPACK
FRAMEWORK

8. COURSE OUTCOMES (COs)

After the completion of the course, the student will be able to:
CO No. Description of the Course Outcome

Understand, Visualize and Recognize the basic concept of HTML ,CSS , and JS in web
R1UC508C .1
designing.
R1UC508C .2 Recognize and apply the CSS techniques for responsive design
Develop and deploy a responsive, accessible, and optimized web application using modern
R1UC508C .3
frontend tools and technologies
Design a comprehensive frontend solution using modern frameworks like React, integrating
R1UC508C .4
API data and ensuring responsiveness and accessibility.
9. TAXONOMY LEVEL OF THE COURSE OUTCOMES
Bloom’s taxonomy is a set of hierarchical models used for the classification of educational learning objectives into levels of
complexity and specificity. The learning domains are cognitive, affective, and psychomotor.
Mapping of COs with Bloom’s Level
Remember Understand Apply Analyse Evaluate Create
CO No. KL1 KL 2 KL 3 KL 4 KL 2 KL 6

R1UC508C.1 √

R1UC508C.2 √ √

R1UC508C.3 √

R1UC508C.4 √

10. COURSE ARTICULATION MATRIX

The Course articulation matrix indicates the correlation between Course Outcomes and Program Outcomes and their
expected strength of mapping in three levels (low, medium and high).
CO/PO Mapping (1 / 2 / 3 indicates strength of correlation) 3 - Strong, 2 - Medium, 1 – Low
Programme Outcomes (POs)
PO PO
COs PO2 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2
1 3
R1UC508C.1 2 1 1 2
R1UC508C.2 2 1 2
R1UC508C.3 2 1 1 2
R1UC508C.4 2 1 2 2 1 1 1 1 1 1
Note: 1-Low, 2-Medium, 3-High \ *first semester first course and first Course Outcome

: for internal circulation only : 6

 11. TYPICAL EXAMPLE OF COURSES, CREDIT HOURS AND TEACHING HOURS
Credits Hours Hours of engagement/ Week 15 weeks/
semester

Total

Total
Type of Course Remarks

Theory

Tutorial
Theory

Tutorial

Practical

Practical

Self-study
Self-study
Total no.
of classes

Theory Course 3 0 0 0 3 3 0 0 0 3 45 45 classes for theory

Theory Course 45 classes for theory and

3 1 0 0 4 3 1 0 0 4 60
with Tutorial 15 for tutorial
Lab Course 0 0 1 0 1 0 0 2 0 2 30 30 hours lab sessions

45 classes for theory and

Integrated Course 3 0 1 0 4 3 0 2 0 5 75
30 hours of lab sessions
Comprehensive 45 classes for theory &
3 0 1 1 5 3 0 2 3 5+3* 75
Course 30 hours of lab sessions
Seminar/Project/
0 0 0 0 1 0 0 0 0 0 0 -
Internship Course

Theory/Tutorial/
L-No Topic for Delivery Skill Competency
Practical Plan
Course introduction , Introduction Web
1 Theory
Development
Types of Websites (Static and Dynamic R1UC508C.1
2 Websites), Web Standards and W3C Theory
recommendations
Introduction to HTML: What is HTML , HTML
3 Documents, Basic structure of an HTML Theory
document

4 a. Write a program to create lists. Practical Use Visual Studio

IDE
b. Write a program to create Tables.
5 Practical
Creating an HTML document , Mark up Tags ,
6 Theory
Heading-Paragraphs
Line Breaks Elements of HTML, Working with
7 Theory
Text, Images and Multimedia
Working with Lists , Working with Hyperlinks Theory
8 R1UC508C.2
9 a. Write an HTML code to display your education Practical

: for internal circulation only : 7

 COURSEPACK
FRAMEWORK

details in a tabular format.

b. Write an HTML code to create a Home page
10 having three links: About Us, Our Services and Practical
Contact Us. Create separate web pages for the
three links.
11 Working with Tables and Frames, Theory
Working with Forms and controls, Components of
12 Dynamic HTML Theory
Uses of DHTML, Features of DHTML, Difference
13 between HTML and DHTML, DHTML Events, Theory
DOM
Write HTML/CSS to display your CV in navigator,
14 your Institute website, Department Website and Practical
Tutorial website for specific subject
15 Practical
16 Concept of CSS: Creating Style Sheet Theory
17 CSS Properties Theory
CSS Styling(Background, Text Format, Controlling
18 Fonts). Theory
Integrate HTML
19 a. Create a webpage with all types of Cascading Practical with CSS
style sheets.
and
20 b. Client Side Scripts for Validating Web Form Practical design Frontend
Controls using DHTML.
Working with block elements and objects
21 Theory
Working with Lists and Tables
22 Theory
CSS Id and Class, Box Model(Introduction, Border
23 properties Theory
Create a web page with the following using HTML.
• To embed an image map in a web page.
24 • To fix the hot spots. Practical
• Show all the related information when the hot spots
are clicked.
Write an HTML code to create a Home page having
25 three links: About Us, Our Services and Contact Us. Practical
Create separate web pages for the three links.

26 Padding Properties, Margin properties) Theory Select Advanced

CSS Advanced :Grouping, Dimension Theory CSS selectors
27
for designing
28 CSS Advanced:Display, Positioning, Theory
web pages
Write an HTML code to create a login form. On
29 submitting the form, the user should get navigated to Practical
a profile page.
Write an HTML code to create a Registration Form.
30 On submitting the form, the user should be asked Practical

: for internal circulation only : 8

 to login with this new credentials.

31 Floating, Align, Pseudo class, Theory

32 Navigation Bar, Image Sprites Theory
Attribute sector , CSS Color , Creating page Layout
33 and Site Designs Theory
Write an HTML code to create a frameset having
34 header, navigation and content sections. Practical
Write an HTML code to demonstrate the usage
35 of external CSS. Practical
Introduction to Client Side Scripting , Introduction to
36 Java Script Theory
Javascript Types , Variables in JS, Operators in JS
37 Theory

38 Conditions Statements , Java Script Loops Theory

a. Write an HTML page that contains a
39 Practical
selection box with a list of 5 countries In the
above page when the user selects a country,
its capital should be printed next to the list,
and add CSS to customize the properties of
the font of the capital.
b. Write an HTML page that has one input,
which can take multi-line text and a submit
40 button. Once the user clicks the submit Practical
button ,it should show the number of
characters ,lines and words in the text
entered using an alert message. Words are
separated with white space and lines are
separated with new line character.
Apply VanillaJS for
JS Popup Boxes developing Web
41 Theory Applications
JS Events , JS Arrays, Working with Arrays
42 Theory
JS Objects ,JS Functions , Using Java Script in Real R1UC508C.3
43 Time Theory
Write an HTML page with Javascript that takes a
44 number from one text field in the range 0-999 and Practical
display it in other text field in words.If the number is
out of range ,it shold show “out of range” and if it is
45 not a number ,it should show “not a number” message Practical
in the result box.

: for internal circulation only : 9

 COURSEPACK
FRAMEWORK

Validation of Forms, Related Examples,

46 Theory
(VanillaJS)Working with examples
47 Theory
Introduction, Installation of React plugins in IDE ,
48 Installation of Node Theory
49 Design and implement a simple shopping cart Practical
Website using HTML,CSS & JS.
50 Practical
ES6 Features
51 Theory
Advanced JavaScript
52 Theory
React Native, React vs React Native
53 Theory
54 Design Our University clone Website using Practical
Frontend frameworks.
55 Practical
Styling & Layout Original
56 Theory
57 DOM vs Virtual DOM, Elements Theory
58 JSX, Components Theory
59 Write an HTML program to design an entry form Practical
of student details and send it to store at database
60 server like SQL, Oracle or MS Access Practical
61 React Components with and without JSX Theory Use React for
62 React Components with and without JSX Theory developing Web
63 Working with state and props Theory Applications
R1UC508C.4
64 Design a simple web application from learning Practical
Write JavaScript to validate the following fields
of the above registration page. 1. Name (Name
should contains alphabets and the length should
not be less than 6 characters). 2. Password
(Password should not be less than 6 characters
65 length).3. E-mailid (should not contain any Practical
invalid and must follow the standard
pattern(name@domain.com) 4. Phone
Number(Phone number should contain 10 digits
only).
Rendering lists
66 Theory
event Handling
67 Theory
FrontEnd Project -1 using Frameworks
68 Theory
Design a web page using CSS(Cascading Style Sheets)
69 Practical
which includes the following: 1) Use different font,
styles: In the style definition you define how each
selector should work(font, color etc.). Then, in the
70 Practical
body of your pages, you refer to these selectors to
activate the styles. 2) Set a background image for

: for internal circulation only : 10

 both the page and single elements on the page.

FrontEnd Project -1 using Frameworks

71 Theory
FrontEnd Project -2 using Frameworks
72 Theory
Design and develop
FrontEnd Project -2 using Frameworks
73 Theory Applications using
Consider a small topic of your choice on which you advance
74 can develop static Webpages and try to implement Practical frameworks
all topics of html, CSS and Js within the topic. Choose
75 any one topic. 1. Your Own Portfolio 2. To-Do List 3. Practical
Survey Form 4. A Tribute Page 5. A Questionnaire
*1 credit = 3 self-learning hours (Not to mention in the lesson plan)

12. BIBLIOGRAPHY
Text Books
1. Deitel and Deitel and Nieto, ―Internet and World Wide Web - How to Program‖, Prentice Hall, 5th Edition, 2011.
Reference Books
1. Stephen Wynkoop and John Burke ―Running a Perfect Website‖, QUE, 2nd Edition,1999.
2. Chris Bates, Web Programming – Building Intranet Applications, 3rd Edition, Wiley Publications, 2009.
Webliography
1. https://www.coursera.org/projects/rudi-hinds-web-development-in-reactjs-build-a-web-app?
2. https://www.udemy.com/course/the-complete-web-development bootcamp

MOOCsCourses

1. Coursera: Coursera offers a range of animation-related courses from various universities

and institutions. Search for Frontend development courses, and you'll find options on
both Web and Mobile development. Example :Web Development in React.js: Build a
Web App
2. Udemy: Udemy has numerous Frontend courses on different software, and visual effects.
Example : The Complete 2024 Web Development Bootcamp

13. COURSE ASSESSMENT

Assessment forms an integral part of curriculum design. A learning-teaching system can only be effective if the student’s
learning is measured at various stages which means while the student processes learning (Assessment for Learning) a given
content and after completely learning a defined content (Assessment of Learning). Assessment for learning is referred to as
formative assessment, that is, an assessment designed to inform instruction.
The ability to use and apply the knowledge in different ways may not be the focus of the assessment. With regard to
designing assessments, the faculty members must be willing to put in the time required to create a valid, reliable assessment,
that ideally would allow students to demonstrate their understanding of the information while remaining. The following are
the five main areas that assessment reporting should cover.

: for internal circulation only : 11

 COURSEPACK
FRAMEWORK

1. Learning Outcomes: At the completion of a program, students are expected to know their knowledge, skills, and
attitude. Depending on whether it is a UG or PG program, the level of sophistication may be different. There should be
no strict rule on the number of outcomes to be achieved, but the list should be reasonable, and well-organized.
2. Assessable Outcomes: After a given learning activity, the statements should specify what students can do to
demonstrate. Criteria for demonstration are usually addressed in rubrics and there should be specific examples of work
that doesn’t meet expectations, meets expectations, and exceeds expectations. One of the main challenges is faculty
communication whether all faculty agreed on explicit criteria for assessing each outcome. This can be a difficult
accomplishment when multiple sections of a course are taught or different faculty members. Hence there is a need for
common understanding among the faculty on what is assessed and how it is assessed.
3. Assessment Alignment: This design of an assessment is sometimes in the form of a curriculum map, which can be
created in something as easy as an Excel spreadsheet. Courses should be examined to see which program outcomes they
support, and if the outcome is assessed within the course. After completion, program outcomes should be mapped to
multiple courses within the program.
4. Assessment Planning: Faculty members need to have a specific plan in place for assessing each outcome. Outcomes
don’t need to be assessed every year, but faculty should plan to review the assessment data over a reasonable period of
time and develop a course of action if the outcome is not being met.
5. Student Experience: Students in a program should be fully aware of the expectations of the program. The program
outcomes are aligned on the syllabus so that students are aware of what course outcomes they are required to meet,
and how the program outcomes are supported. Assessment documents should clearly communicate what is being done
with the data results and how it is contributing to the improvement of the program and curriculum.
Designing quality assessment tools or tasks involves multiple considerations if it is to be fit for purpose. The set of
assessments in a course should be planned to provide students with the opportunity to learn as they engage with
formative tasks as well as the opportunity to demonstrate their learning through summative tasks. Encouraging the
student through the use of realistic, authentic experiences is an exciting challenge for the course faculty team, who are
responsible for the review and quality enhancements to assessment practices.

14. DIFFERENCE BETWEEN FORMATIVE AND SUMMATIVE ASSESSMENT

a) Formative Assessment
The goal of formative assessment is to monitor student learning to provide ongoing feedback that can be used by Course
Faculty to improve their teaching and by students to improve their learning. More specifically, formative assessments help
students identify their strengths and weaknesses and target areas that need work, and faculty members recognize where
students are struggling and address problems immediately. Examples of formative assessments include Mid Term Exam
(MTE) as well as asking students to:
 Draw a concept map in class to represent their understanding of a topic
 Submit one or two sentences identifying the main point of a lecture
 Turn in a research proposal for early feedback

b) Summative assessment
The goal of summative assessment is to evaluate student learning at the end of a Course by comparing it against some
standard or benchmark. Examples of summative assessments include:
 a final project
 a paper
 Semester-End Examination (For courses running in Semester mode)
 End-Term Examination (For courses running in Annual Mode)
Information from summative assessments can be used formatively when students or faculty use it to
guide their efforts and activities in subsequent courses.

: for internal circulation only : 12

 c) Weightage
The formative and summative assessments are given 50-50 weightage to ensure proper learning levels among the students.

14.1 Assessment Pattern for Theory Course:

CIE Total Marks

Type of Course (T) Final Marks CIE*0.5+SEE*0.5

IA1 # MTE IA2 # CIE SEE

THEORY 25 50 25 100 100 100

# Typical Rubric for the Internal Assessments

Type of Assessment Tools QUIZ AAT$/MOOC Certifications

Internal Assessments 10 15

$ AAT is Literature survey, Seminar, Assignment, Term Paper, Slip Test (or) MOOC Certificate relevant to the course

14.2Assessment Pattern for Integrated (Blended) Course:

CIE Total Marks

Type of Course (B) Final Marks CIE*0.5+SEE*0.5

LAB Work@ + Record MTE LAB EXAM* CIE SEE

INTEGRATED 25 50 25 100 100 100

@ Lab Work-15 marks + Lab Record-10 marks
*
Passing Criteria-30% of marks to be secured in the lab Exam conducted by two examiners (one internal and one external)

14.3Assessment Pattern for Comprehensive Course:

CIE Total Marks
Final Marks
Type of Course (C) LAB@(Work+ Course-based CIE*0.5+SEE*0.5
Record) MTE Project^ CIE SEE

COMPREHENSIVE 25 50 25 100 100 100

@ Lab Work-15 marks + Lab Record-10 marks

^Typical Rubric for the Course-based project

Technical Seminar
Type of Assessment Tools Preliminary Project Plan TRL-1 Viva-voce

Course-based Project Work 05 05 10 05

PPP (Preliminary Project Plan): The preliminary project plan (PPP) provides an initial, overview of the project and all of its
known parameters. It outlines the project’s objectives, relevance to the program, merit, and conformity to current industry/
government policy, proposed methodology, and expected outcomes. It should also include any known constraints related to
the time frame (Gantt Chart), budget, etc.

: for internal circulation only : 13

 COURSEPACK
FRAMEWORK

TRL (Technology Readiness Level)-1: Basic Research: Initial scientific research has been conducted. Principles are
qualitatively postulated and observed. Focus is on new discovery rather than applications.

14.4Assessment Pattern for Two Credit MOOC Courses (Online/Self-Paced Learning)

Type of Course (M) CIE Total Marks
Final Marks
IA1 IA2 CIE* SEE CIE+SEE

2 CREDIT MOOC COURSES 25 25 50 50 100

*
from MOOC portal

14.5 Assessment Pattern for Lab Course:

CIE Total Marks
Final Marks
Type of Course (L) LAB Work@ + CIE+SEE
Record LAB TEST CIE SEE LAB EXAM*

LABORATORY 25 25 50 50 100
@ Lab Work-15 marks + Lab Record-10 marks
*
Passing Criteria-30% of marks to be secured in the lab Exam conducted by two examiners (one internal and one external)

14.6Assessment Pattern for Seminar/Minor Project/Internship Course:

Type of Course (V) CIE Total Marks Final Marks
CIE+SEE
IA1@ IA2@ CIE SEE

SEMINAR/PROJECT/INTERNSHIP 25 25 50 50 100

@ Rubric to be specified by the concerned Faculty

14.7Assessment Pattern for Final Year Student Capstone Project:

CIE Total Marks
FinalMarks
CIE+SEE
Conclusion/
Identification

Methodology
Experimental/

Findings
ResultAnalysis
Problem

LiteratureReview/

Type of Course (R)

Applicability

CIE SEE%

CAPSTONE PROJECT 10 10 10 10 10 50 50 100

: for internal circulation only : 14

 %Typical Rubric for SEE
Formulation of
Problem TRL (Technology Readiness Level) Presentation Viva Voce
Statement

20 (TRL-1 to TRL-4)

10 0 marks for 5 marks for 10 marks 15 marks 20 marks for 10 10

no TRL TRL-1 for TRL-2 for TRL-3 TRL-4

TRL 1 Basic Initial scientific research has been conducted. Principles are qualitatively postulated and
Research observed. Focus is on new discovery rather than applications.

Initial practical applications are identified. Potential of material or process to solve a problem,
TRL 2 Applied Research satisfy a need, or find application is confirmed.

TRL 3 Critical Function or

Applied research advances and early stage development begins. Studies and laboratory
Proof of Concept
measurements validate analytical predictions of separate elements of the technology.
Established

TRL 4 Lab Testing/

Validation of Alpha Design, development and lab testing of components/processes. Results provide evidence that
Prototype Component/ performance targets may be attainable based on projected or modelled systems.
Process
Note: Council Driven Programs can follow their own assessment pattern.

15. PASSING STANDARDS

High standards are maintained in all aspects of the examination. The relative grading method is followed. The minimum
standard of passing in respect of CIE and SEE for each course as shown in the table shall be effective from the academic
session 2022-23 onwards.
Note: The programs running with the approval of respective councils shall follow the passing standards as defined by the
respective councils.
Passing Criteria for Different Course Types Effective from AY 2022-23 Onwards
S.No. Course Type Passing Criterion

1. Theory Course (T) A student shall secure a minimum of 30% of the maximum marks in the
semester-end examination (SEE/ETE) and 40% of aggregate marks in the
course including Continuous internal examination (CIE) and SEE/ETE marks.
i.e., the minimum Passing Grade is “P”.

2. Integrated course (B) A student shall secure a minimum of 30% of the maximum marks in the
semester-end examination (SEE/ETE), 30% of the maximum marks in the LAB
EXAM, and 40% of aggregate marks in the course Continuous internal
examination (CIE) and SEE/ETE marks i.e., minimum Passing Grade in a course
is “P”.

: for internal circulation only : 15

 COURSEPACK
FRAMEWORK

3. Comprehensive Course (C) A student shall secure a minimum of 30% of the maximum marks in the
semester-end examination (SEE/ETE) and 40% of aggregate marks in the
course Continuous internal examination (CIE) and SEE/ETE marks i.e.,
minimum Passing Grade in a course is “P”.

4. Lab Course (L) A student shall secure a minimum of 30% of the maximum marks in the SEE
LAB EXAM and 40% of aggregate marks in the course Continuous internal
examination (CIE) and SEE/ETE marks i.e., minimum Passing Grade in a course
is “P”.

5. Seminar/Project/ A student shall secure a minimum of 40% of aggregate marks in the

Internship Course (R) Continuous internal examination (CIE) and SEE/ETE marks i.e., minimum
Passing Grade in a course is “P”.
Note: Students unable to meet the overall passing criteria as mentioned in Sr. No-1, 2 & 3 shall be
eligible for the following options to clear the course:
▪ Appear in the Back Paper Examinations and have to meet the criteria to score 40% in marks
overall ▪ appear in summer examinations (internal +External) to meet the criteria as per Sr. No-1, 2
& 3.
16. PROBLEM-BASED LEARNING/CASE STUDIES/CLINICS
Exercises in Problem-based Learning (Assignments) (Min 54 Problems)
S.No Prerequisite Problems
1 Describe the structure of an HTML document.
2 What are HTML elements and tags? Provide examples.

3 How do you create a hyperlink in HTML?

4 What is the difference between block-level and inline elements?

5 Explain the purpose of the DOCTYPE declaration in HTML.

6 What is the difference between <div> and <span> tags?

7 How can you include an image in an HTML document?

8 What is the purpose of the <head> tag in an HTML document?

9 Explain the use of the alt attribute in the <img> tag.

10 How do you create a table in HTML?

11 What is semantic HTML? Give examples of semantic elements.

12 How do you embed a video in an HTML document?

13 Explain the difference between the id and class attributes.

14 What are HTML forms and how do you create one?

15 How do you create a list in HTML? Explain the types of lists.

16 What is an iframe and how do you use it?

17 What is the purpose of the <meta> tag?

: for internal circulation only : 16

 18 How do you specify the character encoding for an HTML document?

19 Explain the use of the data- attributes in HTML.

20 Explain the use of DHTML.

Course Related Problem

21 Build a fully functional and responsive single-page portfolio website.

22 Create a responsive login form with show/hide password functionality and form validation.

23 Develop a blog with a content management system (CMS) using HTML, CSS, and JavaScript.

24 Implement a responsive navigation drawer that slides in from the side on smaller screens.

25 Create an interactive data visualization (e.g., a bar chart or line graph) using a JavaScript library like Chart.js.

26 Build a fully functional e-commerce product page with an image gallery, product options, and a shopping
cart.
27 Design a real-time collaborative text editor using WebSocket and local storage for data persistence.

28 Create a progressive web app (PWA) that can be installed on a user's device and works offline.

29 Implement a drag-and-drop interface for organizing items on a webpage.

30 Build a task management application with categories, due dates, and priority levels.

31 Build a to-do list application with add, edit, and delete functionalities using vanilla JavaScript.

32 Create a modal popup that opens and closes with a button click and an overlay background.

33 Implement a countdown timer that counts down to a specific date and time.

34 Develop a form validation script that checks for required fields, email format, and password strength.

35 Build a simple image carousel/slider with previous and next buttons using JavaScript.

36 Create a dynamic table of contents for a webpage that highlights the current section as you scroll.

37 Implement a search filter that dynamically filters a list of items based on user input.

38 Build a weather app that fetches and displays weather data from an API.

39 Create a real-time chat application using WebSocket (or a similar technology).

40 Develop a memory game where players need to match pairs of cards.

41 Build a to-do list application with add, edit, and delete functionalities using vanilla JavaScript.

42 Create a modal popup that opens and closes with a button click and an overlay background.

43 Implement a countdown timer that counts down to a specific date and time.

44 Develop a form validation script that checks for required fields, email format, and password strength.

45 Build a simple image carousel/slider with previous and next buttons using JavaScript.

: for internal circulation only : 17

 COURSEPACK
FRAMEWORK

Value Added Problems

46 Virtual Reality (VR) Experience

• Features: Create an immersive VR experience that users can explore. Implement

navigation controls and interactive elements.
• Technologies: HTML, CSS, JavaScript, WebVR or A-Frame.

47 Customizable Photo Editor

• Features: Allow users to upload, edit, and apply filters to photos. Include features
like cropping, resizing, and adjusting brightness/contrast.
• Technologies: HTML, CSS, JavaScript, Canvas API.

48 • Gamified Learning Platform

• Features: Create interactive learning modules with gamification elements (e.g.,

quizzes, achievements, progress tracking).
• Technologies: HTML, CSS, JavaScript, local storage or backend for data
persistence.

49 Real-Time Analytics Dashboard

• Features: Display real-time data and analytics with live updates and interactive
charts. Allow users to filter and explore data dynamically.
• Technologies: HTML, CSS, JavaScript, Chart.js or D3.js, WebSockets.

50 Responsive Email Template Builder

• Features: Build and preview responsive email templates with drag-and-drop

functionality. Generate HTML code for the template.

Technologies: HTML, CSS, JavaScript, email template libraries

51 • Personal Finance Management App

• Features: Track expenses, income, and investments with budgeting tools and visual
reports. Include features like expense categorization and goal setting.
• Technologies: HTML, CSS, JavaScript, Chart.js or D3.js, local storage.

52 Interactive Map with Custom Markers

• Features: Display an interactive map with custom markers, info windows, and

: for internal circulation only : 18

 geolocation features. Allow users to add and manage their own markers.
• Technologies: HTML, CSS, JavaScript, Google Maps API or Leaflet.js.

53 • Social Media Dashboard

• Features: Aggregate and display data from various social media platforms. Provide
analytics, trends, and user engagement metrics.
• Technologies: HTML, CSS, JavaScript, social media APIs (e.g., Twitter, Facebook).

54 AI-Driven Recommendation Engine

• Features: Implement a recommendation engine that suggests products, content, or

actions based on user behavior and preferences. Use machine learning models or
APIs.
• Technologies: HTML, CSS, JavaScript, AI/ML API (e.g., TensorFlow.js or a
recommendation service).

55 Advanced Code Editor

• Features: Implement features like syntax highlighting, code completion, and error
checking. Allow users to run code snippets directly in the editor.
• Technologies: HTML, CSS, JavaScript (CodeMirror or Monaco Editor).

56 Interactive 3D Data Visualization

• Features: Create 3D visualizations of data using WebGL or Three.js. Allow users to

interact with the visualization (e.g., rotate, zoom).
• Technologies: HTML, CSS, JavaScript, Three.js or WebGL.

57 Personalized Dashboard

• Features: Customizable dashboard where users can add, remove, and rearrange
widgets (e.g., weather, calendar, task lists). Save user preferences using local storage
or a backend.
• Technologies: HTML, CSS, JavaScript (local storage, drag-and-drop API).

58 Real-Time Collaboration Tool

• Features: Multiple users can edit a document or canvas in real time with live
updates. Implement user presence indicators and conflict resolution.

: for internal circulation only : 19

 COURSEPACK
FRAMEWORK

• Technologies: HTML, CSS, JavaScript, WebSockets or Firebase.

59 AI-Powered Chatbot

• Features: Implement a chatbot with natural language processing (NLP) to handle

user queries and provide responses. Integrate with a backend or use a service like
Dialogflow.
• Technologies: HTML, CSS, JavaScript, NLP API (e.g., Dialogflow).

60 Smart Form Builder

• Features: Create and customize forms dynamically with drag-and-drop

functionality. Include various field types, validation, and preview.
• Technologies: HTML, CSS, JavaScript (Drag-and-Drop API, local storage).

17. STUDENT-CENTERED LEARNING (SELF-LEARNING TOWARDS LIFE-

LONGLEARNING)
Self-Learning, self-doing, and application of the knowledge acquired through the course after gaining adequate knowledge
It’s a typical course-based project to be carried out by a whole class in groups of four students each; they should exhibit
higher level Knowledge Levels (Bloom’s Revised Taxonomy). To enhance their skill set in the integrated course, the students
are advised to execute course-based Design projects.
The students, in a group not exceeding 4, are expected to conceive an idea based on the content (objectives/ outcomes) and
apply the suitable knowledge to demonstrate their ability to learn.
A list of 30-40 project statements can be offered to the students to choose or develop their own ideas (teamwork) to define a
problem statement, design and develop a product/ process/service/application, and provide a suitable solution (design
thinking). They may also upload this Idea on the Yukti Portal (contact the University IIC Team) and also patent the same.

Typical Problem Statements for Course-based Projects (min. of 20)

S. No Project Name
1 Personal Portfolio Showcase
2 Interactive Job Board
3 AI Chatbot Interface
4 Dynamic Expense Tracker
5 E-Commerce Product Catalog
6 Real-Time Weather Dashboard
7 Customizable Photo Editor
8 Social Media Feed Aggregator
9 Responsive Restaurant Menu

: for internal circulation only : 20

 10 Interactive Learning Quiz
11 Virtual Reality Tour
12 Recipe Finder with Meal Planner
13 Real-Time Chat Application
14 Advanced Markdown Editor
15 Personal Finance Dashboard
16 Gamified Fitness Tracker
17 Smart Home Control Panel
18 Travel Itinerary Planner
19 Live Sports Scoreboard
20 Music Streaming Platform
21 Online Code Playground
22 Virtual Whiteboard for Collaboration
23 Interactive Data Visualization
24 Customizable Calendar App
25 AI-Powered News Aggregator
26 Responsive Email Template Builder
27 Interactive Resume Builder
28 Collaborative Document Editor
29 Advanced Form Builder with Validation

30 Movie Discovery Platform

31 Interactive Event Countdown
32 Real-Time Polling and Voting System
33 Social Networking Dashboard
34 Customizable Product Comparison Tool
35 Dynamic Content Management System
36 Interactive Graphing Calculator
37 Personalized Dashboard Widgets
38 Photo Gallery with Lightbox Effect
39 Custom Video Player with Playlist
40 Advanced Music Player with Visualization
41 Recipe Sharing and Rating Platform
42 Real-Time Cryptocurrency Tracker
43 Customizable Task Manager
44 Interactive Storytelling Platform
45 Virtual Shopping Assistant
46 Multi-Language Translation App

: for internal circulation only : 21

 COURSEPACK
FRAMEWORK

47 Online Learning Management System

48 Interactive Mind Mapping Tool
49 Smart Inventory Management System
50 Progressive Web App for Daily Tasks

: for internal circulation only : 22