VISVESVARAYA TECHNOLOGICAL UNIVERSITY

BELAGAVI – 590018, KARNATAKA

PRE – FINAL YEAR (2022– 2023)

Mini – Project Report
On
“Building a Solid Online Presence for Mechanical Department VTU
BGM”
Under the guidance of
Dr. V.M. Kulkarni
Chairperson, Professor
Of Mechanical Department,VTU belagavi.

Project members
Mr.Amar .YK(2VX20RA001)
Ms.Ashfiya .M(2VX20RA003)
Ms. Gayatri Patil(2VX20RA006)
Ms. Mamateshwari H (2VX20RA007)
 CERTIFICATE

This is to certify that the mini-project (18RAMP68) work entitled

“Building a Solid Online Presence for Mechanical Department VTU
BGM” carried out by Mr.AmarYK (2VX20RA001) Ms.Ashfiya M
(2VX20RA003) Ms. Gayatri Patil(2VX20RA006) Ms. Mamateshwari H
(2VX20RA007) are bonafide students of Department Of Mechanical field
in Robotics and Automation,Visvesvaraya Technological University,
Belagavi .In partial fulfilment for the award of Bachelor of Technology
of the Visvesvaraya Technological University, Belagavi during the
academic year 2023-24. It is certified that all corrections/suggestions
indicated have been incorporated in the report. The project report has
been approved as it satisfies the academic requirements in respect of
miniproject work prescribed for Bachelor of Technology degree.

Dr.V.M. Kulkarni
Mini-project Guide,

Head of the Department

of Mechanical ,VTU Belagavi
Name of the Examiner

1)____________________

Signature
—-------------------------------

Declaration

We Mr.AmarYK (2VX20RA001) Ms.Ashfiya M (2VX20RA003) Ms.

Gayatri Patil(2VX20RA006) Ms. Mamateshwari H (2VX20RA007) ,
students of 6th semester B.E in Robotics and Automation branch, hereby
that the desertion entitled “Building a Solid Online Presence for
Mechanical Department VTU BGM” has been carried out in batch and
submitted in partial fulfilment of the requirement for the award of B-
Tech in Robotics and Automation branch under Visvesvaraya
Technological University, Belagavi during the academic year 2023-24.

Name
Mr.Amar .YK (2VX20RA001) ______________________
Ms.Ashfiya .M (2VX20RA003) ______________________
Ms. Gaytri .Patil (2VX20RA006) _______________________
Ms. Mamateshwari .H (2VX20RA007) _______________________

Place : Belagavi
Date :________

Institute Vision
To be a university as a resource of solutions to diverse challenges of
society by nurturing innovation, research & entrepreneurship through
value based education
Institute Mission
• To provide a work culture that facilitates an effective teaching-learning
process and lifelong learning skills.
• To promote innovation, collaboration and leadership through best
practices.
• To foster industry-institute interaction resulting in entrepreneurship
skills and employment opportunities Department Vision “To achieve
excellence in education and research for globally competent ethically
sound in “Robotics and automation”
Department Mission
1. To provide conducive environment for learning through structured
student centric, teaching learning process.
2. To nurture needs of society by infusing scientific temper in students
and to grow as a centre of excellence with efficient industry-institute
interaction.
3. To inculcate self-learning skills, entrepreneurial ability and
professional ethics.

Program Educational Objectives (PEOs)

 1. Graduates will be able to contemplate real-time social problems and
deliveer efficient
2. Graduates will be able to succeed in professional careers.
3. Graduates will demonstrate leadership qualities.
Program Specific Outcomes (PSOs)
Graduates in the UG program in “Robotics and Automation”
Engineering will be able to:
❖ Engineering knowledge: Apply the knowledge of mathematics,
science, engineering fundamentals, and an engineering specialization to
the solution of complex engineering problems.
❖ Problem analysis: Identify, formulate, review research literature, and
analyze complex engineering problems reaching substantiated
conclusions using first principles of mathematics, natural sciences, and
engineering sciences.
❖ Design/development of solutions: Design solutions for complex
engineering 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.
❖ 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.
❖ Modern tool usage: Create, select, and apply appropriate techniques,
resources, and modern engineering and IT tools including prediction and
modeling to complex engineering activities with an understanding of the
limitations.
❖ The engineer 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
engineering practice.
 ❖ Environment and sustainability: Understand the impact of the
professional engineering solutions in societal and environmental
contexts, and demonstrate the knowledge of, and need for sustainable
development.
❖ Ethics: Apply ethical principles and commit to professional ethics and
responsibilities and norms of the engineering practice.
❖ Individual and team work: Function effectively as an individual, and
as a member or leader in diverse teams, and in multidisciplinary settings.
❖ Communication: Communicate effectively on complex engineering
activities with the engineering 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.
❖ Project management and finance: Demonstrate knowledge and
understanding of the engineering and management principles and apply
these to one’s own work, as a member and leader in a team, to manage
projects and in multidisciplinary environments.
❖ Life-long learning: Recognize the need for, and have the preparation
and ability to engage independent and life-long learning in the broadest
context of technological change.

ACKNOWLEDGEMENT

Although a single sentence hardly suffices, we would like to thank

