This project was created to demonstrate my growing expertise in HTML, CSS, and JavaScript. The website, titled "2D Pixel Art," was inspired by "Pixilart.com," a platform where users can create and export pixel art. However, unlike "Pixilart.com," this project focuses on implementing core features using only HTML, CSS, and JavaScript, without the aid of external libraries or frameworks.
The primary goal of this project is to highlight the capabilities of JavaScript in building interactive and dynamic web experiences. Through this project, I have gained a deeper understanding of how HTML and CSS work in conjunction with JavaScript to manipulate the DOM, handle user inputs, and create visually engaging and functional web components. Although this project is more simplistic compared to professional-grade tools, it showcases my foundational skills in front-end development. I’m excited to continue improving, with plans to explore more advanced techniques and libraries in future projects.
You can try out the live version of the website here:
👉 2D-Pixel-Art
2D Pixel Art Drawing of a Dolphin
This project began as part of "The Odin Project," specifically the Etch-a-Sketch assignment. The Odin Project encourages students to build and create unique implementations of the task, and this project is one such result. You can explore more about the project here: The Odin Project.
In addition, the design and layout of this project have been heavily inspired by Ben Scott’s approach to the Etch-a-Sketch project. His implementation provided a clear and structured way to organize the layout using HTML and CSS. You can see his work here: Ben Scott's Implementation.
This project has been a significant learning experience, allowing me to deepen my understanding of how JavaScript works, including its semantics, structure, and capabilities. Throughout this process, I’ve gained hands-on experience with DOM manipulation, event handling, and how JavaScript interacts with HTML and CSS to create dynamic and interactive web applications.
While there are still areas for optimization, this project represents a solid foundation for my web development journey. I’m excited to continue learning and applying more advanced JavaScript techniques, as well as exploring additional libraries and frameworks in future projects.
- JavaScript Optimization: I aim to refine the code, optimizing where necessary to improve performance and maintainability.
- Mobile Support: Adding the ability to draw on smaller screens is a planned enhancement. This will involve revisiting the fundamental design of the grid and adapting it for touch input, which requires rethinking the overall layout and interaction patterns.