Akses Selamanya
Masuk /
Daftar
Our Happy Students
Review setelah bergabung di kelas Next.js UI Slicing & Component Workflow
Kelas Online Gratis
Next.js UI Slicing & Component Workflow
Released date November 2025
Last updated March 2026
Member
448 enrolled
Lesson Type
Video Only
Tingkatan
Sertifikat
Konsultasi
-Develop Your Skills
Kelas ini dirancang untuk membantu kamu memahami proses lengkap dalam membangun sebuah landing page modern mulai dari desain hingga menjadi tampilan website yang rapi dan siap digunakan. Di era frontend 2025, kemampuan melakukan slicing UI bukan sekadar kemampuan tambahan—ini adalah fondasi penting yang digunakan hampir di semua proyek web, baik skala kecil maupun besar.
Di kelas ini, kamu akan belajar menggunakan tiga teknologi utama:
Next.js sebagai fondasi aplikasi,
Tailwind CSS sebagai sistem styling yang cepat dan konsisten,
dan Storybook sebagai alat dokumentasi komponen yang digunakan dalam workflow tim profesional.
Kamu akan melalui proses nyata yang biasa dilakukan oleh frontend developer di industri: membaca desain dari Figma, memecah struktur layout menjadi komponen kecil, membangun UI menggunakan aturan spacing dan typography modern, hingga membuat dokumentasi komponen supaya mudah digunakan kembali di project lain. Semua dijelaskan dengan langkah yang runtut dan mudah diikuti, bahkan untuk pemula.
Kelas ini juga membiasakanmu bekerja dengan pola komponen reusable, sehingga setiap bagian UI yang kamu buat bisa dipakai ulang, diatur, dan dikembangkan tanpa membuat kode berantakan. Cara ini tidak hanya membuat proses development lebih cepat, tapi juga memberi standar kualitas yang lebih baik untuk portfolio kamu.
Di akhir kelas, kamu akan berhasil membangun satu landing page lengkap yang bisa kamu pamerkan sebagai hasil kerja nyata. Selain itu, kamu juga akan punya satu set komponen UI yang sudah terdokumentasi di Storybook—sebuah nilai tambah yang jarang dimiliki pemula, dan sangat menarik di mata recruiter atau klien.
Kelas ini ideal untuk pemula, mahasiswa, career switcher, UI/UX designer yang ingin belajar implementasi kode, atau siapa saja yang ingin memahami alur kerja frontend modern dari awal. Semua materi disusun dengan gaya pembelajaran yang tenang, jelas, dan bertahap, tanpa asumsi bahwa kamu sudah ahli sebelumnya.
Jika kamu ingin memulai perjalanan sebagai frontend developer dan ingin memahami cara kerja modern yang digunakan perusahaan saat ini, kelas ini menjadi fondasi yang sangat kuat untuk kamu bangun keahlian berikutnya.
Key Points
Cara membaca desain landing page dan memecahnya menjadi komponen.
Membuat struktur project Next.js yang rapi dan scalable.
Mengimplementasikan UI menggunakan Tailwind CSS dengan cepat dan konsisten.
Membuat dokumentasi komponen menggunakan Storybook.
Membuat komponen reusable untuk kebutuhan project nyata.
Designed For
Pemula yang ingin belajar dasar frontend modern secara praktis.
Frontend beginner yang ingin belajar Next.js tanpa teori yang berbelit.
UI/UX designer yang ingin tahu cara desain mereka diubah menjadi kode.
Junior developer yang ingin menambah skill Tailwind dan dokumentasi komponen.
Course Lessons
Learn With Expert
Febri Wardhana
Frontend Developer
(451)
Tools Pendukung
Lengkapi semua pendukung di bawah sebelum belajar
Visual Studio Code
Software
Figma
Software
Tailwind CSS
Software
Next JS
Software
#Starter
Start to Invest 100%
Langkah yang tepat untuk berinvestasi kepada
ilmu pengetahuan
yang
baru di bidang IT
Basic - Rp 0
Akses dan pelajari kelas Starter secara gratis tanpa sertifikat
Bayar 0 rupiah
Akses kelas selamanya
Plus - Rp 50,000
Unlock benefit lainnya yang bisa
didapatkan di kelas
Starter
Sekali bayar saja
Akses kelas selamanya
Sertifikat kelas
Blockwave - Blockchain Payment Transfer Figma Template UI Kit
Rp
150,000
Rp
50,000
(6)
Source Code HTML, Tailwind CSS Chatting Website
Rp
1,250,000
Rp
149,000
(2)
Crown - Dental Figma Template UI Kit
Rp
150,000
Rp
50,000
(2)
BurgerCall - Burgershop Landing Page Figma Template UI Kit
Rp
150,000
Rp
35,000
(4)
Next.js UI Slicing & Component Workflow
-
IntroductionVideo 4 minutes
-
Initialize ProjectVideo 8 minutes
-
Setup StorybookVideo 6 minutes
-
Slicing Button ComponentVideo 18 minutes
-
Slicing Navbar ComponentVideo 17 minutes
-
Slicing Toogle ComponentVideo 10 minutes
-
Slicing Card Component 1Video 29 minutes
-
Slicing Card Component 2Video 12 minutes
-
Slicing Testimonial ComponentVideo 15 minutes
-
Slicing Hero SectionVideo 10 minutes
-
Slicing Benefit SectionVideo 13 minutes
-
Slicing Feature SectionVideo 4 minutes
-
Slicing Step SectionVideo 21 minutes
-
Slicing Testimonial SectionVideo 6 minutes
-
Slicing Pricing SectionVideo 9 minutes
-
Slicing Footer SectionVideo 20 minutes
-
Completed Slicing PageVideo 8 minutes
Member
448
Lesson Type
Video Only
Tingkatan
Sertifikat
Konsultasi
-
Develop Your Skills
Kelas ini dirancang untuk membantu kamu memahami proses lengkap dalam membangun sebuah landing page modern mulai dari desain hingga menjadi tampilan website yang rapi dan siap digunakan. Di era frontend 2025, kemampuan melakukan slicing UI bukan sekadar kemampuan tambahan—ini adalah fondasi penting yang digunakan hampir di semua proyek web, baik skala kecil maupun besar.
Di kelas ini, kamu akan belajar menggunakan tiga teknologi utama:
Next.js sebagai fondasi aplikasi,
Tailwind CSS sebagai sistem styling yang cepat dan konsisten,
dan Storybook sebagai alat dokumentasi komponen yang digunakan dalam workflow tim profesional.
Kamu akan melalui proses nyata yang biasa dilakukan oleh frontend developer di industri: membaca desain dari Figma, memecah struktur layout menjadi komponen kecil, membangun UI menggunakan aturan spacing dan typography modern, hingga membuat dokumentasi komponen supaya mudah digunakan kembali di project lain. Semua dijelaskan dengan langkah yang runtut dan mudah diikuti, bahkan untuk pemula.
Kelas ini juga membiasakanmu bekerja dengan pola komponen reusable, sehingga setiap bagian UI yang kamu buat bisa dipakai ulang, diatur, dan dikembangkan tanpa membuat kode berantakan. Cara ini tidak hanya membuat proses development lebih cepat, tapi juga memberi standar kualitas yang lebih baik untuk portfolio kamu.
Di akhir kelas, kamu akan berhasil membangun satu landing page lengkap yang bisa kamu pamerkan sebagai hasil kerja nyata. Selain itu, kamu juga akan punya satu set komponen UI yang sudah terdokumentasi di Storybook—sebuah nilai tambah yang jarang dimiliki pemula, dan sangat menarik di mata recruiter atau klien.
Kelas ini ideal untuk pemula, mahasiswa, career switcher, UI/UX designer yang ingin belajar implementasi kode, atau siapa saja yang ingin memahami alur kerja frontend modern dari awal. Semua materi disusun dengan gaya pembelajaran yang tenang, jelas, dan bertahap, tanpa asumsi bahwa kamu sudah ahli sebelumnya.
Jika kamu ingin memulai perjalanan sebagai frontend developer dan ingin memahami cara kerja modern yang digunakan perusahaan saat ini, kelas ini menjadi fondasi yang sangat kuat untuk kamu bangun keahlian berikutnya.
read more
Learn With Expert
Key Points
-
Cara membaca desain landing page dan memecahnya menjadi komponen.
-
Membuat struktur project Next.js yang rapi dan scalable.
-
Mengimplementasikan UI menggunakan Tailwind CSS dengan cepat dan konsisten.
-
Membuat dokumentasi komponen menggunakan Storybook.
-
Membuat komponen reusable untuk kebutuhan project nyata.
Created For
-
Pemula yang ingin belajar dasar frontend modern secara praktis.
-
Frontend beginner yang ingin belajar Next.js tanpa teori yang berbelit.
-
UI/UX designer yang ingin tahu cara desain mereka diubah menjadi kode.
-
Junior developer yang ingin menambah skill Tailwind dan dokumentasi komponen.
For Your Career
Akses Selamanya
Belajar lebih santai & produktif
448
Happy Students
Happy Students
EduSphere
Lifetime Learner
Thank you kak
10 Dec 2025
Pertanyaan Umum
Langkah yang tepat untuk berinvestasi kepada
ilmu
pengetahuan yang baru di bidang IT
Tingkatan kelas Premium yang kami miliki dibangun untuk All Levels
yang memberartikan bahwa cocok untuk seluruh
tingkatan. Kami juga menyarankan calon member untuk
mengikuti kelas Starter (gratis) terlebih dahulu sebagai permulaan.
Sertifikat kelulusan kelas hanya tersedia pada kelas Premium. Dan
untuk mendapatkannya, para member diwajibkan untuk
menyelesaikan seluruh materi kelas dan juga Quiz
yang telah disediakan oleh mentor.
Salah satu benefit unggulan kami adalah group
konsultasi yang diberikan sebagai bonus untuk member
yang telah mengikuti kelas Premium di platform BuildWithAngga.
Silakan menghubungi Admin untk mendapatkan akses pada group
tersebut.
Kami mengizinkan member yang telah mengikuti kelas Premium untuk
menjual kembali projek kelas kepada klien, perusahaan, etc. Syarat
utamanya adalah dengan memodifikasi sedikitnya yaitu
30% dari original project buatan mentor kelas tersebut.
Kami melarang member menjual atau membagikan hak akses kelas Premium
kepada orang lain yang tidak terdaftar pada kelas tersebut. Mari
kita support creators Indonesia dengan cara membeli
kelas secara resmi dan satu akun hanya untuk satu pengguna saja.
Kami tidak memperbolehkan member menjual kembali materi kelas di
BuildWithAngga. Kami siap melanjutkan kepada proses
hukum apabila Anda terbukti benar memperjualbelikan kelas
kami secara ilegal.
