🎮 About the project
This was my first project with HTML, CSS, and Javascript, created with the goal of:
- Practicing everything I had just learned in programming
- Challenging myself to build something interactive and functional
- Training responsiveness, DOM manipulation, and basic game logic
It was a simple guessing game based on RGB colors, but for me, it represented a giant step towards autonomy as a developer. Each line of code was written manually, without frameworks, just based on pure HTML, CSS, and JS.
🛠️ How it was developed
The stack was lean and ideal for the moment:
- HTML5 for the page structure
- CSS3 for style and responsiveness
- Pure Javascript for game logic and user interactions
I implemented dark mode, visual effects with box-shadow and hover, and a structure adaptable to mobile devices with media queries.
🎯 About the game
The idea was simple: display a partially hidden RGB color and challenge the user to guess which value (R, G, or B) was missing. If the player was wrong, the hint would change. If correct, a simple animation showed the victory and a new round could begin.
With this, I practiced:
- Events with
addEventListener - DOM manipulation with
querySelectorandgetElementById - Use of asynchronous functions and promises
- Interactive styling with pure JS
📱 Responsiveness and Style
I made sure the game worked well on both desktop and mobile. I used CSS Grid, effects with transition and transform, as well as a clear and intuitive interface for anyone to test.
I also implemented a system of collapses with animations, creating an interactive section of help and explanations about the game, something that required attention to UX details and usability.
💡 Learnings
This project taught me more than just syntax:
- How to think about game logic and interactivity
- How to make a website visually pleasing and functional
- The importance of dark mode/accessibility
- And mainly, how gratifying it is to see something of your own actually working in the browser