A web design course has complex and diverse skills, which may attract students with an interest in technology and art fields to learn to program. It makes a need to have a flexible learning framework to develop all students to learn in a programming course. This study was designed to develop students' learning achievement and computational thinking (CT) abilities by using a Design Thinking (DT)-Conceive-Design-Implement-Operate (CDIO) engineering design framework in a flipped web programming course. The participants were 41 students (males = 17, females = 24) coming from a Taiwan University. All of the students (20-21 years old) had e-learning-related backgrounds in a teacher's college. The experiment was conducted for 14 weeks. The flipped learning and flipped DT-CDIO course each had a total teaching time of 6 weeks, and the midterm exam and final exam each took one week. We used a questionnaire and formative assessment to examine the students' computational thinking ability and learning achievement before and after the course was applied. The results showed the students significantly improved their learning achievement and computational thinking ability. There were no significant gender differences in learning achievement. Some gender differences could be seen in some dimensions of CT ability. This study shows that the DT-CDIO framework brings many benefits to promote interdisciplinary learning by attracting STEAM talent and providing evidence to support the importance of flipped web programming courses.