Code Simulator Website for Project-Based Learning to Enhance Front-End Development Competence

Abstract

The platform developed by the researcher, called the "Code Simulator," covers web programming learning materials, including HTML, CSS, and JavaScript. The application, which integrates HTML, CSS, and JavaScript programming languages with a website-based code simulator, is a type of software designed to assist students in organizing and evaluating the programming materials taught by teachers through projects in a Project-Based Learning model. This study aims to determine the learning outcomes competency of students after using the Techcode application and applying the project-based learning model in web programming lessons. This research used a quantitative pretest-posttest method. The research design used is the ADDIE method with a prototype development model. The target of this research is students of class XI RPL at SMK PGRI 2 Sidoarjo. The instruments used include validation sheets for learning tools, pretest-posttest question validation sheets, material validation sheets, and question validation sheets. The research results show that the percentage of material validation was 92.5%, Rencana Pelaksanaan Pembelajaran (RPP) validation was 89%, pretest-posttest question validation was 90%, and media or learning tools validation was 95.5%. Based on the results of the T-test, the significance value obtained was <0.001, which means 0.001 < 0.05, so H₀ is rejected and H₁ is accepted. Therefore, it can be concluded that the use of a website-based learning media can improve students' learning outcome competencies in learning web programming.