Transcripts
1. 1.1 Introduction & Overview of Masterclass: Hi there. Welcome to this
amazing master class that is be coding for beginners.
I am Shakes ful. With the past one year of experience as a EI
prompt engineer. I have found these
amazing AI tools in which it helps me to build
the amazing solutions. It can be a web app, it can
be a sales landing page. It can be a website just by
describing my requirements in the form of prompt without relying on the
developers or coding. If you are the developer
or the non programmers, so this course is going
to be amazing for you. Okay? So be coding is
nothing but designing any solutions by just
describing your requirements. Okay? So for example, if you're looking to
create an website Webb and you are looking
to turn your idea into reality within
a few minutes or without hiring developers and
wasting time coding tools. So you can use this
be coding to build the amazing solutions by using AI without writing the
single line of code. Okay. So in this master class, you are going to
learn how to use HAGPT and lovable
dot dev, bol dot U, stitch and other
I tools to create the amazing web abs and website and landing
page for your product and services to create within a few minutes without
hiring a developers without knowing the knowledge of
code you can easily create the amazing solutions by
just describing your prompt. Okay, here, and you can develop such more and
beautiful attractive, amazing designs after
this course by using lovable DV and bool dot
and other ITs, as well. Okay. So in this course, we are going to
learn how we can use this particular AI tools that is lovable bool dot Nu to create the amazing websites web
apps and landing page without depending
on other developers or without wasting your time, you can create
just by describing your requirements in the form of prompt in the plain English. Okay, that is simple. So after this course, you have the ability to
create any solution, that is, it can be WebApp. It can be website. It
can be landing page. You have the ability create the amazing websites within a few minutes without
wasting the time in code and without hiring
a developer and without paying to someone to create these amazing
solutions by yourself. Okay, if you don't have
any coding language, easily you can join this master class to master
web coding to master these tools in order to
create the amazing websites within a few minutes instead
of wasting the time. Okay, on the coding, that
this is for the beginner and nobody else want any
experience for this be coding. It is for everyone,
and it can help you to save a lot of time and
to create amazing websites, webs for yourself
and you can turn your app idea into reality without just
relying on developers. Even if you don't
know how to write the prompts for creating the
web abs and landing page, I'm going to provide the
exact prompt templates you need in order to create and develop
web apps landing page and website for yourself. So these prompt templates can be editable according
to our requirements. Okay? We will dive into for
the basic introduction. So what Bb coding is. Okay, let's dive into that.
2. 1.2 What is Vibe Coding?: To what is the actual
meaning of wipe coding? So coding is nothing but. It is a software development
that heavily relies on AI, particularly LLN. Okay, that is large
language models like GPT or other things. Okay, to generate code based on natural language prompts.
So what's happening here? So instead of writing the code by yourself to
build any website, any web apps, right? So instead of writing
the code by yourself, you can write in the natural
language text format. That is called prompt. You can describe what design you want. Okay, what functionality
you are looking to including that
website or WebApp. Okay. Based upon your
instructions and proms, it generate the code as well as the design of your website
or webapp. That is simple. Okay? The bcding is nothing but instead of writing
the code by yourself, the AI will write the code for
you based upon your proms. Prompts is nothing but writing your requirements,
describing your design, webb design or website design that you are looking
to build by using I tools like lovable dot dev and bold and other EI tools
as well to generate amazing websites or
web Abs by describing your requirements in the form
of prompt in the AI tools. That is simple how we can understand this
be code in this. Okay, so what is the use of this particular be
coding in this AIS word? So this method allows
developers and even non programmers to create
functional applications by describing their
desired outcome in plain English with the AI handling the task of
writing the actual code. So this is amazing time saving AI tools and technology in which we are going
to use our prompts. Okay, prompts means nothing but your requirements
and describing your design functionalities and all those things in the form of text in the plain English. Okay. You can write it and it will automatically
write the code, based on your prompt
and requirements, and it will design the
web web or website very effectively and easily
without wasting any time. Okay, so this method
allows developers. Okay, so right now, if you
have already developer or even if you don't know
anything about coding, so you can create
the websites very easily and fastly without hiring the developers or
even reliance on the other friends or any members to create
the website or web app. Okay, you can create the Bself. You can learn it
and you can create amazing solutions by using
be coding in the AIS word. Okay. So if you're a developer
or the non programmers, it can easily help you to create the applications
very easily. Okay, by just describing
your desired outcome, in the plain English.
Okay, that is simple. For just an example, I will show to
understand better than, so I will go to
the lovable dotv. Okay. It is a tool. We can create something websites or web apps by just
describing it. Okay. So just to go, so I will show each and
everything in the next session. But for the
understanding purpose, we are here at the lovable.com, and we will write simple, create a website. Okay,
we can take anything. Create a blog website
for technology Nish. So this is our requirements, okay? It is a prompt, right? So when we give to this
particular lovable dot vi tool, no it will start creating the website for
our requirements. According to this prompt, it will generate the code as well, and it will automatically
create the website for us. Okay? It is based
upon your prompt, it will create all those things. Okay? You can see, I'll create a modern beautiful
technology block website with a clean design
responst all those things. So it is a prompt, right? No, it is writing
the code by itself. This is called an be coding. Okay? Instead of writing
the code by yourself, you're writing the prompt here. Okay, it is a prompt and it will writing
the code by itself, AI itself, which is
called be coding. Okay? So the AI is taking
the code handling, right? It will handle all the code to create the amazing
solution for you. Let's see how things
will show. Okay. Let's wait for a few minutes and we'll see what
happens here, right? So you can see it is created the stunning technology block website with our requirements. This is up to our prompt. Okay? You can see here. No it is features
are hero section, navigation header, okay, featured articles,
category grid. So it is all the things
that AI has created for us. No Kc it is a preview section. So this is our blog website for the technological purpose. No Kc this is a
simple blog website. You can use it for your
blogs, all those things. Okay. Okay, we have used a simple prompt to create
the amazing website, to automate all
those things, right? No, KC this is the
front end code, right? It looks like better, right? So you can do these things
by simply just giving here. Okay? This is the design. You can see the code
here. Come to this. This is the code. Okay.
This code is written by the AI according to your
requirements and prompt. Okay, it is handle all the
required code by itself. You can see here. Even if
you don't know about coding, you can create something very amazing
websites or web apps for yourself by just
describing here. Okay? This is called a simple what is an
white codings, right? And you can create
so many things with lovable dot v and
other Is as well. So in the next section, I am going to show
how you can create the sales landing page for
your product and services. Okay, by using lovable
dot dev, bool dot nu, and I will show some free ways to create all
those things by yourself. Okay. So let's jump
into that session.
3. 2.1 Prompt Creation for Landing Page Designing Using ChatGPT: So we are going to learn how
to use lovable and hagiPt to create the landing page for our product and
services without coding. Okay, let's dive into that. So I am giving this whole prompt you can
get from the document. I see prom template
that you can use to create the sales landing page for your product and services. Okay, I will show Tempe
step how you can edit this particular
landing page prompt and you can use in the lovable, that is a great AI tool to create the website's
landing page, and we will see how we can create in less than
a few minutes. Okay, so I will just copy this particular whole
prompt template and just come to
Chapt and write, analyze this prompt. Template. Now what happens here? The AI will analyze
our prompt template. No, you can see this
prom template is very strong and well
structured for guiding AI to create an effective conversion
optimal landing page. We can see it has analyzed
our prom template very well. You can see all those things.
So what we need to do here. Okay? So for example, if you have already the product or
service landing page or if you are already
hosted the product in any third party website like Um Skillshare or
anything where you are. So you have taken the title sum, you already have the
description product or service description,
all those things. If you don't have, what
need to do but just come to here and you need to give you need to edit the
answers from directly here. Okay? For example,
let's just edit here, what you need to if you have the details of your
product or services. Okay, if you have that details, you can easily come here, you can edit all this here. Okay? For example, Okay, who are the ideal customers include demographics,
needs and key points. You can easily come here and you can easily insert from
directly here or you can. If you have already
the PDF details of your product or
services or website link, you can provide here just
like In above prompt. Just add these details, add or add my product details and update the prong. Now, what happens here if you already have the product
or service details, so you can easily
include with the file. Okay, you can add from the
Google Drive, Microsoft Drive, and you can add the photos and files as well from
your computer. In that case, the I will analyze the whole product details and title description,
all those things, and it will update
the whole prompt, right with these particular
sections with your details. Okay, which makes
the landing page personalized for you.
Okay, that is simple. For example, I have
created the course and have hosted in third
party platform. Okay, third party course
selling platform. So I have gotten that particular personalized
codes link for me. Okay, if I provide this
particular link here. Okay, let's see this how
we can include this link. Now I will include my
course link detail here. You can see here this is a
simple course detail link that I have hosted my whole course in
third party platform. You can see her. I
just told to AI in Abo just add my product
details and update the prompt. What happens here, the
AI will automatically analyze my codes hosted codes in other third
party platform, and it will gather
the details from it, and it will automatically
write the answers for me. I will edit the whole
template for me, and it will give
the updated version of whole landing page prompt. Instead of writing by myself, it will easily create
all the things to this particular landing page, you can see how you can see this is the whole landing page. Template. You can see. Now I can easily copy
the prompt, okay? And I will use this
whole prompt in the landing page
EI creation tool to automate all those things. Okay, instead of giving the
answers, by yourself here. Okay, in the prompt itself here, I will just use the AI to
save the time and to create the whole prompt to create the landing page for my
product and services. I hope you understand
these points. You can include the link of your product or
services that you have already hosted the DTLs and Cores or any other product, or you can easily give
the answers for each. You can edit the answers
for each section. Okay, buy yourself
from here or you can include the files and details of our
product and services, then the charge
will automatically gather the information
which is required to the AI to create
the whole prompt in order to design our landing
page using AI tools. Okay. Now I will copy this whole updated version of landing page creation prompt. Okay, and I will copy that. And I will come to lovable, which is great AI tool. Okay? We can create so many websites, web apps just by writing the prompts instead
of coding. Okay.
4. 2.2 Landing Page Creation Using Lovable Ai: Looking to learn more
about the lovable, you can check it in the
YouTube or online search. Okay, I have just come to here, and I will page particular
whole prompt to here. Okay. Now, Yes, it is analyzing all
the thing, right? This is our whole
automation prong. Now it will automatically create all the sections, F sections, all the landing page essential sections in order to create the compelling and attractive design for our landing page. Okay? You can get the idea all those things
from here, right? Now you can see the
spinning preview. You can preview your
whole landing page from here and you can update all those things
by yourself here. Okay? No, we can see the
invite button. You can add the super Base. Please go and check what is the benefits of using Superpas and all those
things in the lovable. You can check it
all those things by yourself in the online
search or in the YouTube. Okay. So our landing page, we do not require
any integration. Like we do not require
the Super pase, all those things for
our landing page. So as you know, the
landing page is a single page website in which
our objective is to create some compelling action to
take the user to complete our lead qualification or to complete our
purchase like that. Okay. So for that we are not using anything here, superbse. Okay, we are just creating some single page landing page to purchase our product or to
submit their details, right? So for that we are using this landing page to
sell the cores of me. Okay. So in my case, I am using this lovable to create the landing page
to sell my course. Okay. So for that I have
just you've already seen how we can return the
prompt by using Chagpt itself. We have already seen in
the previous SessaR? So now we will see how the
landing page looks like, sell my course online.
Okay, let's see that. You have the daily five credits, only fry credits you
will get per day in which you can try out
all this lovable by USL. Okay. So for that, you
can use all this prom that I have shown
in previous one. So it will save your
credits day by day, and you can create the amazing
solution for yourself. Okay, now you can see it has generated the
something happened, we will try to fix it. So sometimes the AI will see
some gender issues also. You need to click on
the trip for fix. I will automatically fix it. Okay, this is not a problem. You can see I can see the issue. The problem is with the
SPG background pattern URS in both components, so it will take and it will fix automatically
by lovable itself. Now you can see, you can add a detailed
course description, add a student review
to build trust, create Q section to
answer common questions. You can add all those
things from here only. You just need to give the guidance or requirements
to AI chat here. No, it will automatically
do the things for you. Instead of adding the coding or instead of you
hiring the developer, you can do by yourself with
just describing your design, describing your idea with
that, that is simple. Okay, you can create the
amazing landing page for your product and service. Now it is taking time. Now it is fix the whole
errors, you can see here. Let's see the design
of our landing page. Wow, it's a great thing.
So you can see this is a simple landing page that
I have created, right? So in order to sell my
product or services. Now you can see this
simple landing page. You can see what that
is cool one, right? You can see here. Master prompt entering
basic to advance. This is a full course. Watch preview, they
have some errors also. You can see this is what
you will learn, right? So master core concepts, advanced prompt patterns,
real world application. This is the things that the user will learn from my
course, and you can see, plus, you will get
exclusive bonuses, templates, real projects,
lifetime updates. And unlike other courses, this is one actually works. Now you can see project
based learning. This is a simple sections
that has created by the AI in order to
create the landing page. Okay, you can see this is a simple great project
that you can see. This course versus others, you can see, right? And enroll RH rating, star rating, completion rate. You can see RL prompt
examples you master, right. Now you can see the
watch review also. So learn from Industry expect. It has also I included
the instructor section, you can see here, learn more about your instructor,
which is great on, right? Alex Engineering, you can
add your image also here. That is how you can use this
particular lovable to create the amazing landing page to increase your conversions
and purchases. Now you can see a FAQ
section, all those things. Okay, don't let the
opportunity pass. You buy. Now you can
see all those things. So when you think, this is a great landing
page, if I think, because it has some
amazing sections like a pricing section, FX section, it has
created, okay, some review section and instructor section and you
can see what you will gain, what you will learn section.
That is a great one, right? So it is looking okay, it is good when compared to other also
because when you go to a try yourself and you try to create landing page
using the AI tools, just copying the
code and pasting in the different AI tools and
checking all those things, you can use this
to just describing your ideas and the requirements in terms of text or words, it will convert
that into design. Okay, that's great, right? So you can use all
those things by here. Okay. Now, what you need to do? This landing page is
simple single page, right? So we have the two buttons. That is andron now
and watch preview. So what you need to do
for the watch preview, you need to add your simple introduction
video to YouTube, Okay, and make it private and copy the YouTube
wink and come to here. Just say, I'll take any of
video to show you as example. So I will take this example, right? Copy this video. A video of. You can
add from anywhere. Okay, not only YouTube, you can add to the drive
and you can add anywhere. You can host your video
anywhere and copy that share a link and come to
here and just tell to AI. Add this link to watch review. Watch Preview button. Not only that, you can add Enroll instant access
button link also. So what is the Enroll no
instant access button? So you need to add
the payment link page or other action
link that you want, create and hosted anywhere. And you can create that
particular link and just tell to AI here. I'll take, for example, I will take the same
link in order to show you it whether
it works or not. Okay. I will show you
add this link. Okay. So for example, I will take another page or all the things for your better understanding. So I will take this example. I will take this
Google Search example to show you whether
it works or not. Okay, come to this and add
this link to roll no button. So what happens here? These two links, the lovable AI will add these two
particular links to these particular buttons. Okay. Now you can see, I will update the button links and fix the typescript error, all those things
you can see here. Okay. So what you need to do, you need to create
the code payment page or other that you are looking to take the details
from the user. Okay, you can take that link
and you can tell to AI, add the particular
link to the Enroll no button and you can see
watch preview we can do anything by just adding the here it will automatically create all those things for you, let's see how it works. And not only that, you
can easily check here, mobile preview, tab
preview, all those things. You can see this is a response, which is great one. You
can see this is one. Now you can see the simple that is and you can see this is a great landing page for the mobile also,
you can see here. Right. Okay. It has amazingly
created all those things. For the watch preview,
what happens here, I will take this particular
link or YouTube video. Okay, let's check it out. So I will come to here and I will take this
for the website. Now, when I create
this watch preview, it's take me to the YouTube. Okay, you can see here. Now you can easily host your
video wherever you want, in the YouTube or the drive, just take that link and come
to this AI and tell to AI, add this particular link
to this particular button, then it will take all of
you. All of your work. Okay. Now you can see the
endo instant access. Le click here, it will go with the stitch
with google.com. So I have used this simple, but the sample details
you can see you can use all those things these things by
yourself easily, right? Not only that you can go,
you can check here also do. It will take me this
stitch with google.com. Okay? That is simple how you can
use this lovable to create the landing page
for your details or for your product or
services, you can do. Not only that you can
easily tend to AI, remove the particular section, add the additional section
wherever you want, you need to guide the lovable to do the things for you. Okay? For example, if I tell to AI to renew the let's take that. If I tell to AI, remove the instructor suction. What happens here, it
will automatically remove this particular
instruction section from this landing page. Not only that, if what you
need you can add anything. So you can add anything,
you can remove, we can change the color,
we can change the boxes, all those things by just describing and putting your requirements in
this chat section. You can see I'll remove the instructor section
from the landing page. Now you can see there is no instructor section in
this landing page. You can check it
out here easily. Okay. There is no instructor section lab
in this learning page. Okay? So this is how you can edit
and you can change the color, all those things from just using this particular chat section and you can describe each and
everything that you want. Okay? And you can preview
all those things from the tab in the phone,
how it looks like. Okay. And not only that, you can just sync
your project to Github if you already have
the knowledge about coding, GitHub, and superbse as well. Okay? You can publish out. You can see the
code preview also. If you have already seen
this particular code, code, robot robot it XT
file components what it has used to generate all those
things by yourself. If you already have
the coding knowledge, you can use all those
things by yourself, you can copy and you can create your own files in the VS
code, all those things. I can do all those
things by yourself, if you have the coding
language. Okay. Knowledge coding language. You can easily see this
particular landing page by yourself. You can use it. You can master it and you can easily change by yourself
or your requirements. Not only that you can easily
integrate the superbs, just click on the
Connect Superbase, you can easily go from here, Connective Superbse
it will take to the APXs and you can need
to create the account, and it will just
take automation. So if you are looking to learn, you can watch Tutorial, Cdg, all those things, and you can see this is a simple you workspace project settings, you can easily check
it out, right? And you can remix this rename
project til this project, all those things
lapse, you can get there and Superbskit Okay, plans and billing that
is most important thing. If you look this
particular pricing plans, you can see, this is
a free one, right? Zero per month,
you do not need to pay the single dollar or so, you will get the
five daily credits. Okay. Okay. What is
the dict credits? You can see. So I have
used the mud particular. This is the one credit, first credit that I
have given the prawn. Okay. Now, after that, this is a second credit. Okay, have used it. So the
third credit is this one, and the fourth
credit is this one. So the credit means the
instruction that you have given is is called an credit. Okay? This is a simple five
credits I have for free, in order to check or in order to learn this
lovable day by day, I will get the five
credits per day. Okay. You can use day by day for
the five credits very free. Okay. And you can
upgrade to plan, okay, for more customized
features for you. And remember, one thing
this is a public project. So when you publish
the project from here. Okay, from here, it will lie
to all the public users. Okay, they can use
your landing page. They can remix here, okay? They can change the things. Okay, all those Okay, if you're looking to create the private landing
page or website, you need to upgrade
the particular plan here they are showing
in which you can easily see this is
everything in plus, and you can easily create all
the private projects also. You can see this is
a private project, so it is accessible for you only instead of public in
which they cannot remix. Okay. So this private
project for this, you can use this upgrade to
this particular monthly. Okay. Okay. So if you do not like to if you love this particular
landing page, for example, if you are looking to,
I need to have the free and I need to create
the private project as well. So if you are looking for
that particular AI tool, so in the next video, I will show how you can design the same particular
using the prom, so in the next section, I will show how you can use the same prompts to create
the landing page for you in different AI tool to get access for the private projects and the limits and
more token limits. Okay, to create by yourself, and it can be
accessible for free, which is alternative
to lovable.ai tool. Okay, let's jump into another session and let's
see what is a tool and how we can create
the landing page in the other tool.
Let's dive into that.
5. 2.3 Landing Page Creation Using Bolt Ai: Let's see another alternative
AI tool to lovable. So in the previous session, we have seen how we can
create the landing page, our product or services
using lovable and Chrome. So now let's see
another AI tool that is bold dot NU in which we can create the landing page
website web web by just describing in our words
that is P let's see you can easily write the prompt
here and you can add the mini files and you can
use the enhanced prompt, all those things by yourself. You can easily learn about the bol dot new in the YouTube, all the resources
they have given. Okay, you can check it all
those things by yourself, YouTube discard Linkedin and you can get access to Community and you can
see the pricing section. Okay? Let's see first, what is the pricing
section here. So this is a free plan
you can use here, there is a 1 million
coupons per month, and 150 K Dai limit. If it doesn't know about that, what is the token,
all those things, you can learn from
the YouTube easily, and you can see this is the major benefit of
using this bold dot new Es we can create the public and private
projects. That is great part. So when you compare
to the lovable, lovable have only
the public projects you can see here, for free. Okay? So in order to create the private projects that
is accessible to you only, you need to upgrade this
particular pro plan. So in the bold dart new it
is not required, right? So this is a great one
about this Boldt Nu. So you can create
the private projects and public projects as well, and that is up to this
particular bold dot Nu. Okay. And you can easily upgrade to this
particular one also. Okay. Now, let's see
what is one tokens? It is a 1 million tokens
you will get per month for free in order to generate the code and create
the solutions for you. Okay? Let's check it
how it will works. Okay? Now, let's jump into that. So I will copy this
same prompt that I have used in the lovable previously. Okay, let's take how the
design looks like in the bolt new tool and we will discuss all those
things in the few seconds. Okay. I will copy this
particular same prompt and I will just paste into the
bold dart new AI tool. Now, let's see how it the
landing page looks like. Okay? Now it's taking time. Now you can easily export the code as well, and
you can deploy it. And that is a great one about this bolt news you can create the private projects.
That is great one. Okay? For the free, you cannot get the same
access in the lovable. But you can get in this boldneiTol which is
a great one to create the amazing landing pages webpsF free using simple
writing the prompt. Okay. Now you can see here. Now generating all the things
required files by itself. Now you can see, I have created a comprehensive production
ready landing page for you. We make codes that corrupts all the essential elements
for the maximum conversion. Now I can see this is
a simple landing page that let has created. Now you can see this is a similar color all the
things we have seen in the previous
landing page because we have given our design
with some color, right? You can see this strong CTA. Which is a similar thing when compared to
the lovable also. No, I can see this is
a great one, right? You can check it
all the same code, all the things by yourself, you have the coding
language you can use, and you can encrypt
Bself without paying the single dollar to this particular AI tool.
No, I can see this is the. Let's see how it looks. Now, this is a similar thing
that lovable has generated. Now, you can see all
those things here. Watch preview, and this is
what you will learn things. Okay, and why this code
stands out. That's great one. This section is looking great. And this is a simple
meteor instructor, which is a simple and
very effect, right? When compatible lovable. Okay. I can see this is what
strings are saying, and this goes, Okay, and frequently asked questions. You can see does EI does AI or program
experience required? No, you can see ready to begin
the prompt engine expired. You can see simple landing page. So let's compare both and we'll see which
one is great one. Now, you can see this is
a simple landing page that lovable dot created. You can see this is a
thing what you will learn and what you will get and the prompt
engineering course available. Which is a great one. These also have the
great things, right? So it will show which
is benefits and offers, all those things, which
is a great one, right? It is a recognizable
course, right? For that, we can easily
improve our conversion rates, all those things from here also. And bolt T also
created the great one. You can check it all
those things here. Watch preview, no button, what you will write and why
these quotes stand out. You can see specific
advanced ticking time xs, meet your instructor,
what students are saying, frequently ask questions.
So what's happening here? This is a simple landing page, but this and page doesn't contain the
recognizable reviews, okay, or recognizable numbers
or other things in order to trust this and in order to purchase these
particular quotes, okay. Now, when compared to the love, lovable has a great
recognizable points and sections proves that
the average student can purchase this, right? Because they have the
students numbers, five star reviews, rating,
what are the rating? What is the completion rate?
And what are some reviews? And you can see all
those things from there. Which is a great one. Okay, it is a
detailed landing page that how it looks like to take the action by user to purchase it or to
submit to the details. Okay, which is a
great one, right? They have some issues, but there is a great one when
compared to the bold DNU, but it is a simple design. Okay, and it is required
to include the sections. Okay. So for that,
what you need to do? You just come to the here and can tell to add
the same thing here. Let's come to av. Let's see our next thing
that is adding the links. I will copy the same thing here and I'll come to
the boat noun to you. I will just copy this
particular thing. Now what happens here, it will just automatically add these particular links to
these particular buttons. Now you can see this is one. I will update the landing page to add the YouTube Pre link and the Google Stitch
Environment link to the respective buttons. You can see here. I
will automatically add the links to the particular
buttons easily, right? So we have seen the
comparison between the lovable landing page and
Wold dot New Landing page. Okay. So after that, so I use the lovable
landing page for my course because the
lovable has the great details. Okay, more details
about my course, which covers the instructure
details and course section, benefits and free bonuses, and detail reviews,
all those things in which I can trust and I will take the purchase
and action, right? So in this case, this
is a simple thing, which is great one, okay? But this doesn't have the
detail and some reviews. Okay, social proof, which
is not a great one, right? So that's why I think the
lovable landing page has a great potential
when compared to this bold new generated
landing page. Okay, we can create
all those things by just describing and checking all those things by yourself. Now after that, it will
just add the links how the lovable dot Aev has added the link to
this particular button. It will also include
the same itself. Okay. The great thing about this bold dot New is you can
create the private projects, and you can export
the code as well, and it doesn't get
in the lovable. Okay, to download the code, you need to upgrade to
paid plan or to edit it. Okay, you can just copy by
yourself, which takes time, but the bold dot New can
just when you click on that, it will automatically
download them. Whole code for you. Okay? No, I can see it has generated all the things YouTube PrevinkGoole
Stitch Enrollment, Link added, all those
things for you. When I click on that here, it takes to the YouTube. Sorry, Google stitch that
the lovable AI has done. Okay? That is now how you
can use this particular boll dot dot new and lovable to
create the landing page, all those things by yourself. Okay, as well, as I said, you can integrate the
stripe super baasGitub. So in the lovable, it
doesn't have the stripe, but the Bolt has a stripe in which you
can easily integrate the stripe button for your
product to sell to purchase, all these things by yourself,
you need to come here. You need to tell to create the purchase page for my course. Okay, for your product and
services using the stripe. So it will show the
step by step how you can get the APA
from this stripe. Okay, just click here, it will take to the
stripe and you need to the account,
all those things. I cannot show how you can use this t because in my country, it is limited for users. So I'm not have
access for this upon. So for that, I'm not showing it. So you can follow this sum on online tutorials, all
those things by yourself, and you can use the
Superbus all those things, but just you need to verify
and you just to tell to EI. So create this one, all
those things by yourself, how can you are looking to create the landing
page by yourself, you need to describe
here, and you will get all the things by using
this bool dotneu as well. Can deploy it. When you
click on the Deploy, it will automatically deploy to the particular application.
You can use this. I will show you the
next section how you can create the
similar landing page. But the free using Cloud. Okay, for free,
without depending on this particular bolt lovable.ai
to pay them per month. Okay, you can create for free without any
coding language. I will show in the next section. Okay. So what is the
benefit of this? You doesn't depend on
this particular bolt or other AI tools to
pay the per month, or you can easily create the similar same landing page just using the other
AI tools for free. Okay, let's dive into that.
6. 2.4 Landing Page Creation Using Claude Ai: In this section, we are going
to see how we can create the similar landing
page for our product and services using
some free steps, using free without
writing the code. Okay. Instead of depending on this particular AI
tools, let's see that. So first, you need to do, just click on the full
screen button here. Okay, you can easily
come from the lovable or the bol dotneU creating the landing page from the
lovable or bool dot neu, what you need to do
come this section and come to here this button. Open Prove in the separate tab. Okay, you can click
here. And you need to connect to
the project, right? I'll just click
here. It will take automatically to
connect the project, and it will create the preview link in which you
can see this one. This is the preview link.
Okay. So what you need to do, come to the Chrome
extension and you need to search for the
scrolling screenshot tool. Okay. And just click
on the At to Chrome. So I've already added this Chrome extension to the Chrome already
you can see here. So what you need to just come to this whole landing page and
you need to click here. Click on this particular
extension icon, and you can easily
take the screenshot of any selected area
full page or anything you can see here and just
click on the full page. Notter what happens,
it will take the whole screenshot of
your landing page. Okay? Now you can see you can
download from here directly, and you can see this is the
screenshot we have taken. Now, come to the Cloud one. The Cloud is the best AI tool which to write the landing
page or to write the code. Okay, when I use the
different AI tools, but I find this cloud is
an amazing AI tool or to write the code or to create such amazing websites
by writing the code. Okay? So how we can do
this, we'll see here. So just come to
here and you need to add this particular
image to here. Okay upload a file and you need to upload this particular
screenshot to here. Okay, open it. Not it will take this image. Now you can see just right here. Create the landing page similar I provide. What happens here, it
will automatically create the landing page for
you by writing the code. Let's see how it works. Let's see how it works. You can see this is image I have given the screenshot
of our landing page, and this is the instruction
that I have given. Now, it will start generating the coding for me based
upon this particular image. Okay. Let's see how it looks
like. After a few minutes. Now it is generating some
HTML and CSS file as well. Now you can check and
remember one thing this Cloud AI have some limit for this
context window, okay? So there is a limit
for the free users. You cannot write the
so bunch of code, okay, out of this
context window. So you need to jump
to another create. You need to create
the new session to write the code again. So this is some
drama of cloud four. So to you need to upgrade
to get the more limits. Okay. You can get
all the details from the pricing section of
this particular cloud one. Okay, you can get
from that. Okay. No has started generating the CSS and HTML file if you
don't know about the coding. So there is no problem in it. I will show how you can
create these files in the VS code and you can
just see how it looks like. Okay. You can see all those
things in this video. You can see this simple STMLFle and CSS file
future sections. You can see all those things. You need to create some folder and you need to copy and
you need to paste this code and you will get the
landing page for you without knowing any
technical knowledge, coding, or even you do not depend on this particular
AI tools that is lovable, bol dot U, and you
can easily create this one by using Cloud one. Okay? But Now, let's see. This is our landing
page that we have created based upon the
lovable or bolt neu. We have given this
image like this and we'll get the landing page here. This is how we can
looks like, right? This is amazing simple
landing page that looks like our given landing page that is created from
the bold dot neu, that is you can see here. Okay. You can change all
those things by yourself. This is simple landing page
that you can see. Okay. So how we can get this. Okay? For this, you need to compare the core section, right? You need to copy
this particular one. Just to copy this and
come to the folder. Okay, you need to come, I need to go to this one. I need to create some folder. Let's take name landing page. Okay. And you need to
come to this VS code. If you don't know
what is a VS code, if you're looking to learn, you can get there are many videos in the YouTube
you can get from that. Okay. You need to come
to this file section. You need to open the folder. You need to select
where you have created the new folder
that is landing page. You can find from here. Okay, I will select this folder. Now, I need to create new file. Okay? That is one you can just easily come
here and a new file. And I will give the
name for the index dot. STL. What happens? This is a simple
file I need to give. I have copied the
whole code from here. I'll just copy this and I will paste in this particular file. Okay. This is the simple
file that I have created. You need to come here, you need to save
it. That is simple. Now, if you come here you
need to go Runs corner. In the down, you can
see this go live. Just click on the
go live button, it will start generating. This is our landing
page that you can see, which is similar
to this bolt neu. You can see this is a
simple bot landing page which looks like we have seen
in this tag. This is one. This is one we have
created using the cloud. This is one we have created
with the bold dot Nu, right? That is simple how you
can use this cloud to create the for free. Okay, you do not
require to depend on the Boldt Nu or lovable. You can easily use this
particular cloud to create the landing page without
knowing any coding language. That is the Y coding is very powerful skill in this
today's world to create amazing solutions
just by describing your words requirements
in the text format. Okay? This is how you
can use you can create this particular
landing page for free. So this is it will works only with the
labor if you are looking to host this host
your landing page. You can come to FirebsHsting, and you can get started
with the firebox hosting. You can easily I will
show how you can easily host your
particular website, landing page by using Firebase. You can get all the details
from the firebase session, or you can get the YouTube
videos in which they will show you can
learn how to host your particular website to this particular firebase hosting in which you can get the link, your landing page host link, and you can use
wherever you want. Okay. This is another
step how you can create the free landing page
for your product and services without
knowing writing the code. For the design purpose, you
can take the inspiration from the bolt Nu or lovable in order to create a
similar landing page in the cloud or you can use
this for free bol dot neu. Okay, this is your link, right? This is your link. Easily you can take this and you can take whatever you want and you can sell your
product and services through this particular landing
page, and this is your link. Okay. That is how you
can use this particular lovable bool dot new and Cloud to create
the landing pages, and you can learn from
it, all those things. Okay. Instead of
using the Cloud, you can use other
tools as well like haPTKrog in order to
create the landing page, but the Cloud is the best acding editor air tool in
this market right now. So for that, you can use
this particular cloud to create the missing websites or landing page for
your requirements. I hope you understand
these sections very well. Okay, let's see another session, how we can create
the website by using these tools for free.
Let's jump into that.
7. 3.1 Prompt Creation for Website Development: Session, we have seen how we can use different AI
tools like lovable, bol dot N, and Cloud to create the landing page for our product and
services, right? So in this session, we
are going to see how we can use these particular
AI tools that is lovable and other AI tools to create a particular
website for ourselves. Okay. So in this session, I am going show you how you can create your
portfolio website. Okay. You can create any website like blog website or anything, any website you can create with this prompt, in few second, I will show how you can create the whole website prompt
in seconds. Okay. So I will show all those
things in this session, right? So let's see how we
can create this. So you need to come
to this prompt, okay? So I will give this prompt in the document
we can get from there. That is a website builder
prompt. So it is easy one. So with this prompt,
you can create any type of website like online store, business site, or blogs, or even you can create with
your Porto fello website. Okay. So in this session, I'm going to show
how we can create Poofel website using AI
tools that is lovable. Okay, let's dive into that. Just copy this whole prompt
template from the document and come to Char GPT. You can use any I tool. I am using the hagiPT just
page here. What happens here. Let's tell to AI. Analyze this.
Analyze this prompt. Now, first, AI, the
chargb will analyze Now, this is an excellent
structure prompt for requesting a website design
and development task. Okay? So this is a simple task okay that I have
given in the prompt. Okay, you can check all
those things here, right? So now, what do we have to do? So for example, to create a
Portofelo website for USL, you have the all the experience
projects you have done or the previous experience you work with the companies
or any clients. So you need to mention all those things
in Portofel right? So what happens here? So you
need to do two things. Okay? If you have already
other Potifle website, you can take that
particular link or if you are updated
your Linkedin profile, you can take any social
media Linkedin profile link and you can paste
here and tell to AI. Okay, so I will show how
you can do this. Okay. So I will tell now, I'm providing my details. Resume. Okay. So you can use any resume if you already
have any resume or CV, you can upload direct here, or you can easily
include the link of your Potifll website or social
media link or linked in a profile link in
order to extract that particular data of yourself from that
particular social media, and it will check and it
will automatically create a perfect and easy
Potifella website prompt that we can use
in the lovable to create the amazing
Potipella website. Let's see how we can Here I
am using my resume in order to combine my details with the above prompt that
I have given to ChachPT. Okay, let's see how
we can use this. So I'm providing my details
in my resume or consider that details and update the prompt to create
personal photopoly. Okay. I have given just
have insight to the AI. No, I am providing my
details in my resume. Consider the details and update the prompt to create
personal portfolio website. Okay. So which tells to this particular charge Petty to create just to
create the prompt, to create the personal
portfolio website based on my details
in my resume. That is simple.
Okay, I will provide my resume in the
form of file. Okay. Let's This is my resume. But I has done. Let's
see what happens. F. You can see, based on
the details in resume, here are the updated
prom tailored to create personal potpil
website that reflects your skills experience
and accomplishment as AI prompt engineer. Okay, this is my
whole experience and all the skills
that I have given in the resume that is extracted from that
particular PDF resume PDF, and it will update
the whole prompt in order to create each and everything easily without
just doing by myself, it has taken the
automation, right? We can see here. This is a
whole prompt that we need to use in the
particular website, AI tool to create the
portafoli website. Let's see.
8. 3.2 Website Development using Lovable Ai & More: Copy this hole. Let's take. Okay. This is a whole
prompt we need to use, just copy it and come to lovable and just paste
it. Now you can see. Now, it will start creating
the portfel website. You can follow the same steps in other AI tools that you like, even it can be bold dot new and you can go any E to
Live firebase studio. Okay, you can use any
AI tool to create the personal portfolio by just this prompt, that
I have shown you, you can use the same
particular prompt in other AI models
as well to check which AI is generating the best and attractive
portfolio website for you. Okay, you can do
all those things. So in this session, I'm going
to show for lovable only. So I'm giving assignment to you. Please go and try out bold
new and other AI tools as well to check which one is generating the best
Portofolo website for you. So I'm just showing
the lovable dot Dev. Okay. I hope you understand
these points very well. Well, let's wait. So it has
creating some great one. You can see I will create a modern professional
Potifll website that showcase your expertise
in AI prompt engineering. Okay, you can see what I
built in this first version, hero section about
section project skills, scores, contact. Okay,
responsive design. You can see for the first
visual design, I will use. So it is just telling
to me what it has going to do to create this particular personal
Portif website. Okay? This is a
great one, right? So just describing our
designs and requirement, it will just create
the Potifl website, which is great in seconds or minutes without dragon
drop or any other thing. So this is our AI port for
the website that you can see. You can see AI prompt engineer
and freelance expert. Okay, you can see specialize in AI prompt engineering, NLP, noco development, building
intelligent solutions and teaching the next
generation of AI professionals. Very good. So this is the
simple put it on the website. Instead of here, you can add your photo that
looks great, right. About me, you can see here. Download resume, Linkedin
it will just click on. When you click on, it
takes to the LinkedIn. You can add from here just to show you here how you
can do this, right? So this is a future projects. So this is the projects I
have done in my resume. Okay, I have uploaded
all these things. So also created the link. Okay, you can when I click here, it will go to other platform. You need to do something. I will show in the
next few seconds. You can see just
machine learning, this is a skills and
expertise of mine that is prompt engineering,
NLP, GBT models. This are my experience, right? You can see here.
Online courses. So I have teached
so many courses in the Udemi and Skillshare, that it has taken these
things very great. So this is our If you look here, this spotify the website is
going to be amazing, right? So you can see this
is a modern website, which is not only showing the
uh, design attractiveness, but it also showing providing some value to the client
in which they can easily engage with my
particular Poifal website like they have just
created the icons, which is increase the
engagement rate, right? You can see this one
is very good, right? You can see here
reviews it's generated. Okay, this is a
Skillshare, this is a Ui. Okay, this is generated
according to your resume. So the prompt you have given
to this particular AI tool, based on that, it
will create it. Okay, this prompt
comes from your resume or Pif link that you
have already created. We can get all you can extract the data details of to the
Hagibt that hagiBT will create the whole prompt you can use
in every I tool to check which particular AI tool is generating the
best things for you. Okay, you can see
this is a simple one. Okay? We can easily see the responsiveness of this
particular potifi website. You can click here, you can see home about section projects. When you click here, it will go to the future
projects, right. This is great one,
right? This is how A is generating
all these things. Okay. Even the
developer can also take so much time to create
all those things, right? You can see this is nothing. Okay, you do not need
any code knowledge. You just need how to write
the best prompt for it. Okay. That is simple. This is now how it
looks like it, right? It is in the form of the phone. You can see view my projects. You can just click here takes
the future project section. When you click here
in the view details, it will jump into the
website or details of your project. You need
to attach it, right. You can see mobile application
and skills and expertise. What are you can see here, views on Skillshare, and this is the courses that have created. So this is taken all from
my resume. This is simple. This is great one, and it also created something email
you can create here. You can edit option. You can create the email
contact phone number linked in. You need to tell here,
just update mine. Email anything. Okay, my email.com. Okay. You can give
your own email. Okay, dot, gmail.com, it will automatically replace with
your email here. Okay? That looks like
same. You can do for the phone number
and LinkedIn link. You just need to copy
that LinkedIn link and you need to tell here, just add us update. M. Just update, ink it in. Link What happens here? I will automatically update
all those things by itself. Okay, it is just showing the
preview of your website. You need to tell in this
chat platform. Okay? In this chat container, you need to put your requirements. Okay, you can change your
color of this particular, you can change your heading
A portfoli instead of that, you can tell to I
just add my name. It will add that name. Okay, you can change the color,
you can change the icon. Okay. I can change all those things based
upon your requirements, it will create and it will
change all those things. Okay, instead of this
particular image, you can tell to I just change
M. Change Euro section. Icon. Two. Provided image. So what happens
here, come to here. Instead of this particular icon, you can include your own photo, right, own profile photo here, which looks like better, right? So you come to here, change hero section icon to
Provided image below. You can click here, just
click on that and you can easily attach anything.
Okay, you can see here. Click on the attached button. Now you can easily you can
give any image, right? So for the portable website, it is important to
explode your photo. For the example, I will just
take this particular photo. Okay. It's taking time. Now it will update this
particular image with this one. It will update this icon
with my provided image here. Okay, you can do
anything like that. Okay. Not only that,
you can easily tell to AI for the get in touch, it will take this one,
that is great one, right. Now, when compared
to we can change anything like let's see. For the LinkedIn, if
you click on that, it will take to the
Lingreen page. Okay. If you your own LinkedIn
link profile link, it will directly takes
into that UR profile link. Okay. When you click on the
download resume button, you need to provide
Google Drive Okay, you need to upload your resume
to the Google Drive and get share the link
and just past here. Okay, I will show all
those things here. So for example, I will show it. Okay. All an example, you can do so much
things, right? So, for example, I have
created my own website, okay? I have developed my own
app that is AI PMs app. Let's check, and I will
show how you can do this. This is my app and app, so I will show how you can do these things.
So just copy this. Come to this particular website and I will tell you to AI, add the mobile application link that is Google Place
tutor this with this one. I will tell I add this link. Too. You can tell to AI add this particular Google
Play Store app link to the Google Play Store button. No what happens. So when you click in
this particular button, it will go to my app. Why we have tool to AI to add my link to this particular
button. That is simple. How you can edit all
those things by yourself. Okay. I will show how it works. Okay, I'm just showing the two edits you can do
for your requirements. Okay. Let's see how we
can do these things. That is working.
Now you can see. I will update the Hero section
to use your uploaded image and add the Google Playstore
link to the AndroidM button. This is the Android up button. So it will just add
this particular link that I provided to this
particular button, when the user click or when the client or when
the click here, it will take through my app. Okay, that is simple
how you can use this particular
lovable to create the amazing beautiful website, which looks very great,
right? You can see here. So I have updated the Hero section to use or
uploaded all those things. When we see here, now you can see this
is the image we have provided to the lovable. Okay, you can give you own
professional photo, right? Upload here in order to you
can change anything you want. Okay, you need to describe it. It will automatically change, update all those
things by itself. Okay, when I have created
the image, it is done, and now I have added this
link to this particular, but let's see it
will works or not. So when I click
here, it takes me to the particular Google
Play Store link. That is how you can create this particular
Portof website using lovable and you can do so
much things by itself. Okay, not only the
Poofll website, you can create there are so many things like you can
create the blog website. You can create the online store. Okay, you just need to update this
particular prompt that I have given to you in the
document. You need to come here. You need to paste.
Okay. After that, if you are looking to
create the online store, you need to come here, right? Instead of that, you
need to update this. Just remove this and come
to this one website type. Okay, you need to take this what type
of website is needed. For the personal
potifle you can follow the steps that I have
shown you in the previous. But if you are looking to create the online store or a
business site or anything, you can use this particular one. Okay, like what type
of website is needed. Instead of this,
you need to clear this one. Just cancel this one. You need to write online store. Okay. Easily edit each
and everything if you are looking to create the prompt
from here itself only. Just create all those things, what you will visit the website, what are their interests,
expectations and needs. You can easily click
here and you can easily edit my visit
website or customers, what are their
interests, expectations? All those things you can
easily include here. Okay. Then it will automatically create an amazing prompt. Okay, website
prompt, you can use this particular one and
you can use every AI tool, like bool dot Nu and lovable to create the
amazing solutions for you. Okay? That is how you
can use this particular lovable other I tools as
well. You can try it out. Okay, please go and
use that prompt and try it out different
websites in the lovable, bol dot U, and Cloud as well to create the amazing
solutions for you. You can use each
and everything with that one website prompt. Okay. That is how you can use these EI tools in
this EI technology. Okay, I hope you
understand these points. So with this, we
have easily created our own amazing and
attractive Portofl website, which increase the engagement
or the conversions, sales, all those
things by itself. Okay, I hope you understand
these points very well. Not only that, you can
easily if you want, okay. So when any person submit their website on
name email message, when it clicks on
the send message, Okay, where it will go. Okay? For that, you need to
you can do two things, okay. You can easily create
another page in which they can fill the particular name, email message, or you can easily add the super base, okay? Super Base is a great
database in which the person, okay, when the person
submit their details, name, email, and message, the superbse will
automatically gather the particular details
and it will store it. You can check it out
in the database. You can use this Superbse also, and you can see the superbase
and lovable integration, all those things
details very easily. Okay, if you are looking
to do this, okay? This is how you can use all those if you're not looking to use this particular contact
form, it is enough, right? So LinkedIn profile
link phone number, your email is enough to gather the details of
your client or HR, all like that. That is simple. This is how you can
use this, so you can change things all you can get you need to aware of this
particular credit system. So you will get the five
free credits day by day. Per day, you can try out
this particular able, and if you are looking
to want more credits, you need to purchase their plan. Okay. So you can use
all those things. Instead of that, if you
are looking to create the Portabil website for
free without any limitation, you can use the cloud.ai. Okay, bolt website. Okay, that I have already
shown in the landing page, you can follow the same process. You can use the same prompt, and you can follow
the same process that I have shown
in this lov bill, and you create the amazing
website in bold dot Ng or the Cloud that I've already shown in the previous
landing page session. Okay, that is how you can use this particular lovable to
create the amazing website. It can be the online store, Budapl website, business
site. It is up to you. You can edit your
prompt as you want, and you can do all those
things by yourself very easily to save the
time to create the amazing designs
without hiring the developers in this
AI world for free. Okay. That is how you can
use this particular lovable. Okay, in the next section, I will show you
how you can create the amazing web app using
lovable or other AI tools to create and to deploy the web app within minutes instead of
hiring the developers. Okay, let's dive into that.
9. 4.1 Prompt Creation for Web App Building: In this session, we are
going to see how we can use a prompt and lovable dot dev to create the
amazing Webb easily. Okay, let's dive into that. So first step is go
to document that is I have provided this whole
prompt in the document. You can get it and just copy this particular Webb
builder prompt here, right? And just open your notepad. Based here. And now, you need to just edit your requirements
here. That is simple. Okay, our first
requirement is who are your target audience?
Just let's say here. This is our first requirement. So we need to edit this
particular section with our requirements in
order to create the web for the specific
target audience or the specific requirements in order to save up a lot of time in creating the design,
colors, all those things. Okay. For that, I will just edit my requirements for the particular
target audience section. My web idea is to create the AI copy generator for
product and services, which helps the professionals
like digital marketers, influencers, sales
professionals to get more sales and
convergence in there. Okay, that is simple. Okay, let's put our
requirements here. My target audience
digital marketers. Sales professionals. And influences. You target audience or maybe different according
to our web app. Okay, that is up to you. You need to be very
aware of who are target audience because
without target audience, you cannot create the WebApp
because in today's world, creating the web apps
are easy, right? For that, you need to be
specific to create the web app. So for that, you can go with the specific niche for the
specific target audience in order to provide more value and get some
value in the market. Okay. But that, you need to be aware of
target audience, right? So my web Iidea simple to generate AI copy
for the product and services, and it helps the digital
marketers sales professionals, and inflenc to sell their
product and services easily in the ad in the social
media ads or like that. Okay. So that's my target
audience up to this. And what is my
purpose and overview? I need to did this section. So what is the primary
function of the app? Example, AI chat booard writing
assistant code generator, language tutor, briefly
describe its core features. So as I said, my webapp is simple AI copy
generator, right? So for that, I will
write AIhatboard which generates which generates a copy based on user product or
services requirements. That is simple. Okay. So
this is my web app is simple H hat board
which generates a copy based on user product and
services requirements. That is simple. Okay. So when comes to you, so you need to be
very aware of what is actually app solving the
problem in the market, right? So you need to be very
focused on the problem. Then only you can create the amazing solution
by using AI. So focus on the problem that you are solving
in the market. Then when you create that particular solution
for that problem, you can build the
amazing web app which save you a lot of time, save the money of
the professionals, and they can when they get the value from that particular
web app, they can pay you. So for that you need to very aware of the target audience, and you need to be very detail. You need to give them
very detail to the AI with the purpose and
overview of your app. So that is most important thing. And next is core
functionalities. So what are the core
functionalities? So what are the
key features that the app must have example, chat interface, pile uploads, conversation history, prompt
templates, Vice inputs. So as I said, my app is
AI chat booard right? So for that, if you use the different AI chat
booards like CHAPT, they have the voice input. Okay, user can
upload their files. So they already having
the chat section, right? So like that, my app
is a AI chat board, which generates ad copy based on the product and
services requirements. So I think the all
core functionalities will be helpful to the
user in my chatboard. Okay. So for that, I will take all those things here later. Okay. So you can you can put here
your requirements all core functionalities
according to your web app idea from here. Okay. Next, technology
preferences. So you need to be
very aware of that, what are the technologies
you are using the web app that you are using lovable or other
EI tools like bolt Nu. So you need to be
very aware because it will create the Fn tan code, and you need to
be very aware how the back end works and what
are the backend tools and technologies or
frameworks that I can use to create a fully
functional web app. Okay? For that, you need to
know what is a firebase, open AI API, Python,
all those things. Okay, we are not using any
of them because I'm using the Open AI API because to
generate the AI services, to use AI services
or to call the AI, we need to have
the open AI API or other API service builders like Cloud you can
take any of them. You. Okay, you like. So I am
using the open AI API only. I'm using the open AI
API to call the AI. So if you don't know
about what is API, what is a file page please learn from the YouTube,
all those things. It is a simple thing. You
need to have just idea how it will works and how I need
to do all those things. When you got idea, you can use this particular AI tools
to done the work for you. Okay? You need to have how to connect the API, simple things. Then you can create
the full Webb, okay? This is the OpEPA have
taken simple name. Okay. Let's take UI and
UX design preferences. Describe your preferred
design style, minimalist dark
mode dashboard Lou. So are there any
existing apps you would like to use as a
design inspiration? So remember one thing, you can describe your preferred
design style. It can be minimalist,
dark mode dashboard Lub. Otherwise, if you
have already seen any Webb which looks very good, attractive, you can
take that link of that particular web
app and you can paste to the lovable.ai. It will get the inspirate
from that particular web app, and it will create
like web design, front end design. Okay. So I'm not telling you to
copy that particular thing, but it helps you
to get inspired. So for that I'm not recommend
can paste the link here, and instead of this, you
can paste the link here, and you will get
the same webb which you copied that I will create the design,
like that webapp. That is simple. Okay, you can
try out these two methods that you like and which
saves you a lot of time. Okay. I am using
simple minimalist and dark mode type US and
UX design preference. Let's take that. So
I'm just minimalist. And dark mode design type. Okay, that is simple. We can use this U and UX
design preferences. That is minimalist and dark
mode type design preference. Okay? Let's go with
authentication and user rules. So as you know, if you are a
user any Webb for example, let's take Chat GPT or lovable. So when you are coming when you are looking to use the lovable, you will get to sign
up the account, right? If you are submitted your name, email address and submitted, that is the authentication. What is the authentication,
you need to be sign. You need to create
account before using the particular webb that is called an
authentication. So for web authentication
plays a major role to avoid any frauds or to avoid
any security scribed. So for that you can
use authentication. So I'm not showing
the whole process of this particular
thing because it is easy to connect in lovable. I will show in a few minutes. Okay, just focus on
this first Webb idea. So when you create the
whole functional webb in the lovable.ai tool, when it works clearly, then you need to go for the authentication and
payment integration. That is simple. I will
show how can do that. So I will just type here null. Okay. And what is the
monetization, if any? So, as I said, monetization is the major point for the web app. So why you are
creating the Webb? Okay, to make some money or
to create some solution. So without money,
you cannot do you cannot manage all the web web, functionalities, all
those things, right? So monetization is very
most important point, okay? In which you will integrate the payment platforms,
slatypPaPal, like that. Okay? In which you will
get the money from the strip when the
user pays plans. Okay, it can be a monthly,
annual plan like that. Okay? You can use this. So will there be any payment
integration example, strip for subscription
or paper use models. So up to now, I am not showing this particular
thing because due to some concerns of my stripe,
just I will tell nun. Okay, that is simple and
deployment and hosting. So you need to
just so as I said, you need to deploy your web app. Okay? You can directly
deploy your web app in the lovable or other I tools
as well. That is simple. This is our whole Webb prompt to create the webapp
using lovable dot ev. Okay, let's copy this
whole prompt and we'll jump into lovable to
create the amazing WebApp. Okay, let's dive into that.
10. 4.2 Web App Development using Lovable Ai: The lovable, paste
here the prompt. We have copied from the notepad. Okay? This is a
simple prompt that we have designed in the
previous session. Okay, let's give to
the lovable dot Dev. Just click here
and it will goes. No, it's taken that. So we are already
discussed about the lovable dot dev in the previous sessions
that you can follow, to learn
more about this. Okay? And now, after giving
the whole instructions, the lovable is generated some Instructions like
the app will feature. It is a simple app features
that it is going to be designed according to
our proms requirements and design style,
you can see here. Looking at your requirements, I will create a
minimalist dark mode, AI powered a copy generator that combines modern design with
powerful functionality. This will be perfect for digital marketers,
professionals, and influences. This is a simple web
app that is created, what the app have that is clean chat interface
with Air ALTA responses, file upload capabilities,
conversation history, pre build prompt templates, Vice input functionality,
dark so this is the futures that lovable
is going to create. Okay, and including in
my web, you can see. And you can see I will
draw inspiration from modern e tools
like CharBD. Okay? So it will taking
the inspiration from the ChargBT interface. So we have already used the
chargebD for many more times. Okay, it is lovable is
taking the example, inspiration, how that
chat interface looks like it will taking the
inspiration of Chat GBT. Okay? That is simple and
cloud. You can see here. But with the focus on
marketing specific workflows, the design will use gradients
from deep purple to blues, creating a professional yet, engaging atmosphere.
That is good. So let's wait for the
few minutes and we will see how the webpath looks like. Now we can see it has
created the web app. Let's see. I have created the comprehensive AI
powered air copy generator, which is dark theme
and modern design. You can see what's the next. You need to do refine and
customize mastering prompting, Okay, a getup sync, you can do all those
things from here. So let's see what
is the error here. Just come to here, click here. You can see here. So
just click, try to fix. No, it will again, it
will try to fix it. Okay? You can see. It
is working on that. I need to fix the prompt error
in the sidebar component that issue is in template,
not a valid export. Okay, to give your requirements in the form of text, okay? And it will convert all
those things into coding, and it will take your
workload easily. Okay? You need to just have the idea about what
is a back end, what is the payment integration, how we can create the workflow. Okay, the logic behind the web app, you
need to focus on it. Okay. So for that,
you can simply follow any other web app
functionality and you can do the same thing here
by just describing here. Okay. That is simple. We can see it has fixed
that particular sure. Now, this is the Bb which looks lacking
very great, right. You can see this is
a ARCpy generator. It is a new conversation. When you click here, it again, takes to new a chat
like haga BH, right? You can see here. It
is a simple AIC stand. Hi, I'm your AI Add
copy generator. I can help you create
compelling advertisement for your product and services. What would you like
to create today? This is also created the time. And you can see this is a simple recent conversation
it looks like, and this is a quick templates
when you click on that. Okay, I will takes to the
uh Prom template, okay? This is simple front
end code, right? So what do you need to
do, just click on Hi. Let's say it is working or not. We can upload the files
directly from here like that. Okay, you can input the
voice and allow this time. Okay, voice input error,
it's also showing wood, and you can send the
message Let's take high. What happens here? A
is thinking right now? No, you can see, transform
your business today body, discard the power of innovation with our cutting edge solution, giant thousands of satisfied
customers, all those things. This is a simple template has created for the high message. Okay? This is simple thing. This is a simple front
end, which looks like. You can change all
those things simple by giving here you can see when I click on the new conversation,
it is not working, right. So for that, you need to
write all those things. So when you create like this, when you have the ability to understand the different
capabilities of Webb. Okay, you cannot directly
create the webb easily here. You need to go and check other Webb's functionality
and the logic behind that. Okay. And when you know about that logics
and the functionalities, you can use the
same functionality you can describe here, right? You can describe here to make
the same logic here also, and you can build the amazing solution for the
specific type of audience. I hope you understand
these points. So this can be learned by
doing by trying by yourself. Okay? That's why you need to use these particular AI tools to save time in building
the basic level of work. Okay? And behind the logic
back end functionality, you need to have the idea about it to create the web abs easily. Okay? That is simple. You
can see all those things. If you're looking to
add something here, let's take add in simple
prompt templates, two quick templates section for each prompts for
each requirement for each specific requirements,
you can take this one. Facebook ad and other. So what happening here is? Okay. So I'm just add a simple prompt template
to click Template section, but the specific requirements
like Facebook, add another. So I'm just to tell AI, add the simple prom templat for these each
type of sections. Okay, to see whether
it is working or not. I'll just tell to AI, right? Let's see how it is editing all those things. You can see. I have just given the
prompt here. You can see. I will add specific
prompt templates for different types to quick template section
in the side bar. Let's wait for a few minutes and we'll see how it will work. You can change each and
everything if you're not satisfied with this design. You can change the
color of this by just describing change the
background color to white. You can change all the chat
message container like blue. Okay, you can change
these things as well. You can change the icon name, all these things, but
just describing here. Okay? We can see. I have added the specific
prompt templates for different types
of types here. So when I click
here, you can see. I have added the
specific prom templates for different
marketing channels, including Facebook ads, email
and tailored prompt icons. Let's see it is not working. Like so for that, you need to come to
reload here again. Let's see whether
it works or not. Again, it is not working. You can see the code here like email copy, creative Facebook, a product services,
so we have not given the specific and clear
instruction to AI ts two. So when I click When I click on any specific type of prom template section or
a quick template section. That prompt template should be shown on different
on separate page. So I have just told you
in the previous prom, just add the prom templates to this
particular quick section. When I click on any type of
this particular ad section, when I click here, the
prom should be shown here. Okay. Let's see how it
will create that thing. I'll create a separate
template page to display the selector prom template when I click it
from the sidebar. Okay? So what happens here, you need to be
very specific one. Okay. You can easily
you can describe here. Instead of writing
the code by yourself, to create the page yourself. Okay, you can just
tell to AI when I click in the specific
button, it should be done. Let's say I have created
the dedicated template page that displays the when you
click on the Quick template. If I click here, again, showing all those
things, let's see. That's. This is
how it looks like. When I click her back, when I click on the email copy
of the quick templates, it will take me to
another page which show the email copy template. You can see her email
campaign template, which looks like very great, write an email compound for the product services,
you can copy it. You can easily use template
section and it will go to the here Aircpy
generator like that. Okay, it is copied. Okay, this is a simple
thing that you can use to create by any web app for
the specific one by USL, but just describing
it functionality, you can see the mobile
response also, right? It is a tab responsive. It is also done. This
is not a response, but you can turn. Okay, we have done this
for this web app, right? Not a mobile app. Okay, you can turn this although by just
describing it. Okay? We can convert this
particular one, convert this whole webb into mobile response,
which have Okay. So what happens
here, the code and the design front
end code will also be converted into response. Okay, in which we can easily see the same chat interface
in the mobile also. Okay. Let's see what happens here. We can do all those things but just describing here, right? Even it helps you
to fix the problems if you don't know how to
connect the super base. Okay, to create authentication
as we earlier discussed. Okay, and to integrate the payment platforms
like Stripe Okay, to make some money
from your Webb, you can ask the
different questions to particular hat,
ChathPT or other, or you can see the
YouTube videos and understand some things
and you can come here and you can describe each and everything you
can create it. Okay. Without
trying by yourself, you cannot learn the
things and you cannot develop any use the Webb, which looks like your web idea and just see their workflows, logic behind that
and you can describe it and it will create.
That is simple. Okay, let's wait for a few minutes to see the web
which is responsive or not. Okay? Okay. You can
see it four files. That is mobile first
layout, responsive design. Let's see how it looks like. How to measure
content mobile menu. This is our mobile response web. When you click Cat Wheeler
opens the slide view. Okay? You can easily close that. Okay, you can describe
your, you can edit. You can send it here, right. You can edit each and
everything by yourself, but just describing as
I said before adhere, you can see a Facebook
ad, template. Okay, just click. On
that particular thing, it will open SAT. Now you can see this is
amazing thing right. In just a few seconds, it is converted the WebApp into the fully functional mobile app. Now you can see this is how the AI is working in
this AI technology. Okay? I hope to
understand these points. This is simple web
app I have created, but you can create a
very attractive and in order to integrate the super base authentication,
you need to come here. You need to just allowable,
add authentication. And payment integration. It will suggest it will tell you to do the process,
things like that. Okay? Or pricing plans, you can directly tell
So what happens here? Okay, I will automatically
generate the code, create the authentication
and pricing plans for you. For that, you need to create your own super baase
you can see here. You need to connect
towards Super baase to this particular Webb further integrate your user
authentication data storage back end capabilities.
You can see. The lovable superba
integration enables essential functionality
like authentication, database storage, backend APIs. Okay, securing handling
cree secretes. So to get started,
please click on the green superbse.
This is Okay. And pricing plans with
different subscription ties, stripe payment integration, use a dashboard protected rules. So just come here and you can click here
Superbase integration, they will show you a
step by step process. You can easily
create the account. You can easily connect
all those things by simple following
these things here. In the stripe or Superbase, you can easily connect each and everything can follow
this and you can create the amazing fully functional
web web without hiring the developers or paying them money or without wasting time. Okay. With the, you can turn your ideas into reality within
the few minutes, right, if you have the ability to write the prompt and
requirements very clearly and very logically
and very functionally. Okay, that is simple how you
can use the lovable dot EI.
11. 4.3 Web App Development using Bolt Ai: Okay, so not only that, you can use the same prompt in other Do purse like Boldt new. Okay, we have already
seen that we have created so many things
in the bow dot new also. Let's see how the designs
looks like from here also. Just pased here. Let's see how this
particular web app looks like in the bold dot New. Okay, as I said, you can
integrate all the things, the stripe and superpase
from here also. And the great thing
about Boldt new is they have they have access to
private projects, right? So the lovable don't have
the private projects. So when you publish here, it will go to the public. Okay. Everyone can access to this particular design,
prompts, all those things. Okay. But in the Bol dot Nu, they have the private
and public both, okay, for the free plan. Okay? So I think in this case, the bowl dot create one. Okay? You can use
this Boldt new and to try out the whole Webb
to create it by easily. Okay. So each AI to have their pros and cons
and you need to be learn from before
using that, okay? We have already
discussed each and everything in the previous
sessions already, right? Let's wait for a few minutes and we will see
how it looks like. Now you can see it has
created the web app. You can see here it has
created so many files. Okay, you can see
here and you can see it has created the features. To get started, you need
to add your open AI, APK to Invronment file, and comprehensive, all
those things here. This is the WebApp that is
created by the Boldt nee. So that is greater
one, right, right? So when it is also
showing APK required, but in the lavab we cannot find this section
in this here, right? Well, bold dot U is a
great one about to create the web mobile apps very fastly. And rather than the lovable. Okay, bolt you have the great capabilities and so much things you can
learn from the YouTube o. Because it is a
templates history, so I need to provide
the API key, in order to start this
particular chat section. We can say this is smart chat, yet at templates voice input, you can do all those things. Okay, start creating ARCpy. This is a new message
it has created. But in the lovable, we cannot done that. Okay, when I click here, something, we need
to send it, right? When I click, it is not
showing anything right. Okay. You can see it is not showing the
recent conversation. Okay? So I need to again tell to Lav bull when I
send the message, it should be create
the new chat section here in the recent section, which is another thing, but the bold dot new is already know about
WebAps easily, okay? They have the idea about
other webbs how they works. Okay. So for that,
I have just when I create the new chat
that you can take, it will again doing
the things here. Okay. That is simple. You can create on the new chat, you can see, I created
a new chat as well. When you click on
the setting button, you can dirt all those
things from here. Okay? This is not a
whole a webb functional. It is not well, not
showing the well thing. But what you can
do is you can do the thing same that I have
shown in the lovable, but describing, you can
create all those things. Okay? You need to just describe what the functionality
should be, what should be done when any of the button when
I click the button, so what functionality
should be done. Okay? You can follow
the same things here also that I've shown
in the lovable dot tb. Okay? You can follow all those
things by yourself, right? When I click on the templates,
so it can generate it. You can see where
it is a great one. So if you focus on this, okay, the lovable AI is just giving simple template without knowing the user requirements, CLC. So these are able.ai. So when I click on
the quick templates, you can see Facebook ad. When you click on the
Facebook add section. Okay. You can see
a simple prompt. You can see you can
copy the prompt here. But when you come to bolt new, it is creating based upon
my user and requirement. That is great one.
You can create a compelling Facebook ad for the product and
services. Okay. When I click here, for example, let's take prompt Engineering. Course. This is my
product, right? Who are the target audience, my target orients or
digital marketers. Okay. What are the benefits you can write to
so many benefits? Okay. Easy to learn. So this is a simple thing. When you click on here, it is just replacing the prompt requirements.
You can see here. So when I'm not
given anything here, it is just created it is updated the details of the
prompt template. You can see here. For the
product and services section, it is automatically written the prompt engineering course, target audience or like
this, you can easy to see. This is a simple,
easy to use prompt. You can just click on the
copy or you can click Use A Template and you can easily click here to
generate the A Copy. Or that is simple
how you can use this particular AR copy A assistant by using
all those things. So for the APAK,
I need to provide APIK from directly here,
code section, right? So you need to come it is
showing that to get started, you need to add your open
APK to dot ENV five. We need to find the
ENV file here, right? Let's find it, whereas
it is ENV file. Right. This is ENV file right. Just click here and
you need to focus. You need to write your
own API key here. So when you paste the
own API key here, it will start doing the work. I will start with
the AI ad copy. That is simple. Okay.
You can add it. You can do the
things by yourself, come just use your
open API here, and you will get the
things what you want. So you can come to the
mobile response also. You can change all those things responsive. We can see here. It is not well responsive. As I said, you can
easily tell to BU, just convert the
particular WebApp into our mobile response, this is a simple web app. You can do the things
like this here. Or let's say, you can
see the P screen mode. So this is our Webb, which looks great, right. So in this session, it
is not showing one. You can click here at W goes. This is simple one. It is not in the correct format or the
things you can see here. When you click on
the Start creating, so you need to provide
anything here. So to get the answer, you need to provide
APIKy required. So to get the AP you can go to the Open AI. Come to open A. If you know about open
A API, it is great one. You can come to login
with your dashboard. You can see you can get
the APA keys from here, you can create each and
everything, create here new one. Same for the example
I'm taking test one. So what happens here will
create the EPIKey done. So I have created
the new APA key, and I will delete later. Okay, I come to this
particular new chat that is bold in order to see whether it
is working or not. So come to the ENV file
as the AI suggest. Okay. So I will provide
the IPA key here. Let's save this button. Let's see it is work or not. Let's take your E
and we file again, E and we file where it is one. Okay, now it is done. Let's see. And it is showing
all those things. So it will have some issues. Okay. When you don't know about that, you need to provide, let's say, instead
of giving here, I will tell to AI directly here. This is my API key.
Please update it. So when you don't know about it, just come here and told to AI. That is simple. It is working
like you are a developer. Okay, which is working which is here to develop
the web for you. What happens here, the AI
will automatically take your API key and
it will configure your API in the ENV file. Instead of doing by yourself, it can take all those
things by itself. Let's see it is working
or not right now. Okay, use Verbal teres
all those things. If I click here, Hi Okay. No, it is taking the answer. No, you can see it is
generating the copy. Generated successful. That's
Hi in this one right now. Let's if it's working
or not. We can see. Hello, how can I
assist you today with the marketing and
copyating needs today? I will tell the EI,
just provide me copy per my ont
engineering course. So what happens here
when I click here, okay, I will start in the ARCpy. No, you have created your
own AI chat board, right? It is how easy it is to
build your own chatbd without hiring developer,
all the technical needs. You can see show
here is an example, ARCpy und Show Engineering. This is ad copy that I have generated by just
using the OpenUAPA key. Okay? You can do all those things
by simply describing it. Okay? This is how you can
build the amazing Webb but just describing
your requirements for functionality,
all those things. Here, what the main thing is, you need to have the idea how the web apps
work and what are the workflows and what
is the requirement and what are the technologies that I need to create the web Apps. When you have that
idea about it, you can create all
those things by just describing it, and for that, you can just use
any web app which offers the same services
that your idea offer, and you can follow
the same process in that particular web app and you can describe here to
create the web app, the same. That is simple,
how you can build your own Ichatbard or
web app by using things. You can download
here, you can copy, and it is working
like the CHAPT. Okay, you can include
a voice input can easily upload the
file from here. It is now working like a hatGPT for the specific
thing that is ad copy. Okay. Up to now, our this web app is
completed, okay. So for the technical for the more information
you can integrate the stripe super base by
simply describing and you can follow the same document
as you can do the things. It will help you to do the
things you can see here. To implement payments
in your application, we need to use the stripe. Okay, you can create the stripe account,
developer section, you can add Stripe APAK in order to do the things
by yourself, okay? You can follow all those things, how it shows your requirements
and steps you need to follow this and you can do the things very easily. You
can create all those things. You can change the
color, buttons, all those things as
your requirement, but just describing here. Okay, you can download. You can export the
code and you can host the webpF free using
a firebase hosting. You can deploy the here only to visibility private
or secret or public. So don't go with the Everyone
can view this project, just go with the private
and you will get the link and you can share your
link to the world. Okay, that is how you
can use this port. If you're looking to learn and other ways to create a web app, please watch the previous
session that we have used the bolt Cloud and other AI tools to create
the landing page. You can follow the
same process here also to create the amazing
web app very easily. Okay. If you're looking to learn to create the
amazing mobile app and web app but dragging and drop with more
functionalities and logic, so you can follow my account, and I'm trying to create
the codes on it as well.
12. 4.4 Overview of Google Stitch for Ui/UX Design: Have another AI
tools from Google, that is Google Stitch. Okay, you can use this Google Stitch to
design a front end, okay, for our website or
web app as an inspiration. Okay, we can try out by our
prompts, all those things. It is also a great tool for the designing purpose
or to get idea. Okay, so it is not
effective one. Le compared to laablev bol
dot Nu and other AI tools. But it is quite simple and easy to get the idea
about it. Let's see. So before going to that,
we have two modes. Okay, that is experiment
mode and standard mode. So in the stand in mode, you will just describe your
design in the form of text. Okay, let's say example,
create a mobile. For selling courses.
So what happens here? Let's create this design. Okay. So this is a great
tool for the wipe coding to design
a front end code. Okay, front end
design inspiration. You can easily copy that in the Figma and you can use
it wherever you want. Okay? If you're a developer, if you know how to code, you can use this
particular Google stitch. If you're not a developer, you can use the same design by just copying and paste
anywhere you want, because it has a great
coding copy section also. So we will show all
those things here. The stitch is telling us to design and app
for selling courses. We could include
all those things. These are the sections. Okay. So I need to
confirm this is o, would you like to proceed
with design these screens? Yes. So this is a great EI tool, from Google, to get inspired of that
particular front end. You can design it.
Okay. You can use it wherever you want to create
the amazing front end, which looks very attractive and so many things to
include in your app. Okay, you can see this is one. Let's wait for few minutes. So these ITs will save you
a lot of time to create the amazing front end web apps or mobile apps or
websites easily. So before thinking
by yourself, okay, how this particular
front end looks like, you can use this as inspiration. You can copy the frame or same
things in your app design. This is the things
you can see that this is front end code for
the selling courses app. You can see this is a
great one. You can use. You can get inspired from it, or you can create similarly like this to create the
amazing course app for you. Not only course app,
you can take anything. Okay, you can take any app idea. You can just tell here in the form of prompt.
It will design. You can take the
inspiration of this. Okay? It looks like pretty
simple and very effective. You can see this. This
is a whole screens of my course app.
That is great one. Can just see this complete purchase,
Okay, payment method. You can see the different
courses sections. You can see this NAB and
you can see the Naver, which looks good, and
this is a course details. All those things
comes under this one. You can edit from
here, can copy this, copy this Fegma if you're
looking to include this particular design and get
the inspiration from this. Okay? You can edit directly
here it will come, and you can change
the colors from here, o you can change the numbers, all those things from here just by clicking here Edit option. Come here and it will describe a point and it
will automatically design so many things by itself instead of writing
the code by yourself. That is simple how
you can do this. Even you can come
to edit the the, you can change the color
of this particular team, light to dark and you can
change the custom color, all those things by yourself. Even you can see
the code section. Can copy this whole code
and you can paste it in the VS code or anything to combine these
particular two designs. Okay. Combine this
front end code and back end code to build the applications very quickly instead of relying
on the paired tools. Okay, other AI tools as well. Okay. This is one. Okay. This is a
standard mode, right? So you can easily come
to B and not only that, you can create the
WebApp also from here. Easy. Okay? You can just write the prompt
here for the WebApp. It will create the amazing
designs you can see here. You can see the examples here, how it is created for the Webb. That is very good.
You can see this one. And you can see
this is created by this user by just
describing line diagram, you can see, according to this, the AI has generated this one. So you can use this
experimental mode. Okay. Instead of
writing the prompt, even you can take pen
paper and you can draw your design in that and you can paste it
directly from here. Okay, come to this
standard mode and click on the experimental
mode and you will get access to upload the image. Okay, come here and you can easily go with the
mobile app or web Okay, just come here, upload
your diagram image. Okay, upload here and
just create a design, and it will based
upon your diagram, it will generate the best amazing front end
design for you. So as an example we have
already seen here, right? Try it out because
it will save you a lot of time if you're
a developer or who are looking to use this AI for the free invert diver lifer
to get some amazing solution, you can use it to save you a lot of time to get more
ideas about UI and UX, and you can save a
lot of time and make some designs very effective
by using AI. Okay.
13. 4.5 Comparison of Different Vibe Coding Tools: We have seen different AI
tools, be coding tools. We have used it to create
the amazing websites. Okay, landing page and web web. Okay. You can use it very well, but if you are looking to learn the other coding tools as well, you can come to the Zap
Ear or you can find the best AI be coding tools. Okay, you can check and you can compare all those things
in the Zap Ear itself. You can see you can learn
from all those things. Okay. And we have some eight different tools you can use for the
best be coding. You can check each
and everything their comparison during
testing criteria, okay? And the features, all those things you can
compare here, right? So you can use this particular
be coding tools or you can try out these eight
different type of wipe coding tools,
how we can use. Okay? We have already
seen the lovable bolt. Okay. And we will
see some cursor, Cursor, what is that cursor? Okay? So cursor if you
are already developer, if you have the coding
language and you have already built some amazing
solution using coding, Okay, it will help
you to monetize, for example, if you have
created the e coding app, from the lovable or bol dot, if you export that
particular code, you can use this cursor
to make it very easy. If there are any
issues you will find in posting your web
app by yourself, this cursor will help you to
do the things very easily. Instead of taking by yourself, instead of writing
the code by yourself, to host your web app privately with your own chosen
hosting services, you can use this cursor to
make the things very easily. Okay? You can use this
cursor and other as well, and you can use
this Vivo by words. It is also a great
be coding tool. Okay, we have already not seen, Okay, you can click
here, come to this. So it will works like
the bot NU or Lava bug need to paste your
prompt here and it will take the same things that we
have already seen in this. This is another tool
you can use to create the amazing WebApp solutions by just describing your requirements in
the form of prompt. You can see some starter
templates you can integrate the superbase
Neon astasNxgs. This is a simple game that
is created in the Vivo. Okay, this is a landing
page, and this a website. You can see this
are some templates you can directly use in
this particular vivo, and you can develop
on top of that. Okay? You can follow
the same process, all those things here
also that I have shown already in the lovable
or bold or new. Okay. And remember,
one thing that lovable also have their
own templates. You can go. Okay, I have forgotten to show you they have templates
like you can come here. You can see here. This
is a template section. Just come to Mose tom, you will find this
particular templates you can find in the
lovable also, right? You can just click
here, it takes you into the chat section. You can build on top of that. Okay. That you can
easily do that, and you can find the template
same as well in bolt Nu, and you can follow the same
process that I have shown in the vivo dot dev and
other tools as well. You can see this is a
Vivo cons and price, and it will also show
the price, okay. And this is the tempo labs. Tempo labs also a
free art fixing tolo so if you created the web app by using be coding tools like
lovable or other EI tool, when you export the code. Okay, when you try to
run by yourself in the local by using VS
code or other tool. Okay, if you got some issues, you can use this cursor or
error free fixing tool that is Tempo apps in order to in order to do the
things very easily, you can create amazing
animations by using tempo. You can see here
this type of Peter, Okay, this is one great one. You can build the react
apps faster than with AI using this particular
tempo AI byte coding tool. You can see this is a
simple how it looks like. Okay, you can see the process, how we can use this
particular one, design effort less, Okay. This is a coding tool which you need to have
some coding language. Otherwise, it can be done. You can see edit code anytime you can open
in the VS code. I can push to Github. It is up to the coding part, but you can use the
lovable bolt or vivo dot dev in order to create the fully functional web app
with the preview section. Okay, that is great one, right? And you can use the tempo
apps for the coding. If you have already
experience in the coding, you can use this cursor and
tempo apps very easily. Okay? This is the best be coding tool for the planning
before building. So it helps you to plan replic. Replicate is a great one to
create the different apps. Okay? You can use
this one as well for the planning before
building anything, okay? It is a pros and cons, you can see all those
things by yourself. And this is a base 44. It is also works like a lovable
bolt new be coding tool. You can easily put
your proms and it will create the same as
we have done earlier. And this is a mimics also some
particular be coding tool. You need to put your requirements
in the chat section, and it will create
something solution for you. You can see here. Okay? You can try
it by yourself. They have their
own free accounts. Okay, free credits that
you can use for free, and you can check and you can use which type of pe coding tool is better This is how you
can find the best web app, their pros and cons
by using Japiar. You can easily compare
all those things. You can check all their futures and the pricing sections,
all those things from by. Just comparing these things
in the Japiar itself, the Gol or YouTube. The best thing is just go try
it all this type of tools, Okay, with one
specific web idea, and check the output of
each be coding tool. Okay, each tool, check
the output of each tool. Okay, and look which
output is best suit for your requirements and
design and choose one be coding tool and build
on the top of that. Okay? That is simple how you can use a specific be
coding tool for the specific building web
abs or websites. Okay?
14. 4.6 Freelancing Opportunities for Vibe Coding: Have learned how to
create the websites, blog website, and landing
page, and web apps. Okay, so by yourself. So without tracking a
single line of code. So what is the next?
Okay. So you can create your own
websites web app, you can try it or
you can test in the market whether they
are working or not, and you can build
the amazing solution in this technology. Okay. So not only that, this skill will help you to
create the amazing money online money opportunities
like selling UR services to the
particular businesses or the business owners, like selling UR blog
website to the blog owners. Okay, and selling the web apps for the founders by simply just creating the web apps using the lovable dot dev or other IITs that have shown earlier in the previous session. Can use this skill to sell
your services as a freelancer. You can create an account on the fiber freelancer.guru.com
ApworPpHer. So you have so many
freelancing websites, you can list your projects and you can list your services in there and you can sell your
services, as a be coder. Okay? You can sell as a web
developer, web web developer, software developer, or
the mobile app developer or the landing page Builder. Okay, you can create the services by yourself as a be coder in these
different platforms, and you can easily sell
your skill through these platforms by creating the clients by
creating the websites, web apps for your client and make some money using
this be coding skill. Okay. So for that and
remember one thing. So always a pick one specific
niche for your development. Okay? First, write the prompt, okay, and focus on
specific niche. For example, focus for
restaurant business univers. So your portfolio and your
project should be looks like you are the website developer for
the restaurant people. Okay? And you can follow you can go with
the specific, okay? And the best part
of that is you need to be very specific in this
particular field, okay? So you cannot create the
website for all members. Okay. So which can be
you can make money, but it is not improve your
credibility and brand value. So for that, so if you are
looking to build some agency or to create a more branding
value in the market, so you need to be very specific. Choose the specific niche. It can be real estate. It
can be the restaurant. It can be the coacherso who are looking to give
the coaching online, so you can try. You can reach out to them and you can create the
free website first. And when they like
it, you can connect the back end and you
can try it more design, and you can give them, and they will pay you further. Okay? So you can use these different
freelancing platforms. Now there are so many other platforms you
can find it online. You can create D, list your
projects and portfolio, and target the specific
niche of people, and it will create your orders, and it will increase
your orders, brand value, and
all those things. Okay, I hope you
understand these points. You can go with this particular
freelancing platform, or even you can build
the agency, okay, free agency by using AI agents to connect
to all those things. Okay, you can learn from it. Okay. And you can
very importantly, you can use your
Link as a portfolio, just to optimize your linked in as a web developer,
app developer, or landing builder, and list
your projects day by day. For the specific
niche of people, it can be the restaurant people. It can be the coaching or
coachs or the course creators. You can go with the specific niche and
the clients will see your projects and they
will reach out to you to build the
website themselves. Okay. So for that,
you do not need to have the coding right now because you have the
different AI tools that is lovable dot
dev and the bolt. You can use the tools and
just put the requirements of the clients in the form of plain English that is from
and you'll get the design. Okay. That is now how you can create the amazing websites
for your clients or for yourself to create
the amazing solution by using AI without
having the developers, without knowing the
knowledge of coding, okay, but just simple writing the things and you will get
the design in a few minutes, not in the hour, not in
the days and months. That is, I hope you
understand these points. There are a lot
more opportunities you find out after
learning this skill and you need to be very specific and you need to try out different websites,
prompts, okay? And you need to experiment with lovable dot Tev or
other AI tools, you can use it and you can
create the amazing solutions. And for that, you
need to practice very well and use
a prompt that I have given in the document and edit that according
to your requirements, try out different experiment each and everything in
that particular tools. And when you master these tools, that is lovable dot ev
and other AI tools. So you will design
the amazing website. Okay, within minutes,
but just describing the in the form of plain
English that is prompt. Okay. So you will sell this skill as a web developer services or anything to your clients
by cold reaching, by these platforms,
by LinkedIn message. You can use so many things. You can learn a cold reach out, all those things in the
YouTube for yourself. So there is a lot money making opportunities for
this particular skill. Okay, I hope you understand
these points very well. So up to no, our course
is going to end. If you think this
course has helped you to learn something new
and saving you time, so please give you a
rating and feedback. So up to now, we have
created so many things and thanks for your attention
in this course. And I will it you in the
next course till then. Keep learning, keep growing, and keep moving forward. Thank you for
Shaik Saifulla, AI Prompt Engineer & App Developer
