Live Code Responsive Hero Landingpage Time Tracking [NextJS + TailwindCSS]
Live Code Responsive Hero Landingpage Time Tracking [NextJS + TailwindCSS]
NextJS adalah Next.js adalah framework web pengembangan front-end React open-source yang memungkinkan fungsionalitas seperti rendering sisi server dan membuat situs statis untuk aplikasi web berbasis React.
TailwindCSS adalah Kerangka kerja CSS pertama utilitas yang dikemas dengan kelas-kelas seperti flex, pt-4, text-center dan rotate-90 yang dapat disusun untuk membangun desain apa pun, langsung di markup mu.
Tujuan Belajar :
Inisiasi Project Tailwind dan NextJS
Upload ke Vercel
Styleguide dengan TailwindCSS
Slicing Design ke Website
Responsive dengan Tailwind
Timeline :
01:00 - Pengenalan
02:13 - Design to Code
03:00 - Setup Grid di Design
05:55 - Inisiasi Styleguide
10:14 - Inisiasi Project NextJS
16:26 - Integrasi NextJS dan TailwindCSS
28:45 - Styleguide di TailwindCSS
40:00 - Navigation Component
1:00:00 - Caption and Image Component
1:35:41 - Responsive Design
Tautan Live Web :
https://time-tracking-liart.vercel.app/
Github Code :
https://github.com/naufaldi/time-trac...
Design From :
https://www.figma.com/community/file/...
🔥 SUPPORT CHANNEL MOFON 🔥
Karya Karsa : https://karyakarsa.com/naufaldisatriya
Paypal : https://www.paypal.me/faldii
Saweria : https://saweria.co/naufaldi
► Baca juga tulisan saya di
https://www.kureview.web.id/
/ naufaldi
https://blog.cerita-faldi.xyz/
► Sosial Media :
Twitter : http://bit.ly/twitter_faldi
Instagram : http://bit.ly/IG_faldi
Faceboook : http://bit.ly/fb_faldi