Welcome to The Soul Train, I started Soul Train to help people like me who just got into yoga, pilates, and mindfulness. I share all kinds of info – different yoga and pilates styles, meditation tips, and even cool things like sound healing. I created this site to showcase what I can do for businesses in the yoga industry, offering ideas and resources to support growth and success. This is important to me, and I'm thrilled to share my insights in a creative and meaningful way.
The Soul Train repository viewed on GitHub
-
View Class Schedules:
- As a beginner yogi, I want to easily access the class schedules on The Soul Train, so I can plan my yoga sessions accordingly.
-
Class Information:
- As a beginner yogi, I want detailed information on what to expect in each class, including the type of yoga and the focus of the session.
-
Contact Page:
- As a beginner yogi, I want an easy-to-navigate contact page where I can ask questions about the classes or seek guidance from experienced professionals.
-
Join The Soul Train Team:
- As a yoga professional, I want to find information on how to sign up and join The Soul Train team as an instructor.
-
Explore Class Schedules:
- As a yoga professional, I want to explore the class schedules and understand the class structure to align with my expertise.
-
Contact The Soul Train Team:
- As a yoga professional, I want a straightforward contact page to connect with The Soul Train team for any inquiries or to express interest in joining as an instructor.
-
Access Audio Section:
- As a user interested in sound healing, I want to access an audio section dedicated to sound healing, where I can find guided sessions or ambient sounds to enhance my yoga experience.
-
Usage Instructions:
- As a user interested in sound healing, I want clear instructions on how to use the audio section and integrate it into my yoga practice.
-
Information on Equipment:
- As a participant, beginner, or professional, I want to have access to an information page that guides me on what equipment to bring for each class.
-
Understanding Equipment Importance:
- As a participant, beginner, or professional, I want to understand the importance of specific equipment and how it contributes to the overall yoga experience.
-
Inclusive Platform:
- As a user looking to reconnect with yoga, I want a platform that caters to both beginners and professionals, allowing me to start my yoga journey or deepen my practice.
-
User-Friendly Interface:
- As a user looking to reconnect with yoga, I want a user-friendly interface that provides a seamless experience, making it easy to explore classes, schedules, and additional resources.
-
HTML: I utilised HTML5 to structure my web pages, integrating multimedia elements like images and audio to enhance content presentation and user experience.
-
CSS: I employed CSS to style my HTML documents, specifying visual aspects such as colors, fonts, and layouts to create an aesthetically pleasing and responsive design.
-
GitHub: I leveraged GitHub as my primary version control system, hosting my code repositories, using push/pull requests and deploying the site.
-
Gitpod/Visual Studio Code (IDE): I relied on Gitpod or Visual Studio Code as my IDE of choice, utilising their features for writing, debugging, and managing my code efficiently, whether I was working in a cloud-based or desktop environment.
The Favicon which is an emoji to associate my website to the content to give this an idetity, as seen below.
Click to expand.
Your digital doorway featuring engaging visuals, concise descriptions, and inspirational quotes. The home page aims to pique curiosity and inspire a deeper exploration.
Click to expand.
Explore the heart of my mission, offering resources like sound healing audio and yoga essentials for an enhanced mindfulness journey.
Click to expand.
Access an updated schedule of yoga, pilates, and meditation classes for active participation and seamless integration into daily routines.
Click to expand.
Insightful blogs on mindful eating and crystals provide knowledge and skills to enhance your mindfulness journey.
Click to expand.
Establish a direct line of communication for personalized guidance, fostering a sense of belonging and support.
Click to expand.
Consistent across all pages, ensuring smooth and intuitive navigation for a seamless user experience. Creating a smooth interaction which can be seen easy on the eyes ... *almost peaceful.*
Click to expand.
A captivating point of entry with visually appealing, simplistic classe timetables, introducing the mission of *The Soul Train*. Creating easy access for those who have accessed the page previosuly and wanted to jump straight to the classes.
Click to expand.
I have added an audio section to the yoga website, offering soothing sound healing sessions, allowing you to experience the calming effects and providing a convenient option for practicing at home.
Click to expand.
Outlining the benefits of joining yoga, pilates and medication for beginners, encouraging peacefullness to the soul, participating the spiritual journey.Click to expand.
Crucial and real-time information about the schedules, introductions, and defintions for what each class means.
Click to expand.
Strategically positioned footer, reminding this is for beginners.
- Find the GitHub Repository.
- Click the Code button
- Copy the link shown.
- In Gitpod, change the directory to the location you would like the cloned directory to be located.
- Type git clone, and paste the link you copied in step 3.
- Press Enter to have the local clone created.
git add - This command was used to add the file(s) to the staging area before they are committed.
git commit -m “commit message” - This command was used to commit changes to the local repository queue ready for the final step.
git push - This command was used to update all committed code to the remote repository on github.
This project, The Soul Train, is deployed using GitHub pages using the following process,
- In your Repository section, select the Repository you wish to deploy.
- In the top horizontal Menu, locate and click the Settings link.
- Inside the Setting page, around halfway down locate the GitHub Pages Section.
- Under Source, select the None tab and change it to Main and click Save.
- Finally once the page resets scroll back down to the GitHub Pages Section to see the following message "Your site is ready to be published at (Link to the GitHub Page Web Address)". It can take time for the link to open your project initially, so please don't be worried if it does not load immediately.
The Soul Train website was tested for responsiveness on screen sizes from 320px and above, following WCAG 2.1 Reflow criteria for responsive design. The testing was performed on Chrome, Edge, and Opera browsers.
Below are the images to show the responisiveness on all pages, this was done using the extension Responsive Viewer on Google.
The project has been tested for compatibility with the following browsers using this site. Unfortunately the trail on my account would not cover macOS which is why the images may look different:
- Google Chrome (Version 122)
- Edge (Version 122)
- Firefox (Version 124)
- Opera (Version 108)
- macOS Sonoma 16.5
Below are the images shown to prove these tests.
By utilising the Wave Accessibility tool for ongoing development and final testing, used for the below:
- Ensure all forms have associated labels or appropriate aria-labels.
- Validate that color contrasts meet the minimum ratios outlined in WCAG 2.1 Contrast Guidelines.
- Verify correct heading levels to accurately convey content importance.
- Confirm content is organized within landmarks for ease of use with assistive technology.
- Provide alternative text or titles for non-textual content.
- Set the HTML page lang attribute.
- Implement Aria properties in adherence to best practices outlined in WCAG 2.1.
- Follow established coding best practices for WCAG 2.1.
- Integrated into Chrome Developer Tools or available as a standalone tool.
- Below you can see the Lighthouse results for all pages
Click to expand.
| Function | User Action | Outcome | Result |
|---|---|---|---|
| Start on Home Page | Accessing the webpage using this link | This will load the webpage with mutliple sections, the appropriate selectors and navigation/links to other pages. | Pass |
| Hover on buttons and links | Hover mouse over buttons and links | Visual feedback (e.g., color change) | Pass |
| Sections | Navigate through different sections | Display respective section content using HTML and CSS to be consistant | Pass |
| Background on all pages | Nothing for user to do | Background image should load on this page without distortion | Pass |
| Navigation | Click on navigation icon to bring the drop down function elements to show | Drop down menu acts as expected even on smaller screens | Pass |
| About page | Click the about page link in navigation bar | Display information about the benefits, ecesitites and sample content | Pass |
| Audio | Interact with audio elements | Play, pause, adjust volume, etc. | Pass |
| Classes page | Click the about page link in navigation bar | Display the class sections through sections withing containers, tables and images | Pass |
| Sections | Navigate through categorised sections | Display categorised section content | Pass |
| Images | Accessed on the classes page | Show images with no distortion | Pass |
| Tables | Accessed on the classes page | Visually show the table with no issues when move to smaller screens | Pass |
| Blog | Access blog page | Display list of blog posts | Pass |
| Sections (Blog1, Blog2, Blog3, Blog4, Blog5) | Navigate through blog sections | Display respective blog post content | Pass |
| Contact | Accessed through navigation bar | Input first name, last name, email, etc. | Pass |
| Name Field | Input first name | Allows user interaction | Pass |
| Name Field | Input last name | Allows user interaction | Pass |
| Email Field | Input email | Allows user interaction | Pass |
| Submit | Clicks button - submit contact form | Accepts form data and opens redirect page | Pass |
| If not filled (Name, Last Name, Email) | Submit contact form with missing fields | Validation error message will show, notifying the user to fill field out | Pass |
| Redirect page | Submit contact form successfully | Redirect to a confirmation page, showing thank you message and that this page is on a time and will redirect in 10 seconds | Pass |
| Timer | Trigger timer functionality when opens the Redirct page | After 10 seconds the page will open the home page without user interaction | Pass |
The site was tested for both correct and incorrect inputs for user interactions, covering various scenarios.
Steps to test:
- Navigate to The Soul Train - Home Page
- Scroll down to the form and input the following data:
- First Name: Jane
- Last Name: Doe
- Email: doe.jane@test.com
- Comment: This is a test.
- Click Submit
- User should be redirected to
contact.htmlconfirmation page
Expected:
Form submits with no warnings or errors, and the user is redirected to thankyou.html confirmation page.
Actual:
The website behaved as expected with no errors or warnings and redirected to thankyou.html.
Steps to test:
- Navigate to The Soul Train - Home Page
- Scroll down to the form and input the following data:
- First Name:
- Last Name: Doe
- Email: doe.jane@test.com
- Comment: This is a test.
- Click Submit
Expected:
The form does not submit, and an error is displayed to tell the user that the field is required.
Actual:
The website behaved as expected; an error message was displayed, and the form did not submit.
Steps to test:
- Navigate to The Soul Train - Home Page
- Scroll down to the form and input the following data:
- First Name: Jane
- Last Name:
- Email: doe.jane@test.com
- Comment: This is a test.
- Click Submit
Expected:
The form does not submit, and an error is displayed to tell the user that the field is required.
Actual:
The website behaved as expected; an error message was displayed, and the form did not submit.
Steps to test:
- Navigate to The Soul Train - Home Page
- Scroll down to the form and input the following data:
- First Name: Jane
- Last Name: Doe
- Email:
- Comment: This is a test.
- Click Submit
Expected:
The form does not submit, and an error is displayed to tell the user that the field is required.
Actual:
The website behaved as expected; an error message was displayed, and the form did not submit.<
Steps to test:
- Navigate to The Soul Train - Home Page
- Scroll down to the form and input the following data:
- First Name: Jane
- Last Name: Doe
- Email: doe.janetest.com
- Comment: This is a test.
- Click Submit
Expected:
The form does not submit, and an error is displayed to tell the user that a valid email is required and the format it should be in.
Actual:
The website behaved as expected; an error message was displayed, and the form did not submit.
No errors were found when using the official W3C validator for all HTML, please see images below.
Home
About
Classes
Contact
Blog Home
Blog1
Blog2
Blog3
Blog4
Blog5
No errors were found when using the official (Jigsaw) validator for CSS. As all HTML are using the same CSS, there is only one test required.
Issue #1: With the support and guidance with the communities on slack and from tutors at code institute providing my with all information on how to adjust the images on multi sized screens to fit in the containers. However, on smaller screens these images do present stretched.
Issue #2: Hidden checkboxes and labels for the gallery filter and accordion were inaccessible via keyboard due to the use of display: none;. Used for the navigation, including the icons, such as, ☰, which I found from Microsoft word keyboard, with support from my mentor on this project, Gareth Moore, who helped me allow this to work well on smaller screens.
- Inspiration from Love Running project provided by Code Institute
- https://developer.mozilla.org/en-US/docs/Web/CSS/:hover# for hover effect
- https://www.w3schools.com/css/css_background_image.asp for image as a background image
- https://www.youtube.com/watch?v=iXKScihfSwE for navigation bar
- https://www.youtube.com/@IonaFrisbee for flex box
- w3schools to remind me throughout on the proper structure/ written code
- Signup form and redirection page from mentor Gareth McGirr Tacos Travels
- README image sizes - https://gist.github.com/uupaa/f77d2bcf4dc7a294d109
- Photos taken from https://www.freeimages.com
- To create the styles of the background using the images, I used this https://www.sketchbook.com
- Hosting site for my background img to be a url - https://i.ibb.co/fCGgSKn/yoga-background-img.png
- Audio taken from https://stock.adobe.com/uk/search/audio?k=356526657
This is for educational purposes only