-
-
MLH navigation bar replica
-
Narrow/Small road map view
-
Large screen road map view
-
Starting screen for the game
-
Title Screen section
Inspiration
We wanted to create something special to celebrate a decade of empowering innovative, intelligent hackers and giving opportunities for creative minds to start their careers. So with that mindset, we went back and highlighted some key moments in MLH's history as a way to appreciate it on its anniversary.
What it does
What our pages allow you to do is take a walk through the years of MLH and allow you to see the organization's achievements as they come to pass using timelines. We implemented 2 ways of viewing it, one via a small game we created and the other via a road map. The game is a side scroller that takes you through the timeline as a character named "MLH Dude" in an artistic 8-bit-esque world where you must jump from platform to platform to make it to the end. The road map is a simple yet detailed way of doing the same, where you can see the various dates, headings, and text associated with each individual event. As a small bonus, we even included some fun facts which the user may not know of right away.
How we built it
We used web development-oriented languages(HTML, CSS, JavaScript) to piece together every bit of this project. We started off by coding the navigation bar on the website to look exactly like the MLH's website navbar as we believe that the page is in full effect when it's actually integrated into its proper environment. From there, we worked on the Caves game and the road map separately(split up work between group members) and then merged them in at the end. As a finishing touch, we added a title section to the page and a subtitle that outlines what exactly everything is for.
Challenges we ran into
Something that we found challenging was when people were working on similar aspects of the page, but not in the same place. One person was working on the responsiveness of the site while the other was working on the elements of the site. What this did was that while the 2 people were making changes on their own, small changes were made to the whole website on both ends, causing minute and hidden problems when they try to add each other's code into their own. What this lead to was responsiveness that was working perfectly well for one would have a handful of bugs for another, which made it a bit difficult to work on the same aspect of the code as another.
Accomplishments that we're proud of
We are proud that we were able to come up with an idea that was within our reach but still challenged us to work hard and apply ourselves in a lot of different ways. We know what it's like to not obtain our goals so we really tried to formulate an idea that was not too easy for us to the point where we could finish it in a few hours, but then again nothing too hard where we wouldn't have finished at all within the time allotted. This time around we found a good balance between difficulty and time management and were able to have fun with the challenge without scrambling for time too much.
What we learned
We learned a lot about the concept of responsiveness and how different setups interact and deal with our code. If our screen becomes smaller than the size the code was originally made for (i.e. Developer's screen), then the elements would begin to force themselves to fit on the screen causing everything to go out of shape. We needed to learn how to code the elements so that under these circumstances where the page is smaller, everything still looks neat and tidy.
What's next for History of MLH: A Hackers Dream
As MLH continues to grow and develop, the history of MLH without a doubt expands alongside it. As such, we feel that we could go back and add to the roadmap and game as more historic events take place. We also would love to have this be something that's actually integrated on the MLH website in some capacity as we would really like to contribute to MLH's legacy.
Log in or sign up for Devpost to join the conversation.