- Видео 18
- Просмотров 185 016
Streamline
Индия
Добавлен 13 апр 2021
Hello, wonderful people 👋! My name is Nik - a software developer and my goal is to teach you all about tech languages/tools
Mostly used in the frontend design & development 🚀.
Here on our channel, we upload one video a week
Mostly used in the frontend design & development 🚀.
Here on our channel, we upload one video a week
Build Full Screen Image Slider using Next.js & TailwindCSS | Auto-slide Effect |Beginners Tutorials
Today we are going to build Full Screen Image Slider using Next.js & TailwindCSS | Auto-slide Effect |Beginners Tutorials. It includes map function, Heroicons, 3 party packages(react-slideshow-image) usage for smooth image transition.
You can continue parallel with me for a better understanding of the web concepts & uplift your design/dev skills up to the next level in a short span of time.✌🏻
🔔 Subscribe for more!
ruclips.net/user/Streamline13
📚 Materials/References:
🔗 Project Source code (give it a star ⭐):-
github.com/Streamline6/Responsive-fullpage-image-slider
📁 Assets
Icons: heroicons.com/
Images: unsplash.com/
designs:www.canva.com/
packages: www.npmjs.com/package/react-slideshow-image
Time Sta...
You can continue parallel with me for a better understanding of the web concepts & uplift your design/dev skills up to the next level in a short span of time.✌🏻
🔔 Subscribe for more!
ruclips.net/user/Streamline13
📚 Materials/References:
🔗 Project Source code (give it a star ⭐):-
github.com/Streamline6/Responsive-fullpage-image-slider
📁 Assets
Icons: heroicons.com/
Images: unsplash.com/
designs:www.canva.com/
packages: www.npmjs.com/package/react-slideshow-image
Time Sta...
Просмотров: 4 213
Видео
✨ Responsive Bottom Navigation Bar Using Next.js & TailwindCSS
Просмотров 2,5 тыс.Год назад
In this video we will learn how to make Responsive Bottom Navigation Bar Using Next.js & TailwindCSS step by step ! Also we will cover Map function of react from scratch. You can continue parallel with me for a better understanding of the web concepts & uplift your design/dev skills up to the next level in a short span of time.✌🏻 📚 Materials/References: 🔗 Project Source code (give it a star ⭐):...
🔴 Let's Build a Modern Responsive Profile Card UI using Next.js & TailwindCSS | Responsive UI
Просмотров 789Год назад
In this tutorial, we will learn the modern responsive profile card UI using next.js and Tailwindcss from scratch step by step tutorial. Target Audience: Beginner-friendly so all can join to learn. You can continue parallel with me for a better understanding of the web concepts & uplift your design/dev skills to the next level in a short time.✌🏻 📚 Materials/References: 🔗 Starter Kit:- github.com...
🔴 Let's Build Modern Portfolio using Next.js & TailwindsCSS || Website design
Просмотров 436Год назад
Build a responsive personal portfolio website design using Next.js & TailwindCSS step by step from scratch (Beginner level). Developed first with the Mobile First methodology, then for desktop😎. You can continue parallel with me for a better understanding of the web concepts & uplift your design/dev skills to the next level in a short time.✌🏻 📚 Materials/References: 🔗 Project Source code (give ...
Responsive Full Screen Navigation Bar in Next.js & TailwindCSS From Scratch | Responsive Navbar 😍
Просмотров 7 тыс.Год назад
In this tutorial we will learn responsive full screen Navigation bar in next.js and tailwindcss from scratch step by step tutorial. Target Audience: Beginner friendly so all can join to learn. You can continue parallel with me for a better understanding of the web concepts & uplift your design/dev skills up to the next level in a short span of time.✌🏻 📚 Materials/References: 🔗 Starter Kit:- git...
💻 Learn Fetch data in Next.js | Rest API beginner friendly tutorial
Просмотров 4,6 тыс.Год назад
This tutorial will teach Fetch data in Next.js (client-side) fetching. You can continue parallel with me for a better understanding of the web concepts & uplift your design/dev skills to the next level in a short time.✌🏻 📚 Materials/References: 🔗 Starter Kit (give it a star ⭐):- github.com/Streamline6/starter-kit 🔔 Support me, Subscribe for more! ruclips.net/user/Streamline13 😊 Follow Me: Insta...
Responsive Side Navigation Bar in Next.js & TailwindCSS | Dashboard Sidebar Menu
Просмотров 55 тыс.Год назад
In This Tutorial, we are going to build a Responsive Side Navigation in Next.js & TailwindCSS from scratch step by step. In this, we will learn about smooth side navigation bar, pixel-perfect layout, and many more. You can continue parallel with me for a better understanding of the web concepts & uplift your design/dev skills up to the next level in a short span of time.✌🏻 📚 Materials/Reference...
🐶 Create a Responsive PetCare Website using Next.js & TailwindCSS from scratch.
Просмотров 1,6 тыс.2 года назад
This tutorial will learn how to Build a Responsive PetCare Website using Next.js & Tailwindcss from scratch.😉 👉🏻 Points To Cover: 1. How to make Responsive Navbar using headless UI(Disclosure) 2. How to make Pixel's perfect User Interface. 3. Learn about grid/flex in one go. 4. How to destructure the whole layout in small chucks. NOTE: You can continue parallel with me for a better understandin...
🟣 How to build Responsive Contact-Page | Responsive Web Page Design in next.js from scratch.
Просмотров 7012 года назад
Hey Guys 🙌 In this tutorial we will going to learn how to build responsive Contact-Page | Responsive web page design in next.js with tailwindcss from scratch step by step. You can continue parallel with me for a better understanding of the web concepts & uplift your design/dev skills up to the next level in a short span of time.✌🏻 Points to cover: 1. Learn How to make pixel-perfect designs. 2. ...
🔴 Build Responsive Travel Landing Page using Next.js & TailwindCSS from scratch.
Просмотров 6 тыс.2 года назад
In This tutorial, we will learn how to Build Responsive Travel Landing Page using Next.js & Tailwindcss from scratch.😉 👉🏻 Points To Cover: 1. How to make Responsive Navbar using headless UI(Disclosure) 2. How to make Pixel's perfect User Interface. 3. How to make Creating beautiful cards. 4. Learn about grids/flex in one go & many more... You can continue parallel with me for a better understan...
🟣 Responsive Accordion in Next.js with Tailwind CSS from scratch
Просмотров 4 тыс.2 года назад
In This Tutorial, we are going to build a Responsive Accordion In Next.Js with Tailwind CSS from scratch step by step. In this, we are going to learn props in next.js and how we can use these props in another file as children's. Pixel perfect layout and many more. Enjoy this short build ✌ 📚 Materials/References: 👨💻 Project Starter (Starter-Kit):- github.com/Streamline6/starter-kit 🔗 Project So...
🔴 Responsive Agency Website In Next.JS from scratch
Просмотров 2,7 тыс.2 года назад
In This Tutorial we are going to build Responsive Agency Website In Next.Js using Tailwindcss from scratch step by step. In this we are going to learn smooth navigation bar, pixel perfect layout and many more. Also, with lofi music enjoy your coding journey ✌ 📚 Materials/References: 👨💻 Project Starter (Starter-Kit):- github.com/Streamline6/starter-kit 🔗 Project Source code (give it a star ⭐):-...
🟣 Create Pop-Up Modal in Next.js
Просмотров 17 тыс.2 года назад
In this video, I have shown you how to create a Pop-Up Modal in Next.js with two types of Modals. Beginner-friendly tutorial & step-by-step guide is given to you from scratch 😊 👨💻 Project Starter (Starter-Kit): github.com/Streamline6/starter-kit 🔗 Project Source code: github.com/Streamline6/Nextjs-Modal 📁 Assets Icons: react-icons.github.io/react-icons/ Images: www.iconfinder.com/3d-style-icon...
🔥 Let’s Build Responsive Image Slider Using Next.js
Просмотров 14 тыс.2 года назад
In this project you are going to Learn how to build fully responsive image slider using Next.js, TailwindCSS & 3rd party package (responsive-image-slider) step by step from scratch. 📚 Materials/References: GitHub Repository (give it a star ⭐) - github.com/Streamline6/Responsive-Image-Slider ❤️ Subscribe for new videos every week - studio.ruclips.net/channel/UCfmZz9ZY8Av3c6mKBRHxiAw 🌎 Find Me He...
🔴 Let's Build & Deploy Responsive Portfolio Using Next.js & TailwindCSS From Scratch.
Просмотров 11 тыс.2 года назад
🔴 Let's Build & Deploy Responsive Portfolio Using Next.js & TailwindCSS From Scratch.
🔴 Responsive Footer using Next.js & TailwindCSS from scratch.
Просмотров 6 тыс.2 года назад
🔴 Responsive Footer using Next.js & TailwindCSS from scratch.
🔴 Responsive Navigation Bar using Nextjs & TailwindCSS from scratch.
Просмотров 28 тыс.2 года назад
🔴 Responsive Navigation Bar using Nextjs & TailwindCSS from scratch.
🔴 Responsive dashboard design with Next.js from scratch
Просмотров 19 тыс.2 года назад
🔴 Responsive dashboard design with Next.js from scratch
Thank you bro
Disclosure seems not to be working on my end😢
Hi, its really good video...☺
Great Video
But why it was not responsive for me??
Thanks so much bro! really needed this. I've just subscribed
sir to integrate link tag in menu section please help.
ese slider no slidea
waste of time. It is illution of Modal not a Modal
nice work but navbar links is just for display
Cool! Make sure to use the next/image component. Not HTML img element.
bhi keya hva hy? git hub pay wrong source code add ki hy
any tutorial for add every page ?
If I need to have dropdowns menus, How i will set this
I'm also having trouble with it on mobile, iOS, specifically. I tried updating headlessUI and adding the headlessUI plugin to my tailwind, but nothing works. 😞
trash
Your code not working on iPad mini and surface pro 7 :((( To fix: <GiHamburgerMenu className="block lg:hidden h-6 w-6" />
Very nice mate!⭐ I'm also having issues on mobile though. Working fine simulating a phone in the browser but Disclosure is not working in actual mobile device
How to navigate on section by nav?
Like and sub , more tailwind and react/next pls <3
This is super cool, I have a wordpress website, i always use plugin in my website because I don't have experience in html, css, javascript, does anyone know how can I add this beautiful side menu to my website
wow
This is not what's on the thumbnail!
Is this MIT licensed?
Hi, thanks for this video. by the way, if I make the showModal and showSecondModal true case as a component, how can I shut the modal off with cancel button? Cause i want to make that part with another component and I'm struggling with combine it... Can you give me some tips please?
you must pass setShowModal as a prop to anoter component and call it there
like and sub , next + tailwind <3
nice bro , thanks , next + tailwind <3
thanks, it helped me
Nice
accordion cannot close when its click again.
What's with the dopey music?
To be responsive the navbar should look well and adapts to small and large screens, in that code example it's looking well just for small screens, so it isn't a responsive navbar.
Love this content keep it up bro❤
Great tutorial! What is the extension you're using to highlight the ui by making boxes?
No logo position in here 😕 if you can add logo also in this tutorial that's better. Anyway great work
i am newbie and have a question, if i retrieve the article from api call, and then i have another api to add new article, how do i retrieve a newest data without reload the page ?
You’d optimistically update the UI and then use something like SWR or Tanstack Query to cache and revalidate / invalidate the cache on some interval. This means that your request will be sent to hydrate the client with new data but you won’t need to reload - it’ll be done for you. You can do this in Next13 without an external library using ISR and setting the invalidation time to something like “every 10 seconds, refetch the data”
not responsive, but good video.
Awesome bro
love it
what if use Link from next/link?
Thank you bro. It's really good 🤩
Hello Worlds , my name Dem
Hello dem, I am Nik :)
wow ! i like the way you present thing .. Nice tutorial man
Glad it was helpful! :)
So this is just unhiding a div. do you use z index to move it on top of other elements?
In this I just do some positioning of the div but you can try z-index also.
Exactly, this has nothing to do with modal lmaoo
Thanks !!
You're welcome! :)
nice track
Thanks dude :)
Awesome work
Thanks a lot 😊
please your tell ekstension in vscode
I use Tailwind CSS IntelliSense, prettier, brackets, babel, ES7 React/Redux/GraphQL/React-Native snippets.
Thank you sir so much for your time and for this awesome tutorial
Glad you liked it! :)
Thanks mate..really a good tutorial..only one issue transition is not working in Safari browser..is the transition used in classes supports safari?
Yes, it is