Camelo

• 

  Camelo Landing Page

• 

  Camelo Challenges

• 

  Camelo Challeges

Inspiration

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

We wanted our tech stack to be as simple as possible hence we used only HTML, CSS, and vanilla JavaScript to build our learning platform.

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.

Built With

• css3
• html5
• javascript