Almighty God for blessing us with his grace and taking our endeavour to
a successful culmination. We express our gratitude to our guide
Dr.V.M.Kulkarni Sir, Chairperson of Mechanical Dept. VTU Belagavi,
for his valuable guidance and continual encouragement and assistance
throughout the project work. We greatly appreciate the freedom and
collegial respect. We are grateful to him for discussions about the
technical matters and suggestions concerned to our topic. We extend our
sense of gratitude to Prof.Dr.Ravindra R.Malagi sir, Prof. Dr.Anil.Pol
Sir, Mini-Project Coordinators, Dept. of,Mechanical Dept VTU Belagavi,
for extending support and cooperation which helped us in completion of
the project work.
TABLE OF CONTENTS

1 INTRODUCTION
1.1 Background and Purpose of the Project.

1.2 Objectives of the Website Development Project.

2 LITERATURE REVIEW
2.1 Overview of Website Development for Educational
Institutions.

2.2 Importance of Websites for Academic Departments.

3 METHODOLOGY
3.1 Selection of Website Development Platform and Tools.

3.2 Gathering Requirements from the Mechanical

Department.
3.3 Planning the Website Structure and Layout.
3.4Designing the User Interface and Navigation.

4 SYSTEM DESIGN
 4.1Web form design.
4.2Home page.
4.3Web pages.
4.4Links.

5 CONCLUSION AND FUTURE SCOPE

6 REFERENCES
ABSTRACT
The objective of this project is to create a website for the Mechanical
Department that serves as a centralized platform to provide information
and resources to students, faculty, and other stakeholders. The website
aims to enhance communication, streamline processes, and foster
collaboration within the department.The methodology followed for
developing the website involved a comprehensive analysis of the
department's requirements and target audience. Extensive research was
conducted to identify the key information and features needed on the
website, such as faculty profiles, course details, research areas,
laboratories, events, and important announcements.The website was
designed using modern web development technologies and frameworks,
ensuring a user-friendly interface and responsive design. The content
was organized in a logical and intuitive manner, with clear navigation
menus and search functionality for easy access to information.Key
findings from the project include the successful implementation of
various features and functionalities, such as an interactive faculty
directory with individual profiles, a course catalog with detailed
descriptions, a news and events section, and a student portal for
accessing resources and submitting assignments. The website has greatly
improved the accessibility of information, facilitating better
communication and engagement within the department. Overall, this
project has successfully created a functional and visually appealing
website for the Mechanical Department, meeting its objectives of
providing a centralized platform for information sharing and enhancing
collaboration among students, faculty, and other stakeholders.

1. INTRODUCTION
 Purpose of the Project:
Purpose of the website development project for the Mechanical Department
of VTU was to create an interactive and user-friendly website. The
website aimed to serve as a centralized platform to provide information
and resources to students, faculty, and stakeholders of the department. It
aimed to enhance communication, facilitate access to educational
materials, and promote engagement within the Mechanical Department
community.
Interactive and User-Friendly Design:The website was designed to be
visually appealing and intuitive, ensuring an engaging user experience. The
layout, color scheme, and typography were carefully selected to create an
inviting and professional look. User-friendly navigation menus and clear
section headings were implemented to help users easily find the information
they were looking for.

Information Provision:The website aimed to provide comprehensive

information about the Mechanical Department. This included details about
the department's history, vision, mission, and objectives. Faculty profiles,
including their qualifications, research interests, and contact information,
were included to facilitate communication between faculty and students.
Information about the courses offered, including course descriptions,
curriculum, and elective options, was provided to help students make
informed decisions about their academic paths. The website also highlighted
the department's infrastructure, such as laboratories, workshops, and research
facilities.

Resource Access for Students:One of the key objectives of the website was
to provide students with easy access to important resources. A dedicated
section was created to house lecture notes, lab manuals, study materials, and
other educational resources. These resources were organized in a user-
friendly manner, making it convenient for students to find and download the
materials they needed
 News and Events Section:To keep students, faculty, and stakeholders
informed about departmental activities, a news and events section was
incorporated into the website. This section provided updates on departmental
news, announcements, upcoming events, seminars, conferences, and
workshops. By regularly updating this section, the website aimed to create a
sense of community and keep stakeholders engaged with the department's
activities.
Contact Form and Communication:The website included a contact form
and contact details to facilitate communication between the Mechanical
Department and external parties. This allowed students, prospective students,
parents, and other stakeholders to reach out to the department with their
inquiries, feedback, or any other communication needs. The contact form
served as a convenient way to submit queries directly through the website,
ensuring efficient and prompt responses.
Compatibility and User Experience:To ensure optimal user experience, the
website was developed to be compatible with various devices and browsers.
Responsive design principles were implemented, allowing the website to
adapt and display properly on different screen sizes, including desktop
computers, laptops, tablets, and mobile devices. This compatibility aimed to
provide users with a seamless and consistent experience, regardless of the
device they were using to access the website.
A. Background and Purpose of the Project:
The background section of the project report should provide a context for the
website development project for the mechanical department of VTU
(Visvesvaraya Technological University). It should explain why the project is
necessary and outline the reasons behind its initiation.
In this case, you can mention that educational institutions, including
universities, are increasingly recognizing the importance of having a well-
designed and informative website. A website serves as a digital platform to
showcase the department's offerings, provide valuable information to
students, faculty, and other stakeholders, and enhance communication and
engagement within the department.
Additionally, you can mention the specific needs and challenges faced by the
mechanical department at VTU. For example, the department may have
struggled with outdated or insufficient information available to students and
faculty, limited access to course materials, or a lack of effective
communication channels. These issues can be addressed through the
development of a comprehensive and user-friendly website.

