TielBible is a compact site full of specialised information that aims to provide potential, new and long-time owners of the Cockatiel parrot with as much necessary information to keep their parrot happy and healthy, as well as alleviate any stress by providing answers to common questions that may concern or confuse owners.
TielBible will provide information on the different colour variants, gender determination, behaviour, diet and exotic / avian vet locations in the United Kingdom.
From tiel owner to tiel owner, welcome to TielBible.
-
- As a user I want to be able to navigate through the whole site smoothly.
- As a user I want to understand the purpose of the site upon loading it.
- As a user, I want to be able to learn more about cockatiels.
- As a user, I want to be able to find relevant information on owning a cockatiel regardless of prior experience.
- As a user, I want to be able to learn the visual differences between different genders and colour variations of cockatiels.
- As a user, I want to be able to view examples of different defining features of a cockatiel.
- As a user, I want to be able to understand the behaviours and emotions of a cockatiel with clear image or video examples.
- As a user, I want to clearly understand the dietary needs of cockatiels and what food is considered toxic to them.
- As a user, I want to be able to view a live map of the United Kindom, that advises me on veterinary services for my cockatiel.
- As a user, I want to be able to provide feedback to TielBible based on my own experience of Cockatiels, that may be able to help others.
- As a user, I want to be able to connect with fellow users of TielBible through social media.
-
TielBible is comprised of seven pages, with Home being the default loading page. The pages are as follows: Variation, Behaviour, Diet, Vet Locations and Contact.
There is a pop-up form in the footer of every page which, alongside the form in the contact page, will lead to the Thank You page. Longer pages have a fixed 'return-to-the-top' button on the right-handside for ease of access to the header and navigation bar.
-
The colour scheme was initially determined through two cockatiel colour palettes found on Google:
Palette #1 :
Palette #2 :
After deciding to take on board palette #2, I trialed various colour compositions on the site, before deciding to use only 3 of the colours in the palette, with 3 differing hues of two of the colours, which I found with colour-hex.com.
My final colour scheme was therefore:
This palette was chosen to be personal to the common cockatiel colouration while also adding in saturated hues to stand out be more visually striking.
-
Using Google Fonts, I matched up my preferred font style for TielBible and decided on Roboto Condensed n regular 400 as a header font, and Nunito for lesser headers and paragraphs in Extra Light 200. This had a clean and condensed look, with the Roboto font being a popular choice for fonts in website design.
Both used sans serif as a fallback font in the event that either chosen font doesn't load.
-
My hero image is an image of a standard grey cockatiel, the most common colour variation as detailed in my site. The image was sourced from pixabay, where a lot of TielBible images were sourced from. It was the ideal image for my hero image to present the site topic most clearly and in the most emotionally impacting and stiking way.
Other images in TielBible have been influenced or sourced by the following websites:
-
Initial Wireframes were produced in Balsamiq
Home page wireframe:
Home page with modal box:
Page Contents Structure wireframe:
Vets Locations embedded map page:
Contact page and form wireframe:
There may be differentation in the final site due to responsiveness.
TielBible was created with ease of navigation in mind. A navigation bar is included in the header for all pages, with clear titles of the context of the information provided in each page. Each page, if required, has clearly defined links to each sub-section. Pages are designed to be simple and have an overarching structure through pages to ensure the site is easy to use and navigate.
All pages are responsive for other viewports, such as tablets and mobiles. The structure of the page doesn't differ in different viewports.
-
-
Situated at the top of all TielBible pages, the user can easily access and navigate to all pages of the site.
-
The active page alerts the user which page they are currently on and hovering over the navigation elements underlines each section.
-
The circular search bar is operational and opens out using CSS animation.
-
Social media links are presented via their known logos and change colour on hover. Clicking on the links takes the user to the external website in a new window.
-
Clicking on the link to subscribe to the mailing list initiates a popup overlay box form, which allows the user to enter their details and submit their preferences. The submit button takes the user to the thankyou.html page which thanks them for their submission and offers redirection to the main page.
-
Pages of large or diverse content all include a title informational cards that briefly summarise what would be covered and learned in that page, along with navigational links to major sub-headings.
-
The design is kept consistent across all cards and links change colour upon mouse hover.
- Supplementary videos when provided all have controls so users can pause or replay as required.
- A specialised self-created map of the UK with verified exotic and avian treating veterinarians has been created and embedded solely for the use of users of TielBible. The map can be zoomed in on and details about the veterinary service can be accessed through clicking on the location.
-
The contact form can be filled in and submitted by users for a variety of different reasons and have the ability to customise their preferences for contact (e.g. phone)
-
A cute picture of a cockatiel (Owned by Corbyn the Cockatiel) resides nearby the form for aesthetic presentation.
-
This section contains ideas for potential upgrades to the site in the near future.
-
A page dedicated to health and injury / sickness concerns that may be commonly or rarely known, for users to better understand the potential concerns they have for their tiels.
-
A forum discussion where likeminded tiel owners can come together and discuss a variety of topics, including bt not limited to: chop recipes, DIY toy making or wholesome introduction pages for their feathered friends.
-
A breeder / pet store review and rating system for stores, pet hotels and breeders in the UK, to improve solidarity between users, prevent scams and keep all Tiels safe.
Languages used in this project:
- HTML5
- CSS3
Frameworks, Libraries and Programs used:
- Bootstrap - responsive media queries.
- Hover.css - for :hover instances for links.
- Balsamiq - wireframes.
- Google Fonts - Fonts.
- Font Awesome - Icons.
- Github - repository storage.
- Gitpod - compiler and Git code storage.
Testing was involved in every stage of the creation of TielBible's creation, in an ongoing process with Google's Developer Tools, as well as WC3's validation services for HTML markup and CSS.
Upon finalisation of TielBible, the site passed its responsiveness tests though Chromes developer tools responsiveness checker.
- The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
- The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
- A large amount of testing was done to ensure that all pages were linking correctly.
- Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues. It was also peer code reviewed by other students at Code Institute.
-
All pages of TielBible have been validated by these services, which ensure that the syntax for the site is clear and error-free.
-
As a user I want to be able to navigate through the whole site smoothly.
-
All pages have the same header and footer links, including the navigation bar that is a part of the header, which allows the user to navigate through the site at any time, leaving no potential for the user to be trapped.
-
On longer pages of large content, a 'return to top' button is fixed on the right-hand-side, allowing the user to quickly and painlessly return to the navigation pane and redirect themselves elsewhere through the site.
-
When submitting information through a form via the mailing list popup or contact page, the user is taken to a page thanking them for their contact and a link that allows them to return to the home page.
-
Each page has a flowing method behind its structure, with each sub-header having the posibility to be jumped to via a link at the top of the page. Headers are semantically created, with the h1 element leading to one or multiple h2 elements, which may progress to further h3 elements.
-
-
As a user I want to understand the purpose of the site upon loading it.
-
Upon entering the site, users are automatically greeted with a clean and easily readable title bar and a navigation bar, to go to the page of their choice. Underneath the navigation bar is the Cockatiel Hero Image, with a short summaried text that alerts the user as to the main content that can be found on the site.
-
The Hero Image is of a cockatiel, which, combined with the feather icon in the h1 header, clearly delineates the main points of the page.
-
From the home (index) page, the user has two choices, click on a navigation pane for information on one of TielBible's pages or click on the links provided in the footer, to either visit a social media page or to join the mailing list for more personalised information to be sent to the users inbox.
-
-
As a user, I want to be able to learn more about cockatiels.
-
The pages in the navigation bar provides the user with all basic, necessary information about cockatiels and what an owner needs to know. Each page can be navigated in order if preferred, but can also be easily understood if navigated randomly.
-
Each page clearly outlines necessary details about cockatiels, alongside pictures, videos and video controls. All pictures include an alt attribute for accessiblity for users who require screens readers, and are usually nested in a figure element alongside a caption outlining basic details of the image or video.
-
The user can easily initiate contact via a contact form and enquire about aspects of a cockatiel that they may not understand or require further advice on. There is also the option for users to provide and share information to TielBible, which can be added to the page and provided freely to other users which may have encountered the same circumstances.
-
-
As a user, I want to be able to find relevant information on owning a cockatiel regardless of prior experience.
- All information on the TielBible site is provided in a flowing manner, starting from basic to advanced knowledge, which makes it suitable for all users of all experience and knowledge levels. Visuals and audio are also provided to further supplement knowledge, ensuring clarity of the topic at hand.
-
As a user, I want to be able to learn the visual differences between different genders and colour variations of cockatiels.
- There is a full page on TielBible that clearly details the visual differences between cockatiels, from colour mutation to gender determination, which are usually the most asked questions in the cockatiel community. This is the first page the user can navvigate to through the navigation bar, detailed 'Variation'.
-
As a user, I want to be able to view examples of different defining features of a cockatiel.
- Images and videos with video controls are provided in the relevant pages to assist the user in their comprehension and to ensure lack of confusion about a topic.
-
As a user, I want to be able to understand the behaviours and emotions of a cockatiel with clear image or video examples.
- Detail provided to the user on the behaviour page goes in depth using common english, the factors involved in understanding the behaviour of a cockatiel as much as possible, which were provided from experience of other cockatiel owners or veterinarians with studious knowledge of the topic. This is further supplemented with photographic or video based evidence of what had been discussed.
-
As a user, I want to clearly understand the dietary needs of cockatiels and what food is considered toxic to them.
-
The 'diet' page goes into above and beyond detail on the diet of a cockatiel in heirarchical format for all users to understand. Images are provided to usrs throughout the page, with multiple external navigation options for further information or purchase of the item in question.
-
Toxic foods that a cockatiel cannot have in their diet is clearly stated to the used in an easy to comprehend table
-
An image provided to the user has further image area navigation links for a product that has similar forms 'pellets', which changes the layout slightly and keeps the user more interested and engaged.
-
The user can navigate to the contact page when unsure, for further personalised information and assistance.
-
-
As a user, I want to be able to view a live map of the United Kindom, that advises me on veterinary services for my cockatiel.
- The 'vet locations' page includes a self created google map that the user and members of the public can access and review or add to. All veterinary practices included on the map have been reviewed and deemed appropriate for user needs, in providing locations of vets in the United Kingdom that examine and treat avians/birds.
-
As a user, I want to be able to provide feedback to TielBible based on my own experience of Cockatiels, that may be able to help others.
-
Users can volunteer up their own experiences for collaborative use on TielBible for the benefit of other users after them. They can do this by filling out the contact page form and ticking 'add to page' checkbox, alongside adding the details of their addition to the text area provided.
-
Users can access social media links to access platforms in which they can talk to and discuss with other users, which may build upon the information provided on the TielBible site.
-
-
As a user, I want to be able to connect with fellow users of TielBible through social media.
- Links for Facebook, Twitter, Instagram and Reddit are included in the footer of every page on the TielBible site, which immediately redirects them to their link of choice. They can then interact with other users or interested parties regarding cockatiels as required.
-
-
None.
-
Issue #1
- Issue with responsiveness of the site using chrome dev tools.
Status: FIXED
Solution: Changes to CSS code units from px to % / rem where possible which auto-corrects own responsiveness to viewport width of device viewing the site.
Issue #2
- Issue with the submit button of the forms for mailing list and contact page. Deviated to an error page.
Status: FIXED
Solution: Removed '#' action and replaced with local 'thankyou.html' page. Removed POST method.
-
-
The TieBible project was deployed to GitHub Pages using the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
-
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
-
-
Log in to GitHub and locate the GitHub Repository
-
Under the repository name, click "Clone or download".
-
To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
-
Open Git Bash
-
Change the current working directory to the location where you want the cloned directory to be made.
-
Type git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/bunkit18/TielBible-Project-1-HTML-and-CSS/ -
Press Enter. Your local clone will be created.
$ git clone https://github.com/bunkit18/TielBible-Project-1-HTML-and-CSS/ > Cloning into `CI-Clone`... > remote: Counting objects: 10, done. > remote: Compressing objects: 100% (8/8), done. > remove: Total 10 (delta 1), reused 10 (delta 1) > Unpacking objects: 100% (10/10), done.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
-
Credits for all imagery used in TielBible are in the Imagery section.
Further credits are due to:
-
Stack Overflow and W3Schools for constant reference and assistance on html and css code posibilities.
-
Fellow Code Institute peers on the Slack channel, who peer reviewed my code and provided feedback on how to better my project.
-
Users and creators of YouTube, of which informational videos I have used in the making of my project (which have been credited in the live deployment beneath each video)
-
Any other user of the internet or website from which evaluating their source code and processes aided me in creating and fleshing out my own.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent