The Heart to Help

Inspiration

We've always wanted to help people and there are myriad of resources available to help people in different manners. However our website was focused on collating and synthesizing this information.

What it does

This website allows people to contribute to the causes that they care most about. Whether it is supporting the homeless and poor, conservation of the environment or reducing racial injustice.

How I built it

This site is built on CSS, HTML, and Javascript. It's a static site so no additional libraries were used. Every thing that you see on the page is written from scratch. (However a lot is referenced from stackexchange and w3schools.)

Challenges I ran into

CSS is quite finnicky and there are a lot of nuances which one has to pick up once getting past the basics especially when working on dynamically resizing content based on the viewport. Since this is my first real project with HTML, CSS, and Javascript navigating my way around the documentation was also pretty difficult. Finding a cohesive, dynamic, and visually appealing website design which could be implemented was difficult.

Accomplishments that I'm proud of

Making the interface look pretty nice. Making javascript work on the page.

What I learned

I feel like I have a very solid grasp on CSS, why certain elements work the way that they do and how to make a page the way that you want. Further I feel like I have a more solid grasp on the Document Object Model because I did use a decent amount of javascript to make the user interface possible and am confident that I have the ability to change different elements on a page based on user interaction.

Further I learned what collaboration means between a designer and a developer. I especially realized the importance of a user interface designer and how much thought goes into each and every element.

What's next for The Heart to Help

Build out all the other pages. Utilize an existing News API to grab content regarding to the different social causes that we want to highlight.

Built With

• css
• figma
• html
• javascript