Meditation for Mental Healthhas been developed as part of Code Institute's Full-Stack Software Development Bootcamp as my 1st ever project. This project is made by using HTML, CSS and Bootstrap.
https://dayliontempleton.github.io/meditation-for-mental-health/
The Projects purpose is to create a website for using meditation to help with mental health, the site will allow visitors to sign up for meditation classes as well as getting more information on how meditation can help with mental health. it will also provide links to relevent mental health charities and services.
The target audience for this project is anyone who wants more information about meditation and how meditation can help with mental health.
The user seeks accessible, beginner-friendly information on mental health, including how to recognize common issues and manage stress, presented in a supportive and organised layout.
The site owner wants to create a welcoming webpage that provides basic mental health information using a clean and supportive design. The focus is on using HTML and CSS with Bootstrap to create a calming and well-organised user experience.
Potential Features might Include:
Hero Section with Positive Messaging: A Bootstrap Jumbotron with an encouraging message about mental health, using a calming colour scheme and a simple background image.
Information Cards: Use Bootstrap’s card components to present mental health tips and common issues, providing a visually appealing way to organise content.
Resource Links: A grid layout for external links to mental health resources, styled with Bootstrap buttons to make them stand out.
Positive Affirmations: Use Bootstrap’s text utilities to include a section with uplifting quotes or messages to encourage users.
For my color palette i wanted calm pastel colors, i took these colors from the images i had to create a cohesive design throughout the site.
My Wire Frames were made in Balsamiq.
Desktop
Tablet
Mobile
i have added aria- labels to all my external links so screen readers can understand the elements on the page.
Chat GPT was used to create my user quotes.
my responsive navbar was built using bootstrap, it contains links to the home, about, learn more and sign up pages, it is identical across all the pages of the site to allow for intuative and easy navigation of the site.
this is my hero section to allow users to sign up for meditation classes, it was created using a bootstrap jumbotron and a modal to allow the user to quickly and easily sign up without leaving the home page.
the information section is built using bootstrap cards each card contains an image and button to find out more information about a particular topic, the cards are responsive and adapt to the device that the site is being viewed on.
the resource links section is also built using cards, however these link to external sites that open in a new window.they are also responsive to the device that the site is being viewed on
the quotes section allows users to see what other users think of the site, images of the people are used and this is responsive to the device it is viewed on with them being hidden on mobile devices.
the footer element has links to social media sites. the sites will open in a new tab for the user.
I used W3C to validate my code, i had no major errors, however i did get warnings for redundant / on my favicon code that i had used from https://realfavicongenerator.net/
the project was deployed on github pages early on in the development of the project so i could vie it on multiple devices.
i would like to fix the bugs that are causing spacing issues with the recource link cards as well as resize the images in my bootstrap cards to have a more cohesive flow of design. i would also like to further style to signup modal to reflect the other styles on the site. i would also like to create the other pages of the site.
https://realfavicongenerator.net/ Was used to create the favicon from image
https://www.freepik.com/ Was used for all images in the project
https://www.mayoclinic.org/tests-procedures/meditation/in-depth/meditation/art-20045858 Was used for some of the information in the website.
https://coolors.co/8ee5b0-f2d3e3-bfb59e was used to help generate my color palette.