This project has 2 main objectives: To showcase meditation and yoga facilities in my portfolio in a compelling static front-end application that’s simple to navigate and clear in its intention. The site’s users are interested in learning body/mind self-improvement techniques. To demonstrate my competency as a developer using HMTL & CSS languages. As a user I want to be able to:
- Understand the purpose of the site on loading
- Navigate through the site with minimal resistance to the user
- Have information about yoga and meditation showed to the user
- be able to get access to the necessary sites to help the user get what is advertised
- Learn more about yoga and meditation through the free insight given
- Easy acsess to social medi linkks
The website should promote Craig Kelly’s graphic design skills and the pet portraits he creates with them. Craig and I agreed the following features (in order of importance) would meet his needs:
- Header with the title with a brief explanation of what the sites offer users of both genders
- Courses that are offered in three levels beginner, intermediate, and expert
- A About us section that details what each area of the UK has different techniques depending on the area
- A facilities section to answer what types of training programs are available
- Comments and reviews section
- A enrolment form and link
- Links to his social media
My website has buttons on the top of the page that links to other sections on the page that transition into an underlined orange color when hovering over the button's current location.
I also had icons that would also link to separate sites which took the form of social media icons at the bottom of the page in the footer, which was accompanied by text.
In the middle of the web page (Courses that we offer...) I had text boxes that were originally meant to transition slightly while hovering over the boxes to give them a tint but then scrap this as I eventually used it on another element of the page instead but the code for it is still present within my CSS. It details the types of courses that are offered to the reader with "beginner", "intermediate" and "expert".
In the About section, I had three text boxes that would transition to a darker blue color when hovered over with the cursor to highlight the type of buildings that are used in specific areas of the UK and makes the text more visible.
In my facilities section, I have a video link that a user can choose to play.
Below I have in-depth details on what programs are available based on regional names that are specialized courses that offer different levels of training and utilities.
I added a comment section viewing other people's experiences with the services provided as well as their ratings in stars.
To best understand the target market for yoga, we ask ourselves – why does someone practice yoga or start practicing yoga? What makes them go and buy a yoga mat and sign up for a yoga class? This classification gives us the following customer segments for the target market for yoga:
- People who want to improve their overall health
- People who want to heal a specific part of the body (eg lower back)
- People who want to reduce the effects of stress and improve mental well-being
- People who are looking for an alternative form of exercise
- People who are trying to lose weight
- People trying to improve their sleep patterns
- People trying to overcome depression or anxiety
- People who are seeking spiritual enlightenment
People practice yoga to improve flexibility, strengthen and tone their muscles and joints, improve their postures, relieve stress and tension from their bodies, and promote relaxation. Having understood this I made sure to have information on my page informing the user of certain techniques to help whilst promoting some of the courses that they could undertake.
Heading - Desktop view
Note: image size will change due to trying to fit in screenshots from different displays
Mobile view
Courses we offer- Desktop view
Mobile view
About us- Desktop view
Mobile view
Our facilties- Desktop view
Mobile view
What people think- Desktop view
Mobile view
Start enrolment- Desktop view
mobile view
Footer Desktop view
Mobile view
COLOURS AND UX:
- rgb(255, 255, 255) White
- #f44336; Dark tinge Oragnge
- #1e9b6b Dark Green
- #668aff Light Blue
- rgb(0, 0, 0) Black
- #d31e54; Dark Pink
- rgba(13, 5, 124, 0.7) Slightly Darker Blue
- rgb(238, 255, 0) Yellow
The images that were used within my website were Yoga and meditation themed with the intent to give a relaxing feeling and to be reassured. This included images of people meditating, people performing yoga, and other images that suited the needs of other sections of the page like site location images(i.e buildings or images of people for review sections.)
Images Used:
-
Navigational Bar Heading each page top, it’s fully responsive and toggles to a neat hamburger menu except for the taskbar icon that is not currently working on smaller screens. It contains links to the page areas like about and courses for example, which are easy to find and use by the user while traversing the page.
-
Transitions Used on images in the About us section and used on the buttons on the top of the page when hovered over by a mouse.
-
Videos used on the Facilities section of the page with controls to play, stop, rewind fast-forward, and fullscreen.
-
Footer Sat at the bottom is the footer. It’s minimal in style and contains centralized social media links, opening in separate tabs for a great UX. These links are dressed in an icon that is easy to see and recognize at their site location.
I went through all my implementations of features by once adding them within my code making sure that we were running and using tools (chrome dev tools, Gitpod and Wave, etc.) and if I ran into an issue that I couldn't solve by myself I resulted to using Youtube and google (also slack) to help me with these problems to see what I had missed. I used an extension on my Gitpod to also help me navigate the fixing process for my icons I was having a problem with them not appearing as intended so instead I created a script at the bottom of my code and placed my source link to refer to which fixed the issue.
I used The W3C CSS Validation Service to check the current state of my CSS and it passed with flying colors with no current CSS issues detected with my final build of code.
After changing these errors and adding alt values and was left with these errors to fix
I fixed the issue by introducing a h2 element but listing it as hidden
After doing this I checked again to see if it correct the issue and it did leave no errors or issues found
https://validator.w3.org/nu/?doc=https%3A%2F%2Fdom123x456.github.io%2FYoga-meditation-website%2F
-
HTML and CSS
-
Github and Gitpod
-
Chrome developer tools
-
Font aswome
-
Google fonts
-
Wave and lighthouse
-
Snipping tool
-
W3C CSS Validation Service
-
REPOSITORYS: https://dom123x456.github.io/Yoga-meditation-website/
-
External links used- https://www.yogapilatesbolton.com/
- Sociall media links-https://www.facebook.com/ https://www.instagram.com/ https://www.twitter.com/ https://uk.linkedin.com/
"This was the script used for thee icons" https://kit.fontawesome.com/25fb3548cd.js
-
ERRORS: had an issue with git add and git commit where changes were not saving to GitHub. this was resolved by giving GitHub permission to access but when putting in the request to the terminal "resolve git issue" it came out as "resolve to get it ile issue" however GitHub is now working as desired. I also developed a sliding bar that would only show on smaller screens however I did not manage to make it functional. I also had a sidebar that would appear on smaller screens that could be opened when on a smaller screen that could be opened with icons, however, I never got the sidebar to appear when the icons were clicked on as I didn't have enough time to fix this issue.
-
SIDE-NOTE: For the resubmision the navigation bar for the I fixed the issue previosly mention by addin () to the "ShowMenu" and "HideMenu" funtions, I also changed the image for the Facilites section so they were less pixelated and removed the video as it was causing sizing issues on mobile view.
-
REFERENCES: I used Easy Tutorials on YouTube to help me structure my website and to have the right values for example images, padding, and aligning text.
Navigate to the settings tab in the GitHub repository
Once in settings, navigate to the pages tab on the left of the page
Under source, select branch ‘master’ and then click ‘save’
the page will not automatically refresh and show a detailed ribbon display to indicate the deployment
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent