Yoga Utopia is a Yoga, Meditation and Mental-Health website that hopes to provide a universal yoga experience, encouraging both a healthy mind and a healthy body for everyone. Yoga Utopia's goal is to teach visitors the origins and benefits of practicing Yoga, Meditation and the importance of Mental Well-being.

Yoga Utopia provides beginner-friendly content which is also beneficial to a more experienced Yogi. The site has useful information relating to Yoga, Meditation, and Mental-Health that will help educate people interested in each category. Yoga Utopia aims to leave people feeling stronger, healthier and happier.

• Navigation Bar

  • Featured on all four pages, the full responsive navigation bar includes links to the Logo/Name, Home, Yoga, Meditation, Mental-Health page and Sign Up section located on the Home page and is identical in each page to allow for easy navigation.
  • The navigation bar is responsive and will collapse into a hamburger menu when used on medium and small screens.
  • This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.

• The Landing Page Image

  • The landing page has a photograph with text overlay welcoming the user and informing them Yoga Utopia's goal.
  • This section introduces the user to Yoga Utopia with a vibrant image to not only grab their attention but also suggestive towards the capabilities of what can be achieved with Yoga Utopia.

• What We Offer Section

  • The what we offer section is an informative section that tells the user what can be found on each of the Yoga, Meditation and Mental-Health pages.
  • The user will be advised early as to what is available to them on Yoga Utopia and can make an informed decision as to what page they'd like to visit.

• About Us Section

  • The about us section gives a more detailed overview to Yoga Utopia's goals, offerings, and benefits.
  • This will give the user more of an insight to Yoga Utopia and will help make them feel more comfortable with the content available/provided to them.

• Sign Up Section

  • This section will allow the user to subscribe to Yoga Utopia's emailed newsletters that will be sent to the user on a weekly basis. The user will be asked to submit their full name and email address.
  • The newsletter will contain all the up-to date news around the yoga community, provide fresh content weekly, available offers, and the latest Yoga Utopia news.

• Contact Section

  • The contact section includes Yoga Utopia's location, phone, and email details.
  • The details are made available to the user for any queries they may have for Yoga Utopia and would like a form of contact.

• The Footer

  • The footer section includes links to the relevant social media sites for Yoga Utopia. The links will open to a new tab to allow easy navigation for the user.
  • The footer is valuable to the user as it encourages them to stay connected via social media

• The Yoga Page

  • The Yoga page contains an indepth description of Yoga, its history and the benefits it provides.
  • The page also includes a Yoga for beginners YouTube video that can be played.
  • The page is responsive to all screen sizes and will adjust the size of the YouTube video accordingly.
  • This will provide the user with educational information about yoga and also provide visual and audible content they can watch and/or listen to while they practice yoga.

• The Meditation Page

  • The Meditation page contains an indepth description of Meditation, its history and the benefits it provides.
  • The page also includes a Meditation for beginners YouTube video that can be played.
  • The page is responsive to all screen sizes and will adjust the size of the YouTube video accordingly.
  • This will provide the user with educational information about meditation and also provide visual and audible content they can watch and/or listen to while they practice meditation.

• The Mental-Health Page

  • The Mental-Health page contains an indepth definition of Mental Well-being, educational description, it's science, the benefits it provides and the signs of mental-health problems.
  • The page also includes a Mental-Health self-improvement YouTube video that can be played.
  • The page is responsive to all screen sizes and will adjust the size of the YouTube video accordingly.
  • This will provide the user with educational information about mental-health and well-being and also provide visual and audible content they can watch and/or listen to while they practice the techniques in the YouTube video.

• Yoga Page Tutorials

  • Tutorial content for the Yoga page. The content will contain a step-by-step guide to a variety of yoga stretches and corresponding images/videos to provide a visual and/or audible example.
  • This will provide the user with much more accessible content on the yoga page they can follow along with.

• Meditation Page Techniques

  • Technique content for the Meditation page. The content will contain a variety of meditation techniques and corresponding images/videos to provide a visual and/or audible aid.
  • This will provide the user with much more accessible content on the meditation page that they can follow along with.

• Mental Health Page Advice

  • Self-improvement content for the Mental Health page. The content will contain more well-being advice and steps that can be taken to improve their mentality.
  • This will provide the user with much more accessible and useful content on the mental-health page.

The Yoga Utopia Home, Yoga, Meditation and Mental Health page all work as intended. All pages and sections of Yoga Utopia were tested; Some of the main testing points included:

• page navigation
• testing all clickable links
• hovering cursor over clickable links i.e. Navigation Bar, Footer Icons, What we Offer boxes, Logo etc.
• responsiveness of each section, image, video, text, navigation bar, and footer by resizing the browsers display area
• test the playback of the embedded youtube videos
• test hamburger menu responsiveness when screen size is changed

The website is fully responsive to all devices and screen sizes.

The website was shared with family and friends to test the websites usage and no problems/issues were mentioned in their feedback.

• HTML
  • No errors were returned when passing through the official W3C validator
• CSS
  • No errors were found when passing through the official (Jigsaw) validator

There is a minor bug with the hamburger menu: the area of the clickable button does not cover the full surface area of the hamburger icon displayed on the devices screen.

The process of deploying Yoga Utopia to GitHub is detailed below:

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • Navigate to the 'Build and Deployment' section
  • In the Source drop-down menu, select Deploy from a branch
  • In the Branch drop-down menu, select 'main' branch and '/(root)' folder and click the save button
  • Once saved, refresh the page. The page will reload with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - https://kizmistry.github.io/Yoga-Utopia/

• The text for the Yoga page was sampled from the following Wikipedia Article: Yoga
• The text for the Meditation page was sampled from the following Wikipedia Article: Meditation
• The text for the Mental-Health page was sampled from the following Wikipedia Article: Mental Health
• Instructions on how to implement the hamburger menu in the navigation bar was taken from an article written by Luke Embrey: 10+ Hamburger Menu Examples [CSS Only]
• The icons in the footer were taken from Font Awesome

• The photos used on the home, yoga, meditation and mental-health page are from Pexels user 'Elina Fairytale': Pexels
• The background image used for on the meditation and mental-health page are from Pexels user 'Pixabay': Pexels
• The video used on the yoga page is from, meditation and mental-health page are from the following YouTube page: Yoga With Adriene
• The video used on the meditation page is from the following Youtube page: Goodful
• The video used on the mental-health page is from the following YouTube page: Psych2Go