Visual WebBits: A Framework for Design-focused Code Snippets for Students of National University

The evolution of web development is bringing many challenges to developers, particularly at the design level. Many developers struggle to build a stunning yet functionally successful website due to the overwhelming number of available frameworks and libraries. This paper analyzes these problems with a proposed solution through Visual WebBits, a web-based platform designed to help students solve the hurdles of web design. With essential web development languages, code snippets highlighting design tutorials are provided. Intended for the use of the College of Computing and Information Technology, CCIT, the platform aims to facilitate instruction and learning by systematically providing learning materials on a single platform. It features a brief alignment with the Commission on Higher Education (CHED) standards, which aims to enhance students' competencies, honing them into globally competitive industry professionals. The platform comes with a great amount of code snippets focused on design, tutorials, and real-time previews, which makes learning and development interactive, allowing students to digest lessons more easily. It also comes with personalized educator tools that will enable professors to make custom exercises, accurately track student progress, and conveniently present lessons for lectures. Visual WebBits thus supports both teaching and learning by organizing the educational resources needed. The system supports students and educators in the most user-friendly manner, from a live code editor to educational exercises to make the environment of web development more efficient and engaging. In conclusion, the initiative offers a scaled solution in which users are equipped with effective resources to optimize the web design process while improving their technical competencies.