Inspiration
The inspiration behind Yoga Guide was the need for a simple, accessible, and user-friendly platform where anyone can learn yoga postures at their own pace. With the increasing stress of daily life, many people are looking for ways to stay fit, flexible, and mentally balanced. I wanted to create a guide that not only demonstrates yoga poses but also motivates users to practice regularly through a clean and interactive design.
What it does
Yoga Guide is a web-based platform that introduces users to different yoga postures with visual guidance and motivational messages.
The homepage welcomes users with a clear message about fitness and wellness.
A "Let’s Begin" button takes them to the posture section.
Each posture is displayed one by one with transitions and highlights when selected.
The site provides a bright, engaging, and motivating environment to encourage users in their fitness journey.
How we built it
We built Yoga Guide using:
HTML for structuring the website.
CSS for styling, transitions, and creating a bright, eye-catching theme.
JavaScript for interactivity, handling posture transitions, and highlighting selected poses.
Git & GitHub for version control and deployment through GitHub Pages.
Challenges we ran into
Getting the layout responsive across different screen sizes took time.
Initially, posture highlighting and transition effects didn’t work smoothly.
Deploying via GitHub Pages was tricky because the folder settings and branch setup were confusing at first.
Ensuring that the design remained simple yet appealing required multiple iterations.
Accomplishments that we're proud of
Built a fully functional yoga website from scratch using only basic web technologies.
Made the design user-friendly, responsive, and visually attractive.
Successfully integrated highlighting and smooth transitions between yoga postures.
Deployed the project online through GitHub Pages, making it accessible to anyone with a link.
What we learned
Hands-on practice with HTML, CSS, and JavaScript for building real-world projects.
How to structure a project and use Git & GitHub effectively.
Learned the process of deploying a live site via GitHub Pages.
Improved understanding of UI/UX principles, especially for fitness/wellness websites.
What's next for Yoga Guide
Add audio guidance with step-by-step instructions for each pose.
Include difficulty levels (Beginner, Intermediate, Advanced).
Create a daily yoga plan or progress tracker.
Add mobile-first design improvements for smoother usage on phones.
Expand with meditation guides and breathing exercises for holistic wellness.
Log in or sign up for Devpost to join the conversation.