October 30, 2017 Five Hours To Become A Front-end Champion – UI Prototype Finals

Five hours is what it takes to my stupid phone battery to discharge, five hours is what it takes me to have a good nap, as well as the perfect amount of time to celebrate my birthday – SPOILER ALERT: don’t ever buy a Moto G5 phone. Luckily there are other things that can be done within a five hours period, one of those is GREAT, becoming a front-end magician aka TCO17 UI Prototype champion!

Technically speaking, it should take more than five hours considering the amount of time invested to qualify to TCO and get here, so we’re just focusing on the finals now to make this post title more attractive than a juicy cold orange ice cream in a hot steamy 105 °F summer afternoon ????☀️.
It’s the second year (in a row) that we celebrate the UI Prototype competition live at a TCO. The last year there were two rounds to complete a tricky challenge (SVG manipulation); this year it changed to one single round, however there were still tricky challenges to face before becoming the UI Prototype champion.


On this opportunity, our talented HTML magicians took their wands to the next level by bringing to life a mobile application, two pages, which might sound simple but this challenge has their tricky spices that need to be carefully taken care of, since any minimal pixel mistake can affect the score in a negative way. Besides the mentioned five (5) hours limit, there are other interesting aspects to consider such as:

  • Fluid width.
  • Using CSS Flexbox (yes! new age).
  • Adding swipe capabilities.
  • Creating chart functionality implementation with JSON data.

One good point to consider is that competitors were provided with assets in zepplin, which saved lots of time, development wise, for this design-code transition by having quick information and assets (SVGs, PNG, etc) about the different styles in the pages that need to be implemented.


That was literally the first thing to come out of [chekspir]’s mouth after seeing how they were coding the design he happened to be the author for the finals. He recently won a RUX challenge, he didn’t expect at all to see his design being used during the finals.

These folks are animals! How can they turn my design into code in such a fast way? Amazing.

I can not disagree with that at all as it was truly impressive the way they used their skills in a super lightning speed, how to set up their development environment within seconds and start throwing HTML, CSS and Javascript code like if it was as simple as sleeping when you’re tired, easy as cake.
That’s all for now folks. Peace out!

Live Prototype Competition – TCO17


Guest Blogger


Sign up for the Topcoder Monthly Customer Newsletter

Thank you

Your information has been successfully received

You will be redirected in 10 seconds