Learning how to code correctly and effectively as a beginner is challenging in a classroom setting as coding is a hands-on activity and often, there is a great mismatch in the teacher’s availability to guide and the students’ numerous questions. In other words, there are too many students for a teacher to provide hands-on guidance 24/7. This report describes an AI-augmented Online Web-based Learning Environment designed to provide interactive feedback and guidance for students learning how to code. By following the software development lifecycle and utilising the waterfall methodology, we interviewed and collected requirements from lecturers and students from a vocational training institute in Singapore, researched and evaluated on different Learning Environment and User Interface choices, designed the solution’s architecture using SOLID and Software Design Principles (e.g.: Facade, Strategy), implemented the solution using good coding practices, and conducted alpha-testing before deploying the solution for end-user beta-testing. From the initial interviews, we discovered the common difficulties faced by beginner programmers are syntax and data-type errors. From the development phase, we discovered the need for several iterations of AI prompt optimisation to manage cost, runtime, and ensure reliable and consistent output format. From the beta testing, we saw that end-users had improved learning experiences, which revealed that a well-designed AI-augmented learning environment can help students learn how to code independently without much guidance from teachers. This research will serve as a launchpad to provide insights to those who are interested to integrate AI into learning environments in today’s increasingly AI-powered world.

Keywords: Artificial Intelligence, learning, large language models, coding.