• Journal of Practical Engineering Education
• /
• v.16 no.1_spc
• /
• pp.11-19
• /
• 2024

Web programming courses are often included in university Computer Science programs as introductory and foundational computer programming courses. However, amateur programmers often have difficulty learning how to integrate HTML, CSS, JavaScript, and various preprocessors or libraries to create websites. Additionally, many web programming mistakes do not produce visible output in the browser. Therefore, in recent years, Front-End Code Playground (FECP) tools that incorporate HTML, CSS, and JavaScript into a single, online web-based application have become popular. These tools allow web coding to happen directly in the browser and provide immediate visual feedback to users. Such immediate visual feedback can be particularly beneficial for amateur coders to learn and practice with. Therefore, this study gathers data on various FECP tools, compares their differences, and provides an analysis of how such tools benefit students. This study concludes with an outline of the application of FECP to web programming courses to enhance the learning experience.