
SMAAC STEM – Interactive STEM Learning Website
Ana Jesus, Sandhiya, Megan, Anh & Camelia / August 29, 2023
SMAAC STEM is a fun, interactive website created as part of a one-month web development challenge with Code First Girls. The project was built by a team of five women — Ana, Sandhiya, Megan, Anh, and Camelia — who came together to design a creative learning space for children and parents interested in STEM.
"Connecting Young Minds to the World of STEM"
That’s the vision that drove this project from start to finish.
Project Overview
Our goal was to create an engaging platform that provides STEM learning resources and activities tailored to young explorers and their parents. We designed the full website experience from scratch, including a custom logo made from our initials: SMAAC.
Features
-
Dedicated Pages for Different Audiences:
- Junior Explorers: Interactive games and beginner-friendly STEM info.
- Explorers: More in-depth content and creative activities.
- Parents: Guidance on how to support kids in their STEM journey.
-
Custom Logo: We designed our own branding using our team initials (SMAAC).
-
Responsive Layout: Designed for accessibility and ease of use on any device.
-
Login Page (Prototype): Though non-functional, we included a login UI to simulate a full web experience.
Technologies Used
- HTML5 – for structuring all pages
- CSS3 – for styling and responsive layout
- Vanilla JavaScript – for interactivity and page behavior
Team Collaboration
We began our collaboration on CodePen, where we each worked on different components and sections. It was a great way to share and test code live while staying aligned as a team.
In the final stages:
- Sandhiya took the lead in setting up the project on GitHub.
- After it was pushed live, I made additional changes to polish and improve the final version.
Despite the login functionality not being fully implemented, we were proud of how much we accomplished in just a month — from concept to live deployment.
What We Learned
- Collaborative workflows using CodePen and GitHub
- Designing for different user groups (children, teens, and parents)
- Team communication and project coordination
- Building and launching a multi-page site from scratch