Scribd
Upload
27 views

CSS Microproject

Uploaded by

bhaveshyelamkar01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

CSS Microproject

Uploaded by

bhaveshyelamkar01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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.

You might also like