Codenaut

• 

  game worlds

• 

  introduction

• 

  level view

Inspiration

There are many platforms and coding challenges for learning web development, but most of them are designed for adults or older children. The idea for Codenaut came to me while I was using CSSBattle. My seven-year-old son saw it and asked me to teach him. I realized that explaining CSS to a seven-year-old is not easy, so I decided to try a different approach.

What it does

Codenaut is a game-like learning experience that introduces younger children to web coding. Children explore a space universe where each planet introduces a new topic. They solve simple visual challenges and see the result of their CSS code immediately. For example, a child can enter color: blue; and watch an object change its color. The goal is to make the connection between code and its result easy to understand and fun to explore.

How we built it

Codenaut was built with React, TypeScript, and modern web technologies. I used AI agents throughout the development process. I also used the Skill provided by Devpost to guide the project from the initial idea through planning and implementation. The project was designed as a small prototype, focusing on the core learning experience rather than trying to build a complete coding platform.

Challenges I ran into

The biggest challenge was figuring out how to explain CSS concepts to a seven-year-old without making them too technical. I also had to find the right balance between a coding challenge and a game. The child should learn something real, but the experience should still feel like exploration and play.

Accomplishments that I'm proud of

I created a working prototype that demonstrates the main idea of Codenaut: learn a CSS concept, write a simple command, and immediately see the result. And, most importantly, my son enjoyed using it!

What we learned

This was my first experience building an application almost from scratch with AI. I had used AI coding agents before, but this hackathon showed me that AI can be useful not only for writing code, but also for helping structure and develop an entire project. The Devpost Skill was especially useful because its step-by-step instructions helped me move from an idea to implementation with fewer manual changes.

What's next for Codenaut

I would like to continue developing Codenaut and expand the learning journey. The next steps could include more CSS planets, interactive missions, and eventually HTML, where children can learn how to create new elements instead of only changing existing ones. I also want to test the experience with more children and use their feedback to make Codenaut easier and more fun to learn with.

Built With

• css3
• html5
• kilocode
• next.js
• typescript