A dog adoption website which partially runs on customer donations

The live link: (https://sadekrahman.github.io/Project-Portfolio-1/index.html)

This website was created for the purpose to complete the first Milestone project for Code Institute's Full Stack Developer course. Knowledge gained from the HTML and CSS modules was used to build this site.
The website is aimed at users who are looking to adopt a dog and to choose from the dogs on offer. The secondary aim is for users to donate to the adoption agency. Focus is placed in keeping the website user-friendly, intuitive and appealing. Features, such as text in the first person (of the dogs) and images of dogs are used with the intention to win over the viewers' hearts. In turn this generates either a donation or contact to the company to express interest.

• To easily understand the primary and secondary purpose of the website.
• To be able to easily navigate through the website
• To view content and use website on mobile phones, tablets and laptops.
• To contact the organisation for further enquiries or applications

• To view Dogs available for adoption
• To donate towards the organisation
• To contact the organisation for further enquiries or applications

• To donate towards the organisation
• To check if there are any new dogs available for adoption
• To contact the organisation for further enquiries or applications

All pages contain a drop-down menu at the top of the page included in the header. A donation button is also included in the header, making the donating process streamline for the visitor. This moves the hero imaged down and so is compatible for mobile phones.

• The color scheme is quite simple. The index page allows the hero-image to do all the talking. As we allow the picture to grab the attention of the viewer, we keep a neutral background to encourage a change of emotion in the viewer.

• The "Donation" page is kept grey as this allows the viewer to remain calm and follow through with their decision. This light grey color is used throughout the website.

• We use Amatic Sc with a fall back of sans-serif throughout the website to maintain a level of consistency and allows the viewer to familiarise themselves further.
• Also used Font Awesome for icons across all the pages.

• To show the user that "Adopt A Dog" is the place where one should look if thinking about adopting a dog.
• To allow the user to support the organisation via donations
• Increased donations allow the organisation to keep going and homing more dogs

• Users looking to adopt a dog
• Users looking to donate to a dog adoption agency

• Adopt/ apply to adopt a dog
• Donate to this organisation
• Finding a companion

Essentially acting like a Nav Bar. This button drop downs and allows the user to navigate to rest of the website from any page. No need to revert back to the previous page using the "back button". It consists of two navigation links. One for the Home page and one for viewing the dogs available.

This allows the user to navigate to the donation page regardless on which page they are on.

• This is a picture of a dog looking at a tennis ball.

• This sets the mood for the user and dog interaction, subconsciously convincing the user that this is the correct life-decision for them.

• We also have cover-text over the hero image, again prompting the user further and taking them further along the, subconscious, road to adoption.

This is to give the user some background knowledge on the company. As they become more familiarised with the company they are more likely to use its service or donate in this instance. This section also offers the users reasons to choose Adopt A Dog instead of an alternative adoption agency.

• This has links to social media through respective icons. These open on a new tab.
• We also have the contact details for the company which is accessible from any page. Having this information readily available allows the user to get in contact quickly and easily, without the need to search for contact details.

This page allows the user to browse through the dogs that are currently available. This page consists of a picture and a small paragraph written in the 1st person, from the dog's perspective, and offers a description for the respective dog.

This page allows the user to enter contact and bank details to submit a donation going towards the company.

• Add a page where you can get generic information on dog breeds
• Add a where to find us page with map. Link this to existing map apps on phones.
• Add a 'leave a message' box under the donation page.
• Once "submit" is pressed to redirect to a "thank you" page which gives receipt and confirmation.
• Allow users to create an account targeted at repeating visitors.

All pages have been tested across all screen sizes from 360px x 640px and upwards and have been styled accordingly. The website is responsive. All links work and redirect across all screen sizes and web browsers All external links open in a new tab using target="_blank" function. Testing has been done across 3 different web browsers : Safari, Chrome and Firefox and the website works on all three browsers.

• CSS fully validated through - no errors found (https://jigsaw.w3.org/css-validator/)

• Index.html validated through (https://validator.w3.org/)

• meet_the_doggoss.html validated through - no errors found (https://validator.w3.org/)

• donation.html validated through - no errors found(https://validator.w3.org/)

I can confirm that the colors and fonts used are easy to read and accessible by running it through lighthouse in dev tools

I found that near the start of my project the menu I had in place as my nav bar was not showing. However, after setting the position to relative it then started to appear.

No unfixed bugs

• The site was built off of the Code Institute Template: [Code-Institute-Org/gitpod-full-template]
• The following commands were used whilst building this website:

• git add (followed by page name) or git add . when editing multiple pages. This adds changes to a file to the staging area.
• git commit -m "followed by a message" - this firstly adds some detail to the change I made and then committed this change to the local repository
• git push - pushing changes that are committed to the GitHub repository.

• The site was deployed to GitHub pages. The steps to deploy are:

• Locate the repository within my GitHub login
• Open up the settings page for the repository
• Locate the GitHub pages section
• Under source select "Main" enabling the site to be built from the GitHub main branch
• Refresh the page and after a few minutes a link to the site is provided under the same section

Content for the website, included mainly in the index.html page and meet_the_doggos.html page, was created by me with the help of fellow dog enthusiast Scarlett Wood Evans.

• The pictures on the meet_the_doggos.html page was provided by dog walker Elle Wood Evans.
• The picture on the index.html page was found browsing the internet. The image address: [https://www.purina.co.uk/sites/default/files/2021-03/Article%20Hero%20playing%20with%20dog.jpg].

I would like to thank my mentor Benjamin Kavanagh for his continual support and guidance throughout this project.

• To reduce the size of images, I used (https://www.reduceimages.com/)
• To format my css code, I used (https://www.cleancss.com)
• To format my html code, I used (https://webformatter.com)
• To monitor and improve the performance of my website, I used Chrome Lighthouse and Chrome Developer Tools
• To monitor and improve the level of accessibility my website offered, I used (https://wave.webaim.org/)
• To write my code I used GitPod
• To deploy and store the source code I used GitHub
• To generate the favicon, I used (https://www.favicon-generator.org/)