Mental Health Awareness Website

Mental health and mental disorders are sometimes misunderstood by the general public. So, we built this mental health website with important information and a quiz to help raise awareness.

Comment

Inspiration

We are focusing on the mental health of teenagers.

What it does

Our website is built to educate the public about mental health disorders and how they can really impact people who have them. It details 9 common mental health disorders, symptoms, how to get help, what to do in case someone you know is going through a hard time, and we also built a small symptoms test in case the user is unsure whether or not they should seek help.

How we built it

We built our website with HTML and CSS, sharing our code across GitHub to keep version control.

Challenges we ran into

We found out that we lacked skills in JavaScript and a bit of html, we had some issues in coding because we were held back by our experience. However, at the end, we were able to perform quite well, with a few minor setbacks that we will work on in the future, like adding a score calculator to the survey to get a more accurate diagnosis instead of making the user calculate it themselves with a key.

Accomplishments that we're proud of

We found ourselves unable to do forms even though it was a huge part of our idea in the start. But, we were able to make an options selector and design a test at the end. We were also generally inexperienced and hesitant but we learned to code using HTML & CSS quite well over the limited time period.

What we learned

We learned a lot about mental health ourselves through our own research, like the differences between some disorders that are often confused. We also managed to learn the basics of both HTML and CSS over the course of 2 days, as well as some web design and other coding languages through the workshops offered during this hackathon.

What's next for Mental Health Awareness Website

We're going to figure out how to calculate the scores for the test so we can make a more accurate diagnosis, and we will make it look better with more tabs and functionality by adding JavaScript.

How to use it

There is a navigation bar at the top. You can click between the 3 pages there. The website itself is quite self-explanatory.

Built With

Share this project:

Updates