The primary goal of this website is to advertise the services of Foraging Cardiff (a fictional organisation) to their new and returning customers, as well as to potential guides. Foraging Cardiff hosts guided foraging walks across the city that are suitable for families, couples, and adults alike.
A new participant would be someone who wants to learn about foraging and is keen to go on a guided walk to learn more about what they can forage in their local area.
Someome who has already been on one, or a few, guided walks and is returning to the website to find out about future walks. Additionally they could be looking to share the site with a friend, find the organisation's social media links, or learn more about common foraged plants.
A Foraging Cardiff guide would use the site to find out the dates and times of walks, as well as logging into their guide profile. Potential guides would use the site to find out about the organisation, and register their interest in becoming a guide.
Foraging Cardiff is looking to increase their customer base and share the art of foraging. They believe in the power of plants to promote health and wellbeing, and believe in the herbal and medicinal properties of plants. Through guided walks they hope to share the knowledge of plants they have built up over the years, and ensure longevity of the art of foraging. They also want to provide employment to guides who have this knowledge.
The developer wants to build her skillset by designing this website. She wants to create a fit-for-purpose, fully functioning site that would add to her portfolio of work and showcase her eye for design.
-
As a new customer and forager I want:
i to learn about foraging in my local area.
ii to learn more about the organisation and their values.
iii a website in which I can easily see the dates, times, and locations of walks
iv to be able to sign up to the mailing list and find the organisation's social links.
v to see the pricing of these walks.
-
As a returning customer and forager I want:
i a website in which I can easily see the dates, times, and locations of walks.
ii the ability to see images of commonly foraged plants on the website.
-
As a potential guide I want:
i to find out about the organisation's values and interests to see if they match up to mine.
ii to see the schedule of current walks to see if I could add to it.
iii To register my interest as a new guide.
The colours used reflect the colours found in nature - greens in various tones.
Nunito and Amatic SC were used throughout the site. Sans-serif and cursive were the fall-back fonts should connection to Google Fonts fail.
Icons were used to emphasize the content on the page. In the 'reasons to forage with us' section on the home.html page the icons were placed next to the reason headers to draw the eye to them.
The bold landing page is to create an experience that the user is 'stepping into' the website as they would step into a forest. It is only accessed upon entering the website and can't be navigated to from the Navbar links. This is to ensure a clutter-free website for the user.
The same background colour is used in the schedule and form sections to ensure a design continuity.
The images used are all either the developer's own images, or from an open-source site. The same picture of a forest is used in the page headers to keep the website fluid. The images in the gallery page intend to show what the foraged plants look like.
- Fully responsive across mobile, tablet, and desktop devices.
- A bold landing page to simulate the user 'stepping into' a forest and the site. This would only feature once when entering the site and the navigation links wouldn't direct to this to maintain a smooth user experience.
- A header featuring the logo and navigation links of the site.
- An 'About us' page where users find out about the organiation, the schedule of foraging walks, and pricing of them.
- A gallery section featuring images and descriptions of some commonly foraged plants. A disclaimer would also feature here as well as a warning message to not 'munch on a hunch'.
- A contact page where users can sign up to the organisation's mailing list, and where potential guides can regsiter their interest.
- An area for existing guides to manage their staff profiles.
- A tool where users can maintain a profile that documents what they have foraged.
- Padding between contact forms on phone devices.
- To remove the scrolling bar on devices.
- HTML5
- CSS3
- Bootstrap 4.2.1 used to help make the site responsive. Navbar, form, and card structures were also taken from Boostrap documentation.
- Google Fonts used to provide the typography across the site.
- Font Awesome used to add icons to headers and pieces of text to convey meaning, and to provide links to social media sites.
- Git was utilised for version control and publishing additions and changes to Github.
- GitHub used to store the project once published from GitPod.
- Canva used to create the logo seen in the top-left corner of the site's pages.
- Balsamiq used to create wireframes in the README.md file.
1. As a new customer and forager I want:
i to learn about foraging in my local area.
The gallery.html page details plants that can be found in the local area and directs users to further information about them.
ii to learn more about the organisation and their values.
The home.html page includes a brief synopsis of the organisation's values.
iii a website in which I can easily see the dates, times, and locations of walks
The home.html page includes an easy to find schedule at the bottom of the page.
iv to be able to sign up to the mailing list and find the organisation's social links.
A contact form is included on the contact.html page. Links to social media sites are on the footer of every page.
iv to see the pricing of these walks.
This information is included on the home.html page.
2. As a returning customer and forager I want:
i a website in which I can easily see the dates, times, and locations of walks.
The home.html page includes a brief synopsis of the organisation's values.
ii the ability to see images of commonly foraged plants on the website.
The gallery.html page details plants that can be found in the local area and directs users to further information about them.
3. As a potential guide I want:
i to find out about the organisation's values and interests to see if they match up to mine.
This information is included on the home.html page.
ii to see the schedule of current walks to see if I could add to it.
The home.html page includes an easy to find schedule at the bottom of the page.
iii To register my interest as a new guide
A separate contact form for potential guides has been included on the contact.html page. It has a clear heading to distinguish it from the other form.
- The website was viewed through Chrome Dev tools on mobile, tablet, and desktop devices to ensure it had responsive design.
- The internal and external links extensively were tested on the site to ensure they all worked.
The HTML and CSS code was run through the validators and changes made where they could be made. There were no errors in the CSS code.
- On the contact.html page, when viewing on a mobile device, there is no gap between the two contact forms. The developer would prefer there to be a break between the two forms.
- The developer had to use absolute filepaths to ensure the images in the site loaded when deployed. The developer would have prefereed to use relative filepaths.
- Log into GitHub and located the desired GitHub repository.
- Click on the 'Settings' icon at the top of the repository page.
- Scroll down the panel on the left-side of the page and click on the 'Pages' section.
- Under the 'Source' section, click on the 'None' dropdown button and select 'main'. Then click '/root' in the next drop-down button. Then click 'Save'.
- Wait about 10 minutes for the site to be built before clicking on the link above in the blue box.
- Log into GitHub and find the desired repository.
- At the top of the repository page, click on the 'fork' button. This will create a copy of the repository in your GitHub account.
- Log into GitHub and find the desired repository.
- At the top of the repository page, click on the 'Code' drop down button and copy the HTTPS URL that is displayed.
- Open Git Bash.
- Change the current working directory to the location where you want the cloned directory.
- Type 'git clone' and paste the URL you copied in step 2.
- Press enter. Your clone has been created. For more inforation, follow this link.
All code, except where credited to othes in commented out code in the script, was written by the developer.
Images were taken from open source websites. The image on the index.html page is the developer's own image.
Code that was taken from other sources has been credited in the .html files and includes it's URL source. Sources are Code Insitute's project videos and Bootstrap documentation.
The devloper would like to thank her mentor for helpful feedback, and the tutor support team for their support.