Rehab Potential-milestone project

Introduction

This is my first milestone project, Rehab Potential

Since 2012 my wife and myself owned this company Rehab Potential Inc. which is physical therapy clinic. I always had a dream of developing a website for our company which can give a new look. As I thought of changing my career and enrolled into Full Stack Develepment course I had imagined to develop a project related to our comapany,

Reason of this project is to put all what I learned and understood, the concepts of HTML and CSS put together a fully responsive static website.

I will run you through the steps to my project and putting all the efforts behind the design along with the user experience.

Thank You for all your help for which I was able to put together my very first project RehabPotential

UX - User Experience design

Goals for creating the poject :-

The inspotation and planning of the priject was from the patients themselves. They alway wanted to know more about the clinic and there features. Thats what made me think to make an user friendly informative project that can be easily navigated without difficulty for old and disable patients.

Creator Story :-

• I wanted the project to b pleasing to the eyes at first glance.
• I wanted the project to be easily navigated on different platforms(mobile, tablets, laptops and desktops).
• I wanted easiy language text so the users can read without difficulties.
• I wanted to alert the users due to the pandemic COVID-19 the safety precautions prior to coming into the clinic. *I want all text and quotesto be properly placed and the shouldn't feel out of place as soon as they land on the page.

User Story :-

First Time Visitors

• As per the visitors, I want there experience to be user friendly.
• I want them to be easily navigate through the pages using the navigation bar.
• I want the user to navigate back to home page at anytime, where the navigation bar follows for an easy excess.
• I want the user experience to be same on all devices.
• I want to user to read the text without feeling bored.
• I want to images, text, therapy quotes and page presentation to be reinforcing to come back to the site.
• I want the visitor to contact the creator through the social links and contact page.
• I wan them to give feebback on there returning experience.

To Make the user experience more pleasing; In order to do so I started looking around asking questions to friends who are also therapist with a site in place, our staff and specially our patients on what they would like to see in the site. After putting together all there ideas and researching I was able to put together a site which users would like to visit.

From the feedback of the users I came to know that they are more intrested in information about the clinic and how they can get in touch with you during closed hours.

So I started planning using phases

Phase - 1

• A home page with little information of the clinic and staff.
• An About Us page
• Our Services page
• Contact Us page

Phase - 2

• An appointment page (scheduling an appointment)
• Testimonial page (feedback)
• Insurance page (which insurances are accepted)

Phase - 3

• Interactive elements(JavaScript knowledge)
• Web domine with a customer URL

The first step for my research was visiting physical therapy sites and knowing different layouts, elements in navigation bar, images, quotes, text, and colors.

Colors :

• Black
• Grey
• Shade of Orange
• White
• Yellow
• Shade of Purple

Black background to start with to make the images and text stand out more by giving the page the depth and drawing attention.

Typography :

• Itim
• Montserrat

I used Itim script throughout all the pages which looks fancy and also easy for anybody to read the text.

I also used Montserrat script in the heading of the information is provided to have the heading with different text to have it stand out more.

Navigation bar is fixed to the top as the page moves up and down where you can use the navigation bar anytime without having to scroll back up. The navigation bar changes to toggler with an toggler icon at 765px, which means any devices

Social Media links in the footer with a simple color combination will help user with attractive eye catching icons which upon clicking will direct them to the blank page regarding there individual sites.

Hero Images which are on every page except the contact us page. the images are well pixelated and properly arranged to give the page an attractive interaction with a good visual effect. On the home page the hero image being an animated in-out effect with an nice quote of physical therapy. Other image on about page shows relaxation stating about the page. Finally the image on the service page is about team work and thats what it means.

The text is consistant throughout all the pages mostly consisting information of the facility and staff.

Below is a link to the initial draft of the wireframe I created for the project and an initial conceptual idea of how everything would respond on different devices.

RehabPotentialWireframe

• Home page contains an image with a jumbotron containing quote. The jumbotron is transparent using CSS styling.
• The image on home page contains in - out animation which stands out when you load the page.
• All the main headings are underlined using shades of orange using CSS styling to have the topics stand out from the dark background.
• There is an alert on the top of the screen which is added using bootstrap to alert the users for any updating changes.
• Company name(logo) is a hyperlink which can bring you back to the home page at anytime.
• The contact us page presents with an fill up form with message. If the required fields are not filled a message will show to enter the required field.
• Social Media Links in the footer opens up with a new blank page and links to an account.

Features to Implement :

• Once understanding JavaScript, I would like to add an appointment page which can help to schedule an appointments for new clients by fill out a required forms.
• I would like to add a counting column which would automatically counts the number of new patients added. Which will help build clinents with visual feedback.
• I would add an signIn/ Signup page for new or existing clients who can excess there own medical documents.

Technologies Used :

• HTML

  • used as the basic building block for the project and to structure the content.

• CSS

  • used to style all the web content across the project.

• Bootstrap 4

  • Used as the main frame work to make the prject responsive.

• JavaScript

  • used for the bootstrap navbar for extending collapse plugin and the contact us form by submitting.

• jQuery

  • used with Bootstrap to make the navbar responsive.

• Google Fonts

  • used to obtain the fonts linked in the header fonts used were Itim and Montserrat script.

• Font Awesome

  • Used to obtain the social media lcon used in the footer and the icons used in the discription of the services and home page information.

