this website this website and this
website were all built with no code and
there are these three incredible tools
that when combined allow you to build
$110,000 websites in minutes with no
code and AI so let me show you how to do
it okay so up until now building a
website would require lots of different
people a programmer who would build it
out a designer who would create the
designs a project manager who would
oversee and communicate with the client
and usually the process could take weeks
months or even sometimes s years but
right now with Incredible no code tools
and AI we can do that in a matter of
hours now the first tool I'm going to
talk about is the reason why this entire
thing is currently possible and it's
called reloom now reloom actually
started as a components library for a
building tool called Web flow but the AI
website builder that reloom has just
released is completely groundbreaking so
let's dig in and I'm going to show you
how you can use it so if you go to
reloom doio you're going to be able to
go down to the right hand side here and
you're going to find the the AI site
Builder and the first thing it's going
to really ask you to do is to describe
the company or describe what you're
trying to build as a website so we are
no code is an online school for
entrepreneurs to launch their startup
with no code tools and if I just input
this I'm basically going to be able to
click on this generate button over here
and then in less than 1 second as you
can see here it's basically going to
just create a sitemap so what's a
sitemap well a sitemap is basically an
outline of what the website it's going
to look like what are the different
pages that we're going to have what are
the different sections on that page and
how do each one connect to each other so
in a matter of just a couple seconds
this generated a first one I can also
ask it to generate the additional Pages
underneath it and come here and just put
generate it's going to go ahead and
build those out so you see this is
actually live so you can see how quickly
this AI actually works and what you'll
notice below actually is that it even
determines which sections you might want
as additional pages so here it's given
me an about section A courses section A
Blog a contact form and of course all of
these are adaptable so now what I would
do is I'd go to these individual
sections down here and I would actually
generate them so about us boom I can
just do that you could also do them all
at the same time but I'm basically just
going to do them all separately here and
as that's generating let's just go up
here and check out these sections and
I'm going to show you how to adapt each
one of these sections so for example
here it's the navigation bar perfect
here there's going to be a hero section
feature section right so maybe I'm going
to take out the this one over here you
can right click and just delete it maybe
I going to want to take the benefit
section and put it above hero then I
want the benefits and a feature list
then there's a how it works section um
here I actually don't need this section
cuz we're just going to be featuring the
courses so I'll delete this and then I
can do this for all the other sections
as well if I want by just going below
and adapting these so this is already
absolutely amazing that's just done this
automatically without asking me too too
much I can adapt every single prompt
that I want here the next thing that I
would do is if I was building this
$10,000 website for a client I'd
actually just copy the link share it to
that individual and then we could have a
conversation around oh you know what we
actually don't need this page we
actually need an additional page now
once we've agreed on the basics of the
sit map what we want to do is build out
a wireframe for those of you who don't
know what a wireframe is it's basically
a full structure of what the website
will look like without having all of the
elements in it and this is where this
tool gets incredibly powerful by just
clicking wireframe up here it's going to
translate everything that we've just
created as a Sit map in an actual
wireframe with different sections but
not only that it's writing out the copy
for us so launch your startup with no
code at we are no code right and here
it's already going to be creating the
different sections discover the benefits
of enrolling in our no code startup
school right each one one of these
sections we can basically ask to rewrite
it we can change the tone of it and this
is basically the entire structure of
your website already built out now just
to be clear this would usually take
weeks to do and it actually looks pretty
darn good so if I kind of go into this
and look at the different sections now
what's so cool is that I can grab a
section even and I have the choice to
change which kind of section it is so
here I could just come in here and I
could check out the different layouts
you could visualize as you can see here
by changing a couple different things
with a header without a header four
columns instead of three uh we could
replace the component as well if we
wanted to you're basically building out
this entire wireframe and you can really
just determine what you're looking for
here so there's so many different
sections to choose from and let's say
that I like this one okay I'm going to
click on that it's going to autogenerate
this rewrite all of the copy create all
of the things it's really doing a great
job at all this and again you can go
through each one of the different
sections and just adapt it as you wish
so let's say oh this section it's cool I
like this but actually I want this
testimonial to look a little different
right I want to Fe feature three
different individuals I also want to
have their pictures here boom I'm going
to select this one and I want to put
their star system review as well and as
you can see it's basically building this
whole thing out in a matter of seconds
with AI and by the way if you are
watching this video and you're
interested in launching a business or a
tech startup but you don't know how to
program and you don't want to spend
$50,000 on programmers then I highly
recommend that you check out our program
called the no code startup where we
essentially allow you to build your next
tech startup from scratch with powerful
no code and AI tools so instead of
trying to piece together the internet
and figuring it out on your own work
within a community with coaching and a
proven step-by-step curriculum which is
going to allow you to launch your
startup in no time all you have to do is
Click below and apply for the program
we'll get back to you in 24 to 48 hours
and now let's get back to the video and
once you're done tweaking all of this
again you can come here and you can
share this grab your link send it to the
person that you're building this
$110,000 website for and you might think
that we're done here but the next thing
I'm going to do is going to blow you
away as well so with reloom not only can
we create the site maps and then convert
those site Maps into wireframes but then
we can either push it to a designer and
keep designing inside of that wireframe
or we can actually push it to a website
builder like web flow and we're going to
be able to actually build the whole
thing out as a website so I'm quickly
going to show you how you might do it if
you want to continue to design but then
I'm going to show you how to push this
inside the website builder if you go to
the top right here and once you finished
this all up we can export here you're
going to have the choice between pushing
it to figma which is a very famous
design tool or you can export to webflow
which is probably the most beautiful and
Powerful website builder today but there
are a couple steps that you have to do
to make this a reality so if I click on
export to figma for example it's going
to ask me to install the figma plugin
I'm going to come here going to install
the figma plugin once I install it it's
automatically going to open figma and
it's going to ask me to open reloom
library now the other thing that I'm
going to need is going to be the figma
kit so if you come to rom. again I can
grab the figma kit and it's actually
going to open up in figma as you can see
right here then here I'm going to click
open in and I'm going to select the Free
reloom Library that you see here then
I'll come here I'll click run I'm going
to go and create this new tab that I'm
going to call new website and then what
I'm going to do is go back into my
project over here I'm going to copy and
I'm essentially going to bring it now
inside here and I'm going to paste it
and right now what's happening is that
it is building this entire thing out
within the figma project that I've
created and boom just in about 30
seconds it's built this entire website
out for me in figma as you see it's been
using the elements from reloom here
they've all been recreated and now we
can start designing within this and as
you can see it's also built out a mobile
version and then once you generated this
you can actually change all of the
styles that you'd like you could start
designing on of this if this is the next
step that you're going to want to do
with your customer right and one thing I
would recommend here is that if you're
trying to change something I would
actually come to the style guide here
and adapt things inside the style guide
because this is going to actually change
them throughout the entire project so
for example if I wanted to change this
button I wanted to make it a different
color and maybe wanted to have some
rounded edges you just go inside the
style guide so all I would have to do
here would be to come to the UI elements
to find the specific button that I want
to change up here boom click on this and
then I can basically come down here and
change the color of that if I wanted to
so let's say that I wanted this instead
of being black I wanted it to be a
different custom color let's say I want
to be this blue excellent so let's say I
wanted to have roughly rounded edges I
could just do this input it and now this
button looks like this I could also
choose to change other buttons and so I
can do the same thing here and then what
happens is that when I go to my website
it's automatically going to go into all
the sections which have this specific
button and it's going to change the
color of them throughout the entire
process project so basically this is the
best way to be able to adapt elements
inside of your figma file uh for them to
reflect throughout the entire project
and so this part is really to design
everything within figma however you
could also choose to skip this and go
back to the project and actually export
it straight to web flow which is going
to allow you to build it I'm back here
inside my project I'm going to go export
webflow it's going to ask for a similar
thing and so here what I'm going to do
is copy to web flow now the next thing
it's going to prompt me to do is to
clone the style guide again so we can
have these elements inside of webflow
automatically excellent clone in webflow
create site and then here what I'm going
to do is I'm going to create a new page
add a page I can delete everything
that's inside this project and I can go
ahead and come back to my
project and then paste it here and as
you can see here it has imported the
entire project over here and what's
amazing about this is that it actually
already is created for responsive design
which means that it's also going to look
really nice in mobile this is a fully
built website I could come here to the
right and basically publish it uh I
could choose to connect it to a domain
publish it and as you can see everything
that we've actually built out is here
and we can just start replacing things
out so for example here I want to change
this image I can simply go and change
this to Let's upload an image from our
folder over here and boom just like that
we've replaced it and what I love about
this is that we can then very quickly
preview it as well so like if I were to
come here and press on this we're going
to be able to preview what it actually
looks like and um yeah it's absolutely
amazing what's possible so let's just
switch this out for example we can
choose an image replace the image come
here replace the
logo and just like that you can build a
$10,000 website with no code tools now
all the tools I've used today you can
find Below in the deion so if
you're trying to build a 10 $1,000
website for yourself or to sell to a
customer then you can use reloom and
then you can push it either into figma
and design or straight to web flow and
to build and if you're trying to make
your website incredibly impressive you
can easily do that by incorporating 3D
design or even animations inside your
website so the best tool for that would
be spline where you can either use an
existing template or you could create
one completely from scratch and that
often times can make a huge difference
so you could have a 3D iPhone mockup up
you could have a 3D character you could
have a entire interactive 3D experience
and yeah when you see these things on a
website they just look very impressive
and it can often times be the difference
between A5 and $10,000 website and if
you're going for an animation for
example you could have that animation
interact when you scroll down the
website you could have it interact when
you move the mouse around it so if
you're looking for the 3D look
definitely check out spline and as you
can see no code in AI does all the heavy
lifting for you but if you're looking to
build something it's a little bit more
complex then check out this video cuz
I've tried more than 200 no code tools
and I'm going to tell you which one is
going to be the best for your project
subscribe to the channel and I'll see
you guys in the next video Let's Go
댓글 영역
획득법
① NFT 발행
작성한 게시물을 NFT로 발행하면 일주일 동안 사용할 수 있습니다. (최초 1회)
② NFT 구매
다른 이용자의 NFT를 구매하면 한 달 동안 사용할 수 있습니다. (구매 시마다 갱신)
사용법
디시콘에서지갑연결시 바로 사용 가능합니다.