Видео

When working with a single element, like text in Figma, you can directly apply Auto Layout without needing to group it. However, grouping elements before applying Auto Layout is common when working with multiple objects, as it organizes them into a flexible, structured layout that adjusts dynamically. For a single element, Auto Layout may not be as useful on its own unless you're planning to add more elements later or want to control alignment and spacing for future design adjustments.

I'm glad you like it

Sure thing! Here's the link to the entire playlist ruclips.net/p/PLcXTWCir0QCuxDvLg3W0RIhbSXESMvrL0

I can definitely help you with that! Stay tuned for a tutorial on using Gulp + Vite instead of Webpack.

Embrace the process of learning and you'll go far!

Thanks so much! Appreciate it

Thank You! Appreciate it

I can definitely do that. Let me ask you this. What would you like to learn when it comes to Wp? Plugin development or WP Theme development?

@@JCBCB wp tm development

Sounds like a plan

Good idea! I usually use Docker with a basic flask app environment. But definitely can look into Django as well

Much appreciated! Thank you. Make sure to smash that like and subscribe

Hi There! Thanks for dropping a comment, appreciate it! Apologies for not adding it. I've just updated the description of this video and included the GitHub public repo. See below: ➡ **GitHub Repository**: [Blazor Server AI Chatbot Development Series](github.com/JaquesBotha/Blazor-Server-Vehicle-Inventory-Ai) In the Repo I've included steps to make sure you get this up and running! Note, I will be adding to this repo as I post more videos to this playlist. Thanks for watching!

Absolutely. I really like how DaisyUi just simplified the HTML big time!!!

Good call!

Interesting. Will look into that for sure. I’m in the process of working on a Blazor sever in .net8 docker container using cosmosDB and setting up OpenAi GPT model to process data in database. Also using TailwindCSS for styling

Glad you liked it. Azure Virtual Desktop is indeed super powerful. The trick is to optimize it so that you can get the best out of it

Agree!

Absolutely! Probably going to do it in ReactJs coupled with Nextjs and TailwindCss... Thoughts?

@@JCBCB I'm still waiting, can you please use bootstrap with vite and make simple setup to avoid too complex set up

@Humbulani-j3c Thanks for the reminder! I’ll be back to posting videos soon. While my upcoming focus will be on Tailwind with Next.js and Firebase, I’ll also look into creating a simple setup with Bootstrap and Vite as you requested. Vite is quite similar to Next.js in terms of simplicity and performance, so I’ll keep the setup straightforward and easy to follow. Stay tuned for more content!

@@JCBCB thanks in advance.

Thank you for the kind words and encouragement! Let's see what happens 🙂

Your support means a lot, Thank You! It's viewers like you that keep me motivated to create more content.

Thanks for your feedback. The purpose indeed was to keep it simple.

Thanks so much! Appreciate your kind words. And you’re absolutely right, really enjoy creating these videos!

So glad you getting something out of my videos!

Well and how can I make this work and look good on every phone? Because the way you’ve shown, it will only work for the iPhone 15 right?

İlginç, bunu bilmiyordum, bana söylediğiniz için teşekkür ederim. Bunu kesinlikle aklımda tutacağım ve yaklaşan videolarımda altyazı eklemeyi sağlayacağım.

@@JCBCB thanks 💐Good luck with your work

Hi there! I'm glad you're tackling this challenge on a Mac, and I'm here to help! I've recently made the switch to Mac as well, so I understand the specific issues you might face. Let's go through the steps to address your concerns with your current setup: 1️⃣ Port Adjustment: Great job on changing the port to 6000. You need to ensure this is consistent in both your Dockerfile and app.py. Update your app.py to have the port set as 6000 🖥️ app.run(host='0.0.0.0', port=6000, debug=True). And then in your Dockerfile, reflect this change: 🖥️ EXPOSE 6000 2️⃣ ALWAYS Remember to Rebuild Your Docker Image & Container. Docker Build and Run: With the changes made, rebuild your Docker image and rerun it: Build Docker Container: docker build -t yogafitness . (DON'T FORGET THE DOT AT THE END) Run & Map Docker Container With Repo (Mac/Linux): docker run -p 6000:6000 -v ${pwd}/src:/app/src -v ${pwd}/app.py:/app/app/py yogafitness Questions For You: 1. Did you install Docker Desktop? 2. Where you able to successfully install NodeJs on your local machine? Remember, there's no such thing as a stupid question here-we're all learning and helping each other grow. Once you've had a chance to look into these areas, let me know how it goes. I'm here to help!

Thanks man! Appreciate the sub! Dropping a video today on creating a dark mode for this design.

Thanks for dropping a comment. Figma is quite a game-changer. Just released a video recently on how to design a mobile app. If you're interested make sure to check it out Design a Modern Mobile App - From Beginner to Pro in One Video! ruclips.net/video/wrFd0B77qGY/видео.html

Honestly, I don't think so. I think it's more meant for CC0 sharing.

Thanks for the feedback, truly appreciate it. I'm a big fan of Auto Layout just because it basically cut my design time in half. No more figuring out if alignments and spacing is correct. The down side, takes a bit to get use to. But thanks for the title feedback, you have a valid point!

Thank you! Will do 😀

That's awesome! Thanks for subbing, happy to have you on board!

Thanks a ton! :)

I'm glad you found the video helpful!

My pleasure. Glad you like it!

Hey, thanks for the love! Figma really is a game-changer for design, glad you liked the video!

