AI Vibe Coding with Claude Build Without Writing Code

1. Introduction: Hello, everyone. Welcome to the class of vibe coding with Cloud AI. And this is a complete beginner to advance level class and designed to help you to build a modern professional wordpress theme, plug ins ses with the power of AI with a vibe coding. Whether you were a complete beginner, a web developer, a freelancer, or a programmer or a wordpress enthusiast, this class will teach you how to use Cloud AI as your artificial intelligence or AI coding partner to build high quality SAS, as well as the Wordpress solution in faster, smarter and more efficient way. So ultimately, traditional wordpress development often require writing thousands of lines of code manually. But with the vibe coding, you will learn how to communicate with AI and using well structured prom to generate, improve debug and optimize code while maintaining the professional development standard. And not only for Wordpress, it's all about developing the SAS, developing the application. You will learn from zero or from the root to add fans. So let's take a look what you will learn from the class. You will learn about to understand the fundamental of vibe coding with Cloud AI. You will learn about the effectiveness writing prompt for AI assisted for wordpress theme development, Wordpress plugin development. You will learn about build a custom WordPress theme from the scratch. You will develop feature rich wordpress plugin. You will also learn about the applied security technique. You will learn about the optimize, you will learn about the debug test and improve or generate the code. After completing this class, you will able to do you will build a professional wordpress theme independently. You will learn about the Tablop secure scalable and maintainable SAS application. Also, you will be able to use Cloud AI to accelerate development without compromising the code quality you will able to debug and optimize AI generated code with confidence. You will able to develop production ready, wordpress theme or plug ins from concept to deployment. This is a project based class, so you will have class project. So what you will learn or what lesson you will learn, you will have the opportunity to participate in class project, or you can consider the class project tap as your homework. So during learning, if you required the required necessary file like PRD, like the prompt, like the other essential document, everything is given inside the resource folder, so you don't have to worry about while learning because we have provided everything that required inside the resource folder. This is the beginner friendly beginner to advance level class. So if you have zero knowledge, then you don't have to worry about because together, you and me, we will learn from the very basic to advance level. During learning, if you face any issues, then you don't have to worry about. You just have to ask me the question, and I'm always there for you to help you out for facing any issue. You just have to ask me the question while learning. So what are you waiting for? I'm excited to have you in our class, and let's start learning vibe coding with quad together. 2. Starting With Vibe Coding: Hello, everyone. Welcome to the very first lesson of learning Cloud vibe coding. Cloud vibe coding is an AI assistance software development approach where you describe what you want to build in natural language and Cloud AI will generate most of the code. Instead of writing every line manually, the developer focused on providing clear instruction, reviewing and generating the code, testing it, and finally refining the product. The term vibe coding become popular in few years, and it's described a development style where EI acts as a collaborative coding partner, and it will allow developers to build application much faster. So I hope you got the idea what the vibe coding is. And there are lots of platforms for vibe coding like Claude, Jamini CRs or Chat GPT, and many more EI modules are available. But in this class, we will focus on about Cloud, and with the cloud, we will develop different type of application with the vibe coding. So ultimately, if you don't have any previous knowledge about the coding, in that case, you don't have to worry about because with the vibe coding now, you can develop any kind of application, any kind of sets, any kind of apps, everything you can do with the prompt engineering or with a proper command. So you don't need the coding experience, you need to know how to put the command for generating your output, right? So let's have an example. So previously, for making a calculator, you had to write lots of codes. But nowadays, making a calculator is very easy. Even the calculator that is provided by Windows default system, let me open it. You can see in my screen, this is the default windows calculator, and this calculator had lots of codes in backend. And for making a calculator in a few years back, it takes more than two weeks to one month for making a calculator. But nowadays, it's quite easy. You can see in my screen, I have opened clo.ai. Okay? So this is my URL for generating. And here I'm writing Make a calculator. Okay, so what I have written here in my serge box, I have written make a calculator, and I have click this send message button and you can see the process is started, and you can see a hash key have been generated in my browser, and this project is named as a building a calculator. And you can see here, you can see in this bid that the parts that need to be executed for making a calculator is executing and the process is moving on the background. So we have to wait a little until the calculator is created. So let's wait for a few. And here we go. You can see the output, and you can see in here, the calculator is created in here. Okay? So let's take a look. Either the calculator is working or not. Therefore, I want to multiply ten into five. So what will be the answer? Ultimately, answer will be the 50. So let's take a look. Let's hit the equal button and you can see, we got our answer. That means this calculator is now working. So can you see the difference? Now, you can create a calculator within just a command. So what I have written here in Cloud, I used only a single command that could make a calculator, and Cloud created the calculator for me. And this is called the vibe coding. So I hope you got the practical idea how the value coding is working for. So now let's take a look what you can build with Cloud vibe coding. You can build web application, mobile application, SAS platforms, dashboard, and admin panels. RST APIs and backend services, database design, and integration authentication system, AI chatbots, and AI powered applications, landing pages, and marketing website, UIUX interface, automation tools, browser extensions. Okay. And for typical workflow, you can describe your project idea in plain English. You can ask cloth to generate the project structure. You can build one feature at a time using detailed prompts. You can review and generate the code, and you can run the application and taste the functionality. You can share any errors with the code for debugging. You can optimize refactor and deploy the application. Okay, be coding it's have some benefits as well as have some limitations, right? So if you consider the benefits like accelerate the software development, reduce repetitive coding task, make learning new frameworks easier, improve the developer productivity. Assist with debugging and code refactoring, generate documents and test. And if you consider about the limitation, then I generate code, it may have some bugs, and it could have some insufficiencies, as well as the security performance scalability still require human review, and another most important limitation is about a developer should understand the architecture and business logic. Okay, so you must have to consider the pros and con because it's have some benefits as well as have some limitations. But all the limitations can be solvable, and we will learn step by step how it will fix the security issue, how you will fix the performance, everything we will learn entirely in this class. Okay. So I hope you got the basic fundamental knowledge about the clod vibe coding, and this is what we're going to learn in our class. So in our next lesson, we're going to learn the uses of Cloud and the feature of Cloud for starting the vibe coding till the take care and good bye everyone. 3. Use Claude and Setup: Hello, everyone. Welcome back once again. And in this lesson, we're going to learn about the use of Cloud, and we will be introduced with the functionality of clot, and then we will start the vibe coding. So for starting the vibe coding, you must need to know the use of the tools of clot about the limitation, about the models, about the uses, everything you need to know before starting the vibe coding. And that's why now we will be introduced with the Cloud functionality. So you can see in my screen, I opened cloud.ai. This is this ERL in my browser, but Cloud have two type of subscription. The first one is free and second one is paid. So when you will run clod.ai in your browser, then you will have this type of interface, okay? So it will ask you for login, and you can login with your Gmail account or with your personal email account. And Cloud they do have the Dektop application as well. So instead of browser, if you want to use their Dexter version, in that case, you have to download the Deckstop app, okay. So ultimately, the clot AI can be used free, but with the free feature, you will not be able to use all the paid tools like clot design, clot code, and you will have the limitation of token as well with the free version. But if you are looking to use hassle free, and you want to use all the features that have inside the clot, in that case, you have to use the paid version. So this is the interface after login, and after logging in, you will have the similar interface, and this is my paid version. So you can see at the lab site, it have a sidebar, and you can see this is the design option. So if you are looking to design anything else with the clot, in that case, you can use this one. This is for the cow and this for the clot code. So ultimately, clot code is basically using for coding purpose. But instead of clot code, you can use this chat box for be coding as well. Right? And along with that, you can use it through the Visual Studio code. And I'm going to show you how you can run clot code with the Visual Studio code. But before that, let's get introduced with the tools first at the website. This is our website board. And here you will have the option for customization, here for the artifacts, here for the projects, and here for the chats. And in here, all the previous chats, you will have inside this chat option. And if you are looking for new chat, in that case, you have to go for the new chat. And if you want to expand the website, in that case, you have to use the open sidebar option. Okay. Now, let's focus about the users and the models. So you can see in here inside the chat box, you have the models here. So if you click, you can see here the SontFive and it seems a max option. Let me describe how these things is working. So I'm clicking here and you can see, you can see right now, Cloud have total five models. This is the fable, this is the Opus, this is the Sonnet, and this is the hiko. So ultimately, Cloud is using right now total five models. And let me explain you which model is best for which type of work. So you can see this is the haiku, and this haiku is the fastest and most budget friendly models. Then if you consider about the Sonnet, this is the industry daily driver that balance rapid processing with the advanced rezoning. And then if you focus about the Opus and fib, in these two models are basically premium large scale models built for deep driving and problem solving heavy coding and complex architecture. And the fable is the latest latest model that released by Clause recently, and the fable is much advanced than UPAS. Okay? So if you were looking for the actual use case of haiku, then it will help you for high volume task where speed matters and complex judgment, ideal for transcript cleanup, bulk file reading. Quick edits and routine repetitive queries. And for this type of task, Haiku is perfect. And if you're looking for Sonnet, this is very useful for everyday professional output. It is highly capable of writing code, drafting articles, analyzing data sets, and generate business ideas as well as a client proposals. Okay. And now, if you focus about the fable fib and the OPS, these two are, as I said, the premium features of clod. And with this Opus and fable, will help you for requiring high stake decision making and deep architectural rezoning. And these two models are best for complex software engineering, financial modeling, and scientific research while accuracy is paramount. Okay? So I hope you got the idea how this four model is working on Cloud. So ultimately, fable, as I told you, fable is the latest version, and this fable have much higher capability than OPAS because OPAS was the previously advanced model, and recently, we have the fable. So ultimately, you need the hassle free and massive or large coding scale. In that case, you can consider for the Opas and the fav five. So this is all about the model name. Now, let's focus on the effort, okay? So if you click here this option in effort, you will have total five different type of effort like low effort, medium effort, high effort, extra effort, and the max effort. So you need to know one more thing that effort is basically helping you for the output, as well as the token limit. And I'm going to explain to you how the token limit is working. Fab and haiku, they have two different models. And with the effort, if you use fable, your token limit will burn very rapidly, but with the hi ku, your token will burn slowly. So how your accuracy you were looking for if you are looking to get the perfect accuracy with low token, in that case, you can use this high effort. With the high effort, you will have the less token burn, but you will have the perfect response. Okay? But if you were looking for fast output, in that case, you have to use the Max effort, but in that case, your token will burn very rapidly. Okay. And if you are clicking in these more models, in that case, you will have the older version. Like in here, it's showing Opus 4.8 models. But if you're looking for previous models like 4.7 or 4.6, in that case, you will have it inside the more models option. So inside the more models, you will have the Opus 4.7, 4.6, three, as well as for the Sonnet. This is the latest model, but if you're looking for old models, you will have in here. In here is showing 4.6. So I already told you which model is working for which purpose and how the effort is working. Now let's get introduced with the users, and this is really, very important. So for checking the users about the tokens, at first, you have to go at the left bottom to your browser. So you can see this is the icon, and it's all about your profile. So when you click here, you will have the settings option. And inside the settings, you will have this uses option. Okay? So you have to click here, this uses and now you can see there are different type of limits are indicated here. Like this is a plan uses limits, and I am using the pro version. Okay? So they have different type of models, and I'm using the pro version, and depend on your needs on your work process, you can pick any version from there, okay? So with my pro version, it have the current session limit. Then I have weekly limit. I have users credit, and I have monthly spend limit. Okay. So different type of limitation I do have, and this is what I'm going to explain to you right now how this limitation is working. So you can see the current session, and now it since you 0% use. That means in my present session, till yet, nothing is used. So let's take a look how the current session limit is working. And therefore, I'm going to I'm going to type here this Cloud AI. And now I want to write here hello. And I just hit the intro button. Okay, so it's already starting the process. And now, if you look here, that now I already consume few things, and now you can see after hitting the hello button, or I just type the halo here, then what I got, I got the answer from here. And after sending the halo prompt in here, the uses is changed. So instead of zero, now it's consumed one person news. That means in my present session, I already consumed one person news. And in my present session, when it will be reset, it will reset after four hour and 53 minutes. So Ultimately, Claude is providing five hour for each currenesson. Within five hour, you have to use your limit and how much token you have burned or how much token you have used. This is what is indicating here. So as an example, I have used one person, and now I'm writing here, write an essay for Block chain. And I'm hitting the intro button. Okay? So now, Claude will give you a detailed assay for block chain, and after getting the final result, then we have to check here that how much is using. So now you can see it here is processing the assay, and in here, you can see that instead of 1% now it's turned into 3%. And for shaking the latest uses for checking the current session, you can use this option. This is the refresh option, and you can see the last updated less than 1 minute ago. So if you're clicking here, in that case, it will update you or it will give you the refresher update report. Okay. And now you can see it's used 4%, okay? That means the result is already prepared in another tab. So let's get back to another tab. And now you can see, I already got the essay for blockchain. Cool, right? So this is my output. And for writing for writing this essay, total 4% limit have been used. And now let me click here for refreshing, ultimately, total 4% token is used from my current session. So I hope you got the idea how the current session is working and how much input and output you will receive from the chat box. Then according to your input and according to output, your Use limit will consumed. Okay, so this is all the current session. Now focus about the weekly limit, and you can see the pro version have the weekly limits, and you can see I already consumed 6% of my weekly limit. So ultimately, for every five hour it's providing for the current session, and according to use of your current session, the weekly limits is consuming. So for every use of current session, it's increased according to the use of your session. It's increase the weekly limit. And once your weekly limit is done or once your weekly limit is totally over, then what you will do. Some of you are doing a very weak coding task and your weekly limit is over, then what you will do. In that case, you can use credits. Okay? So if your credit card is already assigned with your billing option, then you can add the credit here and you can use from your credit. And you can set the monthly spending limit. Like in here, I set the $20 monthly spend limit. That means if my weekly limit is over, then I can use more $20 from my credit card. And still, I have still, I have some balance about $100, and it's provided by the cloud and I can still use this $100 credit. But this promotional credit have some expiration issue. So they will provide you some expiry dates, and you have to use the promotional credit before the expire date. Okay? And one more thing I want to tell you about the promotional credit that you will not get always the promotional credit. According to the campaign of promotion that's provided by the Cloud, you will receive the promotional credit sometimes, but you will not get always. Right. So this is how you will use the clod AI, and when you will do the large coding work, you must have to focus on here because if you provide a big command that will execute or that will consume lots amount of token. So before providing the large command, you must have to check the current session limit and weekly limit because if you have very few limit for current session or if you have very few weekly limit, and if you provide the higher command that will consume large number of token, in that case, your command will be not executed properly and you will have some glitches onside your code. That's why you must have to check the uses while you will use the cloud. And this is a good practice for coding. And if you focus on uses and if you focus about the prompt, then it will help you for generating the perfect output. And one more thing I want to tell you that when you will have the less amount of carencation, like you only have 20% left already 80% conceived 20% left. At that moment, providing the big command for getting the big output, it's not a good practice. You must always have to use the bigger command when you will have enough session limit, right? So I have used 4% right now so I can provide a big command for the bigger output. But if you have only 80% limit, in that case, if you provide the bigger command for generating any bigger output or for making the large coding or providing a PRD from the beginning in that case, you process will be not completed at ons. Therefore, you must have to keep in mind that when you will have enough curenzation, in that case, you can put the proper prompt for the code. And according to your needs, they have different type of models like the P, like the max, like the teams. So according to your needs, if you need higher uses, in that case, you can upgrade your plans, right? So this is how the clod is working, and I hope you got the idea how the cloud token and the session and the limits are working. Cool, right? So we already introduced with the interface with the models, with the tokens, and now time for applying the real vibe coding. So in our next lesson, we're going to create a wordpress theme, and that wordpress theme will totally develop by the vibe coding. So I hope you enjoyed this lesson, and next lesson is going to be a very interesting lesson, and you will have lots of important things in our next lesson. Till there, take care and Goodbye, everyone. 4. Vibe Coding Theme Development: Hello, everyone. Welcome back once again. And in this lesson, we're going to learn how you will create a wordpress theme using be coding. And if you have no coding knowledge, you don't have to worry about because we will create the wordpress theme and we will make it functional using the vibe coding and with the use of prompt, we will make it and we will make it live on the hosting. Okay. So let's directly jump to our main point. So for making a Wordpress theme using be coding, at first, you have to create the PRD. So what is PRD PRD stand for product requirement document. And in PRD, you have to mention what you are going to make. This is really important, okay? So at first, you need to make the PRD, and inside the PRD, you have to mention everything like what will be the color, what will be the niche, how many pages will be there, your objective, your purpose, your structure, your security, your performance, everything you have to mention inside the PRD. And therefore, learning of making PRD, I'm going to show you right now. And from my personal experience steal it, I found Google JaminE based for writing PRD because I use chat GPT, I used copilot, I used clod as well as I used Google JaminE and in between compare all the other AI agent, I found Google Jaini writes very perfect PRD. And therefore, I'm going to use the JMI E for writing the PRD. Okay, so you can see in my screen in my browser, I opened the jm@google.com. This is the RL and you already familiar with this popular AI platform. And in here, you have to write a prompt, okay? So before starting making the theme, if you know for whom and what is the purpose, what is the niche? What is the categories? If you know everything, you can directly write here. As an example, we are going to we are going to create a restaurant WordPress theme, and the name will be Moogle Restaurant. Okay, so the theme will be made in the name of Mughal restaurant. And this is the brand name. So what we already declared here, we have declared the niche. That means our niche is food because restaurant is relevant with the food, and the name of our theme will be Mughal restaurant theme. So ultimately, two things we have described here. The first one is the brand name and second one is the niche. So like this, you have to describe everything if you have. Like, if you have the color palette, if you have the background style, if you have the typography style, everything, you can describe inside the PRD. But if you don't have the exact niche, exact categories, exact color palette, or any other information, in that case, you can take the help of AI. Okay, so let's start making the PRD first. And for making the pod, you have to write the prompt. Okay? So let's start write the prompt and for writing the prompt at first, what you have to write, I want to make a Wordpress theme and it will be a restaurant theme. Okay, so I have mentioned that I will make a WordPress theme, and here I have mentioned the niche and it will be a restaurant theme. And the theme name will be Michael Restaurant. TIM. Okay. So at first, I have declared I have declared the niche and my team name. And now what I need to write, I need to write here, and I did PRD for it. Okay. So ultimately, I'm just making the PRD with Jamin E, but I will execute the PRD in clot. Therefore, you have to mention these things inside your prompt. And therefore, I'm writing here. I will develop the theme by Claude. Okay, so I will develop the theme by clot. This is what I have mentioned. And if you give the exact command, in that case, you will have the better PRD because Jim and E will understand that coding will be generated by the clot AI. Therefore, JaminE will prepare the PRD according to your prompt. That's why you have to always mention if you are using the JMNE for PRD, which AI platform will be used for coding? And therefore, I already mentioned here that I will develop the theme by clot. Okay. Now, you have to mention a few things like the code should be enterprise level. Enterprise level standard ensure security. Ensure performance. And responsive. Okay, so ultimately, when you will use this responsive keyword, it will be compatible for the Desktop tab and the smartphone views. Okay, so this is our primary problem. So let's review what we have written here. At first, I mentioned here, I want to make a Wordpress theme. So this is what is exactly declared what you are going to make. I want to make a Wordpress theme, and it will be a restaurant. So in here, this is the niche, okay? And the team name will be Mogul Restaurant. And this is your brand name. And I need PRD for it. Okay. So ultimately, I am asking PRD to Jamini. So this is all about the prompt. Then I mentioned I will develop the theme by cloud. So in here, I declare what will be my platform. Then I mentioned the code should be enterprise level standard, ensure security, ensure performance, and responsive. Okay, for making the bitter sentence, you can write here and theme should be. Responsive. Okay, cool, right? So now, let's hit the intro button from our keyboard or you can just click this submit button, then you will have the primary PRD, but you need to make more direction and changes after you will have the PRD. Let's get the PRD first. Then we will make the modification according to your needs. Okay, so I'm hitting the inter button. And once you will hit the intro button, it will start the process and you can see here is the output. So you can see product requirement document or PRD, and you can see what's mentioned here. The product requirement document PRD is tailored for developing a mogul restaurant theme using an AI collaborator like cloud to get enterprise levels secure and high performance code from an LLM the requirements are broken down into pieces, modular specification that you can feed into Cloud section by section. So this is our PRD. At first, it's named here. The project name will be Mogul Restaurant theme, and in here already, AI has defined the target audience. So what will be my audience in here I mentioned about the fine dining for South Asian or Mogul restaurants, upscale culinary brands and high end hospitality values. So this is all about the target audience. So instead of this I generated targeted audience, if you have any core audience, in that case, you can write in here. Suppose you are making a wordpress theme for European style or for Chinese cuisine. In that case, you have to mention what will be your targeted audience. So this will help you for generating the theme properly. Okay, so in here, it's mentioned about the philosophy. Now, let's focus about the technical blueprint. And you can see in technical, it's mentioned about Development framework. In here, it's mentioned hybrid approach using standard PHB component combined with a custom Gutenberg block library. No element or DV dependencies to ensure maximum performance. This is really very important. Okay. So ultimately nowadays, what pre have two type of editor. The first one is by default, the Gutenberg editor. This is the latest one, and along with that, if you are not a techy person, in that case, you can focus on the elementor, because Elementor is very easy to use, and it's a dragon drop option. So if you have the basic knowledge about the block library, like if you already have the knowledge about the Gutenberg, in that case, you can just directly use these things or instead of block library, if you have no tech knowledge, in that case, you can use element because Elementor, as I told you that it's very easy to use and it have lots of components, but the issue is, you will not have all the features in elementor for free because elementor have paid version as well as the free version. But with the free version, you can make lots of changes. Okay? So depending on your needs, you can choose the framework, either will it be the Gutenberg block library or Elementor. So normal days Gutenberg block library is widely used. Therefore, I prefer to use the Gutenberg block library first. Okay. Then what is written here in technical architectural blueprint in seconds maintain the code standard, 100% compliance with the Wordpress speech coding standard and ESL international rules for JavaScript. As we have asked for the code standard, it's already mentioned in here. Then it's mentioned about the database efficiency. Then it's mentioned about the asset management. Then for the core feature and functional requirement, it's provide what is provide that you can see here, dynamic food menu engine, luxury reservation system, live customizer and design token. And then it's focus about the enterprise security specification. Okay, so in here, what we mentioned, we got mostly what we need. We got in here. But the question is, what is provided by AI generated content or AI generated PRD. If you need to change anything else, you can change it. Like, you can see here, it's provided a dynamic food menu. You can see it's ask for the luxury reservation system. If you don't need the reservation system on your theme, you can remove it. And for removing, you have to write some prompt in here and I'm going to show you. Okay. So ultimately, everything looks fine till here. And most importantly, at first, you need to declare the framework. And one more thing I want to show you number four is about the performance and optimization, and you can see 95 plus paid speed inside score. So this is really, very important. Let me explain to you how these things is working. If if you want to rank your website, in that case, your site should be loading fast. And therefore, I have mentioned about the performance. And after using that keyword on my prompt, I got I got a performance and optimization standard inside my PRD. Then it's mentioned about the EIUX and it's a responsive matrix because I was telling that it should be responsive because not only for the laptop or desk of view, it should be compatible for the smartphone, for the tab as well. And that's why the number five point is mentioned about the responsiveness, cool. And in number six, it mentioned about the development strategy with the clod as we have declared, it will be developed by the cloud is everything has provided in here. Cool, right? So now you have a few more questions. The first question is, will you create the framework with Gutenberg or Elementor. If you are not interested to design your theme with the Gutenberg, you can write here. You can write in prom that I want to, I want to make the theme for elemental compatibility. Okay? And from the team, if you don't need the reservation system, if you want to remove these things, you can write in here. Okay. So therefore, I want to, I want to write that as I am not looking this reservation system, but I am keeping the Gutenberg block library. Therefore, I'm writing. I don't need this luxury reservation system. So I'm copying from here and I'm pasting. So I don't need luxury reservation system feature. Then I'm hitting the intro button. So after writing these things, then the reservation system will be removed. Cool, right? So, ultimately, now everything is provided in here and now I'm going to tell you a very important so it's just made the modification. You can see here after I mentioned that I don't need a luxury reservation system, then the luxury reservation system has been removed, but it's provided separately. But I don't need this way. I don't need the PRD, copy to use way because otherwise, every time I have to come back to my Gemini, then I have to copy the PRD. Then again, I have to paste it. It's totally messy, but I don't need the messy things. I need clean ways for performing a smooth way without having any hassle. Therefore, I need a copy to use PRD. So I will copy owns from here, and I will use it on Cloud without any hassle. Right. And one more thing I have to tell you if you see the entire pd is quite large, right? So ultimately, Cloud have to generate lots of command. Cloud has to go through with lots of process. And in that case, your token may burn at owns. Therefore, we have to apply one things, right? Therefore, I need to write a prompt because if you provide the entire PRD and if you provide the enter PRD to Cloud and if you run the command, then with a single command, Cloud won't be able to make the theme from this PRD at owns because it's a long process and it will take lots of minutes to hours, sometimes it takes and your output will not be so easy. Therefore, we're going to divide the entire PRD in separate way. Like in a single command, Cloud will execute the performance step, and in another command, Cloud will execute the security step. In another command, it will execute the code standards. So if we divide the PRD in different ways or in different steps, then your token will not be used at owns, and the performance will be very smooth. And you can track the use of your current station and you can get the perfect output. Therefore, what you have to write, you have to write a prompt in here. So I'm going to write the prompt here. Please take a look in my screen. I'm writing here. It's too big for making the theme in one command for cloud. Therefore, I want to divide in steps. The PRD should divide in eight step owns one step is done, then Claude should ask me for permission to start next step. Okay. So what I have written here, I have written, it's too big for making the theme in one command for clot. Therefore, I want to divide in steps. The PRD should divide in eight step once one step is done, then clot should ask me for permission to start next step. So this will help you for saving your token. And if you use this common, then your output will be perfect and you will have not any glitch. Okay, so I'm hitting the inter button, and now you have to wait until the output is generated through the Jamini you can see it's generated total eight step. And you can see in step one, it's mentioned about the core tb in step two. It's about the custom post type in three meta boxes in four core template in five, custom Gutenberg block number six, it's all about the responsive food menu in number seven. Live customizer integration and in number in Step, it's all about the security and performance optimization. So it's divided in total eight part. So once part one is done, it will ask you to start for step two. If you give the command that you are agree to start the Step two, then clod will start the next step. So this is how you can save your token, you can get the perfect output. Okay, cool. Now, this is not about copy to use these things. Therefore, you have to write another prompt, like I want to write here, I N ready to use and copy to use PRD for clot. Okay. So when you will write this prom that I need ready to use and copy to use PRD for clot, it will give you a copy version. A block for copy. You will have a black box in here in here, and you will get the copy option. Just you have to wait a little because you can see Okay, here we go. Here is the output. And now you can see, we have copy to use or ready to use PRD here. You just have to copy the quote from here, and it's divided in different steps. Okay, so here, the eighth step is mentioned here and everything we have in the PRD, according to our prompt. So now what do you have to, you just have to copy the code from here, and then you have to get back to clot and you have to paste in here. So this is the task, but before pasting the PRD in Cloud, we have to determine what model we will use. This is really important. So for models, you can see right now default, we have the Solid fib. But Solid fib is good for generating the code is good for writing. But if you are looking for advanced feature without hassle, in that case, my personal opinion, you can directly use OpAs 4.8 or fable. But fables required. You can see here that is required uses credit, and you already familiar uses credit. But just for time being and from my point of view, just for your task, you can use this Opus 4.8. So therefore, I'm going to see Opus 4.8. And one more thing I want to tell you that from the FFO from FFOT I want to use high because if you are using Max, then you will have a heavy token consume. Therefore, high is good enough. And one more thing, if you turn on this thinking button, in that case, it will take lots of time. Okay? So if you're looking to get the output faster with perfect accuracy, in that case, you can just use the high. And my personal opinion is this thinking option you can keep turnoff. Okay, cool, right? So now we have to paste in here. So let's paste the PRD in here. So I'm pasting and you can see it's already pasted here, and I am sending the prompt, or you can hit the intro button from your keyboard. And now you can see the process is started and what's written here, I will build this step by step. Let me start with step one. So it will take a little time because you have to go through total eight step. So once step one will be completed, then it will ask you for starting the step two. So we have to wait until the step one is completed. So let's wait a few moments. So here we go. Our step one is completed, and in right side, you can see the preview, okay? And if you scroll down, you can see in step one, what Cloud created, it's created the style file, it's created the theme files created the function file. And then it asks me, may I proceed to step two? And now let's take a look how much token is it's consumed. And you can see here already 9% token is consumed, and my present current session is going to reset within 15 minutes. Okay? And now, it's asked me, may I proceed to step two? Then you can write here. Yes, start. Step two. And then you can hit the intro button from your keyboard. And you can see here that step two is started. So again, we have to wait a little, and if you don't want to see the preview in right side, in that case, you can close this preview and you can get your full screen. Okay, so again, we have to wait for a few moments. So again, you can see the step two is completed, and in here, again, it's created some pHGFleu CPTs, some PHGFleu functions. Then it's asked me for the permission for the metabxes and custom fields and quad want to start the step three. That's why I want to write, start. Step three. Okay, so again, I have to wait a little until the step three is completed. So you can see the step three is completed. It's created the meta boxes and the functions. And now it asked me for initiating the Step four, and it's all about the core template and hierarchy layout files. So let me give the command, start. Step four. So you can see the step four is started. And now let's take a look at how many toke is consumed. Therefore, in another tab, I opened in here and you can see I still have nine minute to reset my current session limit, and till year total 18% consumed. Okay? Okay, so our step four is completed. And in step four, many things have been created. You can see single mole menu index, header, footer, single menu navigation function. Lots of files is created, and now it's asked me for starting the step five. And let me give the command. Here, start Step five. And then we have to wait a little. And now let's take a look how many token is consumed. Let's click to our another tab and you can see to total 24 person token is consumed, and we have six minute to reset our present currenon. Okay, so let's wait until step five is completed. Okay, so step five is complete. Now, and ask me for starting the step six. Let me write. Yes, start. Step six. Then again, we have to wait. Step six is complete. Let me start the step seven. Let me write. Here, start step seven. And again, we have to wait. So you can see step seven is complete, and now we only have one step left. And that's why it's asking me for the final task. And let me write, yes, start step eight. You can see the step eight process is started. And now let's take a look in our uses, and you can see my previous session limit is reset, and after providing the command or prompt tet only 2% is consumed, and my present or current session limit will be reset after four hour and 56 minutes later. Okay. So I hope you got the practical idea how the current session limit is working because you've just seen my previous session limit is reset while my step was proceeding. And you can see, still the step eight is executing and it's the final step, so it will take a little more time because it's polishing the final file and it's auditing all the things. Therefore, it will take a little more time. So we have to wait until the step eight is completed. And here we go. Finally, we have completed total eight step. And you can see finally we got our theme file. This is the MobleRstaant, Zip file, and this is the main file. And along with that, it's provided. It's called document. MD stands for Markdown. So ultimately, it's all about the security performance or read me meta boxes. So now we have to check either the theme is workable or not. So we have to taste the theme to our main hosting. Then we will ensure that the theme is working and its functional. Therefore, what do we have to do we have to write a prompt in here and let me close the right side preview, and let me write I want to run the team to a shared hosting, so give me the WordPress Team file for Install in WP admin. Okay. So what I have written here because we have to taste the theme is either working or not, and therefore we will make it live, and therefore, I'm going to use a shared hosting. And if you have the dedicated hosting, you can write the command according to your hosting, but I'm going to use the shared hosting, like I'm going to use the name chip, and therefore, I'm going to taste the theme file in shared hosting. That's why I have written here. I want to run the theme to a shared hosting. So give me Wordpress theme file for installing WP. Admin, and this WP admin is stand for WordPress admin. Okay? So then I'm hitting the submit button once again, and now I will have the complete ready G file. Okay? So I just have to wait a little. So here we go. We got our final output in here. So our theme creation is done, and you can see here that after what I have written here after my previous prompt that I want to run theme to a share hosting, so give me the WordPress theme file for installing in WP admin. After providing this prompt, I got my final Zip file in here. You can see at the right side, I do have my Zip file, so you can download from here. Or if you scroll down, you can download from here as well. This is the download button and same as in right side. Okay. So let me close a preview, and you can see clot already given how you will install the theme to your wordpress. You can see it's provided the instruction. You have to go first for the appearance, then you have to go for the theme, then you have to go for the ad new. And then finally, you have to go for the upload them option, right? And after upload it, you have to go for the Install now, and then you have to go for the activate option. So every command is given here, and you can see the name of our theme is named as a Moogle restaurant. So according to our PRD, we got everything, and our theme is created. So now time for download, and I'm going to click the download button and you can see the file is downloaded. Okay? So this is our main file. Now, in our next lesson, we will host this theme to our hosting, and we will learn about the hosting and about the troubleshooting. If you face any error, if you have any glitches, everything we will fix in our next lesson. So the next lesson is really, really important, and I hope you enjoyed the lesson, and you already have the idea how you will create the WordPress theme using vibe coding on Cloud. So let's jump to our next lesson until there. Take care, and goodbye, everyone. 5. Host and Troubleshooting: Hello, everyone. Welcome back, once again, and now we're going to host our theme, and we will troubleshoot if we found any issues, then we will troubleshoot the issues. And this is really important because you need to know how the troubleshoot is working, right? So you can see in my screen that I have opened a domain, and this is what I have logged in. That's in my WordPress admin. Okay? So for getting this, you must have to have your hosting first and inside your hosting, you must have to install the word press, and then you will have this interface. Okay? So you can see for testing the theme, therefore, what I have to do I have to go for the appearance first. From there, you have to go for the theme option, and from them, you will found this ad theme option. Therefore, you can use this ad theme. And one more thing I want to tell you if you don't have the hosting if you don't have the shared hosting or purchased hosting. But if you want to still try, the theme either is working or not. In that case, you can use your local server. And for local server, you can use some other software like Za wamp, and using that kind of software, your local computer will act as a local server, and you can host you can host your Wordpress inside the local host, and then you can upload the theme on here or you can directly use this local WP this local WP, you can use this site and you can download the local WP from here and you can directly connect to your computer and you can turn your computer into server or local server, and you can use the local server as your hosting. Okay? But if you are already familiar with hosting like shared hosting or purchased hosting, in that case, you already familiar with how the wordpress is installed, and after installing the Wordpress, you will have this kind of interface. Okay, so let's proceed with the testing of theme. So from appearance, then you have to go for the theme option, and from there, you will get this add theme option. So when you will get add theme option, then again, you have another option, and from there, you have to go for the upload theme Once you will click upload them, pop up will appear. Okay? So from here, you have to choose file and the pop up will appear. And you can see the downloaded file already inside our folder. So you have to select the path where you kept your downloaded file. So you can see here is my restaurant file the theme file, then you have to select the theme file, and then you have to click Open. And after adding the file in here, then you have to go for the Install Now option. And after clicking the Install Now, you have to wait a little, and then you have to activate the file, right? So you can see I got the activate button. So let me click the Activate button. And you can see the theme is activated, and you can see in here that the mole restaurant theme is activated. So now let's take a look how the theme is look like because we have to check either it's working or not. And if you focus on the b side, you can see we already got the food menu. And this food menu is a part of our theme. That means our theme is totally functional and workable, right? So for having a look, what you can do, you can click in here and from there, you can go for the visit side option and I'm opening in a new tab or you can just directly go to the URL in where you have installed the theme. So you can see that I have my theme here and the theme is working, right? So now we don't have any design. We just have the architecture. We have the architecture. Now we have to. We have to add that design for our theme. Previously, what we made, we just made the structure and architecture of the theme, and theme is workable and we don't got any glitches, we didn't got any errors, and we tilt, we didn't have any troubleshoots. But the theme don't have any design. And now we have to now we have to make a design. And for making the design, we have to follow a different process. And for design, you have to create the design separately. But the theme we have created the functionality, and you can see here is the food menu from here. You can create the menus. You can see here add new menu item, and this menu will be added to your main side. Okay, so we have the architecture. We have everything that we need. But the main question is, we don't have the design yet because we want to. We want to create our own design. And you can see that Gutenberg is working perfectly, and Gutenberg is about the block title, and you can see if you want to add any pages, you can add the pages for adding the elements. You have the field in here, and if you click in this ad block, then you will have different type of option like if you want to add the images, paragraph, heading, shortcde and many more options are available. If you click in browse, you will have different type of options for add manything else, you can see here is the option for Google hero. Like if you want to add a slider or hero section for your homepage, you can add it from here. But not only these things, you will have lots of options for adding to your website. Okay? So lots of options are available. You just have to peck from here and you have to use it on your website. Fine. So our structure is ready, but now time for design, and we want to. We want to apply a new design to our theme because we have the structure, we have the architecture, but we don't have the design yet. And now time for making the design. And in our next lesson, we will learn how you will make a design and how you will connect that design with your present theme. Okay, so this lesson is about the hosting and troubleshooting, but till yet, we don't have any troubleshoot yet because the theme is working perfectly. We don't have any glitches. We don't have any troubleshoot. So this is the good practice because while creating any theme, if you have any issue, your theme will not be installed on hosting. And while installing, you will have the error, and you can see we install the theme, but we don't get any error. That means our theme is perfectly working. And this is one of the major benefits of using Cloud OPS model. You can see, I have used the OPS model from my previous experience, I use Sont model, and I have created lots of themes with the Sonnet model. And with the Sonnet, I got some rods, I got some glaches, but with the Opus 4.8 version, and as well as the fable version, I got the perfect output. Fine. So we have created the theme, and in our next lesson, we're going to create the design and we will apply the design to our theme. 6. Apply Design to Theme: Hello, everyone. Welcome back. Once again, and in this lesson, we're going to learn how you will add design or how you will apply design to the theme. So previously, we just created the theme and you can consider the theme as the body and you can consider the design as a dress. So now we will put the dress on the body, right? So we have to make the design first, and therefore, we need to make a PRD that's called product requirement document for the design part as well. And the design we will not create through the cloud. We will make the design with the Google Stitch. And you can see in my screen, I opened another browser, and in my browser, I opened this EL, and the name of this ERL called stitch.withgoogle.com. And this Google Stitch is a product of Google. And with this website or with this application, we will make the design for our theme. But what will be the design? What will be the color palette? What will be the tone, everything, we have to take it from the cloud. That's why we need to ask Cloud that what will be the design and therefore we need to write few prompt in Cloud. Therefore, let's get back to the cloud and in here, you need to write a prompt. Let me write the prompt and you can follow what I'm writing the prompt. I need to apply design for the theme and the design. I need to create by Google Stitch. Now, give me prompt PRD for the design which I will apply on Google stage. Okay. Then one more thing I need to write about the images because the color palette image, this is what I have to mention in here, and now I will input the image about the color palette, about the pattern. This is what I'm going to write now. I want Google Google Stitch, make the images for the design by AI and use an eye catchy color for the design. The design should look professional. And modern I will give you the design from Google Stitch in STML and CSS format, and you have to apply the design to the Theme. Okay, so this is our prompt, and with this prompt, we will get the PRD or the prompt for the Google Stig, and we will copy the prompt from here and we will use it on Google Stage. So let's revise about the prompt what I have written. So ultimately, I have written here. I need to apply design for the theme and the design I need to create by Google Stage. Okay? So in here, I have mentioned from which platform I will generate my design. Now, give me prompt and PRD for the design, which I will apply on Google Stitch. I want Google Stitch, make the images for the design by AI and use an eye catchy color for the design. If you have any expected design, in that case, you can write here that the primary color will be the purple or green or whatever color you want to put for your design. You can write in here if you have any specific chosen color, right? And if you don't have in that case, you can just give the basic command. In that case, AI will generate the color palette for you. Okay. Then what I have written design should be the design should look professional and modern, I will give you the design from Google Stitch in HTML and CSS format, and you have to apply the design to the theme. Okay. So ultimately, Google Stitch, it's generate the design in HTML CSS format. Therefore, I have mentioned here that I will give I will give the design in HTML CSS format, and Claude have to make compatible the design with the theme. Okay. And while we will apply the design in cloud, it will face some errors, and therefore we will learn about the troubleshooting while applying design from the Google Stage, right? So let's hit the submit button, and we have to wait a few moments because it will take a little time. And make sure you are using the Opas model because the Opas model really works good. And you can see in part one, it's provided the Google Stitch prompt and you can see it's providing the Google Stitch prompt in here and we have to just copy the pages and I mean, we have to copy the entire things from here and we have to paste it on Google Stitch. You can see the part one is done and now we have to wait for the part two and it's all about the design PRD. And here we go. We got two things in here. As output, you can see in part two, we got the design PRD, and in part one, we got about the Google Stitch prompt. So we need to apply these two things in Google Stitch. But before that, I want to use a single prompt because using two prompt is complicated. Therefore, I want to merge these two things in a single. That's why you need to modify or you need to write another prompt in here, and I'm closing the right side tab for the preview. And here I'm going to write I need one prompt for design and PRD for Google Stitch. Give me copy to use design prompt and PRD at owns, so I can apply both at a time. So what I have written, I need one prompt for the design and PRD for Google Stage. Give me copy to use Design prompt and PRD at own so I can apply both at a time. Okay, so I'm clicking the send message button, or you can hit the intro button from your keyboard. And now we got a combined prompt for the designer. You can see on the right side, we now have the option for copy. You can see here is the copy option, so we can just use the copy option and we can entirely copy the design prompt as well as the PRD. So everything you can see here, everything is provided according to prompt we have given here. Okay, cool. So I'm going to copy from here and you can see it's copied to my clime board, and now I'm getting back to Google Stitch. And in Google Stitch, make sure you are not using this app version because this app is basically using for creating the design for mobile application. But as we are going to make the design for the web version, that's why you have to make sure that you're selecting the web version, and then you are pasting in here, you have to paste in here, and you can see the prompt and the design I have pasted here and you can see it's provided different type of color palette, as well as the typography. Everything is provided in here, right? Once everything is pasted, then you can hit the genet button. Or if you have any logo or if you have any specific images, in that case, you can use this plus sign, and then you will have the upload files option. So if you have any logo, if you have any hero image or slider image, in that case, you can use this upload files option and you can add the images. But this time, we're not going to upload or add any specific images, we will use a generated image. So therefore, I'm going to click the Generate button. And once you click the generate button, it will take lots of time because it will create a couple of pages, it will create a couple of designs, and to complete entire process, it will take a little time. You can see you have to Keep eye at the left side, you can see a circle is moving in here, a circle is moving, and the image is creating in here, the page is creating here. So you have to wait until the loading or the processing circle is stopped moving, right? So it's still the circle is moving. That means the process is ongoing and you can see the Google stage is sketching our design. Okay, so you can see it could be the home page, it could be the product page, and it could be the details page. Everything is creating according to our instruction. So we have to wait until the entire process is completed. Then we will export the design and we will export it to the clot. So we have to wait until every process is finished. So here we go. Now you can see the process is stopped. That means the circle is stopped. That means the entire process is completed. And at the right bottom, you can see the seven person. This is all about the Zoom. So if you want to increase the Zoom because you can see Google stage created, number of images, and these images are AI generated. So we were looking for the images, and that's why according to our command, the image is generated through the AI, and it's created some pages. So you can see all the pages is created in here, this is the homepage, this is the menu, and this is the product details. Okay, cool. So now we have to export these things. And for export, what do you have to do? You have to select it and make sure everything is selected. Otherwise, if some element or some image or some pages is missing, then the design will not be applied properly. Therefore, you can see here, you have to use this select option, and then you have to select the images first, then you have to press the shift button from your keyboard and you have to select all the elements step by step. Again, I'm telling you everything should be selected. So now you can see everything is selected, and now we have to. Now we have to export it. And for export, you can see here is the Export option. And in here, if you scroll down, you will have this zip option. So you just have to select the zip option and then you have to export it. You can see, it's total about 17.2 megabyte and the design is exported. Now this design, we have to upload to the clot for applying this design to our theme. Okay, let's do it. So I need to get back to my clot and here is a browser. And for applying that design, you have to you have to use this plus sign, and then you have to select Add file or photo option. Okay. And here is the design we just downloaded, so you have to select it, and then you have to click Open. So we have to wait a little because it's about the 17 megabyte, and you can see the design is added. Now, you have to write, you have to write the prompt. And in here, while you have to write, you have to write, I have uploaded the zip file from Google's ditch and the file is generated from the prompt and PRD you have given. Now, apply a design from Z file and add it to the theme. Okay, so what I have written here in prompt, I have uploaded the design, and then I have written here. I have uploaded the Z file from Google Stitch, and the file is generated from the prompt and PRD you have given. Now, apply the design from the Z file and add it to the theme. Okay. Then you have to. You have to hit the same message, and it will take a little more time, and it will ask you some questions. And you can see the Z file is extracting. Okay? So it's extracted the Z file. And what this pen here, good six HTML pages design dot md. This MD stand for markdown and 11 images. Let me read that design system doc and page markup. Okay, I will take a little more time. You have to wait until the process is completed and once the process is completed, it will give us the Z file or if you face any issues, then you will have the issues in here Claude will let you know what the issue is facing. Here we go. We got our output, and you can see, it's provided total three different files, the more restaurant design and it's about the CSS and the theme file is about JSON format, okay? But it will be complicated for you for applying the design file separately, this theme file separately. Therefore, you need to you need to get ready to use file. Therefore, I'm going to write another prompt. Then we have one zip and the design will be applied to the zip. Therefore, you need to write a prompt in here. I need one ready to use Zip file of theme where this design is applicable and will be visible after install the theme to hosting. Okay, so I have written here. I need one ready to use Z file of theme where this design is applicable and will be visible after install the theme to hosting. Okay? After writing this, you will have a single G. And again, I'm hitting the same message button, and you have to wait a little because it will take a little time So here we go. We got ready to install Z file 1 second. And you can ask me then why is this actually This read me is a file where you will have the guidance how to install what is a requirement for this team. And you can see it's required Wordpress 6.4 version and PHBour 7.4 version. Okay. And here is a guidance how these things is working. And it's placed a demo importer for the content. Okay? So it's given a demo importer button for import the design we have created. So at first, what do we have to do? We have to download this MoholRstaurant theme. So you can click this download button and you can see the download is completed and the size of the them file is turned into 1.7 megabyte, and now we have to upload it to our main hosting. Let's get back to Google Chrome. In here, I have opened my WordPress admin and Delet I didn't applied the theme. Therefore, let's take a look at how the present design is looked like, and this is my present design. Now I want to upload for upload, what you have to do, you have to go to the appearance from there, and then we have to click this theme option. Then we have to go to the ad theme then upload them. And in here, you have to go to the Choose File option. Therefore, you have to go to the Choose File option. And here is our Zip file, and you can see that MobleRstaurant. This is what we have just downloaded from the cloud. You just have to select it, and then you have to click Open, and then you have to click Install Now. Then it's ask me for replacing the file because we already have we already have a theme with the same name is installed, and again, we have uploaded. That's why you have to click this replace installed with the uploaded. Okay? And now you can see, now you can see the theme installation is done. So you can see the team update it successfully, it's written here, and now you can think that the design is applicable in our main site. So do you really think the answer is no? So for making sure I'm going to I'm going to visit my main RL and I'm going to click this refresh button, and it will still have the same output because the design is not applied yet. So you can ask me the question. The theme is uploaded and updated, then why the design is not applied. So if you focus in our Read Me file, you can hear you can see here in Read Me file, we have to set up the demo first because the design we have uploaded or we have created from Google Stage and we added to the theme. It's worked as a demo content, and we have to import the demo. And for importing the demo, what do you have to do? You have to reload the page or you can directly go to the dashboard, then you will have the update. So I'm clicking the dashboard, and now you can see we got an option for setting up the demo, and then you have to click Set up the demo, and then you will have this import demo content. So when you will click this import demo content, it will start importing the demo. Okay? So you can see Import complete. You can see here a notification Import complete, six dishes and two pages created. So one more thing I want to tell you while you will import the demo, sometime the homepage could be missing, sometime additional page could be missing, and if anything is missing, in that case, we will learn how to fix it. So now time for applying the exact look what we have added. So for having a look, you can go to the my blog here and from here, you can use this view site, and I'm opening in a new tab. Okay, so you can see here is the demo. And as I was saying that, it could some pages, some menus could be missing. So you can see our homepage style is still missing. But let's take a look the menu or other is working or not because we had the menu, we had the product details. So therefore, I'm going to check the menu from here, so I'm clicking menu and you can see the menu is working perfectly, and you can see the menu page is perfectly working. And now we need to take a look either the product details is working or not. So therefore, I need to select one product, and here we go. We got our product details, and it's really working fine. You can see the price is given here. Here is the image. Here is the title, and here's the product details. And for reserving, you can see, we have a reserve table option, but it's not functional yet. Therefore, you need to apply another plug ins. Okay, but yeah, ultimately, we have mostly all the designs here, but except we have the homepage not applied here. Therefore, we need to make some changes on prompt. And for applying the main page, we need to, we need to take a screenshot. Okay? So you need to take a screenshot or you can take the sniping tools, and we will provide the screenshot to the clot that what problem are we facing? So this is what we need to do right now. So in here, I have taken my screenshot, and I'm getting back to Cloud. This is my cloud. And here, I'm pasting it, and I need to write a prompt that I am writing here. The homepage design is not added. Rest of the design is added, but make sure homepage design from Google Stitch should be applied. Okay, so I have given the screenshot, and you just have to take the screenshot from here and you can directly paste it. You can use Control plus V, or you can use this plus sign, and from the plus sign, you can add the screenshot where you have set. Okay? Or you can for taking the Screenshot, you can use sniping tool. So if you go to your search bar and if you write the sniping tools, in that case, you can take the screenshot from there. Okay. So we have mentioned here the homepage is not and actually the homepage design is not added. Okay. Rest of the design is added, but make sure homepage designed from Google Speech. Should be applied, and then I'm hitting the same message button. So now we have to wait because Claude will fix the issue, and you can see here, Cloud alreadyml I can see the problem. The homepage is rendering the hero and menu gradeblock as the plain text instead of the actual design block. Okay? So it will take a little time until the process is completed by the cloud, we have to wait. And here we go. The process is completed, and the new file is generated from our new prompt about the design of homepage. And you can see the new file is created and I have to download it. So I'm clicking Download. As download it. Okay, so now we have to upload the theme to our hosting, not actually hosting in about our Wordpress and therefore, you know where you have to you have to go the appearance from there, you have to go to a theme then add theme then upload them. And from here, we have to choose the file. So I'm selecting the choose file option, and here is my file and you can see that today I just downloaded, and here is the Mogul restaurant. You have to select it, and then you have to click Open. And then you have to go for the Install Now button, and it will take a little time because the file size is bigger than before. That's why it will take a few moments, and then you have to activate or you have to replace the current version. So let's wait. So here is the option. And as I was saying that already the previous version is uploaded, but we're going to add the new version. That's why we have to use this replace install with uploaded. Okay? Because the previous one is 1.2, and now the file version we have uploaded is about the 1.2 0.1 version. That's why it's asking for replace and installing the new one. So you have to use replace installed with uploaded. Okay, so now you can see we have the option from here and now let's reload. But one more thing you have to make sure the loading speed of the theme is faster because we have mentioned in our PRD about the performance. So now let's take a look how it look like, and you can compare in between before and after right now so you can see here, the home pitch design is applied according to our imported design from the stage. And now let me scroll down and now you can see everything what we got according to our prompt. So here is the hero section and you can add the image in here, and here the menus, and here is all about the product details. But this is everything in previous theme, we don't have this homepage, right? So we had all the menus, everything we had except the homepage design, and we just fix the issue with our home page. And now let's take a look is the buttons are functional or not. So let's click on filter. And if this not is working, if the button is not working, then we will fix it. So let me click the filter like the Berry Ai and you can see Bryan filter is working, and you can see here is the Bryan is filtered. Now let's click on breads and you can see the breads item is showing about the curries, here about the dessert hear about the cubobs and hear about the starters. Ultimately, every filter and every button is working and it's functional. Right. So according to our prompt, now we have the perfect theme. So we had the issue with our home page, but the issue is fixed. So I hope you got the idea how you will create a theme from zero, how you will apply the design from Google Stage and then how you will connect the design with your theme and how you will troubleshoot the issue. So everything we have learned in here. So I hope you enjoyed this lesson, and if you have any question, you can ask me on the comment section or in discussion section. So if you have any issue, so I can answer in there and one more thing, I'm going to tell I must say that if you have the subscution in that case, you can start making a theme like me, or you can just copy the PRD and all the relevant required information I have given inside the resource folder. So if you are not able to create the perfect PRD, you can just copy from the resource file. I have given PRD inside the resource file, so you can just copy and you can start making the theme. Or you can make your own PRD and you can make your own theme with a different niche. Because in here, I have created about the restaurant theme, but instead of restaurant theme, you can make some charity theme, you can make some Ngo theme, you can make some news theme. Depending on your choice, you can create the theme as you wish, right? So I hope you enjoyed the lesson, and I'm expecting you to have you in our next lesson till there Take care and goodbye, everyone. 7. Create a ToDo List Plugins: Hello, everyone. Welcome back once again. And in this lesson, we're going to learn how it will create plugins. So previous lesson, we learned about how it will create a theme, but this time we will learn how it will create a plug in, and it's all about the wordpress plugin because we are focusing on Wordpress and now you've already got the idea what process you have to follow. At first, what you have to focus on, you have to focus about the PRD. So as we are going to create a to do list, therefore, we will take the help of EI and EI will provide all the necessary details and we'll take the PRD from here and we will apply to clot. Okay? So let's start writing the PRD, and, you know, I always prefer GMNE for writing the PRD because JM&E provides the perfect PRD yet I analyze all the other platforms, AI agents AI website. But I found a JMI PRD is works fine, and it's really give the perfect output with the clot. So if you combine GME with clot, then it will have the better output. Okay, so let's start creating the PRD. So what you have to write in prompt, you have to write, I want to make a Wordpress plugins for to do list. And I need PRD for it. I will develop the plug ins with cloth. And I need all the essential features for to do list plugin should be provided on PRD. Okay, so I have written a very simple prompt, and let's revise the prompt what I have written in here. So I have written I want to make a Wordpress plugins for Todo List, and I need PRD for it. I will develop the plugins with Cloud and I need all the essential features for Todo list plugin should be provided on PRD. So it's a very simple prompt, and then I'm hitting the intro button. And you can see the process is started, and in here, all the details already given. So the name of the project is mentioned here all about the W task flow. So this will be our working title. And instead of this one, if you want to put in specific name, you can write here because previously we have given the name for our theme is like a Mughul restaurant, but this time we didn't provide any specific name. So you can write the name in here. So if you have the name, otherwise, Jamie will generate the AI generated name. So you can see this WB task flow, it's AI generated project name. And then it's provided about the product overview and goal, then it's provided about the targeted audience and core use cases. In number three, it's all about the system architecture. And in number four, it's provided different model about the feature specification. And in number six is provided all about the execution. Okay, so it's provided everything in here, and now we have to use another prompt for copy to use and ready to use prompt. Now, what you have to write, you have to write. Now, give me ready to use and copy to use PRD. So you will write this prompt and when you will hit the entry button, then Jamini will give you the copy to prompt PRD, and you just have to copy from here and you have to paste. And here we go. Here is our PRD, but you have to make sure before copying this PRD, either every point, every feature is included or not because, I have some hallucination and with the hallucination, sometime it skips, and this is what I'm telling from my previous experience. So let me scroll down. And yeah, you can see, for the first three puts added on the copy to use PRD, but number four, number five and number six is not added here. So we have to. We have to make sure all the module, all the points should be included on copy to use PRD. Therefore, we have to. We have to write one more thing. We need to write all the PRD is M in ready to use and copy PRD. All the PRD is not included. And ready to use and copy to use PRD. And one more thing I need to ensure that for executing, you must have to ask the cloud for complete one process or one step at a time. Otherwise, if you profide all the PRD at a time, Cloud will have some issues about the token, about the limits. Therefore, in every module, Claude will ask you the question. Will the cloud start for the next step or not as before we have done in our them creation lesson. This is what we want to follow the same process in here. After complete one step, Claude should ask me for permission to start second step include this command inside, PRD. Okay. So what I've written here, all the PRD is not included in ready to use and copy to PRD. After complete one step, Pod should ask me for permission to start second step, include this command inside the PRD. Okay now I'm clicking the submit button. And now let's wait for the output. Here, the copy to use PRD will appear. Okay, now we have to check one more thing, but you can see here that still number four, five and six is not included here. Therefore, I need a final prompt and here I need to write give me complete, ready to use PRD, where all steps and process is included. Give me in copy to use format. What I have written here, give me a complete ready to use pard where all steps and process is included, give me in copy to use format, and now I'm hitting the submit button. And here we go. And you can see still we have the same issue. Actually, this called the hallucination of AI, but you don't have to worry about I'm showing you how you can copy the enter things except this one. If you are getting Enter module inside the copy to use, then it's fine. But if you're not getting, then you don't have to worry about, you just have to scroll down. And then you will have this copy response option. So you can use this copy response option. And now let's get back to our clot and you just have to take a new chat option and make sure the model is high here instead of high. Now I'm going to use this max option. Okay? So this is the max option. I'm going to use this one or now you can see instead of Opus 4.8, now we have Opus five. So now let's use this new model because the Opus five is more advanced and Opus four point. That's why I'm going to use Opus five. And with the Opus five, I think high is perfect because if we use Max effort, in that case, it will consume lots of token. Therefore, I'm going to keep the high effort with the Opus five model. Previously, we were using Opus 4.8, but it's the latest release, and it's released yesterday, and that's why I'm going to use this Opus five. And now let's paste it. So you can see, I have pasted here, and now you can hit the same message button and you have to wait because it will take a little more time, and in every steps, it will ask you for the permission to initiate a secondary step as like before. So we have to wait until that process is completed. And here we go. You can see our first step is done, and you can see it's provided lots of files in here in PHQ format. And now it's asked me for starting the step two. So I have to give the permission, and we have to take a look about the use of our current station. So you can see I already consumed about 30% of my current sation and therefore, I have to take care about the current son limit because if the presentation is over during a process is executing, then we may got some glitches or we may have some broken code. That's why it's always good practice to take a look on your current sation. Okay. So now for starting step two, you have to write here, yes. Start. Step two. And then you have to hit the intro button from your keyboard or you can use this send message button. And you can see the process two is started. So again, we have to wait until the process two is completed. So our step two is completed and now is asking for step three. And now we need to take a look at how many current session is consumed. Previously, we had 30%. Now let's take a look, and you can see it's turned into 37%. That means with the present command, it's consumable 7% in our current session. Okay, so let me complete all the steps, and let's directly jump to our final output because it will take a lots of times. And every time I have to I have to write here step three, here start, step four, five, likewise. So let me complete all the steps. And when the final time will come, we will start our lesson from there. Okay, so our all step is completed, and now you can see it's not asking for initiating the other step. Ultimately, total five step is done. And if I scroll up, you can see here, it's about for starting the step five. It's about the step four, and so on. But now we have the final output in here, and you can see the name of our plugin is WP task flow, right? So you can see it's what we have got here. We got in different filename, but we don't need the different filename. We need ready to use plugins. And therefore, we need to write one more thing. I want to use in WPAdmin and give me ready to use plugin ZFle. Okay, so if you use this prompt, then you will have a single G pile, and you will be able to upload to your WP admin, and then you can use it. And it will be more easier instead of use this total four different file. And now I'm totally getting ready to use format. Okay? So we have to wait until the Z building is completed. And here we go. We got our Z file in here and it's provided some issues all about the error. Like, if a task fails to save, run WP Dbug. This is all about the Dbug and this is the process, how you will fix the error. But if the error is appeared, then we have to follow these things and we will learn how you will fix the error. But right now we have the WTs low Z file and we have to download first. So where to click for Download and you can see the download is done. Now we have to test it. Either it's working or not. So let's taste in our WP admin. So here we go. You can see in my browser, I have opened the same tastedkillfod.com this ARL, and in here, this time we not go with the appearance with the theme. This time, this time we will not go with this because this is not a theme. It's a plugins. And therefore, you have to go with the plug ins option. From there, you have to use this at plug ins option. And then you will have this upload plug in option and processes as like before, you have to choose the file, and this is our file, W task flow, and you have to click Open, and then you have to click Install Now. I will take a little time. And you can see it's plugin Install successful, and now we have to activate it. And for Activate, you have to click this activate plugin button. Okay, here we go. You can see our plugin is activated. And if our plugin had any error or any issues, in that case, you may get the error message in here. But the plugin is build successfully and plugin is activated successfully, and you can see the message for successfully activated of plugin. And now where you will get the things. You will get the settings. You can see at the website. We got a new setting, and this is all about the my to do list. So from here, you have to you have to set your task, right? So let me click in here, and you will click here, you will have everything according to your needs. So you can see here we have task list here pending and completed, and for adding desk, we have the issues. So let's add a task here. So you can write here. I need to add task like have meeting with NGB. Okay, so I have a meeting with NGB and this is what I have mentioned, and this will be in my um, to do list. And it's about the priority. Is it medium priority or higher priority or low priority. So I'm going to say the high priority. And when the meeting will happen, you have to set the date here, so you can see the calendar date. And in here, I want to set about 28. Okay, so I have set the date. And if you need any other details, in that case, you can use this add details often. And when you will use this add details often, you will have the field for adding the nodes. Like it's about CRM development. Okay, so I have meeting with NGB and it's about the CRM development. I made a note here and then I'm going to click this at task option. So you can see the process is beginning. And now you can see the task is added, and it's still pending. And you can see here it's on pending list. So when my task will be completed, you can delete from here, or it will be automatically completed as it will be automatically marked as the complete task when the date will be over. So this is how you can build a to do list with load, and you can see it's totally working, totally functional and it's working fine. So this is a simple process. So now let's revise from the beginning, it will help you. So what we have done. So ultimately, at first, we have taken the jami.google.com, this RL and in here, we have created our PRD. This is the PRD, and we have copied from here. Then we used Cloud a new chat, and we have pasted the copied pad in here. These are pasted, and then the process is started by the cloud and we just had to give the permission, and we have given the permission for starting every step. And finally, we got the output in this way. But with this output, it will be critical for you to apply on hosting or in WP Admin, because if you don't have the previous technology in that case, it will be complicated for you. That's why I have written another prompt, and with this prompt, I got only ready to use one folder. And this is what we have downloaded the folder in our computer. Then we get back to our WordPress dashboard, and this is our dashboard, we logged in. And then from the plugins button, we have installed a plugin button, and then we activate the plug in. And now you can see we got our to do list in here, and for the test, we write a name here. We dit the details, we set the priority, and we have added the time in here. Okay, so you can now ask me a question like something is missing, right? So you can see we have the date here, but we didn't have the time here. So in here, you can follow two steps. You can just write the time here. And if you're not looking to do that, but if you're looking in a smart way in standard way, in that case, you can use, you can use the reminder or you can use a specific time in here. So the meeting will be held at 10:30 A.M. So you can set the time and one more things you can do. You can add an email notification. So before the meeting, the email will be sent to your personal mail from this hosting, and you will get a notification. You can do that. But therefore, from applying this type of features, you have to mention you have to mention in your BRD. Then the time and the email notification feature will be added. And the feature is not added till yet because we didn't mentioned about the email notification about the specific time. We have not mentioned in our PRD. That's why the feature is not added. But if you were looking to add the email notification, if you were looking to add for adding the time, in that case, you can write inside the PRD. And as I told you that we didn't get in here because the PRD is generated by Google JNE. That's why we didn't get the feature. But if you need the feature, you can add inside the PRD or you can mention while you will create the PRD with JMNE. Right. So this is the simple process for how you will create a two do list plugin for WordPress, and we have successfully made it. And now I will request you to make the similar plugins or you can make any other plugins. And yeah, you can do the practice as well. And for creating, if you face any issues or if you face any problem, feel free to ask me. You can write the issues on comments section or in discussion section, so I will get back to you with the answer. So I hope you venture this lesson until there, take care and goodbye, everyone. 8. Class Project - Make Calculator by Vibe Coding: Hello, everyone, it's time for class project, and you can consider the class project as your homework. So whatever you learn, this is time for applying your learning skill with practical work. So this is called the class project, and the name of our class project is make a calculator with be coding. And this will be our class project. And let's focus about the description. It's mentioned about build a fully functional calculator application with vibe coding with EI assistance. In this project, you will learn how to transform a simple idea into a working application by writing effective prom, generating code, refining the EI, fixing errors, and adding core calculator features such as basic arithmic operations and a responsive interface. This is the description of our class project. Now, we have to focus what you have to do. So you have to follow the three steps. The first one is you have to open the cloud, and let's focus about how you will do that. So in my Firefox browser, I'm going to open the cloud in here, and, you know, this is the cloudlclod.ai slash NU, or you can just use this plus sign for new chat. Okay, then you will have this similar interface as like me. Or, yeah, you can do in your Cloud app in your smartphone as well, but I prefer to use Distro version. Right. Then what do you have to follow, then you have to write this prom. So the prompt is mentioned about the creative modern responsive calculator web application using HTML CSS and JavaScript. The calculator should have a clean intuitive interface with support for basic rythmic operations, addition, subtraction, multiplication, and division, allow with decimal numbers, percentage, clear, delayed, and equal functions. Include keyboard support, proper error handling, smooth button animations, and a mobile friendly responsive layout. Organize the project into separate files like index dot html style dot css and script dot GSS using clean modular and well commented code that follow modern JavaScript best practice. The application should be fully functional and ready to run by simply opening the index dot HTML file in a web browser. So from the prompt, you got the idea what will be the functionality? It will be full functional and it will be opened in web browser. And if we use this index HTML file in a web browser, then we will able to use the calculator. And then finally, we have to focus on in step three check the functionality. Either calculator is working on. So we already opened Step one. We already opened the pod now we have to copy this prompt from here. And then you have to paste it. And you can keep the opus five as well as we have used this opus five model, so you can keep the opus five. And then you have to hit the intro button. And you know, it will take a little time for creating the calculator because we have mentioned about what will be the language. Therefore, we have to wait a little until the process is completed. So here we go. We got the output here, and you can see we have total four file. This is the Zip file and here is the index, here is the style, and here is the script file, as we mentioned inside our prompt. And now let me download the Zip file. So here the file is downloaded and let me open it. And for open, you have to open this one, and you can extract it. So you can just directly extract two. So I'm going to extract in my downwoad folder. And let's take a look either the file is working or not. So let's check inside my downwoad folder. And here we go. We got our file extracted in here and we have three files. This is the index file. This is the script and this is the style file. So ultimately, what we have mentioned in our prompt, you can see that index dot HTML, this file will be used for opening in a web browser. So let's take a look either it's opening or not in web browser, so we have to make sure that it's opening on web browser. Therefore, we have to open that file. And here is the index file. So let me double click here and you can see the calculator is opened in web browser. So in our step three, what we have to do we have to check the functionality. So ultimately, the calculator is working or not. We have to check it. So let's check it. And yeah, I'm going to multiply ten is to five equal 50. Okay, so ultimately the calculator is working and it's full functional. So this is all about your class project. And now let's focus about the outcome on the class project. And by the complete this project, students will be able to build a fully functional calculator using EI powered vibe coding. They will learn how to write effective prompt to generate improve and refine the application code, create a clean and responsive calculator interface, implement basic arithmic operations such as addition, substruction, multiplication and division debug and optimize a generated code and successfully run the completed calculator application in a web browser. So from the prompt, we have created the calculator, and we have successfully run the calculator application inside the web browser, and it's fully functional, and we have checked. Okay. So the final part is where students will submit the class project. So this is a class project. You have to make the same file and you can share your class project inside the project section or you can also share or you can also post on the discussion section. So you can focus on two ways. You can directly share the screenshot or you can share the URL or you can share the Z file that uploaded in Google Drive or somewhere. You can share the ZFle so we can take a look how your calculator is working. So this is how you will share your class project. Okay, so this is your task, and I'm really interested and excited to have a look how your calculator is working and how you are making the calculator, and I'm really excited to have a look. So just start participating in the class project and do share your task with me.