Style Journey: A Gamification Proposal for Teaching CSS

• Leticia Fontenele IFCE
• Victor Guilherme da Silveira Castro IFCE
• Thiago Alves de Rocha IFCE
• Bruno Correia da Silva IFCE
• Carlos Henrique Leitão Cavalcante IFCE

DOI: https://doi.org/10.5753/sbgames_estendido.2026.26193

Resumo

Introduction: In front-end development, Cascading Style Sheets (CSS) is a key technology for styling web interfaces. In the early learning stages, undergraduate students are introduced to concepts such as colors, layout, and positioning. Objective: This paper presents Style Journey, a gamified application inspired by Role-Playing Game (RPG) elements and 16-bit aesthetics, designed to make introductory CSS learning more interactive. Stage: The project consists of a web application built with React.js and back-end frameworks, combining a fantasy theme with practical, progressively structured CSS challenges. Results: It is expected that this approach will complement traditional learning methods, supporting practice and familiarity with basic CSS concepts in a more dynamic way, serving as a foundation for future automated qualitative evaluation modules.

Palavras-chave: Gamification, CSS, Web Development, Computer Science Education

Referências

Martins, A. and Silva, B. (2023). Challenges in CSS teaching: a literature review. In: Proceedings of the Workshop on Computing Education.

Thomas, T. (2015). Flexbox Froggy. Browser game. Available at: [link]. Accessed: April 24, 2026.

Zhang, L. (2015). CSS Diner. Browser game. Available at: [link]. Accessed: April 24, 2026.

Silva, J. and Souza, M. (2024). Plataformas gamificadas para o ensino de programação: um relato de experiência. Anais do Simpósio Brasileiro de Jogos e Entretenimento Digital (SBGames).

Deterding, S., Dixon, D., Khaled, R., and Nacke, L. (2011). From game design elements to gamefulness: defining gamification. In: Proceedings of the 15th international academic MindTrek conference. ACM. p. 9-15.

Carneiro e Silva, C. (2021). The use of Pixel Art aesthetics in games in times of high-performance equipment. Undergraduate Thesis, Federal University of Minas Gerais, Belo Horizonte.

Mozilla Developer Network (MDN) (2026). CSS: Cascading Style Sheets. Available at: [link]. Accessed: April 24, 2026.

React (2026). A JavaScript library for building user interfaces. Available at: [link]. Accessed: April 24, 2026.

NestJS Documentation (2026). Available at: [link]. Accessed: April 24, 2026.

Ollama (2026). Get up and running with large language models. Available at: [link]. Accessed: April 24, 2026.

ECMA International (2017). Standard ECMA-404: The JSON Data Interchange Syntax. 2nd edition.

Cavalcante, R. P., Gomes, A., and Santos, M. (2021). O uso da gamificação no ensino de conceitos financeiros para estudantes. Anais do Simpósio Brasileiro de Informática na Educação (SBIE).

Silva, B. C. and Lima, W. O. (2021). Get Quizzfty: Uma proposta de jogo digital voltado para o ensino da cultura afro-brasileira e indígena. Anais do Workshop de Jogos Diversos - Simpósio Brasileiro de Jogos e Entretenimento Digital (SBGames), p. 1053-1056.