Thank you! Appreciate it.

Thanks man! I'm a huge fan of Bootstrap just because of its simplicity

Thank You! I use the base theme of VS Code. However, I do have a few extensions installed that makes my file/folder structure look different. Here's a list of some of my extensions that might effect the layout or view of my Vs Code: Better Comments ➡️ Gives the ability to style comments within your code. Material Product Icons & vscode-icons ➡️ This changes or adds icons to your files/folders. indent-rainbow ➡️ Makes indentation easier to read.

Great question, and I'm SUPER glad you brought this up! While it's true that Webflow and other sophisticated website builders provide an incredibly user-friendly and efficient approach to web design, especially for those who prefer a more visual interface, there are several compelling reasons why I lean towards coding, particularly using VS Code, for web development. 1️⃣ Complete Control and Customization: Coding from scratch, especially with powerful tools like VS Code, gives you unparalleled control over every aspect of your website. You can fine-tune every detail according to your or your client's specific needs, which is often limited in template-driven platforms like Webflow. 2️⃣ Advanced Integration Capabilities: When it comes to integrating with backend services, especially in production environments on platforms like Azure or AWS, coding provides a direct and flexible approach. VS Code, coupled with its extensive range of extensions and support for various programming languages, makes it easier to integrate complex functionalities and cloud services that can be crucial for scalable, enterprise-level applications. 3️⃣ Freedom and Scalability: With coding, you're not confined to the constraints of a website builder. You can scale your project, integrate with various APIs, and incorporate emerging technologies without being limited by the platform's capabilities. 4️⃣ Skill Development and Marketability: While Webflow is convenient, mastering coding and familiarizing yourself with development environments like VS Code can significantly enhance your skill set, making you more versatile and marketable in the tech industry. 5️⃣ Cost-Effectiveness: Depending on the scale and nature of your projects, coding can be more cost-effective in the long run, as you're not tied to subscription fees or limited by the transactional costs associated with hosted platforms. In conclusion, while Webflow is indeed a powerful tool for certain use cases, the depth of control, integration possibilities, and the freedom that coding offers, especially when paired with a versatile editor like VS Code, can be invaluable for professional web development, particularly when working on complex or large-scale projects.

@@JCBCB Thanks for taking the time to respond.

Thank you for sharing your thoughts! You bring up some excellent points regarding Tailwind and Bootstrap. Indeed, Tailwind CSS offers a lot of flexibility and speed, particularly in designing mobile-first and responsive websites. Its utility-first approach can significantly streamline the development process, especially in smaller or medium-sized projects. However, I resonate with your perspective on using Bootstrap for larger, more complex systems. Bootstrap's predefined classes and components provide a structured and consistent framework that can be incredibly beneficial when managing extensive projects. The clarity and predictability of Bootstrap's classes can simplify maintenance and enhance team collaboration, which is crucial in larger projects. Moreover, Bootstrap's JavaScript components offer out-of-the-box functionality that can be a game-changer for interactive and dynamic web applications, reducing the need for additional scripting. Both frameworks have their strengths, and the choice often depends on the project's specific needs and the team's familiarity with the framework. For complex systems, where maintainability and scalability are paramount, leveraging Bootstrap's comprehensive ecosystem can indeed offer more impactful benefits. I appreciate your engagement and am glad to discuss these insightful comparisons. It's conversations like these that deepen our understanding and help us choose the right tools for our projects. THANK YOU!!!

Your support means a lot! I'll definitely consider creating a course on Astro Framework and Tailwind.

Thanks for your input! I also appreciate the strengths of Tailwind CSS, especially its utility-first approach that offers great customization and faster styling process. It's fantastic for developers who prefer more control over their design without the extra bloat of unused styles. Every tool has its place, and for projects where granular control and efficiency are key, Tailwind CSS indeed shines!

@@JCBCB Thanks for the deep information ❤️❤️❤️❤️

Thank You!

Thank you for your feedback!

Your support means a lot to me, thank you!

Thanks for your question! When I mention the 'bootstrap method' in my video, I'm referring to the practice of integrating Bootstrap, a popular front-end framework, into the UX/UI design process. This framework provides a comprehensive library of pre-designed components, such as buttons, navigation bars, and forms, along with a cohesive system for colors, typography, and spacing. The goal of using Bootstrap in design is to create interfaces that are closely aligned with the needs and capabilities of the development team. By leveraging Bootstrap's components and guidelines, designers can ensure their designs are not only visually appealing but also 'development-ready.' This means the transition from design to code is smoother and faster because the design inherently follows the structure and standards the development team will use. In my experience, adopting this approach significantly reduces the back-and-forth between designers and developers. It minimizes the time spent on adjustments and revisions to make the design fit within the constraints of the development framework. Essentially, it's about creating a more efficient and harmonious workflow where designs are optimized for implementation right from the start. I hope this clarifies what I meant by the 'bootstrap method.' It's a strategy I've found incredibly useful for streamlining the design-to-development process, ensuring that we can move from concept to completed project more swiftly and with fewer obstacles. Here's a few of my videos where I showcase this in action: 🎥 Modern Website Design Complete Tutorial Using Bootstrap: ruclips.net/video/ddOlMDN5O_c/видео.html 🎥 Setting Up Bootstrap (If You're Interested 😀): ruclips.net/video/Ep9M-aEc7WE/видео.html 🎥 A Great Beginner Friendly Video Using Figma & Auto Layout: ruclips.net/video/oUwDJRDLRt4/видео.html