The purpose of the project should be clearly stated. It can be something like:
1. To develop a dynamic and interactive website for the mechanical
department of VTU, which will serve as a centralized hub for
information, resources, and communication.
2. To improve the overall user experience by providing easy access to
course details, faculty information, research projects, and other relevant
information.
3. To enhance engagement and collaboration among students, faculty, and
other stakeholders through interactive features like forums, chat, or
discussion boards.
4. To establish a professional online presence for the mechanical
department, reflecting its values, achievements, and academic
offerings.
5. To align with the broader goals of VTU in promoting digitalization and
providing a technologically advanced learning environment.
B. Objectives of the Website Development Project:
The objectives section of the project report should outline the specific goals
that the website development project aims to achieve. These objectives
should be specific, measurable, attainable, relevant, and time-bound
(SMART).

Here are some example objectives for the website development project:
 1. To create an intuitive and user-friendly website interface that allows
easy navigation and access to information for students, faculty, and
other stakeholders.
2. To provide comprehensive and up-to-date information about the
mechanical department's courses, faculty members, research projects,
laboratories, and facilities.
3. To integrate online resources such as syllabi, lecture notes, reference
materials, and other educational resources for the benefit of students
and faculty.
4. To facilitate effective communication and collaboration among
students, faculty, and other stakeholders through interactive features
like discussion forums, chat, or messaging systems.
5. To ensure the website is responsive and mobile-friendly, enabling users
to access the information and features from various devices.
6. To establish a visually appealing website design that aligns with the
branding guidelines of the mechanical department and VTU.
7. To implement a content management system (CMS) that allows easy
content creation, editing, and publication by authorized users.
8. To optimize the website's performance, security, and search engine
visibility through appropriate technical measures.
9. To train and provide support to the administrative staff and faculty
members responsible for maintaining and updating the website.
10. To
monitor and evaluate the website's performance and user feedback
regularly, making necessary improvements and enhancements over
time.
These objectives will guide the project team throughout the website
development process and serve as benchmarks for measuring the success and
effectiveness of the project.

Objective

Create a visually appealing and intuitive website design:

The first objective of the website development project was to create a visually
appealing and intuitive design. This involved designing a layout that was visually
appealing, engaging, and aligned with the branding and identity of the Mechanical
Department. The use of appropriate color schemes, fonts, and imagery played a
crucial role in enhancing the overall aesthetics of the website. Additionally, the
design aimed to be intuitive, with clear navigation menus and user-friendly
interfaces that allowed visitors to easily find the desired information.

Provide comprehensive information about the Mechanical Department:

Another objective was to provide comprehensive information about the

Mechanical Department. This included details about the department's history,
mission, and vision, showcasing its contributions and achievements. Faculty details
were highlighted, including their qualifications, research areas, publications, and
contact information. The website also aimed to provide information about the
courses offered by the department, including detailed descriptions, prerequisites,
and career prospects associated with each course. Furthermore, information about
the department's research areas, ongoing projects, and collaborations was provided
to showcase its academic and research strengths. Additionally, the infrastructure of
the Mechanical Department, such as laboratories, workshops, and research
facilities, was described in detail.

Develop a platform for students to access important resources:

The website aimed to serve as a platform for students to access important resources
conveniently. Lecture notes, lab manuals, study materials, and other educational
resources were organized and made available for easy access. This allowed
students to access these resources anytime, from anywhere, fostering self-study,
learning, and academic growth. The resources were categorized and presented in
an organized manner, ensuring that students could easily locate and download the
materials relevant to their courses and assignments.

Incorporate a news and events section:

To keep stakeholders informed about the activities and events of the Mechanical
Department, a news and events section was incorporated into the website. This
section aimed to provide updates on departmental news, announcements, upcoming
events, seminars, workshops, and conferences. By regularly updating this section,
the website aimed to create a sense of community, promote participation, and
ensure that stakeholders were aware of the latest happenings within the
department.

Implement a contact form for communication:

To facilitate effective communication between the department and external parties,

a contact form was implemented on the website. This contact form allowed users
to submit inquiries, feedback, or any other communication needs directly through
the website. The contact form collected essential details from the users, enabling
the department to respond promptly and address their queries or concerns
effectively. Additionally, contact information, such as email addresses or phone
numbers, were provided for direct communication with the department.

Ensure compatibility across various devices and browsers:

The final objective was to ensure compatibility across various devices and
browsers for optimal user experience. With the proliferation of devices and
browsers, it was crucial to develop a website that could be accessed seamlessly on
different platforms. The website was designed and developed using responsive
design techniques, allowing it to adapt and display appropriately on devices with
varying screen sizes and resolutions. Compatibility testing was conducted to ensure
that the website functioned properly and provided a consistent user experience
across popular browsers.

