10 Kelas Gratis Belajar UI UX & Web Development Buatan Mentor Angga Risky

Mulai Karir Tanpa Modal Besar

Pengen belajar web development atau UI UX tapi khawatir biayanya mahal? Kabar baiknya, kita gak perlu keluar banyak uang lagi. Mentor Angga Risky punya 10 kelas gratis berkualiitas yang dirancang khusus untuk membawa kita dari pemula sampai bisa berkontribusi di proyek nyata.

Siapa Mentor Angga Risky?

Mentor Angga Risky adalah founder BuildWithAngga dengan pengalaman di web development dan UI UX. Kelas-kelasnya tersedia gratis di platform BuildWithAngga dan dirancang untuk memberikan fundamental skills yang kita butuhin untuk memulai karir di bidang ini.

10 Kelas Gratis yang Penting

Kelas-kelas ini dirancang untuk membawa kita dari level pemula sampai bisa kerja. Ada yang ngajarin coding fundamental, ada yang ngajarin modern framework, dan ada juga yang fokus design thinking. Semuanya gratis dan bisa dipraktikkan langsung.

Kenapa Pilih Kelas Ini?

Kelas-kelas ini dirancang dengan pendekatan praktis. Setiap kelas punya project nyata yang bisa langsung kita masukkan ke portfolio. Materi diajarinnya detail tapi mudah dipahami, dan semua skill yang dicover adalah skill yang dibutuhin industri sekarang.

Mulai Sekarang

Udah siap? Mari kita lihat 10 kelas gratis ini dan cari tahu mana yang cocok untuk kita. Jangan tunda lagi, saatnya ambil langkah pertama menuju karir impian.

1. Next JS 15 for Beginners 2025: Bikin Web Cari dan Sewa Kantor

Kelas ini cocok banget buat kamu yang pengen mulai belajar Next.js 15 dari nol. Semua materinyaa dibahas dengan bahasa yang santai dan mudah dipahami, jadi meskipun kamu masih pemula, tetap bisa ngikutin tanpa stres. Kita mulai dari hal paling dasar, lalu naik ke level yang lebih advance secara bertahap.

Di dalam kelas ini kamu akan belajar bikin website listing kantor dan sistem booking kantor lengkap. Mulai dari cara atur routing dan nested navigation, sampai penggunaan mock data dan dynamic params biar data di tiap halaman bisa berubah sesuai kebutuhin. Semua prosesnya dikupas step by step, jadi kamu paham bukan cuma caranya, tapi juga alasannyaa kenapa harus seperti itu.

Supaya kodingan kamu makin mantap dan tahan lama, kita pakai TypeScript. Ini penting banget buat bikin kode yang scalable dan gampang dirawat di masa depan. Kamu juga akan belajar bikin komponen yang reusable, pakai props yang rapi, dan paham kapan harus pakai server component atau client component sesuai best practice Next.js terbaru.

Nggak cuma itu, kamu juga akan belajar ngatur SEO langsung di dalam project Next.js kamu. Jadi websitenya bukan cuma keren, tapi juga siap tampil di halaman pertama Google. Buat kamu yang suka keindahan UI, disediakan juga template HTML + Tailwind CSS dengan desain yang modern dan profesional.

Kelas ini bisa kamu akses seumur hidup, dan langsung belajar bareng founder BuildWithAngga. Project yang kamu bangun punya kualiitas tinggi dan bisa langsung dijual ulang ke klien dengan harga puluhan juta. Jadi bukan cuma belajar, tapi juga punya aset digital yang punya nilai nyata.

Key Points

• Belajar Next.js 15 dari dasar sampai mahir, termasuk routing, dynamic params, server-client component, dan SEO. Semua dikupas sampai kamu paham betul cara kerjanya.
• Bangun website listing dan booking kantor yang bisa langsung kamu masukin ke portfolio atau jual ke klien dengan harga tinggi.
• Pakai TypeScript dan buat komponen yang reusable supaya kodingan kamu rapi, scalable, dan gampang dirawat di masa depan.
• Dapet template HTML premium, akses kelas seumur hidup, dan project yang punya nilai jual tinggi ke klien.

Designed For

