With the rapid growth of web applications, web application security (WAS) has become an important cybersecurity issue. For effective WAS protection, it is necessary to cultivate and train personnel, especially beginners, to develop correct concepts and practical hands-on abilities through cybersecurity education. At present, many methods offer vulnerable web environments to support practical hands-on training, including large-scale "Capture the Flag" mode (e.g., Cyber Range), pre-configured virtual machine images (e.g., Mutillidae), pre-built stand-alone applications (e.g., WebGoat), and web-based system (e.g., Damn Vulnerable Web Application). However, beginners need not only hands-on training tools and systems but also assistance to support effective learning. Moreover, pre-built training content and exercises are usually not easy to modify and thus lack the flexibility to meet specific teaching needs. Therefore, this study proposed and developed the Web-based Hands-On Learning Environment (WebHOLE) to efficiently assist beginners in learning WAS. To improve the flexibility of the training content, a web-based authoring tool was developed in WebHOLE to create customized hands-on learning exercises. Accordingly, learners can learn and practice the WAS training content online with learning assistance provided by the hands-on learning system. The hands-on abilities of the learners can be efficiently assessed by the hands-on testing system using online exams with progressive hints and automatic grading. Furthermore, to improve the effectiveness of teaching and testing, a portfolio analysis scheme using a data mining technique was developed to identify learning barriers and problematic test items. WebHOLE was applied to an actual beginner-level WAS course for undergraduate students. The experimental results showed the benefits of WebHOLE on WAS learning, with a significant improvement in learning outcomes. Students expressed high satisfaction with WebHOLE's learning assistance, rating it with average satisfaction scores above 4.0 out of 5.0. The portfolio analysis scheme also showed the effectiveness of WebHOLE in identifying learning problems and refining test items.