By achieving these project objectives, the website development project for the
Mechanical Department aimed to create an engaging, informative, and user-
friendly platform that met the needs of students, faculty, and other stakeholders.
 2.Literature Review
A. Overview of Website Development for Educational Institutions:

Website development for educational institutions involves the creation and maintenance
of websites that cater to the specific needs and requirements of academic departments,
colleges, or universities. These websites serve as a digital platform to communicate and
engage with various stakeholders, including students, faculty, staff, prospective students,
alumni, and the general public.

The process of website development typically involves several stages, including

planning, design, development, testing, deployment, and maintenance. Educational
institution websites often include features such as:

Information dissemination: Websites provide a centralized location for sharing

important information about courses, programs, admissions, faculty profiles, research
projects, facilities, and events. They serve as a primary source of information for
students, prospective students, and parents.

Resource repository: Websites can host a wide range of educational resources, including
syllabi, lecture notes, textbooks, research papers, and reference materials. These
resources enhance the learning experience and support both students and faculty in their
academic pursuits.

Online learning platforms: Many educational institutions integrate learning

management systems (LMS) or online course platforms within their websites. These
platforms facilitate the delivery of online courses, provide access to assignments and
assessments, enable communication between instructors and students, and track progress.
Communication and collaboration: Websites enable effective communication and
collaboration among students, faculty, and staff. Features like discussion forums, chat
systems, email integration, and announcement boards promote interaction, knowledge
sharing, and engagement within the academic community.

Online services: Websites can provide various online services, such as registration, fee
payment, library access, academic calendar, and exam schedules. These services
streamline administrative processes and enhance convenience for students and staff.

B. Importance of Websites for Academic Departments:

Websites play a crucial role in the success and growth of academic departments. Here are
some key reasons why websites are important:

Information accessibility: Websites provide a centralized and easily accessible platform

for sharing accurate and up-to-date information about the department's offerings, faculty,
courses, research projects, and facilities. Prospective students and parents can learn about
the department's strengths, academic programs, and opportunities, helping them make
informed decisions.

Student engagement and support: Websites can engage and support students by
providing access to resources, study materials, announcements, and academic support
services. Interactive features like forums or chat systems foster collaboration, discussion,
and peer-to-peer learning.

Faculty showcase and collaboration: Websites offer a platform to showcase the

expertise and accomplishments of faculty members. Faculty profiles can include their
research interests, publications, projects, and collaborations. This promotes collaboration
opportunities among faculty members and establishes the department's reputation.

Alumni networking: Websites can facilitate alumni networking by providing a

platform for alumni to connect, share their experiences, and contribute to the
department's growth. Alumni profiles, success stories, and events can inspire
current students and strengthen the department's alumni network.
Public relations and branding: A well-designed and informative website enhances the
department's public image and credibility. It reflects the department's values,
achievements, and commitment to academic excellence. A professional website helps
attract prospective students, faculty, and industry collaborations.

C. Review of Relevant Studies or Examples of Similar Projects:

In the review of relevant studies or examples, you would typically search for existing
research papers, case studies, or projects related to website development for academic
departments, specifically focusing on mechanical departments or similar disciplines.
These studies or examples provide insights into best practices, challenges, and successful
implementations.

Some approaches to finding relevant studies or examples include:

Academic Databases: Search academic databases such as IEEE Xplore, ACM Digital
Library, or Google Scholar using keywords like "website development for academic
departments" or "educational websites for mechanical engineering."

Research Conferences and Journals: Look for conferences or journals in the field of
educational technology, web development, or computer science that may have published
research papers or case studies on website development for academic departments.

Institutional Case Studies: Explore websites of universities or educational institutions

that have similar departments and see if they have published case studies or project
reports related to website development. These can provide insights into the process,
challenges, and outcomes of similar projects.

Professional Networks: Engage with professional networks, forums, or online

communities specific to website development for academic institutions or
mechanical engineering departments. Connect with professionals in the field and
seek their advice or recommendations on relevan

3. METHODOLOGY
A. Selection of Website Development Platform and Tools:
The selection of a website development platform and tools is a crucial decision that
impacts the overall development process and the functionality of the website.
Consider the following factors when choosing a platform:

Requirements: Assess the specific requirements of the mechanical department's

website. Consider factors such as content management, user management,
scalability, customization options, integration with other systems, and security.

Technical Expertise: Evaluate the technical skills of the development team or

available resources. Some platforms may require advanced programming
knowledge, while others offer user-friendly interfaces with drag-and-drop
functionality.

Flexibility and Customization: Determine the level of customization required for

the website. Choose a platform that allows flexibility in design, layout, and
functionality, enabling you to tailor the website to the department's specific needs.

Support and Community: Consider the availability of technical support,

documentation, and a vibrant user community. A platform with an active
community can provide valuable resources, tutorials, and plugins that enhance the
development process.

Popular website development platforms and tools include WordPress, Drupal,

Joomla, Wix, Squarespace, and custom-built solutions using programming
languages like HTML, CSS, JavaScript, and frameworks like React or Angular.

B. Gathering Requirements from the Mechanical Department

Gathering requirements involves understanding the specific needs and expectations

of the mechanical department for their website. The following steps can help in
this process:

Stakeholder Interviews: Conduct interviews or meetings with department heads,

