The selection of appropriate learning methods in an effort to increase student motivation is very important. Learning in online classes facilitates higher and better levels of learning in aspects of innovative and critical thinking. However, online learning cannot always ensure that students will remain active in completing their learning. The percentage of internet usage in Indonesian society shows that 46% of users tend to use the internet to play games. Games are becoming an increasingly important part of entertainment and are able to produce positive experiences. Thus by learning to use the concept of the game, users will get increased learning motivation and positive experiences. Gamification is an approach developed to increase learning motivation and student involvement in carrying out such learning by incorporating game design elements in non-game concepts. A survey conducted by the World Economic Forum, resulted that one of the promising job in 2020 is a software developer. There are several types of software developers, one of which is a frontend web developer. To learn the development of a frontend website, it can be started from learning HTML and CSS. By this HTML and CSS Learning System with Gamification Concept, it is expected that the user's desire to learn can be increased. In this system there are main features, namely mission work, carrying out challenges, purchasing items and leaderboard. This system was developed using a waterfall model resulted 38 functional requirement and 1 non-functional requirement. The system implementation is done using the PHP programming language, HTML, Javascript, codeigniter and bootstrap framework. On this system, Functional requirements testing was conducted by unit testing and integration testing using the white box testing method as well validation testing using the black box testing method. The result of functional requirements testing is 100% pass. Non-functional requirements testing is done using the SUS method resulted a final score of 71, which means this system belongs to the "Acceptable†category.
Copyrights © 2020