andriajah Thu Jul 2022 2 years ago

Tutorial Slicing Ui Design Dengan Next Js, Tailwind Css, Dan Netlify 🚀

After learning about UI Design with Figma, now Nauval will guide you to do Slicing UI Design the results of the previous video into a whole website.

Basically, to do slicing design into a website, we only need HTML, CSS, and Javascript only. But, this does not limit you to use your favorite Javascript framework and CSS framework. Because on this occasion we will also use Next JS and Tailwind CSS.

Reference:
- Previous Tutorial: https://www.youtube.com/watch?v=xrijzv8cr44
-Design file: https://www.figma.com/file/fqn0t4xztn6qm3yhi8pasv/belajar-ii-design/duplicate

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

Tailwind Book:
- https://multinity.id/book/tailwind-css


Community:
- Discord: https://discord.gg/sk6Fevnzre
- Indonesian front-end: https://discord.gg/p8smfrq


Donation:
- https://trateer.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 Analyzing UI Design
00:05:57 INIT PROJECT NEXT JS
00:09:41 Integration of tailwind css with next js
00:28:03 SWITCH PACKAGE MANAGER TO YARN
00:30:39 Import Google Fonts to Next JS
00:35:38 Make Component Navbar
00:56:20 MAKE A COMPONENT HERO
01:24:16 Create Profile Section
01:34:23 Make Skills Section
01:57:12 Make Projects Section
02:06:02 Make Contact Section
02:23:00 Make Contact Forms
02:36:29 Make Component Footer
02:38:05 Add Hover to the Element
02:40:28 Improve Classname Issue
02:47:25 Making Href Target Section
02:52:27 Give responsive design
03:08:34 Make Off-Canvas Menu
03:21:08 Event Handler Off-Canvas Menu
03:26:56 Deploy Project to Netlify
03:32:08 Closing & What's Next?

Hope it is useful! 💖