Видео

Thank you :)

Thank you :)

😂hehe , Thank you so much! I'm flattered to be compared to Vineet Garg. By mentioning him, you took me back to my childhood-he's a legend! ❤

Thank you :)

Sure, I've shared the Insta Id on your another comment.

Hi you can send me your message on instagram - @chitrang_sharma__

Welcome 😊

Great Idea, I will make it soon Thank you. 😊

@@geek_24 thank you 😊 🙏 like voxqube or rask ia

I'm glad it helped you. :)

Thank you :)

I'm glad it helped 😊

Hi, yes, this API is free to use, but after a certain period, you need to regenerate the keys to continue using it.

Thank you so much :)

Hi there! Thank you so much for your support and for reaching out with your question. Regarding your question about why I used React-Bootstrap version 2.0 instead of the latest version, let me explain. During the creation of these videos, my aim was to demonstrate how to utilize UI kits and templates to build admin dashboards. Unfortunately, the templates I wanted to use were built using the older version of React-Bootstrap. While there may not be significant differences between the versions in terms of core functionality, I understand the importance of staying updated. If you prefer to use the latest version, I encourage you to do so! The concepts and techniques covered in the videos should still provide a solid foundation, and transitioning to the newer version shouldn't be too challenging, especially with the help of React-Bootstrap documentation. I apologize for not being able to complete the series as intended, but I hope the content provided still proves helpful to you. If you have any further questions or need clarification on anything, feel free to ask. Have a good day :)

@@geek_24 thank you so much sir for replying and giving a thorough explanation for my doubt. You seem like a good person and i pray to god that you may achieve all the greatness that you desire in your life.

Hi, you're right, it's not responsive at the moment. Since this tutorial was aimed at beginners, I didn't focus much on responsiveness. However, I'll update the code on GitHub to make it mobile-responsive soon.

Thank you so much. Your comment means a lot to me. Your words are more precious to me than a million subscriptions. ❤️❤️

Hi, unfortunately, I do not have such a video. However, if you can explain your requirement or what you mean by a dynamically created tooltip, I can help you.

Hi there! No worries, happy to help you out with this. 1. Centering the Title:To center your Offcanvas title, you can directly apply the Bootstrap class text-center to the title element. Here's how you can do it: <Offcanvas.Title className="text-center">Your Title</Offcanvas.Title> 2. Applying Bootstrap Classes:For customizing the entire canvas and its contents, you can apply Bootstrap classes directly to the elements inside the Offcanvas component. Here's an example where I've applied classes for text color and background color: <Offcanvas.Title className="text-center">Title</Offcanvas.Title> <Offcanvas.Body className="text-white bg-dark"> {/* Your content here */} </Offcanvas.Body> 3. Container Styling:If you're facing issues with centering due to container styling, you might need to adjust the container's CSS separately. Inspect the elements using your browser's developer tools to identify the relevant container and then apply custom CSS or additional Bootstrap classes as needed. 4. Div Wrapping:While wrapping content in divs and applying classes is common, make sure you're applying classes to the correct elements within the Offcanvas component. Sometimes, applying classes directly to the component's elements might yield better results than wrapping them in additional divs. By following these steps, you should be able to customize the styling of your React Bootstrap Offcanvas component effectively. If you encounter any specific issues or need further assistance, feel free to ask!

@@geek_24 I´ve done it like this: return ( <> <Offcanvas className="bg-dark" show={show} onHide={handleClose} {...props} backdrop={true} placement="end" name="End"> <Offcanvas.Header closeButton> <Offcanvas.Title className="text-center text-white"> Terms of use </Offcanvas.Title> </Offcanvas.Header> <Offcanvas.Body className="text-white bg-primary"> By using this site, you agree to refrain from using profanity, racism, or any form of offensive language when creating or commenting on recipes. We promote a respectful and inclusive community environment. </Offcanvas.Body> </Offcanvas> </> ); Still the title inside the header of the canvas is not centered. If i put the text-center directly into the offcanvas (where "bg-dark " is, only the text inside the body gets centered but not the title. I think the problem could be the closeButton in the header. But these are the things which confuse me a little as i´m new to programming in general :D EDIT: The closeButton is a flex element and seems to have around 232 margin to the left, which i think prevents the title on the left to be moved to the right.

❣Thank you.

You're welcome! :)

Thank you :)

😊 Thank you.

