First Milestone Project: User Centric Development-Code Institute
This is my Staffordshire Bull Terrier webpage to present to future fans and customers with common interest in breeding and owning their own Staffordshire Bull Terrier.The webpage highlights four projects that cover a wide range of technologies as well as information about who we are,our training and breeding skills and a contact form.
As a user, I want the webpage to have a friendly and easy access through a simple design so that i can take all the information that i want from the site .
- As a potencial customer i want to be able to get all the information about the owners of the webpage, their action and their experience regarding to Staffies and information about the breed. Balsamiq About Us
- As a future Breeder i want to be able to get all the tools that i want regarding breeding my own Staffordshire Bull Terrier,such as:
- Events that the owners of the Webpage Participate
- Training sessions that they organize for their customers. Events Mockup
- As a potencial customer,i want to be able to see and download pictures of the owners Staffies and their available future litters. Images Mockup
- AS a user i want to be able to contact the owner of the webpage through a contact form and be able to validate the form. Contact Form Mockups
- As a future customer i want to be able to reach the owners of the webpage through their social links and make sure that theis social links open in a new window on the browser. Mockups Social Link
- This site uses the dropdown menu container feature in Bootstrap,with a hover-sweep-to-bottom effect, in order to give a smooth scroll for the user and in order to make it easy to access every single part.
- In additon the user of the webpage is able to choose any of the four section of the webpage,in any order that they want, without having to reload the page.
- In the future i want to add more information and example videos from our Training sessions and our achievements and rewards from Dog Shows.
- In addition i want my site to be accesible and more efficient using Javascript and Back End
- Balsamiq to create the mockups for my project.
- HTML used to implement the code for the website.
- CSS used to style the website.
- Bootstrap used to simplify the design and make it easy to access.
- GIT used in order to save my work.
- GITHUB used for making it accesible in my repository.
- Google Fonts used for animations and to hover my webpage.
The potencial customers,users and fans user stories, achieved to provide them information about who we are,what are we doing and how they can reach us through the contact us form.
- The 'About us' section provides information about who we are and the reasons to visit this webpage, as well as our background,knowledge, skills and Staffies 'Breed Info'.
- For our Future Breeders they are able to get all the tools that they want regarding breeding their own Staffordshire Bull Terrier in the "Become a Breeder" section which consist ifnormation about what it takes to become a Breeder and two sections with videos about our Training sessions and Dog Shows.
- Our future Breeders can also have a look to our breeding Staffies photos through the 'See our Photos' section were they can also download the images in a separate tab. -For the users of the Webpage that want to contact us,they can do it easily through our social links on the bottom of the page in the Footer and they can also do it through our contact page.You can check it yourself:
- Go to the "Contact Us" page
- Try to submit the empty form and verify that an error message about the required fields appears
- Try to submit the form with an invalid email address and verify that a relevant error message appears
- Try to submit the form with all inputs valid and verify that the webpage will reload.
As they have been manually tested, all the links will open in a new tab using 'target="_blank"'.Also when links of the containers in the dropdown-menu are pressed they will work even though you do not view them in the same order as they are in the dropdown menu.In addition videos and photos will open to a new section as to save the webpage for overloading and minimise the data.
The site is tested in a variety of devices such as:Iphones(4 to 8),Samsung Galaxy,Ipads and Desktops.In addition it's tested to all the possible browsers:Chrome, Safari, Internet Explorer, FireFox and i assure that it is compatible and responsive.
The biggest problem that i faced was that difficulty of my webpage to be displayed properly in Ipads and Ipads Pro which i overpassed by providing more space,margins and paddings.
This site is hosted using GitHub pages, deployed directly from the master branch.The webpage is consisted of 4 html documents, an assets folder and a README.md file.The assets folder includes 3 smaller folders:
- CSS with a style.css document.
- Images with 4 jpg files of the images i used for the webpage.
- Wireframes with 5 jpg images of my Design.
- Videos with 2 mp4 files of training sessions and dog shows.
- All the content in "About us", "Become a Breeder" and "See our events" files in the webpage were written by me.
- All pictures were downloaded and taken from Google.
- I received inspiration from sites sush as: NKK, wikipedia and Eurobreeders.
- I also received inspiration from the Resume brief and from the portfolio README.md file: GitHub Repo, Source Code Haley Schafer. Resume
- For some technical issues i received help from: Youtube, Bootstrap