Stand Out Online Portofolio Design with Flowbite for Beginers

Hilmi Dzakiyuddin Rohman, Muhammad Thirafi Qaedi Setiawan, Najla Maharani Dewi Tiawa Ginawan, Sitti Nurbaya Ambo, Jumail Jumail, Yana Adharani

Abstract


This community engagement project aimed to enhance digital literacy by providing practical training on building online portfolios using Flowbite and Tailwind CSS. The initiative targeted students and beginners who lacked prior experience in creating web-based portfolios. Through a combination of webinars and hands-on workshops, participants were introduced to the fundamentals of
portfolio design, User-Centered Design (UCD) principles, and modern UI development using Flowbite components. The project implemented a project-based learning approach to ensure both theoretical understanding and technical skills acquisition. The event was held virtually on July 14, 2025, and attended by 33 participants, with 21 actively engaged during the session. A pre-test and post-test were administered to evaluate learning outcomes. The results showed a significant improvement in participants' understanding, with the average score increasing from 73.5 to 87. Additionally, 95% of participants expressed satisfaction with the training format and content. The program successfully equipped participants with the necessary knowledge and skills to develop responsive and aesthetically pleasing online portfolios, contributing to their personal branding efforts in the digital era.

References


Hakim, R. R. (2020). Pencegahan Penularan Covid-19 Berbasis Aplikasi Android . Community Engagement & Emergence Journal, 7-13.

Hidayat, R., Bintang, R. A., Irawan, D., Abean, M. A., Filayati, M. A., Sutrisno, M., . . . Ambo, S. N. (2025). Create Your Digital Identity: Bangun Portofolio Keren. Dedication: Jurnal Pengabdian Masyarakat.

Maharani, P. (2025). Pengembangan Website PT. Rantangin Digital Indonesia Menggunakan. Publikasi Teknik Informatika dan Jaringan , 129-137.

Pratama, A. M., Ramadhani, D. R., Arifiansyah, M. S., & Hapsari, R. K. (2024). Pengembangan Website Profile MI Pers Min Menggunakan. Prosiding Seminar Implementasi Teknologi Informasi dan Komunikasi.

Muis, A., Riadi, I., Umar, R., & Yunus, M. 2023. Digitalisasi Portofolio Siswa Berbasis Website di SMK Informatika Wonosobo. Yogyakarta: Universitas Ahmad Dahlan.

Tresna, I. M. A., Wijayanto, H., & Widanta, I. P. 2024. Rancang Design UI/UX Website Portofolio pada Perusahaan PT. Kresna Karya Menggunakan Figma. Mataram: Universitas Mataram dan PT. Kresna Karya.

Melissa. 2024. Implementasi Pembuatan Website Portofolio Menggunakan Framework Laravel pada Platform Replit . Pa le mbang: Universitas Sriw ija ya.

Candra, A., Andhika, A.D., Chandra, K.W., Nicholas, R., Sasongko, R., & Hartati, E. 2023. Pelatihan Pembuatan Website Portofolio Sederhana. Palembang: Universitas Multi Data Palembang.

Azhariyah, S., & Mukhlis, M. (2023). Framework CSS: Tailwind CSS untuk front-end website store PT. XYZ. Jurnal Informatika, 2(–), –. https://jurnal.uniraya.ac.id/index.php/JI

Hudhayana, F. A., & Saputro, I. A. (2025). Perancangan UI/UX website portofolio Dezzly Creative. Journal of Computer Science and Information Technology (JCSIT), 2(3), 313– 323.


Full Text: PDF

Refbacks

  • There are currently no refbacks.


Copyright (c) 2025 Hilmi Dzakiyuddin Rohman, Muhammad Thirafi Qaedi Setiawan, Najla Maharani Dewi Tiawa Ginawan, Sitti Nurbaya Ambo, Jumail Jumail, Yana Adharani

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.