Giter VIP home page Giter VIP logo

training-you's Introduction

Training You

This website was designed to give an individual inspiration to get in contact with the trainer, through the means of reassuring them that no matter how big the issue may be with their dog, that by reaching out they can begin their journey to tackling their dog training problems.

Features

Navigation Bar

  • This is featured on all three pages. It is fully responsive. Links include Home, Training Gallery and a Contact page.
  • The Navigation bar for each page is indentical. A link to each page is provided no matter where you navigate on the website.

image of navigation bar

The landing page

  • This page has a background image of a dog's paw in a woman's hand, to signify the joint partnership that you have when training together with your dog.

image of a dog's paw in a woman's hand

  • In front of this image is information on the training style of the dog trainer, along with an encouraging message to have the user get in contact.

The Footer

  • The footer section includes links to popular social media sites that Training You have an account for. Once clicked, they will open in a new window, as to keep them connected with the Training You website.

image of social media links located in the footer

Training Gallery

  • The training gallery displays behaviours that the dog trainer can teach your dog. The purpose of this is to strengthen the confidence of the user in hiring the trainer as their abilities are displayed on this page.

image of the training gallery

The Contact Page

  • This page allows the user to submit their contact information to allow the trainer to get in contact with them, with a note of encouragement that this is their first step.

Image of contact form

Features Left to Implement

  • Additional page with details on who the dog trainer is along with their credentials.
  • Additional Training Gallery videos.
  • Additional details on training locations and prices.

Testing

  • Each page is fully responsive from a minimum screen size of 320px and up.

image displaying responsiveness of landing page

  • Google Screen Reader used to test aria-labels.

  • Website tested on Google Chrome, Mozilla Firefox and Microsoft Edge.

  • Form details submission tested, form behaved as expected.

  • Lighthouse used to test accessibility. image displaying lighthouse accessibility results

Validator Testing

  • HTML - No errors were returned when passing HTML through the official W3C Validator
  • CSS - No errors were returned when passing CSS through the official Jigsaw Validator

Unfixed Bugs

  • No known bugs. Features working as desired.

Technologies Used

  • HTML - Created the structure of the website.
  • CSS - The website was styled using custom CSS through an external file.
  • GitHub - Source code hosted on GitHub.

Deployment

  • The site was deployed to GitHub pages. The steps to deploy are as below. At the Github repository, navigate to the 'Settings' tab. From the menu on the left, select 'Pages'. From the source section drop-down menu, select the Branch: main. Click 'Save' A live link will be displayed on a blue banner when published correctly.

Credits

Content

  • Google map link code was automatically generated via Google Maps embed link.
  • Taken inspiration for the ReadMe file from the Love Running README file and my mentor Daisy McGirrs' husband's Tacos Travels ReadMe file located here
  • rgbacolorpicker.com for hex to rgba conversion.

Media

  • Youtube videos come from my own personal Youtube channel linked here
  • Google Fonts - Added custom font.
  • Font Awesome - Icons.
  • pexels.com - Use of free stock photo.

training-you's People

Contributors

katagaria avatar

Forkers

allan-rop

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.