MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
SAHYADRI POLYTECHNIC, SAWARDE
MICRO PROJECT
Academic year: 2024-25
TITLE OF PROJECT
Create Menubar
----------------------------------------------------
Program: CO Program code: 5I
Course: CSS Course code: 22519
MAHARASHTRA STATEBOARD OF TECHNICAL EDUCATION
Certificate
This is to certify that Roll No 3448, 3449, 3450 of 5 Semester of Diploma
in COMPUTER ENGINEERING of Institute, SAHYADRI
POLYTECHNIC, SAWARDE (Code: 0108) has completed the Micro Project
satisfactorily in Subject -CSS(22519) for the academic year 2024- 2025 as
prescribed in the curriculum.
Place: SAWARDE Enrollment N0:
2201080362
23151020588
23151020589
Date: ……………………… Exam. Seat No:
Subject Teacher Head of the Department Principal
Group Details:
Sr.No Name of group numbers Roll No Enrolment No Seat No
1 Bhavesh Bhagwan Yelamkar 3448 2201080362
2 Shruti Sunil chalke 3449 23151020588
3 Sanket Shivaji Jadhav 3450 23151020589
Name of Guide:
Prof. Shinde P. A.
MICRO PROJECT REPORT
TITLE OF MICRO PROJECT: Creating MenuBar
1. Aims/Benefits of the Micro-Project:
Navigation:
• Provide users with a clear and organized way to navigate
through the application or website.
• Enable easy access to key sections or features.
User Experience (UX):
• Enhance the overall user experience by making it intuitive and
efficient for users to find information.
• Reduce the cognitive load by presenting options in a structured
format.
2. Course Outcomes Achieved:
• Understanding of HTML structure: We learned how to
structure a web page using HTML elements such as <head>,
<body>, and <img>.
• Dynamic content handling: We learned how to dynamically
update web content (images) in real time using JavaScript.
• Improved problem-solving skills: We developed the ability to
troubleshoot issues in code, including image loading and
function timing.
3. Brief Description and Program:
Creating a menu bar involves several key steps to ensure it is
functional, user-friendly, and visually appealing.
Program:-
• HTML Code
• CSS Code
4. Output:-
5. Explanation of Program:
Creating a stylish menu bar using CSS can enhance the user interface
of a web application. Below is an example of CSS code to create a
simple and elegant horizontal menu bar.
Explanation of CSS Styles
• Basic Styles: The body is styled with a font and removed
default margins and paddings.
• Menu Bar: The .menu-bar class sets the background color and
ensures the content is contained within it.
• Menu List: The .menu class uses flexbox to align items in a row
without bullet points.
• Menu Items: Each .menu-item takes up equal space, and the
link (<a>) is styled to be block-level for easy clicking.
• Hover Effects: The hover state changes the background color
and text color for a visual cue.
• Active State: You can add an active class to indicate the current
page.
Usage
• Include the provided HTML and CSS code in your web project.
• Modify the links and styles as needed to fit your design.
6. Features of Project:-
• Dropdown Menus: Allows nested navigation for easy access to
subcategories.
• Responsive Design: Adapts to different screen sizes, ensuring
mobile usability.
• Search Functionality: Includes a search bar for quick content
access.
• Icons and Labels: Uses icons with text for visual appeal and
quick recognition.."
7. Developed Skill:-
• HTML Structuring: Learned to effectively structure web pages using
HTML tags and elements.
• JavaScript Programming: Developed skills in using JavaScript for
dynamic content updates and automated tasks like image transitions.
• Problem-Solving: Improved ability to troubleshoot issues related to code
functionality, including timing and image loading.
• Web Interactivity: Built a user-friendly interface that responds to user
interaction efficiently.
• Project Management: Gained experience in planning and executing a
project from start to finish.
• Technical Presentation: Improved in explaining and presenting
technical project outcomes effectively
8. Conclusion:-
A well-designed menu bar is a crucial element in web and
application interfaces, serving as the primary navigation tool for
users. By incorporating features such as dropdown menus,
responsive design, search functionality, and accessibility
options, a menu bar can significantly enhance the user
experience. It not only facilitates easy navigation but also
reinforces brand identity and ensures a cohesive visual
experience.
ANEEXURE II
Evaluation Sheet for the Micro Project
Academic Year: 2024-25 Name of the Faculty: Shinde P.A
Course: CSS Course code: 22519 Semester: 5
Title of the project: Creating MenuBar
Major learning outcomes achieved by students by doing the project
(a)Practical outcome:
• Understanding of creating menubar .
Comments/suggestions about team work /leadership/inter-personal
communication (if any)
……………………………………………………………………………………
Marks out of Marks out of
6 for 4for
performance performance
Roll Student Name in group in oral/ Total out of
No activity presentation 10
(D5 Col.8) (D5 Col.9)
3448 Bhavesh Bhagwan Yelmakar
3449 Shruti Sunil Chalke
3450 Sanket Shivaji Jadhav
(Signature o Faculty)
Prof. Shinde P.A.
