Design Faster, Code Smarter: Web Design With SASS

Abstract

The "Design Faster, Code Smarter: Web Design With SASS" webinar and workshop, held on July 16, 2025, successfully educated participants on modern web design using SASS. This activity was implemented to address the challenges of managing traditional CSS code, which tends to be repetitive, difficult to maintain, and prone to errors in large-scale projects. SASS was chosen as the solution due to its dynamic, structured, and modular approach to writing CSS, offering features such as variables, functions, and mixins that significantly improve development efficiency. This community service activity employed a descriptive quantitative method, utilizing a survey approach through pre- and post-test questionnaires, as well as feedback forms, to measure participants' understanding. The 21 participants were students from the Informatics Engineering program at the University of Muhammadiyah Jakarta. A pre-test assessed initial knowledge, followed by a post-test and feedback questionnaire after the workshop. The workshop also provided hands-on coding experience, guiding participants in creating landing pages using Visual Studio Code and Figma designs. The post-test and feedback results revealed high participant satisfaction and a significant increase in understanding of SASS concepts. The percentage of correct answers to post-test questions ranged from 78.9% to 89.5%. Furthermore, 89.5% of participants stated that the material was clear (21.1% strongly agreed, 68.4% agreed), and 89.5% were satisfied with the overall event (21.1% felt very good, 68.4% good). This initiative successfully demonstrated that hands-on training effectively improves skills in modern web development and underscores the importance of continuing education programs to further enhance participants' SASS skills.