Over the last few months, there have been more and more people speaking out against the injustices and crises experienced by fellow Muslims around the world. These groups require humanitarian aid through donations and also by signing petitions to help bring more attention to these issues in hopes of stopping the abuse of power causing them. The name of our project, Ummah Connects, illustrates how this platform can play an important role in connecting the Muslim Ummah - those of us who are privileged and can afford to give a helping hand, to those who need it from us most.


We wanted to compile a set of resources to make it easy to help out with numerous different causes on one single platform. In the past, we've used websites that either only had donation options or only petitions. The function of this website is that it explains an issue and it provides three reliable donation options along with three reliable petitions that can be signed.

How it was built

First, we planned out an initial design on Figma; our final design actually turned out quite different from how we originally imagined. We used to HTML for the main code, such as the text on the pages, while we used CSS to make the website look more pleasing and organized with colour and formatting. As well, we used a bit of Javascript for the animations of the navigation bar, and to make some of the pages look more professional like an actual website. We used GitHub to share our code between team members and to have our work all in one place.

Challenges along the way

This was our first time coding a website, as well as creating a GitHub repository and regulating the changes in the code. Compiling everyone's code at the end was the biggest challenge because some of it had to be altered and links/file pathways had to be changed. We had to scrap some of our original ideas, such as having the entire website scroll smoothly on one page (which requires more JavaScript knowledge), because of our lack of experience in the time we had to complete this project. However, everything worked out nicely in the end.

Accomplishments & what we learned

During this experience, we all learned how to code using HTML and CSS; we figured out how to work with these languages through the creation of this website. A big accomplishment is that we managed to create a working final product with a cool design! We also developed some remote teamwork skills by planning, designing, and coding the project during this pandemic. As well, we gained experience in using tools like Visual Studio Code, GitHub, and Figma. Our greatest accomplishment would be that we created a website that benefits those who are suffering around the world; this is a good cause, and InshaAllah, our project may be beneficial to it.

Built With

Share this project: