PETS PAWS (PETS GROOMING WEBSITE) - Project 1 : User Centric Frontend Development -Code Institute

PETS GROOMING WEBSITE

This is a one page website which is to create simple layout and to promote grooming and pets services for all the customer. Potential customer can navigate with ease from the top navigation bar to the desire section it consist of services that the company provides

Demo

Live website can be view at https://iskandarz8.github.io/project1/

Running the test

All testing are done manually, descriptions of the methods used for testing are as follow:

Click on the link to see whether it bring user to the intend webpage or section. click on the portfolio photos to see whether the image display correctly. Testing the responsiveness of the webpage and used google developer inspect tools to check webpage layout on different devices display screen.

Technologies Used

• HTML
• Bootstrap
• Jquery
• CSS

UX

White fonts were selected for contrast on a blue/light gradient background, while a black font was used for a white background. yellow, white and blue are chosen to be in line with the identity of the website and shall be representing the company and its interests. images is kept minimal, while text are used for better information given for quick viewing. This is to allow readers a more lucid understanding of the content, which is more effective for their understanding. Meanwhile, this website is to promote services require for all the user and potential customer.

UI

The website is intended to allow users to find more detailed information for the services they require. As such, the user can scroll through different sections. The navigation bar is also available for the user to skip directly to each section; this allows a quick and seamless transition to obtain the required information by the user.

Deployment

Website Testing

• Validator https://validator.w3.org/ There were no error as of now. Result showed "Document checking completed. No errors or warnings to show."
• Mobile Friendliness Test Tool https://www.bing.com/webmaster/tools/mobile-friendliness Result showed "This page is mobile friendly, Viewport configured correctly, Page content fits device width, Text on the page is readable, Links and tap targets are sufficiently large and touch-friendly.
• Reponsinator https://www.responsinator.com/ Result showed : "For different type devices portrait, the background image was only shown within the area of content" "For different type devices landspace, the full background image was shown. For about page, flower image and about me banner was restructure by the landscape"

Tested on

• iPhone eXpensive portrait
• iPhone eXpensive landscape
• Android (Pixel 2) portrait
• Android (Pixel 2) landscape
• iPhone 6-8 landscape
• iPhone 6-8 Plump portrait
• Ipad
• Samsung S5

Credit

• The logo link were obtained by Google
• Code references obtained from Bootstrap and W3
• Credits to Code Institute for knowledge on HTML and CSS
• CSS