Mental Wellness Website is a platform designed to provide individuals with information, tips, and resources to support their mental health. The website includes sections for practical tips, common mental health issues, user testimonials, and a contact form, fostering a supportive and informative environment.
LINK URL
ADD SCREENSHOTS
The website's primary goal is to offer an accessible, user-friendly platform that supports individuals in maintaining their mental health through education, relatable stories, and practical tools.
- As a first-time visitor, I want to:
- Understand the purpose of the website.
- Easily navigate the site to find useful information.
- Feel encouraged by the content and testimonials provided.
- As a returning visitor, I want to:
- Access specific mental health tips and resources.
- Share my personal experiences through the contact form.
- Discover new and updated content on the site.
- As a frequent user, I want to:
- Regularly access tips for improving my mental well-being.
- Stay connected with new features or updates.
- Share the website with others who may benefit from it.
The website features a calming and neutral palette of beige and pastel tones, chosen to create a tranquil user experience.
Two fonts are used across the site:
- Abril Fatface: For headings, creating a bold and elegant look.
- Poppins: For body text, ensuring readability and simplicity.
Imagery plays a vital role in reinforcing the website's calming theme. Selected images depict serene environments and symbolic representations of mental strength and positivity.
- Navbar: A fixed navigation bar to allow users to move seamlessly between sections.
- Hero Section: A motivational welcome banner with a call-to-action button.
- Mental Health Tips Section: Practical advice for maintaining mental well-being.
- Common Issues Section: Descriptions of widespread mental health challenges.
- Testimonials Section: User stories highlighting personal experiences with mental health.
- Contact Form: A direct form for users to reach out for further engagement or inquiries.
- Responsive Design: Ensures compatibility across devices of all sizes.
- Blog Section: A space for regularly updated articles on mental health and wellness.
- Community Forum: An interactive area where users can share their experiences and advice.
- HTML5: For content structure.
- CSS3: For styling and layout.
- Google Fonts: To incorporate Abril Fatface and Poppins fonts.
- GitHub Pages: For website hosting and deployment.
- Bootstrap: For responsive design and pre-built components.
The project incorporates AI tools to enhance the development process:
- GitHub Copilot: Assisted in writing and debugging code efficiently.
- AI-Powered Markdown Editor: Used to generate and refine the README structure.
- Content Suggestions: AI tools supported brainstorming user stories, features, and potential enhancements.
The website was tested to ensure:
-
Navigation: All links are functional and redirect to the correct sections.
-
Responsiveness: The site adapts seamlessly to desktop, tablet, and mobile screens.
-
Compatibility: Tested on multiple browsers, including Chrome, Firefox, and Edge.
-
Accessibility: All text is readable, and the site is easy to navigate for all users.
-
HTML
- No errors were returned when passing through the official [W3C validator]
-
CSS
- No errors were found when passing through the official [(Jigsaw) validator]
The website is hosted on GitHub Pages. The deployment steps are:
- Log in to GitHub and navigate to the repository.
- Click on the Settings tab.
- Scroll down to the Pages section.
- Select the branch
main(or the branch you wish to deploy) and click Save.