faculty members, administrative staff, and students to gather their input and
insights on the website's purpose, target audience, and desired features.

Document Analysis: Review existing documents such as departmental brochures,

course catalogs, and program descriptions to identify essential information that
needs to be included on the website.
Surveys or Questionnaires: Distribute surveys or questionnaires to collect feedback
and preferences from students, faculty, and other stakeholders. Ask questions
related to the desired content, functionality, and design aspects of the website.

Competitor Analysis: Analyze websites of other mechanical departments or

educational institutions to identify common features, best practices, and potential
areas for improvement.

Collaboration and Feedback Sessions: Conduct workshops or collaborative

sessions with key stakeholders to brainstorm ideas, explore different perspectives,
and gather feedback on proposed features or design concepts.

C. Planning the Website Structure and Layout:

The planning phase involves creating a structure and layout for the website. This
step establishes the framework for organizing content and ensuring a logical and
user-friendly navigation experience. Consider the following:

Information Hierarchy: Determine the primary categories or sections of the

website, such as courses, faculty, research, facilities, news, and events. Establish a
hierarchy to showcase essential information prominently and prioritize navigation
elements.

User Journey: Define the user journey or flow through the website, ensuring that
users can easily find relevant information and navigate between different sections.
Consider user personas and their specific goals or tasks when planning the website
structure.

Wireframing: Create wireframes, which are visual representations of the website's

layout and structure, using tools like Sketch, Adobe XD, or online wireframing
tools. Wireframes help in visualizing the placement of different elements,
including headers, footers, sidebars, and content blocks.

Content Mapping: Map the existing and new content to the planned website
structure. Identify which content will be part of static pages, dynamic sections, or
interactive features like blogs or forums.
 SEO Considerations: Incorporate search engine optimization (SEO) principles into
the website structure and planning. Ensure that the website's structure allows
search engines to crawl and index the content effectively.

D. Designing the User Interface and Navigation:

Designing the user interface (UI) and navigation involves creating an aesthetically
pleasing and intuitive visual design that aligns with the mechanical department's
brand identity. Consider the following:

Visual Design: Design a visually appealing interface that reflects the department's
branding, including color schemes, typography, and graphical elements. Use
design tools like Adobe Photoshop, Sketch, or Figma to create high-fidelity
designs.

Responsive Design: Ensure the website is responsive and adaptable to different

screen sizes and devices, providing an optimal user experience across desktops,
tablets, and mobile devices.

User-Friendly Navigation: Design a clear and intuitive navigation structure that

allows users to find information easily. Use consistent navigation elements like
menus, breadcrumbs, and search bars. Consider user testing or usability studies to
validate the navigation design.

Accessibility: Ensure the website design follows accessibility guidelines, making

it accessible to users with disabilities. Consider factors such as color contrast,
alternative text for images, keyboard navigation, and screen reader compatibility.

Visual Hierarchy and Consistency: Use visual hierarchy techniques to emphasize

important elements and content. Maintain consistency in design elements, such as
buttons, icons, and forms, throughout the website.

E. Development and Implementation of the Website:

The development phase involves translating the design and requirements into a
functioning website. Consider the following steps:

Front-End Development: Implement the website's user interface using HTML,

CSS, and JavaScript. Develop templates, layouts, and components based on the
design, ensuring cross-browser compatibility and responsiveness.

Back-End Development: If required, develop the back-end functionalities of the

website. This can include integrating a content management system (CMS),
implementing database systems, creating user authentication and management, and
connecting external APIs.

Content Creation: Populate the website with relevant content, including text,
images, videos, and other media. Ensure proper formatting, proofreading, and
optimization of content for search engines.

CMS Integration: If using a CMS, integrate the designed templates and

components into the CMS framework. Configure the CMS settings, including
content types, user roles, and permissions.

Version Control and Deployment: Use version control systems like Git to manage
code changes and ensure a smooth deployment process. Deploy the website to a
web hosting environment or a content delivery network (CDN) to make it
accessible to users.

F. Testing and Quality Assurance:Testing and quality assurance are essential to

ensure the website functions correctly, meets requirements, and provides a positive
user experience. Consider the following:

Functionality Testing: Test all features and functionalities of the website, including
forms, interactive elements, media playback, and navigation. Verify that they work
as intended and are error-free.

Compatibility Testing: Test the website across multiple browsers, devices, and
operating systems to ensure consistent functionality and appearance.

Performance Testing: Evaluate the website's performance, including page loading

speed, responsiveness, and resource optimization. Identify and address any
performance bottlenecks.

Usability Testing: Conduct usability testing to gather feedback from users and
evaluate the website's ease of use, navigation, and overall user experience. Make
necessary improvements based on user feedback.

Security Testing: Perform security testing to identify vulnerabilities and ensure the
website's protection against common threats like hacking, data breaches, or
unauthorized access.

G. Deployment and Maintenance Strategy:

Once the website is tested and ready for launch, consider the following for
deployment and ongoing maintenance:
 Web Hosting and Domain: Select a reliable web hosting provider and register a
domain name that aligns with the department's branding. Configure DNS settings
to associate the domain with the hosting environment.

Backup and Security: Implement regular backups to protect against data loss.
Apply security measures such as SSL certificates, firewalls, and regular security
updates to safeguard the website and user data.

