A How To: UI Prototype Challenges at Topcoder

September 12, 2017 guestblogger

In UI Prototype challenges, members use their rapid prototyping skills and their knowledge of responsive frameworks to convert the design of a web or mobile application into a clickable web page using mainly HTML/CSS & JavaScript.

Matching the designs as close as possible is the main goal of a UI prototype competitor but keep in mind that your code will be later used by developers who will make it functional thus writing clean and well-documented code is equally important.

The process of working on a UI prototype challenge is quite simple.

  • Register for the challenge.
  • Read the spec carefully to make sure you have a strong understanding of what you have to create.
  • If you have any doubts, ask in the challenge private forum as soon as possible to get clarifications by the challenge co-pilot.
  • Start coding 🙂

How to organize your submission

Organizing your project folder structure should be very straightforward in UI Prototype challenge.

Here’s an example of a project folder structure on a UI Prototype submission:

Folder structure

Folders should be self-explanatory about their content.
Maintaining a clean folder structure makes your submission look professionally created.

README.md

If you haven’t seen the `.md` file extension before, that stands for Markdown which is a lightweight markup language with plain text formatting syntax.

Since most projects are hosted in git repositories (eg Github) it’s a very convenient way to write all the instructions on how to deploy your project and how to use various functionalities like “build a production version” or “login credentials” in a `README.md` file.

submission.txt

This is where you put any notes for the reviewers.

For example:
If you’ve implemented something in a different way than it was mentioned in the challenge spec but the co-pilot confirmed that your approach is acceptable, it’s good to leave a note with a link to the corresponding thread to make sure that reviewers won’t miss it and they won’t score you down.

Check out some of our past UI Prototype Challenges:

This article is part of the 5 Weeks to Learn Topcoder educational series. Want to learn more? Check out the entire series and all the helpful content here.


I’m a student majoring in software engineering at the University of Applied Sciences of Thessaly, Greece. At the same time, I’m a full-time reviewer, competitor & CAB (Community Advisory Board) member at Topcoder.

The post A How To: UI Prototype Challenges at Topcoder appeared first on Topcoder.

Previous Article
TCO17 Pittsburgh Regional Event Recap
TCO17 Pittsburgh Regional Event Recap

September 8th marked the first time the TCO has ever showed up in Pittsburgh, Pennsylvania. Thanks to Googl...

Next Article
Join Topcoder’s Exciting Blockchain Challenge Series with IBM and Wipro
Join Topcoder’s Exciting Blockchain Challenge Series with IBM and Wipro

We recently completed the first blockchain challenge in our Intro to Blockchain Series, sponsored by IBM. M...