• Buat kamu yang pengen belajar Next.js 15 dari nol dan bikin website modern dengan teknologi terbaru yang lagi hot di industri.
• Buat kamu yang pengen jadi front-end atau full stack developer dan butuh project real-world berbasis Next.js + TypeScript buat dijadiin portofolio yang bisa dipamerkan ke HR atau klien.
• Buat kamu yang pengen kerja freelance dan tawar jasa pembuatan website booking atau listing profesional dengan potensi penghasilan puluhan juta dari satu project.
• Buat kamu yang pengen bangun produk digital sendiri, kayak sistem booking kantor, dan ingin tahu cara membuatnyaa dengan struktur kode yang rapi, SEO-friendly, dan tampilan yang elegan pake Tailwind CSS.

Tools yang Digunakan

Visual Studio Code, TailwindCSS, HTML, Next.js.

Link Kelas

https://buildwithangga.com/kelas/next-js-15-for-beginners-2025-bikin-web-cari-dan-sewa-kantor

2. Vanilla JavaScript OOP & LocalStorage: Web Task Management

JavaScript adalah bahasa pemograman yang dari tahun 90-an sampai sekarang masih banget dipakai buat ngembangkan software di website, mobile app, desktop, dan lainnyaa. JavaScript bisa bikin software jadi lebih interaktif sehingga pengalaman pengguna jadi lebih asik, misalnyaa pas pengguna mau nambahin barang ke keranjang di website toko online atau milih kursi pas mau beli tiket pesawat.

Di kelas Vanilla JavaScript OOP & LocalStorage: Web Task Management, kita bakalan belajar JavaScript tanpa pakai framework. Ini penting banget buat ningkatin fundamental skills dan siap-siap sebelum pakai framework JavaScript kayak React, Vue, Angular, atau Svelte. Di kelas ini kita bikin project task management yang bisa nambahin task, hapus task, login, dan banyak lagi.

Kalo kamu perlu ningkatin fundamental JavaScript, kelas ini sangat cocok. Kita bakal belajar konsep kayak OOP, localStorage API, state management, dan sebagainnya. Yuk join kelas ini dan ketemu di sana.

Key Points

• Bangun aplikasi web interaktif dari nol tanpa pakai framework atau library eksternal kayak React, Vue, atau jQuery.
• Tambahin, ubah, dan hapus elemen HTML secara dinamis pake JavaScript buat bikin UI yang benar-benar interaktif dan responsif.
• Simpan data kayak daftar tugas dan info user secara permanen di browser, jadi data gak ilang pas halaman di-refresh atau ditutup.

Designed For

• Programmer yang udah biasa pake framework dan pengen kembali perkuat pemahaman JavaScript murni dari dasarnyaa.
• Mahasiswa yang ingin terapin teori pemograman ke dalam project web yang praktis dan nyata.
• Kamu yang udah tahu sintaks dasar JavaScript tapi pengen belajar cara bangun project yang beneran berfungsi.
• Kamu yang udah kuasai struktur dan styling web, dan sekarang siap bikin website jadi interaktif dengan JavaScript.

Tools yang Digunakan

Visual Studio Code, Figma, JavaScript, Chrome.

Link Kelas

https://buildwithangga.com/kelas/vanilla-javascript-oop-localstorage-web-task-management

3. Framer for Beginners: Bikin Website Modern Tanpa Koding

Framer adalah software populer yang bisa kita pakai buat bangun website modern dengan tampilan UI UX yang menarik. Ini sangat bagus buat ningkatin pengalaman pengguna dan berguna banget buat pertumbuhan bisnis online kamu.

Dengan pakai software Framer, kita gak perlu koding sama sekali karena semua elemen di website bisa kita bangun hanya dengan drag and drop sesuai kebutuhinnya. Jadi prosesnyaa lebih cepat dan gampang, bahkan buat orang yang gak ada background teknis sekalipun.

Key Points

• Kenal software Framer dan pelajarin cara pakenya buat permudah pembuatan website modern.
• Bikin website dengan tampilan UI UX yang benar-benar menarik dan profesional tanpa harus nulis kode.

Designed For

• UI UX designer yang pengen implement hasil design dari Figma ke website yang beneran berfungsi.
• UMKM yang pengen punya website buat berbisnis online tanpa harus bayar developer mahal-malahan.

