AnkarlooHorse

This website shall serve as an introduction for the equestrian community, it will cover the three most common practices within the community, provide an exemplary video and a sign up form for those interested in the monthly newspaper. The website is designed to the be accessable on a range of devices, such as smartphones, tablets and computers providing a pleasant time for visitors/users.

User Experience

• First User Goals

• As a first time user, I want to easily navigate my way through the website, from the home page to the video exercise page, and to the sign up form
• As a first time user, I want to easily understand the purpose and its content on the website. I also want to be able to find the social media links related to the website, and for them to work without forcing me to leave the page I am currently on
• As a first time user, I do not want to be having difficulties reading the content displayed, meaning that the background or the color of the text does not disturb

• Returning User Goals

• As a returning user, I want the website to have updated information when the practices change, so it stays up to date as not to confuse the user.
• As a returning user, I want the webbsite to stay the same in turns of style and accessability, so as not to confuse the users navigation upon return

Design

• Color
• The website consists of two variations of blue, a lighter tone for the background and a darker tone for the banners. Inside the banners the text and icons (footer) will be the same color as the background to provide a nice feel, and to give of a feel of an optical illusion of the banner being hollow. This is consistent throughout the 3 separate pages of the website except the form, which does not have any banners or a footer. Since the colors are all blue, but of different tones/shades it also makes the website easy to read for colorblind users. This is shown in the images below



• Fonts
• The Roboto font (from https://fonts.google.com/) is used throughout the whole website, with Sans-Sariff as a fallback font. Roboto is a clean and easily readable font, in both italic and bold and provides a pleasant read for the user when visiting the website
• Images
• The hero image on the home page is depicts two horses grazing with a mountain in the background. This, as well as the colors and fonts used will create a peaceful and non-stressing environment in order to make the user feel comfortable using the website. The other images used below the hero image are used as complementary images to the relevent text besides them, and as an example, so to say, of what some of the equestrian practices look like.

Features

• Responsive design has been created for all devices which are shown in the images below. However, as the readme.md would become to lenghty for anyone to read with images showing all the pages scrolled all the way through, I added only exemplary images to the readme.md showing that they are responsive. All of the necessary images, however, have been added to the screenshot folder in assets for anyone interested in inspekting



• External links to social media, a playable video and a subscription form to fill in

Technologies used

• Languages used
• CSS3
• HTML5
• library and programs used
1. https://fontawesome.com/
• Font awesome was used for the icons visible in the footer
2. form background: https://wallpapermemory.com/301713
• The background downloaded and used from wallpapermemory for the background on the signup.html file
3. https://fonts.google.com/
• Roboto and Sans Seriff was used from google fonts throughout the whole webbpage
4. https://git-scm.com/
• Git was used to programme in gitpod, commit to git and then push that code to the github cloudbase
5. https://github.com/
• Github was used to store the code for the projects after being pushed from git
6. https://www.gimp.org/
• Gimp 2.10.22 was downloaded and used to crop the photos downloaded from pixabay to fit the needs of the website
7. https://pixabay.com/
• Pixabay was used to download the images seen in the website, all except for the signup.html background
8. https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+LR101+2021_T1/courseware/4a07c57382724cfda5834497317f24d5/f2db5fd401004fccb43b01a6066a5333/
• I referenced to the code used for the Love Running walkthrough project made by Code Institute for some areas of my website, such as the general style of the header and footer element. As well as the structure of the form in signup.html
9. https://github.com/Code-Institute-Org/gitpod-full-template
• Code Institutes ready made template for gitpod was used to create the code for the whole website

Testing

Testing was done on AnkarlooHorse using the https://validator.w3.org/ website and https://jigsaw.w3.org/css-validator/ website. Throughout the whole project, no known errors or bugs has shown when run through the code validators. I also shared the github pages link with friends and family to have them check the website's responsiveness and overall design and structure.

So far, the overall result has been great with only a few tweaks, such as the footer and menu links placement when viewed on a smaller device, which where pointed out by said family and friends. This was also only possible due the the great feeback and guidance done by my mentor, Dario Carrasquel, who pointed out early in development what needed to be done in order to get a passing grade, as well as keep me on course when I strayed a little too far.

Jigsaw Validator - Result

W3 validator - Result

Lighthouse reports

Deployment

• Github Pages

1. Log in to GitHub and locate the Repository.
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in "GitHub Pages".

Credits

Code

• Some code like the footer, header and form element was referenced from the previous walkthrough project Love Running created by Code Institute

Content

• All content was written by the developer

Media

• Images were downloaded from Pixabay and the background image for signup.html was downloaded from Wallpapermemory

Acknowledgement

• My mentor, Dario Carrasquel, for awesome and helpful feedback throughout this project