• Google Developer tools

  • used primarily for fixing spacing issues finding bugs and testing responsiveness across the project.

• Github

  • used to store code for the project after being pushed.

• Git

  • used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• Gitpod

  • used as the development envirnment. It helps to setup the code.

• Balsamiq

  • Used to creat the wireframes for the project.

Testing

Testing User Stories from User Experience Design (UX) Section

User Story Testing

Further Testing

• The project was tested in the following browsers with success, Google Chrome, Microsoft Edge, Mozilla Firefox and Opera.
• Projects was manually tested on Samsung Note 9, Samsung S9, Samsung TabA and Hp laptop 11 inch screen.
• Google Chrome Developer tools were used throughout the project to help me to test the responsiveness across devices.
• Google Chrome Developer tools used to emulate devices,
  • Moto G4
  • Galaxy S5
  • Pixel 2
  • Pixel 2 XL
  • iPhone 5/SE
  • iPhone 6/7/8
  • iPhone 6/7/8 plus
  • iPhone X
  • iPad
  • iPad pro
  • Galaxy Fold

I used W3C Markup Validator and W3C Validator to validate every page of the project to ensure there were no syntax errors in the project.

1. Markup validator Result

   1. home page Result

   2. about page Result

   3. services page Result

   4. contact page Result

2. W3C CSS Validator Result

   1. Validator CSS Result

Known Bugs and Fixes

• The hero image takes a fews sec. to upload, after adjusting the time for animation it works better.

• The navbar extended with the gap in between the navbar and the drop down.

  • It was fixed using the Google Chrome developer tool to spot the css problem with the margin-bottom.

• On wide screen resolution by minimizing the screen at 775px just before the navbar toggler icon appears the navbar items break for a sec.

• On Chrome Dev Tool, on mobile view for Galaxy Fold the navbar moves to the left and the extended drop down box detaches from the navigation bar.

• The jumbotron on the home page with the quote appeared like a container fluid stretching from left to right.

  • By removing the padding, margin and making the background-color to transparent.

• By Using the jumbotron the text on the large screen appears to be properly placed but on the mobile devices the texts would drop down onto the footer. * So by adjusting the font- size the text is fixed on the mobile screens.

• W3C Makrup Validator flagged up errors on improper placing the closing tag. The tags were adjusted and porper placed.

• W3C CSS validator presented with wrong use of the code. float:center; instead this was not needed in the style.

• With the validator there was an error of , I used .

• On the contact.html page the first name fill box was not aligned to other content. Fixed by adding a col class with others to line them up.

• When using the samsung S9 the icon with social media appeared as an X with no icon present.

• When using the iphone 8 plus all the images appear close up on all the pages. Fix by changing the image to center.

• When using different mobile devices I have observed that in the about page the last paragraph drops down into the footer section. Attempted to fix it by correcting the margin-top for the paragraph.

• In the social media links the facebook, twitter and instagram are linked to personal accounts since the company account has not been created. The linkedin link is used as a company account.

Deployment

GitHub

This project is deployed using GitHub pages using the following process,

Deplying a GitHub Repository

1. In your Repository section, select the GitHub Repository you wish to deploy.
2. In the top horizontal Menu, locate and click the Settings link.
3. Inside the Setting page, about almost at the end you'll see GitHub Pages Section.
4. Under Source , select the None tab and change it to the Main and click Save.
5. Finally once the page resets scroll back down to the Github Pages Section to seee the following message "Your site is ready to be published at (link to the GitHub Page Web Address). It can take time for the link to open your project initially, so please don't be worried if it down not load immediately.

Forking the GitHub Repository

You can fork a GitHub Repository to make a copy of the original repository to view or make changes without it affecting the repository in your GitHub account.

1. Find the GitHub repository.
2. At the top of the page to the right, under your account, click the Fork button.
3. Your will now have a copy of the repository in your GitHub account.

Making a Local Clone

1. Find the GitHub Repository.
2. Click the Code button.
3. Copy the link shown.
4. In Gitpod, change the directory to the location you would like the cloned directory to be located.
5. Type git clone, and paste the link you copied in step 3.
6. Press Enter to have the local clone created.

Credits

Code :

• Code Institute *Thank you to Code Institute for all the videos and helping understand all the different types of mini projects with all the videos indifferent aspects.
• Harry Dhillon
  • Helping with ideas and readme.md file.
• Bootstrap
  • Bootstrap library used throughtout the project mainly to make site responsive using the Bootstrap Grid System.
• Murach's HTML5 and CSS3
  • the reference guide helping in detail understanding of the HTML and CSS concepts.

Content :

• Wikipedia
  • helping understand the concepts of different codes, elements, attributes, CSS styling.
• W3C school
  • helping with the HTML codes and CSS style and how the styling will look like with an example.
• Google
  • thanks to google for making search easier in every single field of coding.
• Academind (youtuber)
  • thanks to an youtuber for helping with bootstrap navbar making it responsive.
• Images
  • Home page image :
    • thanks to pain free physiotherapy clinic Copyrights
  • About page image :
    • thanks to Dioni De Guzman,PT and hipwallpaper
  • Service page image :
    • thanks to Ryan, Cunningham and hipwallpaper

I would like to take few seconds to thank my mentor and instructors who have put together all the videos the materials for helping all the students throught this journey.

Thank You