Racial Equality in STEM Education

A website which compiles STEM education opportunities and programs for middle and high school students with the goal of helping slowly decrease the diversity gap in the STEM workforce.

Comment

Inspiration

When we first met up as a group, we each brainstormed a list of issues we were passionate about, the top two being racial equality and education access. We then decided, why not, to merge those two issues and bridge them together using STEM. As women coders, we know firsthand how it feels to be placed in a male-dominated industry. In creating this website, we hope to inspire other underrepresented groups to explore and get involved so that we can work towards a more diverse and inclusive future in STEM.

What it does

Our website features three pages: Home, Resources, and About Us. The Home Page shows our mission statement that inspired us to create this project. The star of the page though, our interactive slideshow, spotlights several statistics that demonstrate the magnitude of our current situation. Each statistic is paired with an image of what scientists, programmers, and engineers look like, which we believe will make our users feel included and empowered. The slides do not automatically move so users can take their time to read and digest the information presented.

When the user is finished learning the background, they can head over to the Resources Page via the navigation bar. Here they will find a comprehensive list of STEM opportunities catered towards middle and high schoolers from underrepresented communities. The page is split up into sections (Science, Technology, Engineering, and Mathematics), with page jump links located at the top if the user has a specific discipline in mind. If not, one can simply scroll down to read each program and its description. Each program heading on the page is embedded with the program’s website link, so users can click on the heading if they want to learn more or apply.

How I built it

We coded everything on Repl.it using HTML, CSS, and JavaScript. We created an .html file for each page and linked the CSS and JS files. Certain tasks and functions were delegated to specific teammates because of previous experience or time commitments. Much of the coding process involved asking each other for help and researching how to debug online. We referenced many coding guides and sources during our building journey.

Challenges I ran into

After we finished typing and formatting all the program links and descriptions on the Resources page, we realized that the tab looked very chaotic and might not be very user-friendly. So, we decided to create a second navigation bar to jump to certain sections on the page. With more time, we would have turned it into a sticky navigation bar, but we’re happy with how it looks now.

The biggest challenge, though, was creating the slideshow. I had never coded one before, so this was my first encounter with building one. I spent some time looking for a sample code outline I could modify and incorporate in our site. Once I got the HTML down, I couldn’t manage to format it within the padding and borders. After more time scouring the web for solutions, I was able to center the images and replicate the JavaScript functions for the dots and buttons. Lastly, I realized I couldn’t read my text when I pasted it on top of the images. I first tried using different colors, and when that didn’t work, I tried using a contrasting color shadow. Finally, I decided to set a semi-opaque black background with white text over it so you can read the statistics while still seeing the image behind it.

Accomplishments that I'm proud of

We are most proud of our extensive research, navigation links, and of course, our slideshow. We managed to compile the list of programs and descriptions our first night, which gave us the majority of the second day to build and style. The slideshow, specifically, took the most time and involved many trials and errors before we were able to set it up fully functioning.

What I learned

We learned that it’s perfectly fine to not know what you’re doing! As long as you keep the end goal in mind, it doesn’t matter how much you flounder in between. If we didn’t know how to code a certain functionality or design, we would just look it up ourselves or ask one another for help. We also learned that communication is super important, especially when working on a team remotely. We would frequently check in with each other and update the group on our individual progress.

What's next for Racial Equality in STEM Education

In the future, we would work on a user forum where people can post comments and suggestions, communicate with other, and submit feedback to improve the site. We would also declutter the Resources page and organize it more fluidly. We may also look into a different color scheme and add more images on the Home and Resources tabs.

Share this project:

Updates