CSS_MicroProject_Report_final
CSS_MicroProject_Report_final
Information Technology
Academic Year: 2023-2024
Title of Micro project: “Design and create web pages of an institute Website with using
Dynamic Menus”
Program Code: IF
Course: CLIENT SIDE SCRIPTING LANGUAGE Course Code: 22519
Submitted by:
Mrs. V. R. Palandurkar
Institute Code: 0141
Information Technology
Academic Year: 2023-2024
CERTIFICATE
Certified that this micro project report titled “Design and create web pages of an institute
Website with using different section”
. Use other sections for displaying information about respective selected menu item.” is the
bonafide work of Disha Ramgude, Roll no 2307 of year Diploma in Information Technology for
the Course: CLIENT SIDE SCRIPTING LANGUAGE Course code: 22519 during the Academic
Year 2023-2024 , who carried out the micro project work under my supervision.
Mrs. V. R. Palandurkar
Institute Code: 0141
Information Technology
Academic Year: 2023-2024
CERTIFICATE
Certified that this micro project report “Design and create web pages of an institute Website
with using different section”. Use other sections for displaying information about respective
selected menu item.” is the bonafide work of Gaurav Mandhare Roll no 2308 of year Diploma in
Information Technology for the Course: CLIENT SIDE SCRIPTING LANGUAGE Course
code: 22519 during the Academic Year 2023-2024 , who carried out the micro project work under
my supervision.
Mrs. V. R. Palandurkar
Institute Code: 0141
Information Technology
Academic Year: 2023-2024
CERTIFICATE
Certified that this micro project report “Design and create web pages of an institute Website
with using different section”.Use other sections for displaying information about respective
selected menu item.” is the bonafide work of Aditya Gholap, Roll no: 2309 of year Diploma in
Information Technology for the Course: CLIENT SIDE SCRIPTING LANGUAGE Course
code: 22519 during the Academic Year 2022-20223, who carried out the micro project work under
my supervision.
Mrs. V. R. Palandurkar
ACKNOWLEDGEMENT
We would like to express our special thanks of gratitude to our Teachers our group members as
well as our friends, who gave us opportunity to do this wonderful micro project on the topic
“Design and create web pages of an institute Website with using different section” which also
helped us in doing a lot of Research and we came to know about so many new things we all really
thankful to all who help us doing this micro project.
Secondly we would also like to thank our Faculty members and assigned teacher who helped
us a lot in finalizing this project within the limited time frame.
Roll No Name
2307 Disha Ramgude
2308 Gaurav Mandhare
2309 Aditya Gholap
ALL INDIA SHRI SHIVAJI MEMORIAL SOCIETY’S POLYTECHNIC, PUNE -1
VISION:
Achieve excellence in quality technical education by imparting knowledge, skills and abilities to build
a better technocrat.
MISSION:
M1: Empower the students by inculcating various technical and soft skills.
Vision
To enrich intellectual potential by imparting technical knowledge and skills to become
an IT professional
Mission
M1: To confer the technical education and skills required for IT field
PO1 Basic and Discipline specific knowledge: Apply knowledge of basic mathematics,
science and engineering fundamentals and engineering specialization to solve the
engineering problems.
PO2 Problem analysis: Identify and analyze well-defined engineering problems using
codified standard methods.
PO7 Life-long learning: Ability to Analyze individual needs and engage in updating in
the context of technological changes.
1. Annexure I 9
2. Annexure II 12
3. Annexure III 27
4. Annexure IV 29
5. Log Book 32
7. Evaluation Sheet 34
Annexure-I
Micro-Project Proposal
Title of the Project: “Design and create web pages of an institute with different
sections. Use pulldown menus in one section and implement validation of menu
selections. Use other sections for displaying information about respective
selected menu item”
22519.a: Create interactive web pages using program flow control structure.
22519.b: Implement Arrays and functions in Java script.
22519.c: Create event based web forms using Java script.
22519.d: Use JavaScript for handling cookies.
22519.e: Create interactive webpage using regular expressions for validations.
22519.f: Create Menus and navigations in web Pages.
1. After topic is provided, respective group members are supposed to sit together and discuss
regarding the micro project and the logic to be used for program.
2. The work of the project will be divided in such a way that each and every member of our group
can contribute equally.
3. Make draft copy of micro project proposal.
4. Take approval from teacher.
5. Make list of resources required such as raw material, instruments, software.
6. Execute Micro project.
7. Test Micro project.
8. Observe outputs/Results of Micro project.
9. Prepare Micro Project Presentation.
10. Prepare Micro project report for submission
11. Later, draft copy will be made and shown to the respected course teacher.
12. Corrections will be done accordingly as per the suggestions given to us.
13. The final hard copy will be submitted.
4.0 Action Plan
4. Drafting Proposals
5. Proposal submission
Micro-Project Report
Title of the Project: “Design and create web pages of an institute Website with
different section
1.0 Rationale:
The rationale for designing web pages with different sections, pulldown menus, and menu
selection validation is centered on creating a user-friendly, informative, and engaging online
platform for the institute. This approach promotes transparency, fosters informed decision-
making, and supports efficient content management, ultimately benefiting both the institute and
its website visitors.
https://agupubs.onlinelibrary.wiley.com/doi/full/10.1002/2014WR016869
https://link.springer.com/chapter/10.1007/978-3-319-44234-1_1
https://www.mdpi.com/2073-4441/12/12/3424
5.0 Actual Methodology Followed:
2. Distribution of Work
3. Distribution of Topic
4. Collecting Images
5. Starting animation
6. Completing animation
8. Inserting information
Introduction:
Designing web pages for an institute with multiple sections and incorporating pulldown menus is a
significant endeavor aimed at creating a comprehensive online presence for educational institutions.
These web pages are instrumental in presenting a holistic view of the institute, offering a user-friendly
interface to access a wide range of information. The primary purpose of this web design is to provide
an organized and accessible platform that caters to the diverse needs of students, faculty, and visitors.
1. Structured Information: The web pages are structured into distinct sections, each dedicated
to a specific aspect of the institute, such as academic departments, institutional details, and
2. Enhanced User Experience: The inclusion of pulldown menus significantly enhances the
user experience. Users can effortlessly select menu items to navigate to relevant sections,
allowing them to find the information they need without hassle.
3. Information Accessibility: By categorizing content into different sections, the web design
prioritizes information accessibility. Prospective students, current students, parents, and
faculty can quickly access the information that is pertinent to their needs.
The web pages designed for the institute are characterized by a clean and user-friendly structure,
meticulously crafted to ensure clarity and ease of navigation. The primary goal is to provide a
seamless online experience for all users. Here's an overview of the design and structure:
1. Navigation Menu:
The top navigation menu, which prominently features the institute's logo, is a consistent
presence throughout the website. This reinforces the institute's brand identity and provides a
convenient way for users to return to the homepage.
The web pages are divided into several sections, each with a specific focus. These sections
include:
Home: Serving as the landing page with a welcoming message and a brief
introduction to the institute.
Academic Departments: Providing detailed information about different departments.
About Us: Featuring the institute's history, governing body, principal's message, and
other relevant details.
Contact: Offering contact information for inquiries and communication.
Reviews: Allowing users to access external reviews about the institute.
3. Pulldown Menus:
The inclusion of pulldown menus is a key feature of the design. They enhance the site's
user-friendliness by allowing quick access to various departmental or about us pages.
4. Responsiveness:
The web pages are designed to be responsive, adapting to various screen sizes and devices.
This ensures that users have a consistent and optimal experience regardless of the device
they use.
5. Color Scheme and Visuals:
A minimalist
provides color scheme
an elegant, with alook.
professional dark background and white text enhances readability and
Relevant visuals, such as images of the institute and departmental logos, are strategically
placed to complement the content.
6. Interactive Elements:
The inclusion of interactive elements, such as buttons and links, encourages users to explore
the website further. This includes call-to-action buttons for "About Us" and "Contact Us."
7. Reviews Section:
The "Reviews" section stands out with its own design, using a dark background and bright
accent colors to draw attention to user reviews and ratings.
The web pages are designed with accessibility in mind, ensuring that all users, including
those with disabilities, can navigate and access content.
Sections of the Institute's Website:
1. Home:
The homepage serves as the introductory landing page, offering a warm welcome to
visitors.
2. Academic Departments:
This section offers detailed information about various academic departments within the
institute.
3. About Us:
The "About Us" section provides comprehensive information about the institute's
background and identity.
4. Contact:
The "Contact" section provides essential contact information for the institute, making it easy
for users to get in touch.
5. Reviews:
The "Reviews" section allows users to access external reviews and ratings of the institute.
The implementation of pulldown menus in the academic departments section is a valuable feature
that significantly enhances navigation and improves the overall user experience. Here's how it
works:
Here's how the pulldown menus enhance navigation and user experience:
1. User-Friendly Access:
2. Improved Space Efficiency:
3. Select and Explore:
4. Dynamic Page Loading:
5. Consistent User Experience:
6. Information Depth:
Validating menu selections is a crucial aspect of web design, especially when implementing
pulldown menus and navigation on a website. This validation process ensures that users are
directed to the correct content when making menu choices, and it offers several key benefits:
1. Enhanced User Experience:
Validation of menu selections leads to a more seamless and positive user experience.
Users are provided with the confidence that their chosen option will take them to the
desired content.
2. Preventing Errors:
Without validation, users may inadvertently click on the wrong option or select an
empty choice, which can lead to errors and frustration. Proper validation reduces the
risk of such errors.
3. Improved Navigation:
Validating menu selections guarantees efficient navigation. Users are guided to the
intended destination, eliminating the need to backtrack or guess where they should
go next.
4. Reduced User Confusion:
Clear validation messages help users understand that their selection has been
acknowledged and is being processed. This reduces confusion and uncertainty.
5. Error Handling:
When validation detects an issue with the user's selection (e.g., selecting an
unavailable or non-existent page),
1. Web Design and Development: Learn how to create web pages, structure content, and style
elements.
2. UI Design: Develop skills in creating an intuitive and user-friendly interface.
3. JavaScript and Interactivity: Gain expertise in making web pages interactive and responsive
to user input.
4. Data Validation: Ensure user selections are valid and handle errors effectively.
1. Educational Institutions: Create websites for schools and colleges to provide information
about courses, faculty, and events.
(The marks may be allotted to the characteristics of the Micro-Project by considering the
suggested rubrics)
Title of the Project: “Design and create web pages of an institute Website with different
section
Course: CLIENT SIDE SCRIPTING LANGUAGE Course Code: 22519
Semester:5th
Sr. No./ Date Time Work Done
Hour No.
1. Study for selecting Micro project topic
4. Drafting Proposals
5. Proposal submission
Mrs. V. R. Palandurkar
AISSMS’s Polytechnic, Pune- 01(0141)
Annexure IV: Rubrics Used for Evaluation of a Micro Project
1 Relevance to course
2 Literature review/information collection
3 Completion of target as per project proposal
4 Analysis of data and representation
5 Quality of prototype/model
6 Report Preparation
Total Out of (60)
Process and Product Assessment (A) :Total Out of (06)
B) Individual Presentation/Viva(B)
Rubric Rubric Individual
Individual
7 8 Presentati
Presentation
on/Viva
/Viva
Individ (Convert Total
Individ (Addition of
ual out of 08 (A+B)
Roll Enrollment ual marks in
Name of Student Present marks into
No. No. Viva Rubric 7 to
ation out of 4)
8)
(B)
Marks Marks Mark
Marks out Marks out
out of out of s out
of 20 of 04
10 10 of 10
2316 2101410346 Disha Ramgude
2317 2101410329 Gaurav Mandhare
2318 2101410309 Aditya Gholap
Mrs. V. R. Palandurkar
Evaluation Sheet for the Micro Project
(a )Practical outcomes :- Prepare a business plan for our chosen small scale enterprise.
PrOs: Develop a webpage for placing the Window on the screen and working with child
window.
PrOs: Develop a webpage for implementing Slideshow, banner.
PrOs: Develop a webpage for implementing Menus
PrOs: Create a webpage with Rollovers effect.
Roll No. Student Name Marks out of (6) Marks out of (4) for Total out of
for performance performance in (10)
in group activity oral / presentation
2307 Disha Ramgude
2308 Gaurav Mandhare
2309 Aditya Gholap