andriajah Thu Jul 2022 2 years ago
Tutorial Slicing Ui Design Dengan Next Js, Tailwind Css, Dan Netlify 🚀
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! 💖