This is a screenshot from Am I Responsive

Fur Babies 1st

This website is for a Dog walking business to attract new clients and showcase the company's services. It will also be possible for potential clients to be able to contact the owner and also be able to see their locale.

Table of Contents

1. User Experience

2. Design

   • Wireframes
   • Fonts
   • Colour Scheme

3. Features

   • Features Currently Implemented
   • Features Left to Implement

4. Technologies Used

   • Languages
   • Frameworks, Libraries and Programs

5. Testing

   • Testing User Stories
   • Further Testing
   • Current Known Bugs

6. Deployment

   • GitHub Pages
   • Making a Local Clone

7. Credits

8. Content

9. Media

10. Acknowledgements

User Experience UX

User Requirements

• As a User I want to be able to easily understand what the website is for.
• As a User I want to be able to easily navigate the website.
• As a User I want to easily find services and prices.
• As a User i want to be able to find contact details.
• As a User i want to see location details to see if the service is available.

Owners Requirements

• As an Owner I want the home page to immediately tell the User what the site is for.
• As an Owner I want the User to be able to easily navigate the site via navigation links.
• As an Owner I want to be able to advertise my services and prices.
• As an Owner I want potential clients to be able to easily contact me.

Contents

Design

I did the design for this website using Balsamiq to create the wireframes. I have created wireframes for desktop, tablet and mobile

Wireframes

I wanted to keep the design simple and easy to navigate so potential clients can find the information they want easily. I wanted to create an about modal that was accessible from every page so clients could get some background infomation without coming away from other info that may be after. The about model would also help by lowering the amount of pages on the site.

Fonts

I have used fonts from google fonts I selected Lobster and Roboto as they were a suggested pair and so complement each other. I have used "Lobster" for the menu and main headings then "Roboto" for paragraphs making it easier on the eye to read text sections.

Colour Scheme

I wanted to keep the colour scheme soft to the eye so used a mixture of off white and soft grey colours. I have created a palette using Coolors and it is displayed below.

Contents

Features

Features Currently Implemented

• The website is responsive.
• Design is soft and easy on the eye.
• The About modal is accessiblefrom all pages.
• Easy to follow navbar.
• Gallery page has images that open into a modal slideshow.
• Contact page has contact and location information including a locations covered map, Also there is a contact form that the user can fill out to arrange booking or ask a question.
• Social links are included on every page.

Features Left to Implement

• Live calender and abilty to book sessions through site.
• Ability to pay through website via card/Paypal.
• Possible login page and ability to track walks live.

Contents

Technologies Used

Languages

• HTML5
• CSS3

Frameworks Libraries and Programs

• Balsamic

  • Balsamic was used to create the wireframes for the project during the design stage.

• Bootstrap V4.5

  • I used bootstrap to give the site a responsive layout and the ability to add a Nav and a Modal to the about and gallery pages.

• Fontawsome V5

  • I used fontawsome to provide icons for Nav logo, Modal buttons and social media icons.

• Google Fonts

  • Google fonts was used to provide Lobster and Roboto fonts for the site.

• GitPod

  • GitPod is the online IDE used to code the project.

• Git

  • Git was used for version control to commit and push from GitPod to GitHub.

• GitHub

  • GitHub is the repository used to store the project.

Contents

Testing

I used the WC3 HTML validator and the WC3 CSS validator to test every page of the website to check that there were no errors present. below are the results of the checks.

• WC3 HTML Validator

  • index.html No errors or warnings to show.
  • services.html No errors but does show warning for using h1 more than once during pricing cards.
  • gallery.html No errors or warnings to show.
  • contact.html No errors or warnings to show.

• WC3 CSS Validator

  • Shows no errors found but does show warnings for -
    • -webkit-box-orient
    • -webkit-box-direction
    • -ms-flex-direction
    • ::-webkit-scrollbar
    • -webkit-background-size
    • -moz-background-size
    • -o-background-size
    • -o-object-fit
    • -webkit-transition

Testing User Stories

As a user I want to be able to easily understand what the website is for:

• I have added a full size background image with a title and slogan ( Fur Babies 1st "Taking Care of Your Best Friend ) center page which is large and easy to read.

As a user I want to be able to easily navigate the website:

• I have placed a Navbar at the top of every page with links to all pages. The Navbar is fixed and therefore always available at the top of the page even when scrolling. I have also included an icon of a pawprint with text "FB1" to the left of the Navbar which if clicked takes you back to the landing page.

As a user I want to be able to easily find services and prices:

• I have included a Services page which lists available services and current prices. The price cards also include a "Book" button which if clicked takes the user to the contact page.

As a user I want to be able to find contact details:

• I have included a contact page with email address and also a contact form that can be filled out. There is also social media links in the footer on every page to aid contact.

As a user i want to see location details to see if the service is available:

• On the Contact page I have included a location, postcodes covered and also map highlighting the areas covered.

Further Testing

as well as validating the code I have also tested the responsivness across different browsers and devices. I also used devtools to test the responsiveness during development to ensure the design would react correctly.

I have also used Lighthouse within the devtools to check the performance of the website and have included screenshots.

• index.html

• services.html

• gallery.html

• contact.html

Current Known Bugs

• I have found that while using Safari browser the background on the services page and gallery are not static and scroll with contents. This is only apparent on Safari browser and does not happen on any other browser.

Contents

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps:

1. After pushing the project to GitHub from GitPod I logged into the GitHub site.
2. I then located the repository for the project.
3. I then clicked the settings cog located at the top of the repository.
4. On the settings page I scrolled down to the GitHub Pages section.
5. Under "Source" I selected "master branch" from the menu.
6. After a few minutes I received the message " Your site is published at https://horizons83.github.io/Fur-Babies-1st/ "

The website can be viewed here: https://horizons83.github.io/Fur-Babies-1st/

Making a Local Clone

To make a local clone of the repository on your computer:

1. Open GitHub and locate the repository https://github.com/horizons83/Fur-Babies-1st

2. Above the file list click "Code" and copy the link using HTTPS.

3. After copying the link open Terminal on your computer or using Terminal on an IDE.

4. Change the current working directory to the location where you want the clone to be saved.

5. Type git clone, then paste the URL: https://github.com/horizons83/Fur-Babies-1st.git

   git clone https://github.com/horizons83/Fur-Babies-1st.git

6. Press Enter to create the local clone.

Contents

Credits

• About Modal was taken from Bootstrap documentation for Bootstrap 4
• The pricing cards on the Services page were taken from bbbootstrap and adapted to suit.
• The code for the gallery with modal was taken from css-tricks
• Location and area covered map on the contact page was created using My Maps from Google.

Content

• The text for the customer reviews was taken from Waggys Walks

Media

• The photos used in this site were obtained from Unsplash
• Photos were resized using PicResize
• All photos were compressed using Tinyjpg to help site loading times.

Acknowledgements

• I received inspiration for this project from my wife and her plans to start a dog walking service.
• I'd like to say a big thank you to my mentor Gerry Mcbride for his advice.