The goal
Improve skills in HTML, CSS, JavaScript, and DOM interactions through the personal project «Rocky», applying global classes to optimize productivity and user interface consistency in the final product.
The exercise was based on other existing dashboard references. Below:
- References
- Color styles
- Wireframe
Develop a dashboard including its responsive versions of tables, menus, bar charts, and line charts, maintaining a consistent design using global classes to promote code reuse.
Utilize online resources, tutorials, and constant practice on the «Rocky» project to apply and refine HTML, CSS, JavaScript, and DOM interaction techniques.
- Figma prototype:
The Rocky project helped develop key web development skills, facilitating the creation of coherent and effective user interfaces.
The development was completed in 2 weeks of intensive work.
- Final result:
Learnings
In addition to HTML and CSS knowledge, it was necessary to link Google libraries to use their icons, fonts, and text fields, and it was also essential to use chart.js for the dynamic graphic components.
Finally, this exercise helped me to be more empathetic and to deliver the designs to the development teams in a more strategic way.