Purple Hat Project Website

Our website uses graphics and interactive elements to inform users about the Purple Hat Project. It includes easy access to important resources, websites, contact information, and statistics!

Comment

Inspiration

We were inspired by the need to increase visibility for the Purple Hat Project community service initiative and to raise awareness for the Shaken Baby Syndrome condition. We tried to make the website more interactive by adding different elements. We looked at different charity websites, such as the March of Dimes website for ways to attract interest.

What it does

Our website has a Home page with a carousel of the latest events/activities, a description of our project, and a way for users to input their contact information. We also have a quiz for users to take to see how much they know about the Shaken Baby Syndrome and to learn more important information regarding it. We also have a Get Involved page with links to important websites for resources as well as a tutorial video for how to knit a purple hat. Lastly, we have an FAQ page with common questions users might have. The navigation bar is dynamic and scalable throughout devices as it goes from a standard horizontal bar to a hamburger dropdown menu on smaller screens. The footer holds links to related websites and social media handles.

How we built it

We built the website using HTML/CSS, Javascript, and love. We were able to find inspiration and tutorials from online as well. We used photos from the Purple Hat Project’s instagram and found other photos on Unsplash. We built and hosted it on the Glitch platform and uploaded the files to GitHub.

Challenges we ran into

Some of the common challenges that we ran into were some syntax errors where we have to look up online, choosing the color palette, and implementing some features such as the navigation bar and the accordion for the FAQ page. However, we were able to work together to resolve any issues we had. We also established a theme and palette by experimenting with different colors before we found the right ones.

Accomplishments that we're proud of

We’re proud of how we were able to implement different interactive elements in our website such as the carousel on the home page, a quiz to teach users important statistics, and an accordion element in the FAQ page. We also tried to match the color scheme and aesthetic for the charity using their Instagram page to make it consistent.

What we learned

We learned more about how to create a navigation bar linking multiple pages and different ways we could use JavaScript and HTML/CSS to create a website. We also learned about importing different libraries that can help in building the website.

What's next for Purple Hat Project Website

We can use a Google Maps API as another additional feature in our website so users can find nearby locations where they can donate their purple hats as well as the Instagram API to automatically upload their latest instagram posts. React can also be implemented to make it more flexible and easy to update. We will try to add more pages and new features to make the website more interactive and informative!

Share this project:

Updates