Our website presents a fictional company. Bad Dog Puppy Training, Glasgow, Scotland. Users will be able to find information on class days and times along with services offered and enquiry form.

This is a static front-end site designed to present information on puppy training classes based in Glasgow.

We have included a description of the services along with a gallery of images showing dogs from previous classes. The inclusion of the contact form allows users to contact us with key information being collected.

• Website Objectives
  • New User Benefits
  • Returning User Advantages
• Website Layout
• Wireframes
  • Home Page
  • Gallery Page
  • Contact Page
• Aesthetics
  • Colour Palette
  • Fonts
  • Images
• Features
  • Navigation Bar
  • Header
  • Information Section
  • Class Days and Times
  • Footer
  • Back to Top Button
  • Gallery
  • Contact Form
• Technologies Used
• Testing
  • Functionality Testing
  • Compaitibility Testing
  • Performance testing
• Code Validation
• Deployment
• Credits

The primary function of this website is to promote puppy training classes whilst outlining the goals of the training, class days and times as well as offering a contact option to gather the required information for the business.

• Obtain information on the benefits of puppy training
• Find class times and days
• Make an enquiry through the contact form
• View gallery images of dogs from previous classes
• Access the companies social media sites

• Make further enquiries on available sessions
• Gain access to social media links
• View the ever changing gallery images
• Refresh knowledge on the companies services

The initial wireframe structure was created using balsamiq.com. There were some slight changes to the original plans when creating the website. It has been desinged to be clear and as user friendly as possible with the use of simple sight navigation links, return to top button, hover effect and social media links. Accessibility has been carefully considered with the use of cointrasting colours and alt text equivalents for the visually immpared. The site is responsive for all screen sizes and tailored to suit each. The user experince will be smooth and satisfying accros all devices.

The look of the site was created with the aim of being clean, professional and modern.

Softer, soothing colours were choesn to create a more relaxing feel to the site with a nice light sage green used to reflect the grass of the location where the classes are held.

• Light Sage Green Hex #c9c592
• Darker Grey Hex #333
• White
• Contrasting Purple rgb(180, 54, 123)

• Body - Urbanist with a back up of sans-serif.
• Headings - Bebas Neue with a backup of Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif.

Royalty free and licensed images were sourced from www.pexels.com and stock.adobe.com.

Back to Table of Contents

The website is made up of 3 pages. A 'Home' page, 'Gallery' page and 'Contact' page.

Key features are as follows:

The Navigation Bar is located at the top of each page and is consitent in style throughout the site.

The 'active' page is indicated with a left and right dotted border. A 'Hover' feature has also been added.

Links to each page are included for easy navigation to:

• Home
• Gallery
• Contact

The header includes two features:

• Licensed image
• Custom designed logo

• Puppy Classes
• Class Content
• Angry dog image

This section clearly advertises the days and times that the classes are held whihc inludes:

• Day
• Time
• Location

This is all overlayed on to an imge of dogs.

A clean minimal fopoter containing only social media icons for:

• Facebook
• Instagram
• You Tube

For easy navigation backl to the top of the page. A hover feature is included for accessibility and aesthetics.

A selection of images of dogs from previous classes.

All contact to the business will be made via the contact page form with the aim of return contact being made after the enquiry. Users will add their:

• Name
• Email address
• Phone number
• Preferred class choice

Back to Table of Contents

• Structure Language

• Styling Language

• As a font resource.

• Icons for headings and socials links

• Images

• Images

• As a software hosting platform to keep project in a remote location.

• As a development hosting platform.

• To create wireframes

• Logo creation
• PNG production

• Screens mockup image

• Image hosting

Back to Table of Contents

Website functionality testing was done using Google Chrome Developer Tools.

This allowed me to regularty test the responsiveness and also idenity any problems with the format of the site.

The site was tested on various devices including iPhone, Macbook Pro, iMac and iPad. I also tested it on Google Chrome Dev Tools.

I used Google Chrome Developer Tool Lighthouse to check performance of the site.

I regularly check my HTML and CSS code using 2 websites.

• validator.w3.org
• jigsaw.w3.org

Back to Table of Contents

The project was deployed on GitHub Pages. I used Gitpod as a development environment where I commited all changes to git version control system. I used push command in Gitpod to save changes into GitHub. To deploy the project I had to:

• Log in to GitHub and click on repository to deploy (Bad_Dog_Portfolio_1)
• Select Settings and find GitHub Pages section down the left hand column.
• From the Source select none and then main branch.
• click save and page was deployed after auto-refresh.

Your site is published at https://stevemiller7.github.io/Bad_Dog_Portfolio_1/

To run localy:

• Log in to GitHub and click on repository to download (Bad_Dog_Portfolio_1)
• select Code and click Download the ZIP file.
• after download you can extract the file and use it in your local environment

Alternatively you can Clone or Fork this repository (Bad_Dog_Portfolio_1) into your github account.

Initital creation of the project was donw using Code Institute student template:

• gitpod full template

Ideas and coding guides:

• www.w3schools.com
• Diploma in Software Development (E-commerce Applications) from Code Institute.

Information for this fictional website was taken from Scotland based business Perth Dog training.

• www.perthdogtraining.co.uk

Licensed and royalty free images were taken from:

• stock.adobe.com
• pexels.com

Back to Table of Contents