This project is a good example of a mobile first website that would suit the needs for any veterinary clinic that wants to offer a window to show their services online.

Website URL: https://cotebarrientos.github.io/Milestone-Project-Healthy-Pet-Veterinary-Clinic/index.html

• As a veterinary clinic I want a Header that shows contact information and a navigation bar.

• As a veterinary clinic I want a footer to display time tables, contact information, our clinic mission and social media links.

• As a veterinary clinic I want a Home page that shows an holistic vision about who we are, our services, and ways to contact us.

• As a veterinary clinic I want an About page with the information about the clinic and the staff.

• As a veterinary clinic I want a Services page with information about our services and facilities.

• As a veterinary clinic I want a Pet Guide page with advices about pet care.

• As a veterinary clinic I want a Contact page with a contact form.

Wireframes file: Milestone_Project-Healthy_Pet_Veterinary_Clinic.pdf

• Header area, that shows contact information and a navigation bar.

• Footer area, to display time tables, contact information, our clinic mission and social media links.

• Home page, that shows an holistic vision about who we are, our services, and ways to contact us.

• About page, with the information about the clinic and the staff.

• Services page, with information about our services and facilities.

• Pet Guide page, with advices about pet care.

• Contact page, with a contact form, so users can contact the clinic.

• Appointments system, to let users create an appointment with the veterinary clinic.

• HTML

  • The project uses HTML5 to define the structure of this website.

• CSS

  • The project uses CSS3 to add styling to the website.

• Bootstrap

  • The project uses Bootstrap version 4.4.1 , to build responsive website.

• Git

  • The project uses Git to control the different versions and history of the code.

• GitHub

  • The project uses GitHub to host the source code, and deploy the website using GitHub pages.

• Adobe Photoshop

  • The project uses Adobe Photoshop CS6 portable version 13.0.0, to improve the images used in the website.

• Adobe Illustrator

  • The project uses Adobe Illustrator CS6 portable version 16.0.0, to draw vectorial images used in the website.

• Affinity Designer

  • The project uses Affinity Designer version 1.6.5.123, to draw and make background images used in the website.

The following tools were used to check that the website was responsive, and that it looked good on different screen sizes:

• Mozilla Firefox: This browser was used to check the behavior of the web page in different screen sizes. Tests consisted in testing the appearance of the fonts used, the aspect of colors and backgrounds, the order and space used by the different elements that make up the web page.

• Chrome: This browser was used to check the behavior of the web page in different screen sizes. As in the previous browser, different tests were performed checking the aspect of the font used, colors and backgrounds, and finally, the space used by the elements of the website. In addition, a contrast was made between both browsers, checking for any existing differences.

• Responsinator: This website was used to simulate different screen sizes of mobile devices. This was really useful, because it showed in real time the aspect of the tested website, helping to discover different responsiveness problems.

• Xiaomi Mi A1: This mobile device was used to test the behavior of the website, using browsers such as Chrome, Mozilla Firefox and DuckDuckGo.

Examples of tests made with the tools used:

1. Header:

   • Go to the "Header" area.
   • Try the header in small device (<600px) check that, a toggle button is going to appear, and the white contact bar will disappear.
   • Try to click on the toggle button and check it is deploying the navbar menu.

2. Contact Us Page:

   • Go to the "Contact Us" page.
   • Go to the Contact Form area and try to submit the empty form. After that, verify that an error message about the required fields appears.
   • Try to submit the form with an invalid email and verify the error message.
   • Try to submit the form with valid data, after that, the webpage is going to refresh.

The following validator was used to check that the code written in both HTML and CSS complied with the required standards:

• https://validator.w3.org/

To deploy this website using GitHub Pages, you have to do the following instructions:

1. Go to the settings tab, click on it and then scroll down to GitHub Pages section.
2. Inside the GitHub Pages section you will find a dropdown button, press it and select master branch option.
3. Wait for some seconds, and the page will be alive.

To run the website using Gitpod, in the terminal, type:

python3 -m http.server

• The text for the "Welcome" section was copied and modified from the Briarhill Veterinary Clinic
• The text for "How to make an appointment?" and "In case of emergency" sections were copied and modified from the AmyLara Veterinary Clinic
• The text for the "About Us" section was partially copied and modified from the Briarhill Veterinary Clinic
• The text for "Our Mission" section was copied from the Healthy Pets Veterinary Care
• The text for "Our Core Values" section was inspired, copied and modified from The Kentucky Humane Society
• The text for "Our Services" and "Our Facilities" sections were copied from the AmyLara Veterinary Clinic
• The text for the "Pet Guide" section was copied and modified from the Briarhill Veterinary Clinic

• The images used in this site were obtained from Google images.
• The images obtained from Google images, were improved using Adobe Photoshop.
• The "our core values" image was made in Adobe Illustrator.
• The background image for "Our Staff" section was made in Affinity Designer.

• I received inspiration for this project from the following websites:
  • Briarhill Veterinary Clinic
  • AmyLara Veterinary Clinic
  • Veterinary Website & Full-Service Marketing Company
• These websites were really useful to troubleshooting the issues I faced:
  • Stackoverflow
  • Bootstrap Documentation
  • w3schools