Tools yang Digunakan

Figma, Framer.

Link Kelas

https://buildwithangga.com/kelas/framer-for-beginners-bikin-website-modern-tanpa-koding

4. HTML5 Tailwind CSS: Creating Modern Eye-Catching Website

Tailwind CSS adalah salah satu framework CSS yang paling populer sekarang dan banyak banget dipakai oleh frontend dan backend developer buat ngembangkan website modern dengan layout yang complex dan design style yang menarik.

Di kelas online ini kita bakalan belajar bikin website yang bisa dipakai buat kategori SaaS, Business, Finance, Hosting, dan sebagainnya pake HTML5 dan Tailwind CSS. Alasan utama pakai Tailwind CSS adalah mereka udah sediain ratusan nama class yang bisa bantu kita percantikin tampilan website tanpa harus nulis ulang script CSS lagi.

Semua style yang kita butuhin kayak color, padding, margin, flex, grid, background, dan lainnyaa (disebut dengan utility) udah disediain sama framework Tailwind CSS. Jadi kita tinggal pake aja sebebasnya buat berkreativitas. Kita bakal belajar convert design website di Figma jadi bentuk template HTML5 dan CSS3 pake Tailwind, jadi proses pengerjaan jadi lebih cepat dan mudah dirawat nanti kalo ada perubahan design.

Kelas online ini gratis dibuat sama Mentor Angga supaya kita bisa belajar bagaimana pakai Tailwind CSS di website modern dan ngikutin design trend terbaru buat dapet portfolio website developer yang berkualitass tinggi. Akses kelas online ini seumur hidup jadi kamu bisa belajar dengan maksimal tanpa harus buru-buruan.

Key Points

• Convert design Figma ke HTML CSS dengan cepat dan efisien.
• Pelajarin utility pada Tailwind CSS secara mendalam buat hasil maksimal.
• Bikin website yang eye-catching dan responsive di semua perangkat.
• Tingkatin performa website supaya loading jadi lebih cepat.

Designed For

• UI UX designer yang tertarik belajar Frontend dan ingin lihat hasil design di browser asli.
• Frontend atau Backend developer yang pengen perdalam Tailwind CSS buat kerja jadi lebih produktif.

Tools yang Digunakan

Visual Studio Code, TailwindCSS, HTML, CSS.

Link Kelas

https://buildwithangga.com/kelas/html5-tailwind-css-creating-modern-eye-catching-website?main_leads=searchsuggestion

5. Laravel for Beginner: HTML to Blade Conversion

Framework PHP yaitu Laravel bisa bantu backend developer buat bekerja dengan cepat dan kompak bersama developer lainnyaa di dalam satu project. Kali ini kita bakal kenal konsep software architecture yaitu MVC yang bisa kita terapin pas bikin website pake framework PHP Laravel terbaru.

Kita bakal mulai dari proses install framework Laravel pake Composer, setelah itu kita ngerjain project website listing sewa rumah berdasarkin dari template HTML yang udah disediain. Kelas Laravel for Beginner: HTML to Blade Conversion bisa kasih bekal kuat buat kita berkarir sebagai seorang junior backend developer pake PHP.

Selanjutnya, kita bisa terapin reusable component pada project Laravel jadi kalo ada perubahan di ribuan halaman, kita gak perlu ubah informasi itu satu per satu di tiap halaman. Kita bakal split beberapa komponen utama website yang sering dipakee di seluruh project website tersebut. Jadi lebih efisien dan mudah dirawat nantinya.

Yuk bergabung buat mulai pelajarin framework Laravel dan kami bakal tunggu di kelas BuildWithAngga.

Key Points

• Pelajarin konsep software architecture MVC dengan penuh.
• Ubah HTML template jadi project Laravel yang beneran berfungsi.
• Bangun portfolio website sewa rumah yang professional dan bisa dijual.
• Pelajarin fitur migration, tinker, dan middleware di Laravel.

Designed For

• Pemula yang pengen mulai karir sebagai backend developer dengan PHP.
• Pemula yang perlu belajar framework Laravel dari dasar hingga bisa bikin project.
• UI Engineer yang penasaran sama ilmu backend dan ingin coba Laravel.
• Developer yang pengen punya portfolio sederhana tapi berkualitass tinggi.

