Ummah Connects

homepage
info page
donation page
petition page

Inspiration

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.

Purpose/Function

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

Submitted to

UmmaHacks

Created by

I worked primarily on the front homepage and putting all our code together in the end. This was my first time working with HTML & CSS, but working on this project and solving problems that came up helped me learn a lot!

Suhyma Rahman
I worked primarily on the design and layout of headings and compiling images for resources. Through the process, I was able to develop skills related to graphic design and help give our website a more professional look!

1Ashar
I worked on the About Us page mainly trying to create everything without using images, therefore I created most of the shapes using HTML and CSS. This was my first time learning these languages and am looking forward to further develop my skills in the near future.

areebahiqbal Iqbal
I primarily worked on the information page connecting to the donation and petition page. Was my first time learning how to use HTML5 and CSS3, had a lot a fun learning concepts like flexbox and can't wait to further my experience by learning JavaScript.

Feroz Naeem