The National Education Policy promotes moving from the conventional content-heavy and memorization learning practice towards holistic learning/integrated learning. It imparts a creative and multidisciplinary curriculum that focuses equally on curriculum and assessment. All educational establishments assess students using written examinations, quizzes, seminars, term paper writing, and course projects. A semester typically includes 4-5 courses, and students must earn credits for these courses by scoring a good Cumulative Grade Point Average (CGPA). As course projects offer depth knowledge/holistic learning/lifelong learning of a course for the student, many courses include course projects as one of the activities in the course. If all the courses are intended to include course projects as a mandatory pedagogy, it will be difficult for students to acquire in-depth knowledge and required skills while also dealing with stress. So we are proposing an integrated learning framework by applying the theory and practices of two core courses- Software Engineering and Web Technologies to develop a web application. This integrated learning focuses on developing software development and software testing skills in computer science for undergraduate students pursuing a bachelor of engineering degree. This framework alleviated the pressure on students during placement and created job opportunities in software development. The framework consists of three important phases- The first phase includes the identification of the problem as a need for customers, writing requirements and analyzing the same. Students apply modular design principles and break down the codebase into distinct modules. This technique enhances code organization, reusability, and maintainability. The second phase focused on developing the front end by harnessing the power of Angular, a leading web framework, to craft a sleek and interactive user interface. The backend is built using Node.js, which serves as the foundation, enabling the software system to cater to highperformance server environments. These modules communicated seamlessly through well-defined APIs, facilitating the integration of various components within the application, ultimately delivering a seamless and responsive user experience. An industry expert conducted a workshop on Angularsoftware testing workshop was conducted for students by industry experts to expose the students to designing test cases, test plans, and testing strategies. The hands-on experience on testing tools was provided during the workshop. Faculty reviews are conducted on each phase, and rubrics-based assessment is done on each phase. Approximately sixty teams created web-based applications for real-world scenarios. Positive aspects of the framework in feedback indicated that more than 87% of the students agreed that they could apply Software engineering principles and practices such as requirements management. modular design and testing in web applications. Also, more than 85% of students acquire skills from code-to-web design mastery by developing web applications in Angular Node.js and backend implementation. This framework helped to improve teamwork, presentation and communication skills. Confidence in software development improved to a greater extent. The design and implementation of the framework met the stated outcome of the courses. The student's academic performance improved by 10% compared to the previous year when students were not involved in the integrated project development. Keywords— Framework, learning, practices, project, skills, technology, testing, web