Tools yang Digunakan

Visual Studio Code, Bootstrap CSS, Laravel, MAMP.

Link Kelas

https://buildwithangga.com/kelas/laravel-for-beginner-html-to-blade-conversion

6. ERD Essentials for Freelance Web Developers: Building Better Databases

Di era teknologi informasi yang semakin maju, kebutuhin akan sistem yang bisa simpan, kelola, dan akses data dengan efisien jadi semakin penting. Salah satu komponen kunci dalam pengembangan sistem informasi adalah perancangan basis data. Basis data yang dirancang dengan baik gak cuma ningkatin kinerja sistem, tapi juga permudah pengelolaan data. Dalam konteks ini, Entity-Relationship Diagram (ERD) main peranan yang sangat vital sebagai alat desain dalam perancangan basis data. ERD bantu pengembang buat visualisasi struktur data dan hubungan antar entitas dalam sistem.

Di kelas ini, kita bakal bahas secara mendalam tentang ERD dan penerapannyaa dalam sebuah project nyata, yaitu sistem jual beli eBook secara online. Project ini dipilih karena relevansinnyaa dengan tren saat ini dimana banyak orang beralih ke media digital buat baca buku. Sistem jual beli eBook butuh basis data yang efisien buat simpan informasi tentang buku, pengguna, transaksi, dan aspek lain yang terkait.

Pembahasannya bakal dimulai dengan pengenalan dasar tentang ERD, termasuk konsep entitas, atribut, dan relasi. Entitas dalam ERD merepresentasikan objek nyata atau abstrak yang berisi informasi, kayak 'Buku', 'Pengguna', dan 'Transaksi'. Atribut adalah karakteristik dari entitas, contohnyaa buat entitas 'Buku', atribut bisa cover 'Judul', 'Penulis', 'ISBN', dan lainnyaa. Relasi menggambarkan bagaimana entitas satu berhubungan dengan entitas lain, misalnyaa relasi antara 'Pengguna' dan 'Buku' bisa berupa 'membeli' atau 'menyewa'.

Key Points

• Paham brief project freelance web developer dengan detail.
• Bikin ERD berdasarkan user flow dan requirement yang jelas.
• Pahamin fundamental ERD pada software development secara mendalam.
• Asah skill sebagai seorang backend developer yang profesional.

Designed For

• Pemula freelance website developer yang pengen cepat paham database design.
• Pemula backend web developer yang ingin buat database yang scalable dan efisien.

Tools yang Digunakan

Notion, Whimsical.

Link Kelas

https://buildwithangga.com/kelas/erd-essentials-for-freelance-web-developers-building-better-databases

7. Freelance UI/UX: From Client Briefs to Winning Wireframes

Di kelas online ini kita bakal belajar pahamin brief project yang udah diberiin sama klien supaya kita bisa kasih kualitas terbaik dan dapatin bayaran tinggi sebagai seorang freelance UI UX designer. Dari brief tersebut kita coba perjelas lagi sebelum mulai proses design, setelah semuanyaa udah jelas maka kita bisa bikin UI UX moodboarding sebagai inspirasi design dari project tersebut.

Selanjutnyaa kita bakal bikin beberapa wireframe sesuai kebutuhin project tersebut jadi klien bisa membayangkan dengan bagus bagaimana tata letak dan bentuk design website yang bakal mereka dapatin nantinya. Dengan wireframe yang bagus, klien jadi lebih yakin dan prosess approval jadi lebih cepat. Ini penting banget buat ningkatin kepuasan klien dan dapatin project berikutnyaa.

Key Points

• Pahamin brief project freelance UI UX design dengan detail dan teliti.
• Kasih kualitas tinggi kepada klien sehingga mereka puas dan balik lagi.
• Bikin wireframe berdasarkan brief project yang sudah diperjelas sebelumnyaa.
• Pelajarin software Figjam dan Whimsical buat bikin wireframe yang profesional.

Designed For

• Freelancer UI UX designer pemula yang pengen mulai dapatin klien dan penghasilan stabil.
• Pekerja kantoran yang pengen mulai freelance dan bangun business sendiri di bidang design.

Tools yang Digunakan

Notion, Whimsical, Figjam.

Link Kelas