Hey there! That's awesome to hear that you're considering getting into SaaS! Starting with web development is definitely a solid move. Here's a step-by-step guide to help you get started: Learn the Basics of Web Development: Begin with HTML, CSS, and JavaScript. These are the building blocks of web development. You can find numerous tutorials on RUclips, or you might want to consider online courses like those offered on Codecademy or freeCodeCamp. you can watch my videos as well :) Choose Your Tech Stack: Decide on the technologies you want to work with. For SaaS, you'll probably need to learn a backend language/framework such as Node.js, Django, or Javs SpringBoot, along with database management (SQL or NoSQL). Build Projects: Practice is key! Start building small projects. Try to recreate popular web apps like a to-do list, a blog, or a simple e-commerce site. This will help you solidify your learning and gain practical experience. Learn about SaaS: Understand the principles of Software as a Service. Learn about subscription models, user management, data security, and scalability. There are many great resources available online and in books. Work on Your SaaS Idea: Start brainstorming and refining your SaaS idea. Consider the problem you're solving, your target market, and what makes your solution unique. Refine your idea through market research and competitor analysis. Prototype and MVP: Build a prototype or Minimum Viable Product (MVP) of your SaaS idea. Keep it simple and focus on the core functionality. This will help you validate your idea and get feedback from potential users. Launch and Iterate: Once you have your MVP, launch it! Gather feedback from your users and continue to iterate and improve your product based on that feedback. Keep Learning: Web development and SaaS are continually evolving fields. Keep learning and stay updated with the latest technologies and trends.

@@geek_24 thanks for all this information brother! Finished relearning html and almost done with css and will start javascript soon! I started with replicating above project first and didn't knew much and now understand almost a lot of things haha! Btw Any way we can connect?

@@aryanimagine Glad to hear you found the information helpful! You can connect with me on Instagram at @chitrang_sharma__

Hi, I don't have a video for that but adding zoom is very simple, you just need to define one property i.e zoomType:x (for zoom in x axis) Here is a simple example that might be helpful for you. Code: Highcharts.chart('container', { chart: { type: 'line', zoomType: 'x' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); You can try this. Let me know if you have any questions I will try to answer them as soon as possible.

@@geek_24 Thanks bro. Do you know about the Range selector in highcharts which can work dynamically (I have an api that gives constant data )?

​@@suyogdhadwe3625 If you want to make a range slider, similar to what we make using <input type="range"/> in html, then yes you can make it using "rangeSelector" type of chart available in highCharts, You can check this example: Highcharts.stockChart('container', { rangeSelector: { selected: 1 }, title: { text: 'Dynamic Range Selector Example' }, series: [{ name: 'Data', data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] // Sample data }] }); Just put your constant data in the data array. I hope this helps :)

@@geek_24 Thanks you bro 😇. I really need these in the project.

Thank you so much 😊 Would you be interested in more tutorials on Highcharts?

Thank you, sure will do! Stay tuned :)

Hi there, For IntelliSense and class completion using ctrl+space, you need to install the Tailwind CSS IntelliSense plugin in your VS Code text editor. Once you install it, you will be able to add classes and get auto-completion. Additionally, I have provided another video link of mine with a timestamp of 12:26 where I demonstrate how to install the extension. You can watch it here: ruclips.net/video/z7xpDnHQO_A/видео.htmlsi=dIdfMX0DYjsbl69O. Let me know if you have any further questions.

Thank you so much :)

😊Thanks a lot

Sure I'll make a short on that maybe. But thank you for the comment 😊

@@geek_24 Thannk you ! Looking forward to it.

You're welcome 😊

That's Amazing 🤩

Then i asked GPT he said "It seems like your page is going blank because you're trying to access properties of weatherData without ensuring that it exists. When your component first renders, weatherData is initialized to null, and accessing properties of null will throw an error, causing your application to crash. To fix this issue, you need to add a conditional check to ensure that weatherData exists before accessing its properties. Here's how you can modify your Temprature component to handle this:" -----------Now tell me how i check weatherData is exist or not

Hi. Sorry for the confusion. I would request you to please continue following the video around 1:01:34. I have explained why this is happening and how to resolve it. I hope that will help.

😃I'm glad it helped

Glad it was helpful!

​@@geek_24 How can I customise close button

@@rajchowhan8132 To customize the close button in the React Bootstrap Offcanvas component, you can use the Offcanvas.Header component and provide your own custom close button within it. Here's how you can modify your code to achieve this: <Offcanvas.Header closeButton> <Offcanvas.Title>Offcanvas</Offcanvas.Title> {/* Custom close button */} <button className="btn-close" onClick={handleClose} aria-label="Close"></button> </Offcanvas.Header>

😊Thank you so much. I'm Glad it helped you.

Thank you for the comment! You're absolutely right. As this is a beginner-level tutorial, I haven't implemented debounce functionality in this video. However, I appreciate your insight, and I'll definitely consider incorporating it into future videos to enhance the application's performance. Your feedback is valuable, and I'm grateful for your helpful suggestions. Thanks again for taking the time to share your thoughts!

😊 Thanks a lot

😄

Most Welcome.😊

Thank you so much 😊