##Welcome to the README file for my first milestone project titled Nubian wellness Centre.
This project was developed to create a website for a fitness centre dedicated to promoting physical activity among black people and other people of colour. The idea and inspiration for this project was drawn from the current ongoing pandemic and the impact it is having on ethnic minorities in developed countries. The health benefits of regular physical activities are incontrovertible and creation of an online resource to target an underserved population to enhance their physical, emotional, mental and overall well-being is a logical step to support what the community is going through. Currently existing physical activity and exercise centres and websites though claim to be inclusive but overwhelmingly cater to a single demographic. An online search of websites of various fitness centres highlights the lack of diversity within the industry both in tertms of ownership and clientelle. In the spirit of the world-wide black lives matter movement, this project aims to redress this imbalance by serving three main functions: Business Ownership: A massive contribution to ethnic minority ownership of fitness facility and website. Users: A unique resource for the marginalised ethnic minority community to make significant effort towards enhancing their own physical well-being. Representation: Increases visibility and representation of the black business entrepreneurs and fitness centre users. Community Integratyion: Socialisation by sports is a well known mantra. This project will further create a cohesive environment; both pysical and virtual, for the black community of UK and inspiration to others across the world.
##UX Design
Strategy A systematic search of online resources revealed a significant lack of fitness and physical activity resources dedicated to promotion of exercise in black people in western countries. The health brenefits of exercise and physical activities are incontrovertible. This means black people are less likely to obtain these benefits due to reduced physical activity level. There is a general misconception by the public regarding physical activity participation by black people due to high numbers of black elite level athletes. in addition economic factors also impact on physical activity pand exercise participation. In addition to the economic factors, there are also numerous social and environmental factors that restrict the engagement of black people in physical activities. There is also the additional factor of weather with reduced sunshine hours especially in winter which further impacts on physical activity engagement. The strategy for the project evolved from the folloowing user story. "As a black person, I want a gym/fitness facility that understands my need as a black person so I can become more active and healthy".
Scope This project has therefore been initiated to create a website for a fitness facility that tries to address some of the imbalance with regards to access to opportunity for physical activity. Though there is a social responsibility and advocacy component to the mission statement of the project, the fitness centre also needs economic viable for sustainability and to activityas a beacon and pioneer to other black peple witjhin the fitness sector of the economy.
Key objectives of the projects are: 1 To provide a supportive environment that will facilitate regular particiopation in exercise and physical activities. 2. To create brand awareness. 3. To promote healthy lifestyle in people of colour. 4. Act as an advocate for black people to increase access to affordable facilities for exercise and physical activities.
Structure :The structure to implement this project was based on a principle to make desired information and service readily available and to create a website that will be both pleasing and engaging for the user. It will showcase features that the users can readily identify with. The website will be easily accessible across various viewing platforms from mobile phones to desktop. In an increasingly mobile world, a mobile first aprroach was undertaken for the design of the website.
Skeleton A mock up of the project was initially stencilled with paper and pen. A couple of different versions were created to enhance my understanding and competence in creating the skeleton/wireframe of the project. This was converted to a low fidelity digital version using Balsamiq wireframe.
** Surface** With the wireframe completed, I progressed to the surface plane to create the website using the knowledge I have acquired from the various lessons and tutorials from the frontend module of the full stack developement programme of codeinstitute. Here is to a Happy coding!
##User Story: *As a black person, I want access to a physical activity and fitness resource that understands the various factors that promotes a black person's participation in exercise. A resource that channels my unique qualities and attributes to help me optimise my physical health and fitness. *As a black fitness instructor and entrepreneur, I want to create a unique physical and online resource that will be the go-to-place for black people looking for information, advice and facilities for physical activities.
##Features For this project, I have utilised the framework of the example provided during the module putting it together lesson on the use of boostrap. This is to increase my familiarity with the bootsrap framework and also to explore other functionaliries within the system. I have also used the bootsrap version 4 as used in the module lessons at codeinstitute though I am aware that newer versions now exists. However, as someone new to software developement it is essential to understand the basics and use provided resources so that I can readily troubleshoot any unexpected snags, bugs and issues. I created an asset folder which holds my image files. The images were mostly obtained from pexels.com and unsplash.com In the process of searching for images of black people using gym facilities, it was obvious that very few stock images are available. This further reinforces why this project is important. A potential side development from this project will be to curate resources for stock images of black people doing various activities.
My project has 4 pages set up as follows:
1 A home/landing page that gives the user information about the service. It also has the navigation elements as well as link to joining information. For a unique product tackling a bespoke population, I feel it is important for the landing page to provide vital information relating to that. The rule of thirds will be implemented in all the pages of the project. The website logo was created through resources obtained at jimdo.com, a logo creator resource. The set up of the home page with a header and footer section that is common to all the pages of the website. Content variation will be in the middle section of the pages.
-
An activities page will show case some of the the various activities on offer. On this page, the activities will be presented with an image overlay that turns to text with hover functionality.
-
A gallery page to show various pictures. The middle section of this page hosts the pictures which has been set up to display in 4 columns on a desktop screen and 2 columns on medium sized screens and single column on small devices. The coding and styling ideas were obtained from w3schools.com with some modifications I added to fix some bugs. The bug was in relation to blank spaces appeaaring on the screen in desktop mode. Pictures used in the project were obtained from mainly 2 sources www.unsplash.com and www.pixels.com
-
The Join Us/ Contact page utilised a simple form structure with 2 rows of input information for name and email. This is followed by a textarea section, all similar to the example project in the tutorials. I added an additional check box to further ensure that certaion requirements are fulfilled before form submission.
##Technologies used.
For this project, I used the following resources: *Concept design and drawing using paper and pencil to sketch the outline of the site and the various pages. This was the transfered to a wireframe software *Wireframe design using balsamiq mock-ups obtained from https://balsamiq.com/ I have included the wireframe in my repo for this project *Tutorials and lessons on front end developement from codeinstitute https://learn.codeinstitute.net/ *HTML and CSS. The HTML and CSS codes were based on ideas from various sources. The galllery page required display in a format that will facilitate the display of many pictures. The CCS stylide code for the pictures section to the gallery page was obtained from www.w3schools.com *Advice and information from slack online community https://slack.com/intl/en-gb/ especially the codeinstitute workspace. *https://getbootstrap.com/docs/4.0/ *https://fonts.google.com/ *https://fontawesome.com/ Logo design through the jimdo website https://www.jimdo.com/website/logo-creator/?jtm_source=adwords&jtm_medium=cpc&jtm_campaign=Kampagne%20Brands%20en_UK%20(New%20LP)&jtm_campaign_id=6625070151&jtm_ad_group=81555603529&jtm_ad_id=386417591409&jtm_term=jimdo&jtm_matchtype=e&jtm_device=c&gclid=EAIaIQobChMIu4rPjvab7wIVzLHtCh1YmAOvEAAYASABEgIXsPD_BwE *hover effects applied through of hover.css codes and classes
The key issue that hassignificantly impacted on the smooth completion of the project is getting to understand bootstrap grid flexbox system.
###Activity page: The activities page had display issues in tablet size screens which I have tried a couple different solutions. I think the issue is related to the bootstrap grid which I might need to override with custom CSS styling. Solved the text overlay "appear on hover" effect by creating a new overlay and a :hover class in the div housing the activity-text and changing the opacity to zero. I then created new CSS property for overlay class and hover to appear with an opacity of 1. I needed to play around with the text color considering the white colour I initially used is not easily readable in light aspects of the background image. I experimented with diferrent background colors and currently leaving it as lavender. Also need to change the hvr-sweep-to-bottom class as reusing this as currently set for the nav elements is not fully covering all the text in the activity columns. I will explore hover.css for suitable effects to apply to the activities section with appropriate sizing.
Still had persistent on-going issue of text spilling over into the footer section on medium and tablet size screen sizes to fix and also the activity-name spills into the footer column and not sitting at the bottom of the column. I posted this issue of text overspill into the footer section on various coding forums. I also requested tutor support at this stage Based on the various responses I received from the different forums and got various responses. What eventually worked was that I fixed the activity-name by introducing a row class with {position: relative } to override the default one from bootstrap, and then added a {bottom: 0} property and value to the activity-name class. This then worked with the existing {position: absolute} to force the activity-name class to the bottom of the row div. I also fixed the spilling activity text when the window is resized by using {font-size: max(0.8em, 12px)} instead of the 16px that I orinally used. This means that the normal size of the text will at least be 12px (i.e. when the window is reduced ) or 0.8em when at full screen. The activities name for afro-fusion was deliberately put on two lines to make it stand out as the activity the centre is renowned for. It is the primary activity that is exclusiveand draws on the culture of the users it aims to attract. All the pages are looking nice no issues with HTML or CSS validation check.
Next stage is to add the href for all the links and make the pages work as one document rather just series of pages. The href for all the links including social media are now added. Discovered that copying and pasting the url to the various external links provides the best method to ensure the link opens to the required site.
Also updated the readme file regularly to document many of the changes and modifications.
##Testing
At every stage of the project developemewnt, I continously tested both within the IDE environment and deploying through the http.server port to open in a browser. I used the chrome developer tool to continously check the responsiveness of the web pages across different device sizes and also to review my CSS codes when not displaying as intended. I also ensured that I commit all changes to my project files to my github project repository regularly. I tested the form on the join-us page and validated that submission cannot be implemented without any of the required data entry.
##Deployment. My project repository on git hub has been updated regularly. I have tested sharing the link with other developers to ensure it is accessible by those to whom I have given access. ###Testing process
Testing: Tested the site throughout the development within the IDE and the browser through the workspace port.
Further deployment information and any issues will be documented after the project has been deployed to github pages. To enable my project to be deployed from the repository, I modified the settings to create a github pages.
Result: The project deployed nicely on github pages https://ashadhawk.github.io/nubian-wellness-centre/activity.html
No issues. all links work well. The display is responsive across of device sizes.
##Credits Contents: All text used in the project were written by me. Acknowledgement has be given in the text to the various sources where I obtained ideas, snippets of code and support. My codeinstitute appointed mentor for providing links to useful online resources and balsamiq. Various friends and families who are established software developements who provided clarifications, support and explanations to understanding the tricky aspects of using CSS.
###My Reflections This is my first foray into software development. I have learnt a lot within a short period. My strength definitely lies in the conceptualisation and design of the project. Working with wireframes was intuitive and I believe I can design visually appealing and intuitive websites and programmes as I acquire more coding skills. My wireframe was quite ambitious and had more features than I am able to technically execute. I therefore had to adapt the project what what is within my technical ability. I am able to write and structure the HTML codes that the project required. The CSS was a bit tricky but I got better hang of it as I worked through the project. I believe I have created a worthy first milestone project that has further increased my interest to progress further in the software development ladder.