My First Period

• 

  Home Page

• 

  Information on Menstrual Products Page

• 

  Trivia Page

• 

  About Us Page

• 

  Science Behind Periods Page

Inspiration

We were looking for something in the female empowerment and health tracks when we realized how serious period poverty is. Since it’s Pride Month, we looked for educational resources around menstruation for nonbinary and trans youth, but were unable to find any. After we identified a need in the community, we started brainstorming a list of ideas and finally created MyFirstPeriod.

What it does

MyFirstPeriod is a free and easily-accessible online website for anyone of all ages who go through menstrual cycles. Our website educates individuals on how and why a menstrual cycle occurs, where to access and how to use menstrual products, resources for LGBTQIA+ individuals, and a fun, interactive way to learn more about menstrual health.

How we built it

For our website, we used replit as our platform and used HTML, CSS, and JavaScript as our coding languages.

Challenges we ran into

A challenge that we faced was maintaining a uniform styling method for our webpages to make them look uniformed and put together. There were sometimes difficulties trying to get the navigation tabs aligned in the center and organizing the div sections. As beginners, another challenge we faced was using JavaScript to create our trivia page. Before coming into this hackathon, we were only mutually well-versed for basic HTML and CSS. Due to time constraints and complications in the JavaScript code, we were not able to create a fully-functioning trivia game. Another challenge is that two members dropped out right before our self-assigned deadlines so we had to watch videos and learn what we could in the time we had left.

Accomplishments that we're proud of

We’re proud of the determination and hours we put into this project. It was a huge learning experience for both of us, but seeing the website put together was definitely worth it. We delegated tasks, worked together well, made new friends, and learned a lot from the workshops, making our first hackathon a huge success!

What we learned

We learned how to connect html files to the style.css file in a uniform manner. By using div features, we were able create aesthetically pleasing and organized web pages to make information presentable for the user.

What's next for My First Period

For our next steps, we hope to partner with other large non-profit organizations and middle/high schools around the world in order to reach and educate multiple young audiences. We hope to include more of an empowering aspect to our website by adding a chat bot that will give advice and positive/motivational affirmations to the user. We also hope to add APIs that will give the user information about local stores near them that sell specific menstrual products and specific locations that will support and advise them to get more educated on menstrual health.

Built With

• css
• html
• javascript
• replit