This is a promotional website for a forest bathing meetup group, one of its strategies is to promote the importance of trees and nature.
Forest bathing originated in Japan in the 1980s, where it is known as Shinrin-Yoku. It is the practice of walking in any natural environment and consciously connecting with what’s around you.
This site will hopefully create a community of people who appreciate trees and nature, and maybe wish to learn more about protecting them in their local city.
This is a fictional meetup group, so there are no limitations on the content. The site will be made to an MVP first, and if there is additional time, content/features can be added.
- As a visitor to the site, I want to read about forest bathing and its benefits, so that I can decide if I wish to take part.
- As a visitor to the site, I want to register my details, so I can be added to an email list to receive updates.
- As a visitor to the site, I want to view nice pictures of nature.
- As a visitor to the site, I want to read about locations of future forest bathing events.
- As the site owner, I want to promote my service and have participants for meetups.
- As the site owner, I want to promote the benefits of Trees and nature in our environment.
Site is put together using HTML, the Bootstrap framework and CSS.
A Mobile first approach is taken - site is all on one page with three sections, navigation menu at the top.
Navigation between sections can be done via the navbar or by "call to action" buttons.
Section 1 - Home page - Navbar at top. Hero image below. With brief headline paragraph. Under that a mid-section with an introduction paragraph.
Section 2 - About page - Here is displayed various panels of either Text or images promoting forest bathing, in a gallery format.
Section 3 - Contact page - Email subscribe form, contact information and links to various social media channels in footer section.
Wireframe
Below is the initial wireframe.
Colours
The site theme is about connecting with nature, so the colours too are connected to nature. Various shades of green or natural colours are used. Point of reference for the colours chosen are taken from the site images using a colour palette tool.
Root variables are used so colours can be updated quickly if revisions are needed.
Colours used are:
- "Woodland" Green (#4e5c28) : Used for headings and text when on light background. This colour is also used as background on footer.
- "Green Mist" (#c9d3aa) : Used on the background of the body and navbar.
- "Nador" Green (#4F5C54) : Used on the background of the mid section between hero image and about section.
- "Lemon Grass" (#9da19a) : Used for text shadow on the hero image text, and box shadow on cards.
- White (#FFFFFF) : used for text when on a dark background.
- WhiteSmoke (#F5F5F5) : used for the footer icons.
As colours are configured using rbga() properties, these can be tweaked with opacity values to give more variety to the palette while keeping the uniformity.
Icons used are from fontawesome.com. These icons are visible on buttons, the sub heading of each card in the card gallery and as the social media icons in the footer.
Images used are ones I took myself. The original high quality images are located here. Images are in jpg format and have been compressed.
Fonts :
- "Shadows Into Light" was used for Header (h1,h2 and h3) text elements
- "Montserrat" was used for all other text.
On slow connections, another font may be visible while the site is loading.
back to contents
The site is laid out on one page that has several sections.
-
It is responsive to screen size thanks to bootstrap.
-
The navbar remains fixed to the top of the screen, and collapses into a hamburger button on smaller screens.
-
One of the image cards (title: improving air quality) in the gallery is hidden on small screens to improve flow of the page.
-
There is form validation on subscription form, an alert displays if name or email fields are empty.
-
In the first two sections a call to action button prompts the user to another section.
-
Hover animations are used on the cards (box shadow appears) in the about section and the social media icons (grow in size) in the footer section.
-
Contrasting colours and aria labels are used to ensure site supports visually impaired visitors.
-
Some images of trees can be clicked on and the user will be brought to another site that pinpoints the exact location of the tree.
- Have the subscription form add the visitor details to an email list database.
back to contents
-
Languages : HTML, CSS and Bootstrap framework (Navbar uses JavaScript).
-
IDE: Gitpod (runs Visual Studio code online).
-
Wireframe: Balsamiq
-
Browser Developer tools : Google Chrome and Firefox Developer Edition (which really helped with fonts, accessibility and images).
-
Kanban planner : Github projects.
-
Markdown editor: Typora was used when doing spellchecks and big changes to my README.md file, Gitpod editor was used for minor updates.
-
Image editing: Adobe online resize tool and tinypng compression tool.
-
Fonts : Google Fonts
-
Icons : Fontawesome
-
Colours palette : Canva was used for automatically selecting green colours from images.
-
Colour tool : Google Material Design Color Tool was used when trying to decide what colour to use against which background.
-
File renaming utility : PowerRename from PowerToys on Windows 10
-
Pomodoro timer : Tomato Clock
-
Overflow rescue tool : Unicorn Revealer was used for when a scroll left to right appeared on my site on smaller screens.
-
HEX to RGB converter : RapidTables and webfx
-
Colour contrast checking for Accessibility refinements : WebAIM was used for when trying to decide what colours to use for text against which background colour.
-
Favicon creator : favicon.io
-
Autoprefixer CSS : Autoprefixer
-
Auto formatter for HTML and CSS : dirtyMarkUp and webformatter
-
Image conversion tool to WEBP (Next gen image format) : XnConvert
back to contents
Testing documentation can be found here in a seperate file .
back to contents
For easy deployment on GitHub pages you will need a GitHub user account and a possibly a Gitpod user account. If you wish to make changes to this repository, please follow the GitHub steps first.
GitHub
GitHub is a code hosting platform for version control and collaboration. It's free to enrol for a user account and I would recommend you have one if you wish to deploy this repository and make changes.
When you have a GitHub account you can simple click on the Fork button on the top right corner. This is clone the Shinrin-Yoku repository for your GitHub account, then you can make any changes you like.
Gitpod
The site can be edited easily on a Gitpod online workspace, you first register a free user account on http://gitpod.io/, then download the Gitpod extension on your preferred internet browser. On signing up you will be expected to have a GitHub user account.
Once you have the extension on your browser, a green Gitpod button will appear beside this repository in GitHub. For best results fork the repository in your personal account before you open it in Gitpod.
GitHub Pages
Once you have the completed site in your own repository, you can deploy to GitHub pages by the following steps.
- On GitHub, go to the completed sites repository.
- Click on settings, on the settings page scroll down the the GitHub Pages section.
- Under GitHub pages, Select the appropriate branch or folder the index.html is in.
- Click on save. A message should then appear advising the URL of your deployed site.
Cloning
If you prefer working on the repository locally, you can clone the repository to your desktop by the following steps.
- Go to the Shinrin-Yoku github page.
- Above the list of files, click on the code button.
-
- To clone the repository using HTTPS, under "Clone with HTTPS", click the paste icon.
- To clone the repository using an SSH key, click Use SSH, then click the paste icon.
- To clone a repository using GitHub CLI, click Use GitHub CLI, then click the paste icon.
- Open Git Bash.
- Change the current working directory to the location where you want the cloned directory.
- Type 'git clone', then paste the URL you copied earlier above.
- Press Enter to create your local clone.
more detailed instructions available here
Forking
You may wish to contribute to this website and have your contribution published, if so, you are welcome to follow these steps below.
- Go to the GitHub website and log in.
- Open https://github.com/kenwals/shinrin-yoku
- In the top right-hand corner you will see a fork button, click on this fork button .
- This will create a copy the Shinrin-Yoku repository in your github account.
- Once you're finished making changes you can locate the 'New Pull Request' button just above the file listing in the original repository(https://github.com/kenwals/shinrin-yoku).
- If your pull request is approved, it will be merged into the master version of the Shinrin-Yoku repository at a future date.
more detailed instructions available here
back to contents
- Nature therapy ireland
- Shinrin Yoku Finland
- Forest Therapy Society,Japan
- Dublin City Council Tree strategy
- Bootstrap components
- W3schools
- Code institute's Slack workspace channels
- How to make a Kick-Ass first Milestone (part 1, 2 and 3)
- CSS tricks
- YouTube
- Stack Exchange
- Hover.css
- MDN Web Docs
- The photos used in this site were taken by me mostly in Dublin, Ireland. Album available here.
-
This newspaper article from The Irish Times. On the back this newspaper article, I was inspired to make this site that could promote the importance of Trees and why they should be cherished and valued more then wider roads in our cities.
-
The book "The Hidden Life of Trees" by Peter Wohlleben.
-
Various people at the code institute and on the code institute Slack channel.
-
Imbibe Coffee Roasters and Barry's Tea.