https://buildwithangga.com/kelas/freelance-uiux-from-client-briefs-to-winning-wireframes

8. Webflow Workshop: Build a Simple Landing Page

Dengan Webflow, bangun website pertama kita sendiri tanpa harus jago coding bukanlah sesuatu hal yang mustahil. Hanya dengan drag and drop pada design asset, Webflow bakal otomatis nulis kode dari design website kita. Pas bekerja sama software ini, kita bisa langsung liat prototipe dan aplikasiin banyak fitur yang sangat berguna kayak Responsive Design. Hal-hal tersebut tentunya bisa hemat waktu, uang, dan tenaga dalam pengerjaan web development.

Di kelas ini, Mentor Angga Risky njelaskin dasar-dasar pakai Webflow buat sebuah halaman bisnis bernama Workshop Shayna. Materi dimulai dari slicing design asset ke Webflow dan bikin area navigation. Tombol di navigation bakal dikasih warna dan efek hover yang keren. Lalu kita bakal atur typography seperti content section dan title, terus pasang banner berupa foto yang sesuai sama tema website. Setelah semuanyaa selesai, kita bisa langsung cek melalui live prototype.

Supaya pahamin materi lebih mudah, kami saranin Anda udah ikutin kelas gratis BuildWithAngga tentang Figma dan Web Development dengan Webflow sebelumnyaa. Tunggu juga kelas-kelas Freemium lain yang bermanfaat dari kami, yaa. Sampai jumpa di kelas.

Key Points

• Pelajarin tool dasar Webflow dengan detail dan praktik langsung.
• Lakukan slicing design asset dari Figma ke Webflow dengan akurat.
• Bangun elemen UI website kayak navigation, CTA button, content section, dan lainnyaa.
• Tampilkan prototype website secara live dan test responsivenesnyaa.

Designed For

• Anda yang pengen pelajarin Webflow dari dasar dan ngerti cara kerjanyaa.
• Anda yang pengen bangun website tanpa coding tapi hasil profesional.
• Anda yang pengen punya portfolio front-end website dengan Webflow yang impressive.
• Desainer yang pengen jadi Front-End Developer dan perluas skill.

Tools yang Digunakan

Webflow, Figma.

Link Kelas

https://buildwithangga.com/kelas/webflow-workshop-build-a-simple-landing-page

9. Intro to UX Design Research

Research adalah bagian yang penting banget dalam proses pembuatan suatu produk, termasuk juga aplikasi dan website. Ini karena proses UX Design Research bisa gali berbagai informasi tentang target pengguna dan kebutuhinnyaa yang bisa diimplementasiin ke dalam aplikasi. Seorang UX Design Researcher bakal adopsi berbagai metode buat nemuin masalah yang mungkin terjadi pada aplikasi atau fitur baru yang dibutuhin sama user.

Bersama Mentor Angga Risky, kita bakal diajak buat kenal UX Design Research dari dasar sekali. Mentor bakal jelasin bagaimana milih metode yang tepat sampai bagaimana implementasiin research plan dan lakukan evaluasi terhadap research yang udah dilakuin. Kelas ini adalah pilihan yang cocok banget buat pelajarin konsep, teori, dan praktik dari UX Research secara menyeluruh.

Kelas ini juga bagus buat nambahin wawasan Product Designer dan UX Designer tentang bagaimana research dilakuin sehingga bisa bekerja sama dengan lebih baik bareng UX Researcher. Dengan pemahaman research yang kuat, kolaborasi tim jadi lebih efektif dan hasil produk jadi lebih memuaskan.

Udah siap belajar? Silahkan bergabung dan kami tunggu di kelas, yaa.

Key Points

• Belajar dan praktik bikin sebuah Research Plan yang solid dan terukur.
• Pahamin langkah awal dalam membangun Startup dari research perspective.
• Belajar milih metode Research yang tepat sesuai kebutuhin project.
• Kenal UX Design Research dari dasar sampai bisa aplikasiin sendiri.

Designed For

• Anda yang pengen ngerti lebih luas tentang UX Research dan pentingnyaa.
• Anak IT yang pengen bangun sebuah Startup dengan dasar research yang kuat.
• UX Designer atau Product Manager yang pengen belajar Research secara mendalam.

