KEY PROJECT GOALS: This project has 2 main objectives: To showcase a medidtation and yoga faciltes that can be offered in my portfolio in a compelling static front end application that’s simple to navigate and clear in it’s 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 mediation showed to the user -be able to get acsess to the necesary 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
BRIEF: 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 title with a brief explanation of the of what the sites offers users of both genders -Courses that are offered in three levels begginer intermidate and expert -A About us section that detailes what each area of the uk have different techniques depending on area -A facilites section to answer what types of training programes are avalible -Comments and reviews section -A enrolment form and link -Links to his social media
-CONTENTS:
My website has buttons on the top of the page that link to other sections on the page that transition into a underlined orage color when hovering over the buttons current location.
I aslo had icons that would also link to seperate sites which took the form as social media icons at the bottom of the page in the footer, which was acompanied with text.
In the middle of the web page (Courses that we offer...) I had text boxes that were orignal meant to transition slighly while hovering over the boxes to give them a tint but them scrap this as i eventual used it on another eleemnt of the page instead but the code for it is still present within my CSS. It detailes the types of courses that are offered to the reader with "begginer", "intermidate" 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 inspecific ares of the UK and makes the text become more visible.
In my facilites section I have a video link that a user can chose to play.
Below it I have in depth detailes on what programes are avalibe based of regional names that are specialised courses that offer differennt levels of training and uttilites.
I had added a comment section viewing other poeples experinces with the services provided aswell as there ratings in stars.
TARGET AUDIANCE: 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 their course that they could undertake.
SITE STRUCTURE: Heading - Desktop view
Note:image size will change due 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
IMAGERY: The images that were used within my website were Yoga and meditation themed with the intent to give a relaxing feeling and to be reasured. This included images of peeople meditating, people perfoming yoga and other images that suited the needs for other sections of the page like, site location images(i.e buildings or image of people for review sections.)
Images Used:
FEATURES:
-Navigational Bar Heading each page top, it’s fully responsive and toggles to a neat hamburger menu except the task bar icon that is not currently working on smaller screens. It contains links to the page areas like about and courses for example, which is easy to fined and user by the user while traversing the page.
-Transitions Used on images on About us section and used on the buttons on the top of the page when hovered over by a mouse.
-Videos used on the Facilties section of the page with controls to play, stop, rewind fastforward and fullscreen.
-Footer Sat at the bottom is the footer. It’s minimal in style and contains the centralised social media links, opening in separate tabs for a great UX. These links are dressed in a icon that are easy to see and recognise to there site location.
TESTING: I whent through all my implemantations of features by once adding them within my code making sure that were running and using tools (chrome dev tools, Gitpod and Wave ect.) and if I ran into an issue that I couldnt 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 also used extension on my Gitpod to also help me navigate the fixing process for my icons which 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 nocurrent CSS issues detected with my final buil of code.
After changing these errors and adding alt values I was left with these errors left to fix
I fixed the issue by introducing a h2 element but listing it as hidden
After doing this I checked agin to see if it correct the issue and it did leaving no errors or issues found
https://validator.w3.org/nu/?doc=https%3A%2F%2Fdom123x456.github.io%2FYoga-meditation-website%2F
TECHNOLOGIES USED: -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
-ERROS: had an issue with git add and git commit were changes were not being save to github. this was resloved by giving github permision to acsess but when putting in the request to the termilnal "resolve git issue" it came out as "riesolve getit ile issue" however the github is now working as desired. I also had developed a sliding bar that would only show on smaller screens howevre i did not mange to make it functional. I also had a side bar that would appear on samller screens that couldbe opened when on a smaller screen that could be opened with icons, however i never got the side bar to apper when the icons were clicked on as i didnt have enough time to fix this issue.
-REFFRENCES: I used Easy Tutorials on YouTube to help me structure my website and to have the right values for example images, padding and alligning text.
Deploy to GitHub Pages 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’ page will no automatically refresh and show a detailed ribbon display to indicate deployment
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent