andriajah Thu Jul 2022 1 year ago
Tutorial Slicing Ui Design Dengan Next Js, Tailwind Css, Dan Netlify 🚀
Basically, to slice a design into a website, we only need HTML, CSS and JavaScript. But, this does not limit you to using 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-UI-Design/duplicate
- Repository: https://github.com/array-id/nauval-next/
Tailwind Books:
- https://multinity.id/book/tailwind-css​​​
Community:
- Discord: https://discord.gg/sk6fEVnzrE​​​​
- Indonesian front-end: https://discord.gg/p8SMfrQ​​​
Donation:
- 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 Analyzing UI Design
00:05:57 Init Project Next JS
00:09:41 Tailwind CSS Integration With Next JS
00:28:03 Switch Package Manager To Yarn
00:30:39 Import Google Fonts to Next JS
00:35:38 Creating a Navbar Component
00:56:20 Creating Hero Components
01:24:16 Create Profile Section
01:34:23 Create Skills Section
01:57:12 Create Projects Section
02:06:02 Create Contact Section
02:23:00 Create a Contact Form
02:36:29 Creating a Footer Component
02:38:05 Add Hover to Element
02:40:28 Fixed Issue ClassName
02:47:25 Create Href Target Section
02:52:27 Providing Responsive Design
03:08:34 Creating an 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! 💖
andriajah