When we first started picking up CSS, we have difficulty visualizing or expecting how the CSS property and values would turn out to be. Therefore, with this pain point we had in the past, we wanted to build a learning platform that helps users learn in a more interactive and introductory way by completing a set of hands-on exercises provided and see the results in real-time. Hopefully, this will serve as a way to make information retention better for learners.
What it does
Camelo is a learning platform that allows beginners to learn CSS properties by completing a series of challenges following a storyline format. Challenges are in the form of hands-on exercises where users can code and run their code live to see the results in real-time being reflected on the game interface. Hints are provided and users can use them when necessary.
How we built it
Challenges we ran into
Making the webpage as dynamic as possible with different forms of challenges that require different HTML structure and CSS classes.
Accomplishments that we're proud of
By being able to make the single-page application as dynamic as possible and intuitive for beginners with no experience at CSS at all.
What we learned
HTML DOM Manipulation, Event Handling, and simulating JSON APIs
What's next for Camelo
More beginner-friendly and advanced challenges to make it an ultimate CSS hands-on and interactive guide. Clearer explanation of our website on the landing page that it is a CSS tutorial.