This study aims to improve student learning outcomes in CSS layouting material through the application of gamification using the Flexbox Froggy application. This research is based on the finding that many students tend to simply copy code examples without understanding the underlying concepts. Additionally, learning methods that rely solely on text editors are often monotonous and cause students to feel bored. This study was conducted at SMKN 7 Surabaya with a sample of 36 students from class XI TKJ. The research method used is Classroom Action Research (CAR), involving iterative cycles consisting of planning, implementation, observation, and reflection. Data collection techniques included formative assessment, observation, and documentation. The learning process was carried out in two cycles, with assessments conducted at the end of each cycle to measure student learning outcomes. In Cycle I, learning was conducted using lecture and presentation methods, while in Cycle II, a gamification approach was applied using Flexbox Froggy. The results showed a significant improvement in student learning outcomes. The average student score increased from 58.6 in the pre-cycle to 74.6 in Cycle I, and further increased to 88 in Cycle II. The percentage of students who achieved mastery learning also increased from 8% in the pre-cycle to 61% in Cycle I, and reached 92% in Cycle II. These findings indicate that the application of gamification in differentiated learning can enhance student engagement and understanding.