- Today, I'm building a website
in just 10 minutes from start to finish.
I'm gonna be showing you how to build a simple landing page
on the cheap in minutes. (chill rhythmic music)
So for this challenge,
we're gonna be using Carrd,
and it's my favorite website builder
to make simple one-pager websites.
I haven't found anything that's easier
and more intuitive for basic websites.
You can look through what they call their "starting points",
or basically, templates.
Now, some of them are gonna be restricted to the Pro plans,
but that's okay.
I actually would recommend upgrading to a Pro plan.
They start at $9 a year.
And for $19 a year,
you can get a plan that lets you connect a custom domain
and have up to 10 websites,
which, for 20 bucks a year, effectively,
that is a really reasonable price for what you're getting.
So I'm gonna identify which template I want,
and then I'm gonna get 10 minutes on the clock.
I've identified the template that I want to use,
and I've got 10 minutes on the clock,
and we're gonna be starting right now.
All right, I'm gonna select the template.
I like the challenge. We can do this, we can do this.
Okay, got a little tutorial,
but I'm already familiar with Carrd,
so I'm gonna say "OK, got it".
Now, the first thing that I'm going to do
is obviously swap out our copy.
We'll make one for me. Why not?
So I will replace the heading.
I'll just put a little description about myself.
One thing I like about Carrd
is they have this whole markdown thing going on down here.
So for bold, you can use two asterisks,
and then they have obviously italics,
all sorts of things, superscript, subscript.
I think it's kind of cool.
It takes some of the intimidation factor away
because you're not having to do HTML
or anything like that for styling.
Next thing I'm gonna do is take care of these buttons.
I don't want all of these buttons,
so I'll just click into this little section
and get rid of the ones I know I'm not gonna use.
And I think I'm gonna have to add some buttons as well.
Instagram, Twitter, those are good.
I like to get YouTube and TikTok.
And now would be a good time to point out
that I don't use Carrd regularly.
I've used Carrd in the past, I've experimented with it,
but I'm not super familiar with Carrd.
So I thought this would be a fun video
just to demonstrate how easy it is to use
'cause I'm certainly no Carrd expert.
I just think it's a really intuitive and simple platform
that allows you to make these pages
without too much effort or knowledge.
Okay, one thing I'd like to do
is change the color of these buttons.
And I think that's,
yeah, I think that's under Appearance here.
Here we go. Icon.
Making great progress.
I want to pick like a nice purple.
Probably something like that is good.
Okay, I'm gonna go ahead and drop in an image of myself
in this placeholder.
And lucky for me, I already have an image picked out.
I don't want to crop it.
I figured out, if you click this button a couple times,
it eventually gets rid of the crop.
I wish that it would default to not having a crop.
Another thing that you may want to do
when you upload an image
is work on how it's aligned.
I like to do Position: Top, which...
Hm, that didn't do what I wanted.
- [Matthew] Oh, center it.
Hang on. We're not in mobile.
Go up.
- Oh, Position: Top. - Position.
- There we go. There we go. - We're not in the mobile...
- Note on Carrd:
There is the desktop appearance,
and then there's a mobile appearance.
And you can click this little phone icon here
to switch to the mobile view,
and then you can determine how it's going to look on mobile.
But I think Top is gonna be a good fit
for desktop and mobile.
I'll switch back to the desktop view.
And honestly, the page is mostly done,
but one thing that I wanted to do is add a logo up here
that's centered, kind of as a header.
We've got four minutes and 20 seconds left on the clock,
so I think we can do this.
I'm going to add a new image,
and right now, it's massive.
We're gonna have to figure out
how to get it where we want it.
Let me upload my logo.
I do really like that Carrd can take SVG files.
That is cool.
If you are familiar with an SVG,
you know that that can be kind of rare sometimes.
So it's cool to see that Carrd does that.
Now, I'm gonna figure out how to get it on top.
There we go. The logo is on top.
I don't want it to be this huge.
Ah, there we go.
Height needs to be Auto, and then we can adjust our width,
and we should be able to center this.
Now, one thing you definitely want to do
when you add an image is check the mobile view,
see how it looks,
'cause right now, we're not doing the best on mobile.
Maybe I should just do Auto for mobile.
Ah, I think I want it to be a little bit smaller.
So I'd adjust the width and set our height to Auto.
Maybe something like that,
and then maybe I'll add just a little bit of margin
to create some padding.
Let me see how we're doing on desktop.
I think I need some margin on desktop as well.
Okay. - What's margin?
- Margin essentially adds dead space
below and above the element.
So when I drag this,
you can see the space increasing and decreasing.
I think that looks pretty good.
Let's see if we can publish this page and make it live.
Oh, I gotta log in with my account.
Okay, let's see here.
"Christian Taylor Business Card",
"My digital business card".
Yeah, for now, we'll just publish to a Carrd domain.
"craylorbusinesscard". How about that?
Publish.
This is it.
Two minutes to spare on the clock.
All right, View Site.
Look at that!
In eight minutes, we created this landing page.
Links out to all my social media, links out to my email.
I mean it's got everything you need
as a digital business card.
Eight minutes, and for 19 bucks a year,
I could connect a custom domain to this.
I honestly think it looks pretty clean,
and it was really easy to add this image.
And if you wanted to add other buttons or elements,
it would be really simple.
So that's a basic digital business card with Carrd.
Next, I'm gonna try making a one-pager website
for a software startup in Carrd.
And you saw how quickly
we were able to create that last site.
I don't think we're gonna be able to make this one
in 10 minutes,
but I am going to start a stopwatch
just to see how long it takes me
because I think we're still
gonna be able to do this pretty quickly.
I've already identified the template I want to use,
I picked out some images,
so it shouldn't take too long to customize,
but I'm gonna show you how Carrd works
and give you a bit of a feel for the interface.
So I'm gonna go ahead and start the stopwatch now
and go and select my template.
Some of the templates are restricted for the Pro version,
which I have.
We'll talk more about the Pro version
as we're building the website.
Now, the first thing I want to do
is add an image to this placeholder.
And whenever you're in Carrd,
you're gonna be able to hover over elements to see them,
and when you click something, the sidebar comes up.
And the sidebar is where you upload your image
or change the appearance, customize, anything like that.
You can always close this sidebar
if you need to get back to the main view of the website.
So I'm gonna upload my image right here.
And then I'll just start by changing out these headings.
So this is gonna say "Expert Navigation".
Add a little paragraph here.
And I'm gonna switch this button to say "Learn More"
on the label.
One thing that's cool about this template
is it's linked to go to the start section,
which is right here.
So when you click this button,
it's actually gonna scroll you down to the next section.
And speaking of the next section,
I might as well change this heading out.
I gotta say, Carrd really reminds me of Elementor.
If you've ever used WordPress,
it's a similar sort of UI
with the sidebar and the drag-and-drop experience,
but I think Carrd is easier to use.
I'm really pleased with how simple it is.
And honestly, I don't use Carrd regularly.
So don't take this to mean that I'm like some expert
and know exactly what I'm doing here.
I just tinker, you know?
I'm playing around with the UI,
figuring out how to make different changes.
And let me tell you, it's much easier than WordPress.
There's no HTML code involved or anything like that.
So we're seven minutes in,
and I've finished the hero section
and the Location At-A-Glance section.
And next, I wanna delete this section underneath
that came with the demo
'cause I know I'm not going to use it.
And one thing I noticed with Carrd templates
is there's no easy way to delete an entire section,
but you can delete these containers.
So as you're hovering over,
you're gonna see sort of the page
and then you might see containers,
and then within that, you're gonna see each element.
So you could delete each element one by one,
but to make life easier,
look for a container, click the container, delete that.
And then, this is important,
when it says "Preserve contents?", say No,
because if you click Yes, it'll delete the container,
but you'll still have to delete
all those elements one by one.
So delete, no, I don't want to preserve contents,
and that deletes that little section right there.
So I'm gonna do that for this section as well.
This container, delete that.
I don't want to preserve the contents.
And then I also need to delete this divider
'cause now we have a second one.
And effectively, we've removed that section.
So we have Location At-A-Glance,
and next we have what is going to be our Pricing section.
I'd say the biggest benefit to Carrd is its simplicity,
but the greatest drawback to Carrd is also its simplicity.
Like, for this little list,
you just create new items by pressing enter.
So I can say, when I'm creating my pricing table,
what the feature is,
and then I just press enter,
and that's gonna create another bullet point.
It's nice, but it's also very basic.
And sometimes, it feels limiting,
but I think sometimes I'd rather have simple,
straightforward, easy to use,
rather than a complicated system,
like WordPress or other website builders can inevitably be.
So we're exactly at 10 minutes,
and we've created our hero section,
our Location At-A-Glance section.
We've customized the icons, we did the pricing table.
The only thing left to do
is work on the email list opt-in form.
And that's another thing
that I like about the Pro plan in Carrd
is they let you create interactive contact forms
and email list opt-in forms.
This was already here with the template, and if I click it,
you can see that it's set to be an email list signup.
And you can pick from all these different providers
to automatically add the emails to the email list.
I'm a Mailchimp user,
so all I would have to do is log into the Mailchimp panel,
get my API key, get my audience ID, paste it in here.
I'm not gonna do that in this video,
but it's really straightforward, very simple.
And I like that Carrd allows advanced features like that
on their websites in the Pro plan.
And speaking of the Pro plan,
it's only $19 a year to be able to connect a custom domain
and make up to 10 websites.
So I could literally do this 10 times
on 10 different domains
for basically 20 bucks a year.
And I don't have to pay for web hosting.
Carrd as a hosted platform.
You know, platforms like Wix and Squarespace
are around 16 bucks a month per website.
$16 a month, not a year. This is $20 a year.
That's another reason why I'm a big fan.
An important note when you're working with Carrd
is that they actually don't allow you
to create multiple pages.
It is truly a one-pager system.
And sometimes how they get around that
or make it feel like there's multiple pages
is by creating these hidden sections
that appear when certain actions are taken.
So this #done section,
you may be wondering what that is.
It seems kind of weird being under the footer,
but that's actually because it's a hidden section
that's gonna show up when the Sign Up button is clicked.
So when you click that,
we see it says "Redirect to a URL", #done.
So they'll click Sign Up, then it'll say, "Thank you!"
I'm just gonna switch out the demo text here
for something else.
And I think our website is looking pretty good,
a nice one-pager that we've got.
I'm going to go ahead and publish it.
And I'm going to stop the stopwatch.
13 minutes and 30 seconds,
just a couple minutes longer
than that last template that we worked on.
I can view the site,
and you'll see, if we click Learn More,
it automatically scrolls down,
and we have a pretty decent-looking, basic one-pager
that we made in 13 and a half minutes
with a functioning email list opt-in.
Now, technically, I would have to put in my API key
for MailChimp.
If I click Sign Up now,
it's gonna give an error,
saying the form hasn't been configured yet.
But once I go through that basic step,
the email list opt-in would be functioning,
and everything is pretty much good to go on this website.
So as you can see, Carrd is super straightforward,
and I made this video because I wanted to show you
that if you're considering building a website
for your business or your brand,
it does not have to be intimidating.
If Wix or Squarespace is a bit too expensive for you,
or if WordPress is too complicated,
give something like Carrd a try.
You don't have to be intimidated
and feel like you can't build a website
because you're not tech savvy.
I'm honestly really impressed with this platform.
This is not a sponsored video.
I just think it's cool,
and I wanted to share it with you guys.
Another cool use case for Carrd
is to create one of these link in bio pages
for your social media.
But there are other apps that I prefer to use
for link in bios.
So if you're wondering which apps I recommend
for that use case,
be sure to check out this video here.