Tools yang Digunakan

Maze Design, Figma, Notion, Miro.

Link Kelas

https://buildwithangga.com/kelas/intro-to-ux-design-research

10. Learn UX User Persona

Persona adalah sebuah representasi pengguna yang biasanyaa berisi karakteristik, pengalaman, tujuan, pain points, dan sebagainnya yang dipakai sebagai panduan tentang siapa yang bakal pakai aplikasi nantinya. Dengan adanyaa user persona, bakal memudahin Anda buat nemuin solusi desain yang pada akhirnyaa mampu bikin pengalaman aplikasi yang ramah pengguna dan memuaskan.

Melalui kelas ini, kita bakal belajar rancang aplikasi berdasarkan kebutuhin dari pengguna, jadi fitur yang bakal dibangun bakal bermanfaat buat pengguna. Di sisi lain, waktu dan tenaga yang diberiin buat rancang aplikasi jadi lebih hemat dan efektif. Gak hanya user persona, di kelas ini Anda juga bakal diajak buat pahamin dan bikin User Story Board yang berfungsi buat gambarin tahapan yang dilalui pengguna sampai capai tujuan akhir mereka.

Kelas ini cocok banget buat Anda yang pengen dalamin bidang UI UX, terkhusus pada user experience. Ini karena persona bisa bantu tercapainya tujuan buat ciptain user experience yang bagus buat target pengguna suatu aplikasi. Kalo nemuin kesulitan pas belajar, silahkan tanya langsung pada Mentor BuildWithAngga melalui grup Telegram, yaa. Segera daftar dan kami tunggu di kelas.

Key Points

• Pahamin komponen dalam User Persona secara detail dan lengkap.
• Pahamin tahapan dan cara bikin User Persona yang efektif.
• Pahamin cara bikin User Story Board buat gambarin user journey.
• Praktek langsung pembuatan User Persona dengan bimbingan mentor.
• Praktek langsung pembuatan User Story Board dari awal sampai selesai.

Designed For

• Anda yang pengen pelajarin User Persona dan aplikasinnyaa dalam design.
• Anda yang pengen pelajarin User Story Board buat mapping user journey.
• Anda yang pengen berkarir sebagai UI UX dengan skill yang solid.
• Anda yang pengen berkarir sebagai User Experience Research professional.

Tools yang Digunakan

Miro.

Link Kelas

https://buildwithangga.com/kelas/learn-ux-user-persona

Kesimpulan

10 kelas ini ngajarin teknologi dan soft skills yang penting banget buat karir kamu. Dari Next.js sampai UX Research, semuanyaa dirancang ngasih kamu fondasi yang kuat dalam web development dan UI UX design. Kamu bakal dapet coding skills, design thinking, freelance knowledge, dan cara kerja yang profesional sama klien.

Pathway Learning yang Jelas

Jalur belajarnyaa terstruktur banget dari dasar sampai advanced. Mulai dari JavaScript murni, terus Next.js, Laravel, sampai UI UX Research. Kalo kamu serius ikutin semua kelas ini, kamu gak cuma dapet skill tapi juga portfolio projects yang bisa langsung kamu jual atau pamerkan ke klien. Semuaa kelas bisa saling melengkapi dan bisa kamu ikutin sesuai background dan tujuan karir kamu sendiri.

Mulai Sekarang Juga

Jangan cuma baca-baca aja, ambil action sekarang. Kunjungi BuildWithAngga dan mulai daftar di kelas-kelas yang menarik perhatian kamu. Akses gratis seumur hidup jadi kamu bisa belajar dengan pace kamu sendiri, gak ada tekanan. Kalo stuck di suatu bagian, mentor BuildWithAngga siap bantu lewat grup Telegram yang supportive.

Ribuan orang udah membuktiin bahwa kelas-kelas ini beneran ngubah karir mereka. Sekarang giliran kamu. Investasi terbaik adalah investasi pada diri sendiri, dan ini adalah kesempatan yang sempurna buat kamu.

Kunjungi BuildWithAngga hari ini dan mulai transformasi karir kamu. Gratis, berkualitass, dan langsung dari Mentor Angga Risky. Karir impian kamu menunggu di sana.

Sampai jumpa di kelas BuildWithAngga!