MILESTONE PROJECT 1: User-Centric Frontend Development - Code Insititute

HI reader,

Welcome to my milestone-one project for code Institutes 1 of 4 projects for my journey to become a full stack developer.

DEMO:

My wireframe mockup is attached to my repository on github for viewing. A live demo version of my website in action can be found here

Introduction:

In my current project I picked to do it on, is about a gym because in 2020 alot of people have become close/ connected to fitness, by using it to

Get in a better shape
A hobby
A way to meet up with friends
To improve how they look and for improving mental health etc.

And it shows the gyms home page designed into sections where at the top of the page where the gyms logo is and also the nav bar feature, where the gallery has images of the gym and its members working out (taken from free open source images)(https://www.pexels.com/collections/crossfit-gym-exercise-workout-training-rhf4lf3/) head of my gym introduction page we have a jumbotron showing the company slogan, a highlighted element where if you purchase a membership you get in return a free extension onto your membership, then down below we have features about the gym for example different types or areas of exercise that one person can do at this facility, with a option to view the time tables or book in with a Personal Trainer, then below that we have a footer section, I used footer layout from (https://mdbootstrap.com/products/jquery-ui-kit/) styled it with my own colors and fonts, but I added links to the titles, with a quote on the left about the company, in the center of the footer we have links to different areas of the site that would be available to an existing member or to a new upoming member, then to the right of the footer we have the contact deatils like address, email, contact information etc with a copyright logo at the bottom of the footer.

When the site is viewed on a mobile version I have made some of the content be hidden due to too much content being shown and it looks too squashed so I hid some less important parts, when viewed on a mobile the navbar condenses and becomes a burger feature/ drop down menu which has the sections still present, just not clustered all over the screen.

UX:

This site is aimed at all individuals, young or old, its a site advertising a gym and its features and offers a free extended period if you join, it has images of a pool, fitness classes and the gym, it has the option of taking Personal Trainer classes, swimming lessons, and also in the navbar has the option of booking a fitness class from the list given in the classes section. The extended period of time is added to entise people to buy the membership and the classes shown are to work together in groups having fun while getting fit, also if your new it has the option to book in with a personal trainers to show you and send you on the right path to get a fitter lifestyle.

User Stories:

By asking friends, family members and also members of the current community gym what they would like to see on the website when it is deployed, and most answers to this questions were:

As a user of the gyms website, I want to see if this gym fits my goals. (Facilities Section on base of home page)
As a user of the gyms website, I want to know how much it will cost for a 3 month plan to test it out. (price deal on jumbotron page)
As a user of the gyms website, I want to know if there are Personal Training options. (Facilities Section on base of home page)
As a user of the gyms website, I want to know how I can contact this company for further details. (Contact page on base of footer)
As a user of the gyms website, I want to find quick access on the go preferable by my phone. (Responsive designed)
As a user of the gyms website, I would like to see a gallery of the gym and members and classes, showing what they would look like.(Gallery Section)

Features:

In this section, I will go over different parts of my project in a short brief statement.

In my nabar we have different sections a new customer or current can enter to view the gyms services and images. In the jumbotron we have a slogan then a T&C for age and also a promotion standing out for viewers. I added icons from font-awesome to my nav-bar to highlight or spice it up better for the eye, ive made them red so it jumps out I kept the navbar background white so both the text and icons can be seen better without issue. Ive made sure the home icon and also the name of the brand positioned in the top left corner are linked to the Index.html page so when you click either one it will bring you back to the main home page, so if the person using it is in the gallery or sign in page etc it will return them to the home page.

Then I added a modal sign up button for new customers to sign up and create a username etc, and also a sign in button for existing customers in the top right of the nav bar so it is nice and tidy. I added a backround Image of a gym area and also made the opacity of my jumbotron 0.7 so the background could still be seen throught the jumbotron while scrolling. Then I added images to each info card showing features and explaining the features in the gym with buttons to enquire and timetables for the classes etc. Then in the footer we have accesible links to contact us, sign up to be a PT, contact us etc, with addreses and details etc, I added transition colors to my social network icons and added active links using target_blank to open a new page on the browser so our page is not lost while reaching the social media accounts.

13/04/2020: I added a sign in button similar to the sign up modal used in the jumbotron but added to the nav using the btn btn-danger feature from bootstrap4 for members to sign in and when it minimises on mobile devices, the sign in button disapears but on the footer members can access the account via the members account link so there is still access for mobile users.

Features Left to Implement:

I would add a video section of a tour of the gym, show casing all of the facilities better, showing the staff, and maybe some customer reviews on the classes and how they find the gym etc, also i would add a blog section for customers and new to join customers to pass information, ask questions, and see live updates of the gym regarding new equipment, facilities to come, temporary closing times and more.

Testing:

All links in the navbar and the jumbotron will function, also the social networking icons on the footer will function except the useful links sections. The social media links will open on a new webpage using the _blank html attribute. The "sign up and sign in" button will open up the modals Ive created for them to function based on the users choice. Custom CCS code is written for every modals result, but I used the same button style (btn btn-danger) so the colors dont go opposite ways in regards to comparisson.

The site was tested across multiple different screen sizes on Google Chrome, Safari on Iphones and Mac computers that support IOS and Internet Explorer, to ensure compatibility and full responsiveness it was also tested on an android mobile device (Samsung Galaxy). When the webpage is visited on larger screens the images return and as it goes smaller the images and some text becomes hidden from the eye.

The text and card-decks showing the gyms facilities will properly align on every screen size. This is going to make it better readable for smaller screens.

Changes I Made:

I made some changes to my website after I had some viewers look at it and had oppionions and how they think it looks, some said the colors I used were bright, alot of mixed colors which were distracting to the eye, so I dampened down the colors to more easy on the eye colors arounf the document. I removed the classes drop down tab on my navbar from advice from my mentor, because he thought I had too much present on the navbar. I changed the colors of the block dividers and the facilities heading above my cards section to the same hexidecimal color as the danger btn color from bootstrap4 to match the red on the buttons arounf the site.

Technologies Used:

I used HTML
I used CSS
I used Bootsrap 4
I used Github and gitpod

for my project. I added in the Jquery and Javascript links at the base of my HTML document to make my drop down menu active and make the website responsive when mobile version is iniatiated.

I used HTML for word typing and editting, adding features like rows, tables, images etc. CSS for styling the features in the html document and also styling the entire document. I used bootstrap4 for additional help and structured layouts for regions of my developing site and to speed up the building proccess, be better and have well formulated structures, also I used bootstrap for making buttons and navbar features.

Different Browsers and screen sizes:

In the webpage view this site looks really well, its responsive to the level I want it to be as in the nav-bar, sign up buttons working when clicked, the backroung image stays fixed as designed to do, the images and text on my card features down the page look good the images are a nice size, not too big not too small, the text fits perfect, all boxes are equal in size, the footer is well positioned and styled with nice color and icons with active links to social networks.

On the mobile version The site is similar to the desktop version. EXCEPT I made sure to have a collapsable menu to make it tidier on smaller screens I also took the idea of reducing the information on smaller devices by using the display-block feature for the entire row of the personal trainer collumn and also the small images in each row, so it makes it more mobile friendly, looks nicer on the eyes, and its spaced better. Due to the nav-bar sign in feature for existing members being removed for mobile friendly devices, I added a membership account link down below in the footer for access for mobile users so they would have the ability to sign in on both forms of devices. (footer links not active as of yet)

Deployment:

Each time I reached a point during my website editing and ceation I pushed my project to github using the terminal commands and once I did that I rechecked the site github to verify that the update and projected was pushed succesfully with peace of mind. When deplying my website on Github Pages I came into a couple of problems where it wouldnt work for me because i didnt name my project with a .github.io at the ending of my repository so needed assistance resolving this from the slack community, also i had to watch some youtube videos and google theories on using github pages for assistance to fully understand how to use it better which it helped alot. I also had a issue when my gitpod master branch had seperated and wouldnt push to github until it was resolved, this caused a delay in deploying the website until the branch was brought back to the master branch.

This site is hosted by using GitHub pages, it is deployed directly from the master branch. The idea of this is that the deployed site will update automatically when there are new commits to the master branch. for the site to be deployed correctly on GitHub pages, the landing page must be named index.html. if not this will not work, to run locally on your computer, you can clone this repository directly into the editor of your computer (e.g gitpod) by copying and pasting the link into your terminal. If anyone wanted to cut ties with this GitHub repository and remove the master branch, just type (git remote rm origin) into the terminal.

Credits for all content and Technologies used:

Content:

The text mentioned in the gyms card features about the gyms exercise areas and features etc was quoted from:

(https://www.holmesplace.com/en/en/blog/fitness/what-areas-are-available-in-a-gym)

The text section from my footer was similar to what was given in my footer layout from:

(https://mdbootstrap.com/products/jquery-ui-kit/....(I styled the footer quotes and text to reference my website and removed two rows so it is not packed too much and isnt squashed and is styled to the style which suits my site).

The photos used in this site were obtained from open source free to use photos on:

(https://www.pexels.com/collections/crossfit-gym-exercise-workout-training-rhf4lf3/)

The footer/Modal layout/ structure I used was from:

The icons I used were from:

(https://fontawesome.com/)

The fonts I used were from:

(https://fonts.google.com/)
(link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet")
(link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet")
(link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet")

The navbar structure:

(https://getbootstrap.com/docs/4.0/components/navbar/)

Acknowledgement of Technologies and content I used are:

I received inspiration for this project from many different people, sources etc. which are below,

Youtube tutorial how to videos for assistance:

I used inspiration from previous projects I completed in code Insititute as my journey into the full Stack Developer Role for example which i thought was pretty cool and interesting (the jumbotron feature, which i edited and used similar style except I used a different button style from bootstrap, different background color, differen opacity for the background and importance on text. I also .

I also used slack groups for guidance and assitance from the well educated mentors assigned,

code-institute-submissions / markk0042-milestone1project.github.io Goto Github PK

markk0042-milestone1project.github.io's Introduction