Content Management and Updates: Train and provide guidelines

4.SYSTEM DESIGN
Department of Mechanical Engineering
Visvesvaraya Technological University Belgaum (VTU)

● Home
● About
● Faculty & Staff
● Courses
● Students
● Laboratories
● Contact Us

Mission
Imparting quality education to the students and enhancing their skills to make
them competitive in industry.
Establish centres of excellence and collaborate with R&D organizations to
foster research activities.

Collaborate with industries to provide solutions to identified problems.

Promote entrepreneurship.

vision
The Department of Mechanical Engineering intends to be a leading education
and research hub at cutting edge of science and technology to produce
qualified engineers who are innovative, entrepreneurial and successful in the
advanced field of Mechanical Engineering science to cater to industrial and
societal needs.

About the Department

The Department of Mechanical Engineering started its operation in 2005 by
starting M.Tech. Degree programme in Product Design and Manufacturing with
student intake of 25 at VTU Headquarters Belagavi. It is one of the oldest and
largest departments of the University. It offers B. Tech., M.Tech. and PhD
programs in its four Regional Centres spread across the State of Karnataka namely
at Belagavi, Kalaburagi, Mysuru and Muddenahalli. Department has currently five
M.Tech.degree programmes: M.Tech. and B.Tech. Degree Programmes have
student intake of 25 and 30 respectively. The department has highly qualified
faculty members out which 10 are PhD degree holders and few of them have full
time PhD degrees and Post-Doctoral Fellowship from reputed institutes like IISc,
India; USM, Malaysia and NCKU, Taiwan. Same of the faculty members are
reviewers for reputed journals, authors for text books in Mechanical Engineering.
Department has the required infrastructure facilities such os class rooms fitted with
LCD/ smart boards/ speaker system, computing facilities with required hardware
and software resources, laboratory with CNC machines, rapid prototype machine,
industrial robots (AR6-900, SCARA-4 axis), library, workstations loaded with
bundles of software products covering all areas of mechanical engineering
sciences, five Centre Of Excellences (COEs), smart digital class delivery systems
etc. The department has active MOUS with companies like CMTI Bangalore,
MTAB Chennai, ALTEM Technologies Bangalore, DHIO Research & Engg.
Solutions Banaglore etc. Department regularly organizes FDPs, Workshops,
Conferences for the benefits of students and faculty. It encourages and prepares
students for publishing the articles in conferences & journals.
Faculty and staff
Student Page

Courses
B.Tech. programmes:
1. B.Tech. (Robotics and Automation) at Belagavi Centre.

M. Tech.
1. M. Tech. (Product Design and Manufacturing) offered at Belagavi Centre.
Laboratories

Articulated Robot

AR series robot is a hollow series robot developed by MTAB robotics. It can be

used in welding, handling, cutting, spray painting, polishing and several other
related fields.

SCARA Robot
A Selective Compliance Assembly Robot Arm (SCARA) robot has a donut shaped
work envelope and consists of two parallel joints that provide compliance in one
selected plane. SCARAs are four-axis robots, with motion in X-YZ and a
rotational motion about the Z-axis.

3+2 AXIS Mill

Computer numerically controlled (CNC) machining centers cut and shape an

assortment of precision products from automobile parts to general machine parts.
Operating in either horizontal or vertical positions, CNC machinery includes
machining tools such as lathes, multi-axis spindles, and milling and boring
machines; the functions formerly performed by human operators are performed by
a computer control module. CNC machinery is either hand loaded or automatically
fed.

MTAB Milling Machine

MTAB CNC turning machine

CNC milling

CNC turning machine

Lathe

NANATOM Material testing Machine

Contact Us
Dr. Venkatesh M. Kulkarni Professor and Chairperson Department of Mechanical
Engineering Machhe, VTU-Belagavi-590018 Mail:- [email protected] Contact:-
0831- 2498251, 2498198
CODE
Styles
*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'poppins',sans-serif;

