- Видео 19
- Просмотров 210 900
Your Code Lab
Добавлен 2 дек 2022
Our RUclips channel is the perfect place for web developers to learn and improve their skills. We specialize in tutorials and courses on the latest web development technologies, including ReactJS, NextJS, JavaScript / Typescript, Tailwind CSS and much more. From learning the basics of web development to mastering advanced concepts and best practices, we've got you covered. Our videos are designed to be easy to understand and follow, making them perfect for both beginners and experienced developers. We are dedicated to providing high-quality content that is up-to-date with the latest trends and technologies. Subscribe now and join Your Code Lab to start your web development journey and build amazing projects.
Contact: nimogha@gmail.com
Contact: nimogha@gmail.com
Build a Video Conference App with React and ZEGOCLOUD Video Call API
· Get ZEGOCLOUD UIKits for 10,000 free mins: bit.ly/43fgTMr
· Take Advantage of ZEGOCLOUD: bit.ly/49OIKph
· Learn about 100% customized video call SDK: bit.ly/3Piw021
· How to build a video call App: bit.ly/3PhBsC0
ZEGOCLOUD video call SDK &API allows you to easily build your live video chat apps within minutes.
🚀 Welcome to Your Code Lab! In this step-by-step guide, we'll cover everything you need to know to create a seamless video conferencing experience in under 9 minutes. From setting up your development environment to integrating ZEGOCLOUD's Video Call UI Kit, we'll walk you through each stage with clear explanations and practical examples.
🌟 Key topics covered in this tutorial:
- Setting ...
· Take Advantage of ZEGOCLOUD: bit.ly/49OIKph
· Learn about 100% customized video call SDK: bit.ly/3Piw021
· How to build a video call App: bit.ly/3PhBsC0
ZEGOCLOUD video call SDK &API allows you to easily build your live video chat apps within minutes.
🚀 Welcome to Your Code Lab! In this step-by-step guide, we'll cover everything you need to know to create a seamless video conferencing experience in under 9 minutes. From setting up your development environment to integrating ZEGOCLOUD's Video Call UI Kit, we'll walk you through each stage with clear explanations and practical examples.
🌟 Key topics covered in this tutorial:
- Setting ...
Просмотров: 143
Видео
Make an Animated Accordion Component purely in React and Tailwind CSS
Просмотров 3,1 тыс.4 месяца назад
🚀 Welcome to Your Code Lab! In this tutorial, we'll see how to create a Animated Accordion Component using React and Tailwind CSS from scratch in under 7 minutes. 🌟 Key topics covered in this tutorial: - Creating custom React Tailwind CSS components. - Creating a flexible, customizable and reusable Accordion Component for React. - Implementing smooth animations with Tailwind CSS built-in featur...
Build a Code Screenshot React Project (Ray.so Clone) with Tailwind CSS and ShadCN UI
Просмотров 4,1 тыс.8 месяцев назад
Learn how to create a stunning Code Screenshot React Project in this step-by-step tutorial! In this video, you'll building your own version of fully functional Ray.so Clone, a powerful tool for sharing code snippets. Using 10 elegant themes, 12 font styles, and multiple customization options share beautiful screenshots of your code on your social media platforms. With the combination of Tailwin...
Add Infinite Scrolling to your React JS Projects using Intersection Observer Hook
Просмотров 5 тыс.10 месяцев назад
#reactjs #reacthooks #reactjstutorial #webdevelopment #javascript #tutorial #socialmedia In this comprehensive tutorial, you'll learn how to implement infinite scrolling in React using Intersection Observer API under 9 minutes. You might have came across infinite scrolling in social media applications, since it's very commonly used, but its setup can be daunting. This video aims to simplify the...
Build a Plan Selection Page with Custom Radio Component using React and Tailwind CSS
Просмотров 3,3 тыс.10 месяцев назад
In under 8 minutes you'll learn how to create a visually stunning Pricing Selection Page with a Custom Radio Component only using React and Tailwind CSS! In this comprehensive guide, we will walk you through the process of building an interactive pricing page that allows users to select different pricing plans with ease. 🔧 In this tutorial, you will learn: - Building a custom radio component. -...
Build a Retractable Sidebar Component purely in ReactJS and TailwindCSS
Просмотров 82 тыс.10 месяцев назад
In under 7 minutes you'll learn how to build a retractable and fully-functional Sidebar Component from scratch, using only React JS and Tailwind CSS! In this step-by-step guide, we will walk you through the process of creating a dynamic and visually appealing sidebar for your React JS projects. 🔧 In this tutorial, you will learn: - Creating a full-functional sidebar layout - Adding responsive a...
Build a Toast Notification Service purely in ReactJS and TailwindCSS
Просмотров 6 тыс.Год назад
#reactjs #reactjstutorial #toast #tutorial #tailwindcss #webdevelopment In this tutorial, we'll walk you through the process of building your own toast service using only ReactJS and TailwindCSS in under 7 minutes. Toasts are an essential part of any modern web application, providing users with important feedback and notifications to the users without interrupting their workflow. By the end of ...
Build a Modal Component purely in ReactJS and TailwindCSS
Просмотров 17 тыс.Год назад
#reactjs #reactjstutorial #modal #tutorial #tailwindcss #webdevelopment In this video you'll learn how to make a Modal or Dialog Box Component in ReactJS and Tailwind CSS from scratch (without any additional libraries) under 6 minutes, which will be a reusable and customizable component that you can use in your own projects. We will also cover how to add smooth transitions to the Modal Componen...
Link Shortener Project with Svelte Kit and PocketBase #3 - Implementing link shortener
Просмотров 513Год назад
#svelte #sveltekit #linkshortener #urlshortener #tutorial #webdevelopment Throughout this 3 part project series, we are going to build a Link Shortener app using Svelte Kit and PocketBase. I believe those to be the perfect combination to quickly build a small to medium project. In this video, you'll learn how to a link shortener logic works and how to implement one of your own with svelte kit a...
Link Shortener Project with Svelte Kit and PocketBase #2 - Complete user authentication
Просмотров 643Год назад
#svelte #sveltekit #linkshortener #urlshortener #tutorial #webdevelopment Throughout this 3 part project series, we are going to build a Link Shortener app using Svelte Kit and PocketBase. I believe those to be the perfect combination to quickly build a small to medium project. In this video, you'll learn how to setup a complete user authentication system with svelte kit and pocketbase, which i...
Link Shortener Project with Svelte Kit and PocketBase #1 - Setup & Configuration
Просмотров 1,2 тыс.Год назад
#svelte #sveltekit #linkshortener #urlshortener #tutorial #webdevelopment Throughout this 3 part project series, we are going to build a Link Shortener app using Svelte Kit and PocketBase. I believe those to be the perfect combination to quickly build a small to medium project. In this video, I'll cover all setup and configuration we'll need to start up the project, including setting up the Sve...
Start building projects with Svelte Kit under 20 minutes.
Просмотров 959Год назад
#svelte #sveltekit #tutorial #webdevelopment #crashcourse In this video, I'm going to show you how to get started building projects with Svelte Kit in under 20 minutes. Svelte Kit is a powerful framework that makes it easy, fast, and fun to create websites. Whether you're new to Svelte Kit or just looking for a faster way to build user interfaces and websites, then this video is for you! By th...
Build a Carousel Component like Instagram purely in ReactJS and TailwindCSS
Просмотров 74 тыс.Год назад
#reactjs #reactjstutorial #carousel #tutorial #tailwindcss #instagramclone In this video you'll learn how to make a carousel or image slider component very much like instagram in ReactJS and Tailwind CSS from scratch (without any additional libraries) under 10 minutes. It works with images as well as videos and also supports auto sliding feature, previous/next controls and bottom indicators. Co...
Custom card component in ReactJS and TailwindCSS under 3 minutes
Просмотров 6 тыс.Год назад
#reactjs #reactjstutorial #tutorial #tailwindcss #javascript #webdevelopment In this video, you'll learn how to make a cool image card component in React and Tailwind CSS from scratch (without any libraries) in under 3 minutes. Socials: Instagram: ycldev Twitter: YourCodeLab This video covers: how to make a card in react? custom image card react custom card in react a...
Animated icon button component in React and Tailwind CSS
Просмотров 2,5 тыс.Год назад
Animated icon button component in React and Tailwind CSS
Custom switch component with transitions in React under 4 minutes.
Просмотров 1,2 тыс.Год назад
Custom switch component with transitions in React under 4 minutes.
Custom dropdown menu in React from scratch under 7 minutes.
Просмотров 2 тыс.Год назад
Custom dropdown menu in React from scratch under 7 minutes.
Quickly setup Tailwind CSS with React.
Просмотров 1,3 тыс.Год назад
Quickly setup Tailwind CSS with React.
Very usefull and clean code. I liked this accordion using Context, which is better for customization. Thank you so much
This video has really helped me a lot. Thank you man 👍
can you tell me ehat kind of theme and font you use it amazing
Monokai Pro (filter spectrum) and Cascadia Code
Can i create a sidebar on a browser ? i am not a web dev, however i need to implement something like this.
I did not get your question.
hey dude the code shows multiple errors and its not the same ive sent a recording in github
I think you have implemented 2 sidebars one below the other and didn't specify a max width.
thank you!!! amazing video
Can’t thank you enough man 👏🏾👏🏾 continue with a navbar
Navbar sure is on the list 👍
Get rid of that horrible font please............
What's wrong with the font?
@@ycldev it's some weird curly cursive looking thing. Just makes it much harder to read
Oh, btw I have changed the font in the recent videos.
Bro just subbed to your channel , can you make more videos like this . I like your taste in UI/UX and your explanations are amazing. Can you make a video on background flares, gradient etc. like top 10 ways to use backgrounds on your site with tailwind.
Thank you brother 😊 I have a few interesting project ideas but finishing their features is taking more time than I anticipated. Can you tell me more about that, maybe that'll be something I can work on.
Can you make a version with sub-item (like clicking on one of the sidebar item, it would toggle to show its children)?
Sure, that could be done with a few tweaks.
Wow. That’s impressive
How this will be look in mobile screen ?
You can make it absolute on mobile.
This video is very helpful to me, thank you so much
I am glad you found it helpful
I'm trying to use the code but the App.jsx is not showing, when I put it on the main it don't even show the rest of the code (if i quit the App.js it shows the Sidebar.jsx) so yes, im having a problem with the App.jsx, please help
I think you are having problems with the placement of sidebar with other content. Try wrapping them with a flexbox container.
thank you
You are welcome!
Awesome work bro 🎉
Thanks buddy 🤟
Thanks for great tutorial. What is the font you using?
Cascade Code or JetBrains Mono, not sure.
Great ilustration of how to create a Modal Componnt in React (with TailwindCSS) - Thanks. {2024-04-06} - Subscribed!
Thanks for the sub 👍
@@ycldev - Thank you for the tutorial.
keep doing this man!!! awesome
Thanks, I will!
on desktop mode it shows half the image and the other half of the next image, is there any way to so that it shows on one image at a time on desktop?
Are you sure you used images of similar dimensions?
@@ycldev yes they are almost the same, I tried giving separate width, and figured out that after 45~46rem, the next images tries to show up a little bit. So can you try to tweak it a little bit so that it can be used in full screen, on desktop mode. On mobile, since the width is less, it work fine..
Try using a max width on the container. But for full screen with the image may not fit perfectly so try object-fit cover or fill on the images
Unexpected face reveal.
Can't do a video conference without that 😅😅
Amazing man you saved my day!! Appreciate
Have a nice rest of the day 🤟
what theme are you using please? I like your fonts
The theme is Monokai Pro (Filter spectrum) and the font may be Cascadia Code or JetBrains Mono
Nice job! Please, why the forwardRef? I followed your steps and removed the forwardedRef part and it still worked perfectly?
It is used to carry on the reference to a dom element, that way you can access the underlying input ref using the useRef hook.
Thank you so much for this helpful tutorial!
Goshhhh you're the best, so simple and straight to the point......Please do moreeee😭😭😭😭....Thank you Thank you🙏....
Thank you for appreciating. I'll be posting more soon.
😱 you did in less than 100 lines. It would have took me 700 lines to not even a accomplish close to that. Nice job
Well, it took some tries to optimize the code to the point it couldn't be any shorter. Earlier versions had double the code, half the features and a bunch of bugs🤫
In instagram if the images are more the dots are still remain this is the main functionality can u create this
A little tricky but you can start by limiting the number of max dots and decreasing the size of the first one if curr+2 > max dots and last one if curr+2 < number of slides
bruh plz uploaded all the files
Hi do you have a video on how to make this slide appear to transition infinitely instead of it reaching the end of the slide and moves back all the way to the beginning?
We currently do not. But we will definitely follow up on this video, and make it better.
Very helpful and quick video. Is there a version that can be dragged left and right with the mouse?
I think that's not possible with our current implementation. You can look at the shadcn ui carousel component it is feature complete.
thank you sir
You are welcome 😊
lot of love you are great
Thanks brother 😊
great tutorial man, thanks.
Thanks for appreciating 😊
short and awesome it deserves a subscribe and like
Thanks for the sub Jaya glad you liked the content.
Amazing content, short sweet & simple. You got another subscriber!
Thank you for appreciating the work brother. Happy you found it helpful 😊
Great content
lucide react error is showing
Ty man, i was looking for this kinda video tutorial, can you tell us the vs theme u are using?
Hey Diego, I am using Monokai pro theme, filter spectrum to be precise.
Can you help? I have an intersectionObserver LOADMORE that only works on small screens but not large. What am i doing wrong? function loadMore() { if (!allPosts.value.next) { return; } axiosClient.get(allPosts.value.next) .then(({data}) => { allPosts.value.data = [...allPosts.value.data, ...data.data] allPosts.value.next = data.links.next }) } onMounted(() => { const observer = new IntersectionObserver( (entries) => entries.forEach(entry => entry.isIntersecting && loadMore()), { rootMargin: '-250px 0px 0px 0px' }) observer.observe(loadMoreIntersect.value) })
Amazing video! I was about to install bootstrap whilst using tailwind...This one saved me < 3
Always happy to prevent a bootstrap install😄
Great video!
We could use headlessUI for this but this is awesome content! And great to know.
Where's the fun in using pre made components 😆
@@ycldev exactly that's why I searched hahaha because I didn't want to use headless ui
what is your vscode font family name?
It's Cascadia Code
Awesome
hi am using accordion instead of li how to achieve the same action
Did you try to wrap that inside li tag?
Brother failed to load jsconfig.json . Couldn't find tsconfig.json error is showing and one more issue is there I am getting one more option that is : Are you using a custom tailwind prefix eg. tw-? . What can I do now
I see they have changed the installation docs. You should check the typescript section, on how to opt out of it. For the custom Tailwind prefix you can leave it empty.
They showing me error this only for typescript so how can I do now
How can be make it responsive?
It is already responsive you just have to limit the max width of the container for how wide you want the carousel to be.
Hey, bro, why is my li tag fixing the width,
I didn't quite get your issue.
Amazing content, this is what I was looking for. keep it up man💗
Thank you for your kind words brother 😊