Crossfit Fitness Club Webpage
User-Centric Frontend Development Milestone-1 Project
Intention behind to build this Project is educational purpose(as a student of code institute) ! In this project I have used HTML for structure , CSS to style and finally media query & bootstap to make the project responsive on all devices.
This project presents a fitness web page call Crossfit. whole project has five diffrent webpages each page has diffrent content but as user prospective each webpage easily and smoothly will navigate user to their destination.
live webpage of my project
Screenshots of project
Desktop, Ipad & Mobile
Highlights
User Experience (UX)
Business Prospective
As business prospective this product has some unique offers to their custromers & toward potential customers as well such as crossfit offers crossfit-bar drinks on some discounts to all of their customers, one of the best thing crossfit offers thats is 4 membership cards each card contains pile of benefits to thier customers on reasonable prices and much more such as interior, Nutrition coaching packages and we provide the best environment to perform a exercise.
User Desire
New User Desire
-
New user will find easily the right destination because of navigation links provided in nav bar and footer as well which will lead new user direct to their destination page.
-
Easily to find contact informatiom by 2 ways one is footer their user can find all contact in detail and 2nd one is just click on contact link inside footer will lead user to contact page.
-
The apparent information given about the packages and package price which will help new user to choose suitable one.
Returning User Desire
-
User is able to contact their dietitian/trainer through call or messages.
-
User is able to check weather their is any empty indvidual training session by just simple call , email or contact form.
-
User can uppgrade their membership(to any level) any time just simple call , Email or through contact form as well.
User Stories
New Customer
-
New user wish to know about Crossfit-bar such as how much discount or is their any complimentary drinks inside membership.
-
New user would like to know about trainers/dietitian qualification before the choose membership plan or Nutrition plan.
-
New user want know is there zoom classes inside any particular membership.
Returning Customer
-
User need to direct contact to trainer to know more about (schedule) training session.
-
User has a platinum mebership( platinum mebership offer to bring a friend/family member 2 times / month (completely free) & user want to know is there any specfic time or day or just any time.
-
User want to uppgrade his/her Nutrition plan.
Wireframes of website
balsamiq
I used a balsamiq to create a wireframe. Here is linkSurface
colors
Color used in a project
-
Font-Color
-
white
-
orangered
-
#6dd5ed
-
rgb(228, 77, 23)
-
-
Background-Color
-
rgb(19, 26, 26, 0.973)
-
white
-
Fonts used in project
-
Font-Family
-
font-family: 'Oswald', sans-serif;
-
font-family: 'Zen Dots', cursive;
-
Images
some of Images upload from google images google-images
and some of them from unspalsh website unspalash
Features
Website consists of 5 pages and all the web page function good. Each webpage contains diffrent contents.
Navigation-Bar
Navigation bar has four links each links work completely and Crossfit logo on a left side of navigation bar which is link to the home page.
-
Home
-
Membership
-
Nutrition
-
About Us
Cards
Each page has own card section
-
Transformation section (Home page)
-
Membership Plan ( Membership page)
-
Nutrition Plan ( Nutrition page)
Footer
-
Footer has divided in to 4 section first section about customer service.
-
2nd section has 4 links which are completely work.
-
Membership
-
Nutrition
-
About Us
-
Contact
-
-
3rd section about company background.
-
4th and last section address and social links.
Future development
-
First I want create a Login page so user can login with user name and password so they can get all details just by one login.
-
The next development will be one extra html page which will contain price of crossfit bar drinks.
-
Payment system so user will be able to pay easily by online payments for Zoom classes and Nutrition packages as well.
Technology used in a Project
HTML
- To create whole structure of project.
CSS
- TO style the whole structure of project.
Bootstrap & Media Query
- To make it responsive on all the devices such as Desktop , Ipad and Mobile.
Font-Awesome
- Use for Icon links and Icon .
Wireframes
- Use balsamiq as a wireframe tool.
Google Font
- To make structure beautiful
Github
- To keep project safe and publically on cloud.
Gitpod
Used as code editor to create my project.
Functionality Test
-
This whole project has been tested on different devices such as Desktop,Ipad, on diffrent Mobiles Iphone x, Iphone 6 , Samsung Note 20.
-
Project has been tested on diffrent browser as well such as Google Chrome and Microsoft Edge.
Performance Testing
I have used lighthouse tool to check the performance of website. Here is link Lighthouse
Code Validation Test
I have checked up the validity of all the Html webpages and CSS file
Deployment
I used a Github pages to deployed my project. As I mentioned Above I have Used Gitpod as a code editor to create my project. To commit and push my code I have used Git control version
to save my project on Github.
HOw to deploy project on Github
-
First we need to login in our account on Github.
-
Second step we need to choose the repository to deploy.
-
3rd step we need to go to setting and find git pages.
-
4th step we need to choose branch in my case I have Master branch and then need to click on save and finally we will see our webpage will deploy.
Your site is published at https://jas-sin82.github.io/milestone-project-1/
Credits
Contents
-
70 % of contents of my project is from
Hints & Ideas
-
W3Schools https://www.w3schools.com
-
Bootstrap 4.3.1 https://getbootstrap.com