.background::before{

background-image: url('college.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-size: 100% 100%;

opacity: 0.35;

a{

text-decoration: none;

float: center;

.navbar{
 height: 220px;

background-color: rgba(240, 248, 255, 0.521);

color: #ffffff;

display: flex;

.nav-logo{

height: 200px;

width: 200px;

padding: 30px;

.logo{

background-image: url("vtu_logo.png");

background-size: cover;

height: 100%;

width: 100%;

.nav-address{

color: #000;

padding:50px ;

nav {

background-color: #f4f4f4;

padding: 20px;
 justify-content: center;

align-items: center;

overflow: hidden;

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

text-align: center;

nav ul li {

display: inline;

padding: 20px;

nav ul li a {

color: rgb(51, 4, 117);

text-decoration: none;

float: center;

}
.slideshow-container {

display: flex;

justify-content: center;

align-items: center;

position: relative;

max-width: 80% ;

top: 45%;

left: 10%;

overflow: hidden;

.slideshow-slide {

display: none;

.slideshow-slide img {

width: 100%;

height: auto;

border-radius: 10%;

}
.prev,

.next {

position: absolute;

top: 50%;

transform: translateY(-50%);

font-size: 25px;

font-weight: bold;

padding: 10px;

color: #fff;

background-color: #000;

cursor: pointer;

.prev {

left: 10px;

.next {

right: 10px;

.about-main-img{
 position: absolute;

background-attachment: scroll;

opacity: 0.23;

width: 100%;

.about-g{

background-color: #f4f4f465;

.about{

display: flex;

padding: 5%;

padding-left: 5%;

justify-content: center;

align-items: center;

position: relative;

.about p{

padding-top: 5%;

padding-left :15%;

padding-right: 15%;

}
section{

padding: 20px;

text-align: center;

section h3{

font-size: 30px;

color: rgb(127, 105, 127);

text-decoration: none;

float: center;

.faculty-category{

text-align: center;

display: flex;

.faculty-member {

width: 33%;

.faculty-member h4 a{

margin-top: 30px;

color: rgb(69, 21, 69);

text-decoration: none;
 float: center;

.faculty-member img {

border-radius: 10%;

display: relative;

margin-left: auto;

margin-right: auto;

margin-top: 20%;

width: 60%;

.chair{

text-align: center;

padding-top: 10PX;

.mtech{

padding: 10%;

background-image: -;

.mtech h4{

padding: 5%;

.mi{
 display: flex;

background-color: rgba(0, 255, 255, 0.053);

.mission-main{

position: relative;

width: 50%;

background-color: #ecc7c732;

padding: 5%;

.vision{

padding-top: 5%;

.video{

padding: 5%;

.chair-con{

padding: 5%;

.fixed-img{

position: fixed;
 opacity: 0.2;

width: 100%;

height: 100%;

z-index: -1;

.lab{

margin: 0%;

position: sticky;

.machine{

display: flex;

margin: 10%;

.photo {

width: 50%;

.photo img {

width: 100%;

border-radius: 10%;

.content{
 width: 50%;

margin: 10%;

.gallery{

width: 100%;

display: flex;

overflow-x: scroll;

.gallery div{

width: 100%;

display: grid;

grid-template-columns: auto auto auto;

grid-gap: 20px;

padding: 10px;

flex: none;

.gallery div img {

width: 100%;

filter: grayscale(100%);

transition: transform 0.5s;

.gallery::-webkit-scrollbar{

display: none;
}

.gallery-wrap{

display: flex;

align-items: center;

justify-content: center;

margin: 10% auto;

#backBtn, #nextBtn{

width: 50px;

cursor: pointer;

margin: 40px;

.gallery div img:hover{

filter: grayscale(0);

cursor: pointer;

transform: scale(1.1);

Java script

let slideIndex = 0;

const slides = document.getElementsByClassName("slideshow-slide");

function showSlide() {

for (let i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

slideIndex++;

if (slideIndex > slides.length) {

slideIndex = 1;

slides[slideIndex - 1].style.display = "block";

setTimeout(showSlide, 3000); // Change slide every 3 seconds (adjust as needed)

showSlide();

function changeSlide(n) {

slideIndex += n;

if (slideIndex > slides.length) {

slideIndex = 1;

} else if (slideIndex < 1) {

slideIndex = slides.length;
 }

for (let i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

slides[slideIndex - 1].style.display = "block";

WEBSITE LINK

https://mechanicaldepartment.netlify.app/index.html

5. CONCLUSION AND FUTURE SCOPES

A. Summary of the Website Development Project:

The summary of the website development project provides a concise overview of

the entire project, highlighting the key aspects and outcomes. It should capture the
project's objectives, scope, methodology, and main deliverables. Here are the
elements to include in the summary:

Project Objectives: Summarize the objectives of the website development project,

such as creating a dynamic and interactive website for the mechanical department
of VTU to enhance communication, provide information, and facilitate
collaboration.

Project Scope: Briefly describe the scope of the project, including the specific
features, functionalities, and content that were included in the website. Highlight
any constraints or limitations encountered during the development process.

Methodology: Provide an overview of the methodology used in the project, such

as the steps followed in gathering requirements, planning, design, development,
testing, and deployment. Mention any specific tools, platforms, or frameworks
utilized.

Deliverables: Summarize the main deliverables of the project, such as the

developed website, content management system, documentation, or user manuals.

Timeline and Resources: Mention the project's duration and the resources
allocated, including the project team, development tools, and any external
assistance or collaborations.

B. Achievements and Outcomes:

In this section, you should highlight the achievements and outcomes of the website
development project. Focus on the positive impacts and tangible results that have
been achieved. Consider the following elements:

Completed Features: Summarize the key features and functionalities that have
been successfully implemented in the website, such as information dissemination,
resource repository, interactive elements, and user-friendly navigation.

Improved User Experience: Highlight how the website has enhanced the user
experience for students, faculty, and other stakeholders. Emphasize improvements
in accessing information, interacting with the department, and collaborating with
peers.

Increased Engagement: Discuss how the website has fostered engagement and
collaboration among the department's community. Highlight the usage of
interactive features like forums or chat systems, increased participation in
discussions, or improved communication channels.

Enhanced Departmental Image: Explain how the website has contributed to

enhancing the department's public image and branding. Discuss how it showcases
the department's strengths, achievements, faculty expertise, and research projects,
attracting prospective students, industry collaborations, and funding opportunities.

Improved Efficiency: Describe any improvements in departmental processes or

administrative tasks resulting from the website development project. For example,
streamlined course registration, online fee payment, or easier content management.

User Feedback: Share positive feedback and testimonials from users, such as
students, faculty, or alumni, regarding the website's usability, functionality, and
usefulness.

C. Lessons Learned and Recommendations for Future Improvements:

In this section, reflect on the lessons learned throughout the website development
project and provide recommendations for future improvements. Consider the
following points:

Lessons Learned: Discuss any challenges, obstacles, or unexpected issues

encountered during the project. Highlight the lessons learned and strategies
employed to overcome them. For example, challenges related to content
management, technical limitations, or user adoption.

Technical Considerations: Share insights into technical aspects of the project,

such as the selection of development tools, platforms, or content management
systems. Discuss any technical challenges faced and provide
recommendations for addressing similar issues in future projects.
User Feedback and Iterative Improvements: Discuss the importance of
collecting user feedback and the iterative process of continuously improving
the website based on user needs and expectations. Highlight any changes or
enhancements made based on user feedback during or after the project.
Maintenance and Support: Address the importance of ongoing maintenance,
updates, and support for the website. Recommend strategies for ensuring the
website remains up-to-date, secure, and responsive to evolving user needs.

Scalability and Future Growth: Consider the scalability of the website to

accommodate future growth and expansion of the mechanical department. Provide
recommendations for scalability options, such as integrating additional features,
optimizing performance, or accommodating increased traffic.
 Collaboration and Communication: Discuss the importance of effective
collaboration and communication between the project team, department
stakeholders, and end-users. Provide recommendations for fostering better
collaboration and communication in future website development projects.

By summarizing the achievements, outcomes, lessons learned, and

recommendations, you provide a comprehensive evaluation of the project's success
and areas for improvement, laying the foundation for future enhancements and
iterations of the website.

6.REFERENCES
Smashing Magazine
A website and blog that offers resources and advice to web developers and
web designers.
smashingmagazine.com
CSS Tricks by Chris Coyier
A blog that focuses on CSS. It offers articles, mini-tutorials, code snippets,
a forum, and more.
css-tricks.com
HTML Dog
A tutorial site on HTML, CSS and JavaScript. They also offer cheat sheets
to HTML tags and CSS properties.
htmldog.com
A List Apart
A website and blog that explores the design, development, and meaning of
web content, with a special focus on web standards and best practices.
alistapart.com
A Book Apart
Brought to you from the folks at A List Apart. They publish "brief books for
people who make websites."
abookapart.com
HTML5 Pocket Reference by Jennifer Robbins
O'Reilly Media's classic. A quick, comprehensive guide to tags and
attributes.
O'Reilly HTML Pocket Reference
CSS Pocket Reference by Eric A. Meyer
Another O'Reilly classic. A quick, comprehensive guide to selectors,
properties, values and more.
O'Reilly CSS Pocket Reference
CSS Mastery
A comprehensive, well-written guide on advanced CSS techniques. Fun to
read cover-to-cover but also excellent as a reference guide to dip into topic
by topic.
CSS Mastery

Coding Tools, Templates & Scripts

Validator.nu (X)HTML5 Validator
Check your HTML code for errors.
html5.validator.nu
HTML 5 Outliner
View the topical outline for an HTML page.
gsnedders.html5.org/outliner
Sublime Text
A sophisticated text editor for code, markup and prose.
sublimetext.com
Emmet
Emmet (previously known as Zen Coding) is a plugin for many popular text
editors which greatly improves HTML & CSS workflow.
emmet.io
Normalize
A CSS file that makes browsers render all elements more consistently and
in line with modern standards. A project by Nicolas Gallagher, co-created
with Jonathan Neal.
normalize.css
ImageOptim - Mac Only
ImageOptim optimizes images so they take up less disk space and load
faster.
imageoptim.com
ImageAlpha - Mac Only
ImageAlpha converts 24-bit PNG to paletted 8-bit with full alpha channel.
This greatly reduces file sizes with only minor loss of quality.
pngmini.com
TinyPNG (also works with JPEGs)
This site works on PC and Mac, and is the closest equivalent to
ImageOptim and ImageAlpha (which are Mac only).
tinypng.com
Google Analytics
A service offered by Google that generates detailed statistics about a
website's traffic and traffic sources and measures conversions and sales.
google.com/analytics
CSS Gradient Generator
Create beautiful colorful gradients without a gray "dead zone" in the middle
learnui.design/tools/gradient-generator.html

Browser Support & Info on Web Standards

Can I Use
Compatibility tables for support of all versions of CSS, HTML, and more in
desktop and mobile browsers.
caniuse.com
StatCounter Global Stats
Stats are based on aggregate data collected by StatCounter on a sample
exceeding 15 billion pageviews per month collected from across the
StatCounter network of more than 3 million websites.
gs.statcounter.com
WHATWG
The Web Hypertext Application Technology Working Group (WHATWG)
the developed HTML5 and what is now called the HTML Living Standard.
whatwg.org
The World Wide Web Consortium (W3C)
The W3C used to develop the web standards until the WHATWG took the
lead in web standards. Led by Web inventor Tim Berners-Lee and CEO
Jeffrey Jaffe.
w3.org