Your Inner Sunflower

"Your Inner Sunflower" focuses on improving the well-being and mental health of teens during the pandemic by offering unique and helpful resources that will help them find their inner sunflower.

Comment

Inspiration

"Your Inner Sunflower" was inspired by the current situation where all of us are social distancing and staying at home. This causes many people to lose the chance to interact with others in person as well as mess up their daily routines. I also noticed that many friends of mine began feeling all sorts of negative emotions such as loneliness and anxiety during the quarantine. I wanted to create this website as a resource for those who may be feeling similar emotions. The website includes unique and helpful resources that are easy to understand. This website is made for teenagers and also adults because many studies such as the one conducted on the National Center of Biotechnology Information's website have shown that these two age categories are the main groups whose mental health and well-being have negatively been impacted due to the current situation. I hope this website can foster a spark of positivity and happiness into many teenagers' and adults' lives. Just like how sunflowers do their best to face the sun and maintain a positive environment around them, I hope the viewers will be able to unleash their inner sunflower.

What it does

The website has simple navigation and every page is neatly organized. This causes the viewers to feel less overwhelmed and stressed to find specific information. On the front page, it is a brief introduction of what the website, "Your Inner Sunflower", contains. When the viewer clicks on the second page called, "Useful Articles", they can find articles that cover many insightful topics such as eating healthy and exercising at home. The articles are organized by the title as well as the cover page of the article, where the viewer can click and it will guide them to the original article in a new tab. When the viewer clicks the next page called, "Get Moving", they will be able to find easy and efficient exercises that they can do when they are feeling the negative emotions rushing in. Each exercise is labeled with a description on how to do the exercise. When the viewer clicks on the image of a certain exercise, it will lead them to a new tab where they can find more information about a certain exercise and the science behind why it's effective. Another page on the website is called, "Talk to Someone". This is where the viewer can find many hotlines' contact information such as phone numbers. One goal of the website, "Your Inner Sunflower", is providing support for the viewer, no matter which situation they are in. They are able to find multiple hotlines varying from depression to child abuse. Instead of visiting each website to find their contact information, the viewer can simply stay on the website and click the "call", "email", or "message" button to automatically contact them without going to an external link. Finally, the last page is called, "About." The "About" page contains information on why I created this website and the purpose behind it. "Your Inner Sunflower" also includes a search bar where viewers can easily find key terms that they are looking for.

How I built it

The building process of this website was an amazing learning experience! I was able to learn about so many new elements in HTML, CSS, and JavaScript that I never learned in-depth about. First, I created several HTML pages to display information that will be shown on each individual page of my website. Within each page, I used headers, classes, paragraphs, shapes, links, href, and div tags. I created many classes such as "headers" so that I can easily change the formatting and style of the element within CSS. Each class that I created was uniquely named, which allowed me to easily see which class is linked to which CSS and vice versa. I also used div on pages such as the home page where I had to create containers in order to separate the elements. For the navigation bar, I created a list and formatted it horizontally in CSS. For the search bar, I created it as an input, where the viewer is allowed to type in words that they want to search on the website. In order to submit the search that they are looking for, I created a button called, "Submit" next to the search bar. In CSS, I used display, padding, position, float, font-family, color, margin-top, and so much more to help me format the website properly and create a great user experience.

Challenges I ran into

During this period of creating my website, "Your Inner Sunflower", I encountered several challenges. The first challenge that I faced was formatting the navigation bar. I spent a while in CSS trying to align the navigation bar, but the pages on the navigation bar kept on overlapping each other. However, I was able to format it correctly by using display, text-align, and padding. Another challenge I encountered was during the process of creating the "Get Moving" page. At first, I attempted to use HTML to individually add images and a description underneath each image by using img and paragraph. However, this slowly led me to confusion since there were so many image URLs and descriptions that I couldn't keep track of properly. Instead, I created a container and a class within it called, "exercises". Using the class "exercises" helped me organize and differentiate which images and descriptions belonged to which exercise. This saved me a lot of time in CSS as well since I was able to format all of the exercises at once using, "div.exercises" in CSS. Finally, another challenge that I encountered was in the "Useful Articles" page. In the beginning, I attempted to include the external link of the article underneath each topic title. However, this made the page look dull since it contained only text and made it seem very wordy. This will possibly cause the viewer to become disinterested or overwhelmed with information. To solve this problem, I included the cover page of each article and used href to link the cover page of the article to the actual article. When the viewer clicks on the cover page of an article that they are interested in, they can click it and it will lead them to the official article in a new tab. This way, the viewer doesn't have to spend time online searching for a resource since "Your Inner Sunflower" will have it displayed easily and efficiently!

Accomplishments that I'm proud of

An accomplishment that I'm proud of is being able to express my motive and purpose through my website. To do this, I picked out a specific color palette, which was yellow. The color yellow was scientifically proven to boost a viewer's positivity and energy level. I hope that the viewer will be able to feel a sense of positivity when they visit the website. Additionally, a goal I had for this website was to also display information, but not in a dull way. As mental health and well-being focused website, many people expect to mainly text since it should be informational. However, "Your Inner Sunflower" is different from this. I made sure that I included images and more visuals than text to give the viewer a relaxing experience. Important information should be displayed in a helpful but also appealing way, which is what I was aiming for while designing my website using CSS. By looking at the website, I hope that the viewer can interpret the purpose and motive behind it using the colors and displays as reference.

What I learned

Creating "Your Inner Sunflower" was truly a great experience for me. During the process, I was able to learn about different aspects of HTML and CSS such as creating classes, creating a navigation bar, and learning how important a website's appearance is. This is my second time creating a website using HTML and CSS and I usually never used classes to organize my code and elements. This caused my code to become very disorganized and made me lose track of what I was working on. However, this time, I made sure to create classes and they have helped me throughout this whole process of creating "Your Inner Sunflower". Using classes allowed me to design and arrange the styles in CSS way easier and faster. Another aspect that I learned was how to create a navigation bar. Even though this process was one of my main struggles, I am satisfied with the end result. From this experience, I learned how to become more persistent and determined, even when a line of code doesn't work properly for hours. I was not only able to learn new aspects of HTML and CSS, but also improve my personal skills such as determination. Finally, while creating "Your Inner Sunflower", I realized how important the user experience is on a website. Websites that are appealing attract more viewers and the colors, display, arrangement, style, and size that I choose play a huge role in the overall website. I learned how to create a color palette for my website, which aligned with my purpose of spreading positivity. I am satisfied with the end result of "Your Inner Sunflower" and will use the new knowledge I learned throughout my learning journey.

What's next for Your Inner Sunflower

So far on the website, I have included several useful resources in the "Get Moving" and "Useful Articles" pages. However, I am always going to update the articles and the exercises, providing as many resources as I can to the viewers who use "Your Inner Sunflower." My website not only applies to the current pandemic but life in general. We all have those moments of feeling lonely, sad, nervous, and overwhelmed even when we're not in quarantine. This website will be able to help the viewer anytime and anywhere. The resources on the website such as the exercises and articles are helpful in any situation. In order to provide accurate information, I will constantly update the website pages with recent information that has been scientifically proven. For the hotlines, I will also update any new hotlines that have been created on the website as well. One goal of "Your Inner Sunflower" is to always be there to support and accompany the viewer, no matter which situation they are in. Everyone deserves happiness, but some people haven’t had the chance to unleash their inner sunflower yet.

Built With

Share this project:

Updates