WEBINAR & WORKSHOP - Stand Out Online: Portfolio Design with Flowbite for Beginners

WEBINAR & WORKSHOP

"Stand Out Online: Portfolio Design with Flowbite for Beginners"

Pada hari Senin, tanggal 14 Juli 2025, telah dilaksanakan kegiatan Webinar dan Workshop dengan tema "Stand Out Online: Portfolio Design with Flowbite for Beginners". Kegiatan ini merupakan bagian dari diseminasi hasil program Magang dan Studi Independen Bersertifikat (MSIB) Batch 8 yang diselenggarakan oleh Program Studi Teknik Informatika, Fakultas Teknik, Universitas Muhammadiyah Jakarta (UMJ). Acara ini diprakarsai oleh tim diseminasi KKN Kelompok 1.

Kegiatan ini berhasil menarik perhatian sebanyak 33 peserta dari berbagai kalangan, yang didominasi oleh mahasiswa UMJ serta beberapa peserta dari luar kampus yang memiliki ketertarikan dalam pengembangan Portofolio web yang menggunakan Flowbite untuk mempermudah UInya. Acara ini dibagi menjadi dua sesi utama yang saling melengkapi, yakni Webinar sebagai sesi pembekalan teori dan Workshop sebagai sesi praktik langsung.

Pada sesi webinar 1, Ahmad Tauzi, dari Blue Innovative Startup Acceleration (BISA), membawakan materi tentang perkenalan tentang Portofolio dan Flowbite . Ia menjelaskan perbedaan tujuan, isi, format serta fungsi dari CV dan portofolio. Tak hanya itu, Ahmad juga menjelaskan  fungsi dan keunggulan dari portofolio web yang mudah di akses secara luas, pengertian portofolio, dan berbagai macam jenis portofolio. Ia juga menjelaskan pengertian dan keutamaan dari Flowbite yang menyajika berbagai macam template design untuk mempermudan penggunan , Hubungan Flowbite dengan Tailwind CSS , dan beberapa basic fitur dari Flowbite.

Memasuki sesi kedua yaitu Workshop, Najlaa Maharani DewI Tiara memandu peserta secara langsung untuk mendemonstrasikan pembuatan portofolio web menggunakan Design dari Flowbite. Sesi dimulai dengan proses instalasi Node.js dan NPM melalui terminal, lalu dilanjutkan dengan ekstensi Tailwin CSS. Lalu Peserta kemudian diarahkan untuk membuat proyek React.

Setelah proyek React berhasil di buat, menginstal Tailwin CSS, PostCSS, dan Autoprefixer dan mengkonfigurasi Tailwind CSS, lalu menambahkan direktif Tailwind ke CSS utama, install Flowbite dan Peer depencies, dan mengkonfigurasi Flowbite di tailwind.config.js. Najla menjelaskan secara rinci urutan cara satu per satu. Setelah itu peserta di arahkan untuk membangun struktur portofolio dengan komponen Flowbite yaitu, navbar, hero, about, project, kontak, dan footer. Setelah struktur sudah terbentuk peseta melakukan kustomisasi dan stayling menggunakan kelas tailwind kustom, menyesuaikan tema tailwind, dan menambahkan CSS kustom. Di langkah terakhir yaitu optimsi dan deployment, setiap fungsi diimplementasikan langsung dalam workshop, dengan peserta didampingi untuk menyelesaikan setiap tahapan.

Kegiatan ini tidak hanya memberikan teori dan wawasan baru, tetapi juga bekal keterampilan praktis yang bisa diterapkan langsung oleh peserta untuk membuat portofolio web mereka sendiri. Semangat dan antusiasme para peserta terlihat dari banyaknya pertanyaan, diskusi, serta keaktifan saat praktik langsung. Hal ini menjadi bukti bahwa minat terhadap pengembangan portofolio web menggunakan flowbite masih sangat tinggi di kalangan mahasiswa dan generasi muda saat ini.

Dengan adanya kegiatan ini, diharapkan peserta mampu mengembangkan portofolio web sederhana secara mandiri serta memiliki pemahaman dasar yang kuat dalam mengkonfigurasi tailwindcss, yang nantinya dapat menjadi bekal dalam pengembangan karier di bidang teknologi informasi.

Link Drive Sertifikat Peserta :

https://drive.google.com/drive/folders/1qrsZ1SGU75aaQOiOiZ3Hz5jWvB2tpPHT