Setelah belajar soal UI design dengan Figma, sekarang Nauval akan memandu kamu untuk melakukan slicing UI design hasil dari video sebelumnya menjadi sebuah website yang utuh.

Pada dasarnya untuk melakukan slicing design menjadi website, kita hanya butuh HTML, CSS, dan JavaScript saja. Tapi, ini tidak membatasi kamu untuk menggunakan framework JavaScript dan framework CSS favorit kamu. Karena pada kesempatan kali ini juga kita akan menggunakan Next JS dan Tailwind CSS.

Referensi:
- Tutorial sebelumnya: https://www.youtube.com/watch?v=XrIjzV8cR44
- File Design: https://www.figma.com/file/fQN0t4xZTn6qM3YhI8PAsV/Belajar-UI-Design/duplicate

- Repository: https://github.com/array-id/nauval-next/

Buku Tailwind:
- https://multinity.id/book/tailwind-css​​​


Komunitas:
- Discord: https://discord.gg/sk6fEVnzrE​​​​
- Front-end Indonesia: https://discord.gg/p8SMfrQ​​​


Donasi:
- https://trakteer.id/arrayid

Nauval:
- Website: https://nauv.al​​​​
- Github: https://github.com/nauvalazhar​​​​
- Twitter: https://twitter.com/mhdnauvalazhar​​​​
- Buymeacoffee: https://buymeacoffee.com/mhd​​​

Timestamps
00:00:00 Intro
00:00:54 Menganalisa UI Design
00:05:57 Init Project Next JS
00:09:41 Integrasi Tailwind CSS Dengan Next JS
00:28:03 Switch Package Manager Ke Yarn
00:30:39 Import Google Fonts Ke Next JS
00:35:38 Membuat Component Navbar
00:56:20 Membuat Component Hero
01:24:16 Membuat Profile Section
01:34:23 Membuat Skills Section
01:57:12 Membuat Projects Section
02:06:02 Membuat Contact Section
02:23:00 Membuat Contact Form
02:36:29 Membuat Component Footer
02:38:05 Menambahkan Hover Pada Element
02:40:28 Memperbaiki Issue ClassName
02:47:25 Membuat Href Target Section
02:52:27 Memberikan Responsive Design
03:08:34 Membuat Off-Canvas Menu
03:21:08 Event Handler Off-Canvas Menu
03:26:56 Deploy Project Ke Netlify
03:32:08 Penutupan & Apa Selanjutnya?

Semoga bermanfaat! 💖