Website for DIY LAB @ Vigyan Ashram

Brief Introduction:

This project is a website developed for DIY-LAB Vigyan Ashram, an organization focused on promoting hands-on learning and creativity through workshops, courses, and projects in science, technology, engineering, art, and mathematics (STEAM). The website serves as a central platform to showcase their offerings and connect with the community.

Problem Statement:

DIY-LAB Vigyan Ashram needed a better online presence to effectively communicate its mission, showcase its activities, and facilitate engagement with potential participants. Their previous website lacked key information, had accessibility issues, and offered a limited user experience, making it difficult for people to learn about and participate in their programs.

Solution:

The Project website provides a comprehensive online platform for DIY-LAB Vigyan Ashram. It offers detailed information about their workshops, courses, projects, and the organization itself. Interactive elements like video previews and image slideshows enhance user engagement. The website also includes contact information, social media links, and a map embed to facilitate communication and location finding.

Key Features:

Detailed Workshop and Course Listings: Showcases workshops and courses with titles, descriptions, age ranges, and interactive previews (videos and slideshows).
Project Showcase: Highlights past and ongoing projects with visuals and descriptions.
About Us Section: Provides information about DIY-LAB Vigyan Ashram's mission, values, and team.
Contact and Location Information: Includes address, email, phone numbers, social media links, and a map.
Interactive Elements: Uses videos and slideshows to engage users with workshop and course content.
Navigation and Structure: Clear and consistent navigation makes it easy for users to find information.

Software and IDEs Used:

HTML, CSS, and JavaScript were used for front-end development.
The IDEs used for web development include Visual Studio Code.

Website Overview:

Purpose: The primary goal of the website is to promote DIY-LAB Vigyan Ashram's programs (workshops, courses, projects, memberships), provide information about the organization, and facilitate communication with the community.

Target Audience: The website is intended for a broad audience, including:

Students of various age groups (from elementary school to graduate level) interested in STEAM education.
Parents looking for educational and creative activities for their children.
Educators seeking resources and inspiration.
Anyone interested in hands-on learning, making, and DIY-LAB projects.

Value Proposition: The website offers a one-stop platform to:

Discover and register for engaging workshops and courses.
Explore exciting STEAM projects.
Learn about DIY-LAB Vigyan Ashram's mission and impact.
Connect with the organization and its community.

Website Overview

The website is designed for Vigyan Ashram, highlighting its various offerings, including courses, internships, membership, projects, and services.
Built with HTML, CSS, and JavaScript, the website provides an interactive user experience.
The design incorporates a modern, responsive layout with a clear navigation structure.
The color scheme and typography maintain consistency across all pages.

Homepage

The homepage serves as an introduction to Vigyan Ashram.
Features an engaging hero section with images and text.
Navigation bar includes links to key sections: About, Projects, Membership, Workshops, Internship, Services, Courses, and Blog.
Footer contains contact details, social media links, and an embedded Google Map.

About Page

Provides detailed information about Vigyan Ashram’s mission and objectives.
Uses a structured layout to highlight key aspects such as history, values, and impact.
Incorporates images and design elements to enhance readability.

Projects Page

Showcases various projects undertaken at Vigyan Ashram.
Features an interactive project gallery with images.
Includes a brief description of each project and its impact.
Utilizes animations to enhance the visual appeal.

Membership Page

Details different membership plans available for students and innovators.
Categorized into three levels based on expertise and experience.
Includes pricing details and the benefits associated with each level.
Contact and inquiry sections allow users to apply for membership.

Internship Page

Highlights internship opportunities offered at Vigyan Ashram.
Details two options: 1-month and 6-month internship programs.
Explains the skills and knowledge interns will gain.
Provides application instructions and contact information.

Workshops Page

Lists various workshops available at Vigyan Ashram.
Includes robotics, DIY paper workshops, image recognition, and mobile app development.
Each workshop section contains an image, description, and age eligibility.
Interactive elements such as hover effects and animations enhance user experience.

Courses Page

Showcases courses related to science, technology, and engineering.
Uses a structured table format to display course names and descriptions.
Encourages students and professionals to enroll.

Technical Skills Page

Lists students and their technical skills.
Includes a table with names, links to personal blogs, and year of participation.
Serves as a portfolio showcase for students' projects and achievements.

Blog Page

Hosts blog articles related to innovations, experiences, and insights from students and faculty.
Uses a structured layout with titles, dates, and content previews.
Encourages engagement through a comment section.

Services Page

Details services available at Vigyan Ashram, such as 3D printing, laser cutting, and vinyl machine access.
Explains the charges for using lab facilities and machines.
Encourages innovators and students to leverage these tools for their projects.

Part 2: New Website

This is the home page of DIY Lab of Vigyan Ashram describing about the latest whereabouts happening in the lab.
Clicking on Learn more take you to About Us page.
Hover Animations are added in media gallery and one picture is displayed on screen at a time for better user engagement with lazy load.

About page contains video describing everything in DIY Lab.
Information about DIY Lab and its affiliation with Vigyan Ashram.
Working and equipment's in DIY Lab.
Services and Membership page redirects are given for "Explore Services" and "Learn about memberships"
"Contact us to arrange a visit " opens a modal form and user inputs are saved in google sheets while simultaneously mailing the DIY Lab staff user.

The projects page showcases all the recent workings done in the lab.
The user can pause, mute, adjust the volume as per requirement and ca also view the video in full screen.
Additionally, user can directly jump to other videos from the carousel.

The page contains the activities done by the members while showcasing the membership plans.
"Join Now" button opens a form which the user can fill, and the content is posted to google sheet and also mailing the DIY Lab staff user.

"Apply to Workshop" opens a form and data is submitted to DIY Lab staff
The user can hover on the workshop container to see the working of project.

Highlights the internship programs at DIY Lab.
The data is stored in google sheet with resume drive link and resume file is stored in drive folder

The blog page redirects to the DIY Lab blogger page which are custom pages with DIY Lab website themes.

Design and User Experience

The website maintains a user-friendly and interactive design.
Consistent typography, colors, and layout enhance readability.
Uses animations and interactive elements to engage visitors.
Mobile responsiveness ensures accessibility across devices.

Conclusion

The website successfully presents Vigyan Ashram’s initiatives, offerings, and services.
Well-structured pages provide a seamless user experience.
Call-to-action sections encourage user engagement, inquiries, and participation.