Let's build an instagram profile page UI clone with Next.js and TailwindCSS🚀🚀🔥🔥
ckmobile
👨💻 Source code:
- https://www.youtube.com/channel/UCu4-4FnutvSHVo9WHvq80Ww/join
- https://www.udemy.com/course/build-instagram-profile-page-ui-clone-nextjs-tailwindcss/?referralCode=C358998A7DABEB60002C
- https://ckmobile.gumroad.com/l/build-instagram-profile-page-ui-clone-nextjs-tailwindcss
📚Read articles: https://ckmobile.medium.com/instagram-ui-profile-clone-with-tailwindcss-and-nextjs-all-articles-3bbb0dc46e3e
In this project, we are going to create the profile page UI clone with Next.js and tailwind CSS.
The Instagram clone looks the same as the real one. It contains an avatar and its username, description, tags, and also URL. For the avatar, we will use the DaisyUI. We will also use the Fontawesome and Heroicon to add different icons at different places, such as tab buttons and settings.
The following effect is exactly the same as real Instagram
The stories on the profile page will scroll smoothly by adding a custom scroll button, which on top of all the stories, the scroll left button will appear when it starts to scroll. When scrolling to the end, the scroll right button will disappear.
The button list has the effect that when the user clicks on it, it will have a dark line appear in line with the horizontal line.
For the image posts, we fetch the images from the Unsplash API with Axios. When mousing over the post, it will have a semi-transparent black cover the image, it will also show the number of hearts and number of comments.
00:00 introduction and create component 03:03 add avatar 05:41 user detail 09:44 profile stories 17:11 horizontal lines and buttons 22:29 consume unsplash API 27:28 render images 32:51 instagram hover effect
How to create Instagram stories? https://youtu.be/HETbUJ-lPGQ How to create Instagram header and tooltip? https://www.youtube.com/watch?v=OeRsk3jvLaY How to create Instagram login page? https://youtu.be/pySeurrp9ok
📩 You can also subscribe or follow to get info or our (free) course coupons https://app.gumroad.com/ckmobile https://mailchi.mp/cb8cb6b3878e/javascript-course
📲 Follow Us: Gumroad courses:https://app.gumroad.com/ckmobile Udemy courses: https://www.udemy.com/user/cyruschan2/ Linkedin: https://www.linkedin.com/company/ckmobi/ Telegram: https://t.me/ckmobi Twitter: https://twitter.com/ckmobilejavasc1 Instagram: https://www.instagram.com/ckmobile8050/ Quora: https://www.quora.com/profile/Ckmobile Pinterest: https://www.pinterest.com/ckmobile8050 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 🔥Complete Courses🔥 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Gumroad Web and mobile complete courses https://app.gumroad.com/ckmobile
Complete CSS course https://www.udemy.com/course/draft/4112256/?referralCode=D70F3923FF6501A398AA
React native Expo for multiplatform mobile app development https://www.udemy.com/course/react-native-expo-for-multiplatform-ios-android-mobile-app-development/?referralCode=2FA276AA4E55CE5A2A39
Complete NodeJS course with express, socket io and MongoDB https://www.udemy.com/course/create-nodejs-app-with-express-socket-io-and-mongodb/?referralCode=4B0B97AD4B1908DD6588 Complete Progress Web App BootCamp https://www.udemy.com/course/complete-progressive-web-app-bootcamp/?referralCode=E04DAFEDCE920AB6EA55
Complete Modern JavaScript BootCamp from the beginning https://www.udemy.com/course/complete-modern-javascript-with-firebase-bootcamp-for-beginners/?referralCode=6AF7AA3DB6AD6B880D66
React - The Complete Guide with React Hook Redux 2020 in 4hr https://www.udemy.com/course/complete-react-course-w-hooks-react-router-redux-usecontext/?referralCode=B192869617ADE079536F
Vue JS and Firebase:Build an iOS and Android chat app [2020] https://www.udemy.com/course/vuejs-and-firebase-build-an-ios-and-android-chat-app/?referralCode=D959334D3BC5DB1FDF53
New SAT Math Course https://www.udemy.com/course/new-sat-math-complete-course/?referralCode=4E1A982C127EA13EB3D8
New SAT Math Practice Test Explain https://www.udemy.com/course/new-sat-maths-explain/?referralCode=ABD0C235875F55CB6F5F
Get A* in GCSE Maths (Quadratic equations and graph) https://www.udemy.com/course/get-a-in-gcse-maths-quadratic-equations-and-graph/?referralCode=2E4D7672FE3571F59DF8
ckmobile aims to provide quality tutorials like reactjs, nextjs, firebase, javascript, nodejs, mongodb, expo reactnative. Learn it easily and create professional website and apps.
#javascript #webdevelopement #reactjs #firebase #mongodb #nodejs ... https://www.youtube.com/watch?v=hyFyPmamQ40
209182803 Bytes