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 six 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.
My first goal in the design of the webpage was to give to our users and potencial customers a friendly and easy access to information of the site by using an approaching minimal design.
For potencial customers,i wanted to provide them an analytic section of our skills and who we are in the "About us" section with a simple user format and a friendly design.In addition to that i provided the "Contact Us" section for those who choose to.in the "Breed Info" and "Become a breeder" sections i provided the requirements for those who decide to breed a Staffordshire Bull Terrier using diagrams and skill bars as well as videos.Furthermore the "See our Events" section gives the opportunity to the users to participate in our Dog Shows and Become a Trainer sessions where they can develop their skills as a breeder.Links to my LinkedIn, Facebook,Twitter and Instagram profiles were also provided for their ease of contact.
This site uses the scrollSpy feature in Bootstrap 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 appbar remains collapsed in all the screen type in order for the design to remain simple. In addition it uses animation features by hover for making it more interesting.
In the future i want to add more information and example videos from our Training sessions and our achievements and rewards from Dog Shows.
- 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 and fans user story 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 what are we tending to achieve through this web site as well as our background, knowledge and skills.When visited in the desktop users have the opportunity to see our achievements and certifications in the background photo.They are also able to be informed about the breed through the "Breed Info" and the "Become a Breeder" sections and to view my social media profiles via clicking on the icons in the footer.
You can try this yourself by going to "Contact Us" form:
- 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 a success message appears.
As they have been manually tested, all the links will open in a new tab using 'target="_blank"'.Also when links of the appbar are pressed they will work even though you do not view them in the same order as they are in the dropdown menu.
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 laptop to achieve commit in git, but i overpassed it with new commands and the assistance of the webpage.
This site is hosted using GitHub pages, deployed directly from the master branch.
- 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 Milestone brief and especially: GitHub Repo, Source Code Haley Schafer